pn-new-crm/src/components/clients/client-tabs.tsx

'use client';

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

import type { DetailTab } from '@/components/shared/detail-layout';
import { InlineEditableField } from '@/components/shared/inline-editable-field';
import { InlineTagEditor } from '@/components/shared/inline-tag-editor';
import { NotesList } from '@/components/shared/notes-list';
import { ClientYachtsTab } from '@/components/clients/client-yachts-tab';
import { ClientCompaniesTab } from '@/components/clients/client-companies-tab';
import { ClientReservationsTab } from '@/components/clients/client-reservations-tab';
import { ContactsEditor } from '@/components/clients/contacts-editor';
import { apiFetch } from '@/lib/api/client';

type ClientPatchField =
  | 'fullName'
  | 'nationality'
  | 'preferredContactMethod'
  | 'preferredLanguage'
  | 'timezone'
  | 'source'
  | 'sourceDetails';

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

const CONTACT_METHOD_OPTIONS = [
  { value: 'email', label: 'Email' },
  { value: 'phone', label: 'Phone' },
  { value: 'whatsapp', label: 'WhatsApp' },
];

function useClientPatch(clientId: string) {
  const qc = useQueryClient();
  return useMutation({
    mutationFn: async (patch: Partial<Record<ClientPatchField, string | null>>) => {
      return apiFetch(`/api/v1/clients/${clientId}`, {
        method: 'PATCH',
        body: patch,
      });
    },
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ['clients', clientId] });
    },
  });
}

function EditableRow({ 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>
  );
}

interface ClientTabsOptions {
  clientId: string;
  currentUserId?: string;
  client: {
    fullName: string;
    nationality?: string | null;
    preferredContactMethod?: string | null;
    preferredLanguage?: string | null;
    timezone?: string | null;
    source?: string | null;
    sourceDetails?: string | null;
    contacts?: Array<{
      id: string;
      channel: string;
      value: string;
      label?: string | null;
      isPrimary: boolean;
    }>;
    yachts: Array<{
      id: string;
      name: string;
      hullNumber: string | null;
      registration: string | null;
      lengthFt: string | null;
      widthFt: string | null;
      status: string;
    }>;
    companies: Array<{
      membershipId: string;
      role: string;
      isPrimary: boolean;
      startDate: string | Date;
      company: {
        id: string;
        name: string;
        legalName: string | null;
        status: string;
      };
    }>;
    activeReservations: Array<{
      id: string;
      berthId: string;
      yachtId: string;
      startDate: string | Date;
      tenureType: string;
      status: string;
    }>;
    tags?: Array<{ id: string; name: string; color: string }>;
  };
}

function OverviewTab({
  clientId,
  client,
}: {
  clientId: string;
  client: ClientTabsOptions['client'];
}) {
  const mutation = useClientPatch(clientId);
  const save = (field: ClientPatchField) => async (next: string | null) => {
    await mutation.mutateAsync({ [field]: next });
  };

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
      {/* Personal Info */}
      <div className="space-y-1">
        <h3 className="text-sm font-medium mb-2">Personal Information</h3>
        <dl>
          <EditableRow label="Full Name">
            <InlineEditableField value={client.fullName} onSave={save('fullName')} />
          </EditableRow>
          <EditableRow label="Nationality">
            <InlineEditableField value={client.nationality} onSave={save('nationality')} />
          </EditableRow>
          <EditableRow label="Preferred Language">
            <InlineEditableField
              value={client.preferredLanguage}
              onSave={save('preferredLanguage')}
            />
          </EditableRow>
          <EditableRow label="Timezone">
            <InlineEditableField value={client.timezone} onSave={save('timezone')} />
          </EditableRow>
          <EditableRow label="Preferred Contact">
            <InlineEditableField
              variant="select"
              options={CONTACT_METHOD_OPTIONS}
              value={client.preferredContactMethod}
              onSave={save('preferredContactMethod')}
            />
          </EditableRow>
        </dl>
      </div>

      {/* Contacts */}
      <div className="space-y-1">
        <h3 className="text-sm font-medium mb-2">Contact Details</h3>
        <ContactsEditor clientId={clientId} contacts={client.contacts ?? []} />
      </div>

      {/* Source */}
      <div className="space-y-1">
        <h3 className="text-sm font-medium mb-2">Source</h3>
        <dl>
          <EditableRow label="Source">
            <InlineEditableField
              variant="select"
              options={SOURCE_OPTIONS}
              value={client.source}
              onSave={save('source')}
            />
          </EditableRow>
          <EditableRow label="Source Details">
            <InlineEditableField value={client.sourceDetails} onSave={save('sourceDetails')} />
          </EditableRow>
        </dl>
      </div>

      {/* Tags */}
      <div className="space-y-1">
        <h3 className="text-sm font-medium mb-2">Tags</h3>
        <InlineTagEditor
          endpoint={`/api/v1/clients/${clientId}/tags`}
          currentTags={client.tags ?? []}
          invalidateKey={['clients', clientId]}
        />
      </div>
    </div>
  );
}

export function getClientTabs({ clientId, currentUserId, client }: ClientTabsOptions): DetailTab[] {
  return [
    {
      id: 'overview',
      label: 'Overview',
      content: <OverviewTab clientId={clientId} client={client} />,
    },
    {
      id: 'yachts',
      label: 'Yachts',
      badge: client.yachts.length,
      content: <ClientYachtsTab clientId={clientId} yachts={client.yachts} />,
    },
    {
      id: 'companies',
      label: 'Companies',
      badge: client.companies.length,
      content: <ClientCompaniesTab clientId={clientId} companies={client.companies} />,
    },
    {
      id: 'reservations',
      label: 'Reservations',
      badge: client.activeReservations.length,
      content: (
        <ClientReservationsTab clientId={clientId} activeReservations={client.activeReservations} />
      ),
    },
    {
      id: 'interests',
      label: 'Interests',
      content: (
        <div className="text-center py-12 text-muted-foreground">
          <p>Interests will appear here once created.</p>
        </div>
      ),
    },
    {
      id: 'notes',
      label: 'Notes',
      content: <NotesList entityType="clients" entityId={clientId} currentUserId={currentUserId} />,
    },
    {
      id: 'files',
      label: 'Files',
      content: (
        <div className="text-center py-12 text-muted-foreground">
          <p>File attachments coming soon.</p>
        </div>
      ),
    },
    {
      id: 'activity',
      label: 'Activity',
      content: (
        <div className="text-center py-12 text-muted-foreground">
          <p>Activity log coming soon.</p>
        </div>
      ),
    },
  ];
}