pn-new-crm/src/components/residential/residential-interest-detail.tsx

'use client';

import Link from 'next/link';
import { useParams } from 'next/navigation';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { ArrowLeft } from 'lucide-react';

import { InlineEditableField } from '@/components/shared/inline-editable-field';
import { useRealtimeInvalidation } from '@/hooks/use-realtime-invalidation';
import { apiFetch } from '@/lib/api/client';
import { PIPELINE_STAGES } from '@/lib/validators/residential';

interface ResidentialInterestDetail {
  id: string;
  residentialClientId: string;
  pipelineStage: string;
  source: string | null;
  notes: string | null;
  preferences: string | null;
  assignedTo: string | null;
  client: { id: string; fullName: string } | null;
}

const STAGE_LABELS: Record<string, string> = {
  new: 'New',
  contacted: 'Contacted',
  viewing_scheduled: 'Viewing scheduled',
  offer_made: 'Offer made',
  offer_accepted: 'Offer accepted',
  closed_won: 'Closed — won',
  closed_lost: 'Closed — lost',
};

const STAGE_OPTIONS = PIPELINE_STAGES.map((s) => ({
  value: s,
  label: STAGE_LABELS[s] ?? s,
}));

const SOURCE_OPTIONS = [
  { value: 'website', label: 'Website' },
  { value: 'manual', label: 'Manual' },
  { value: 'referral', label: 'Referral' },
  { value: 'broker', label: 'Broker' },
];

export function ResidentialInterestDetail({ interestId }: { interestId: string }) {
  const params = useParams<{ portSlug: string }>();
  const portSlug = params?.portSlug ?? '';
  const qc = useQueryClient();

  const { data, isLoading } = useQuery<{ data: ResidentialInterestDetail }>({
    queryKey: ['residential-interest', interestId],
    queryFn: () => apiFetch(`/api/v1/residential/interests/${interestId}`),
  });

  useRealtimeInvalidation({
    'residential_interest:updated': [['residential-interest', interestId]],
  });

  const update = useMutation({
    mutationFn: (patch: Record<string, unknown>) =>
      apiFetch(`/api/v1/residential/interests/${interestId}`, {
        method: 'PATCH',
        body: patch,
      }),
    onSuccess: () => qc.invalidateQueries({ queryKey: ['residential-interest', interestId] }),
  });

  const save = (field: string) => async (next: string | null) => {
    await update.mutateAsync({ [field]: next });
  };

  if (isLoading || !data) {
    return <div className="text-sm text-muted-foreground">Loading…</div>;
  }
  const interest = data.data;

  return (
    <div className="space-y-6">
      <div>
        <Link
          /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
          href={`/${portSlug}/residential/interests` as any}
          className="text-sm text-muted-foreground hover:text-foreground inline-flex items-center gap-1"
        >
          <ArrowLeft className="h-3 w-3" /> All residential interests
        </Link>
      </div>

      <div className="rounded-lg border bg-card p-6 space-y-6">
        <div>
          <p className="text-xs uppercase text-muted-foreground tracking-wider mb-1">
            Residential interest
          </p>
          {interest.client && (
            <h1 className="text-2xl font-semibold">
              <Link
                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                href={`/${portSlug}/residential/clients/${interest.client.id}` as any}
                className="hover:underline"
              >
                {interest.client.fullName}
              </Link>
            </h1>
          )}
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div className="space-y-1">
            <h3 className="text-sm font-medium mb-2">Pipeline</h3>
            <Row label="Stage">
              <InlineEditableField
                variant="select"
                options={STAGE_OPTIONS}
                value={interest.pipelineStage}
                onSave={save('pipelineStage')}
              />
            </Row>
            <Row label="Source">
              <InlineEditableField
                variant="select"
                options={SOURCE_OPTIONS}
                value={interest.source}
                onSave={save('source')}
              />
            </Row>
            <Row label="Assigned to">
              <InlineEditableField
                value={interest.assignedTo}
                onSave={save('assignedTo')}
                placeholder="user id"
              />
            </Row>
          </div>

          <div className="space-y-1">
            <h3 className="text-sm font-medium mb-2">Details</h3>
            <Row label="Preferences">
              <InlineEditableField value={interest.preferences} onSave={save('preferences')} />
            </Row>
            <Row label="Notes">
              <InlineEditableField value={interest.notes} onSave={save('notes')} />
            </Row>
          </div>
        </div>
      </div>
    </div>
  );
}

function Row({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div className="flex gap-2 py-1.5 border-b last:border-0 items-center">
      <dt className="w-40 shrink-0 text-sm text-muted-foreground">{label}</dt>
      <dd className="flex-1 min-w-0">{children}</dd>
    </div>
  );
}