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

'use client';

import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';

import type { DetailTab } from '@/components/shared/detail-layout';
import { InlineEditableField } from '@/components/shared/inline-editable-field';
import { NotesList } from '@/components/shared/notes-list';
import { EntityActivityFeed } from '@/components/shared/entity-activity-feed';
import { apiFetch } from '@/lib/api/client';

interface ResidentialInterest {
  id: string;
  residentialClientId: string;
  pipelineStage: string;
  source: string | null;
  notes: string | null;
  preferences: string | null;
  assignedTo: string | null;
}

interface Args {
  interestId: string;
  interest: ResidentialInterest;
  currentUserId?: string;
  stageOptions: Array<{ value: string; label: string }>;
}

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

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-44 shrink-0 text-sm text-muted-foreground">{label}</dt>
      <dd className="flex-1 min-w-0">{children}</dd>
    </div>
  );
}

export function getResidentialInterestTabs({
  interestId,
  interest,
  currentUserId,
  stageOptions,
}: Args): DetailTab[] {
  return [
    {
      id: 'overview',
      label: 'Overview',
      content: (
        <OverviewTab interestId={interestId} interest={interest} stageOptions={stageOptions} />
      ),
    },
    {
      id: 'notes',
      label: 'Notes',
      content: (
        <NotesList
          entityType="residential_interests"
          entityId={interestId}
          currentUserId={currentUserId}
        />
      ),
    },
    {
      id: 'activity',
      label: 'Activity',
      content: (
        <EntityActivityFeed
          endpoint={`/api/v1/residential/interests/${interestId}/activity`}
          emptyText="No activity recorded for this residential interest yet."
        />
      ),
    },
  ];
}

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

function OverviewTab({
  interestId,
  interest,
  stageOptions,
}: {
  interestId: string;
  interest: ResidentialInterest;
  stageOptions: Array<{ value: string; label: string }>;
}) {
  const update = useInterestPatch(interestId);
  const save = (field: string) => async (next: string | null) => {
    await update.mutateAsync({ [field]: next });
  };

  // Pull users with residential access for the Assigned-to dropdown.
  const { data: assignableUsers } = useQuery<{
    data: Array<{ id: string; name: string; email: string }>;
  }>({
    queryKey: ['residential-assignable-users'],
    queryFn: () => apiFetch('/api/v1/residential/assignable-users'),
  });
  const assigneeOptions = (assignableUsers?.data ?? []).map((u) => ({
    value: u.id,
    label: u.name || u.email,
  }));

  return (
    <div className="rounded-lg border bg-card p-6 space-y-6">
      <div className="grid grid-cols-1 lg: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={stageOptions}
              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
              variant="select"
              options={assigneeOptions}
              value={interest.assignedTo}
              onSave={save('assignedTo')}
              placeholder="Unassigned"
            />
          </Row>
        </div>

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