pn-new-crm/src/components/yachts/yacht-tabs.tsx

'use client';

import type { DetailTab } from '@/components/shared/detail-layout';
import { EmptyState } from '@/components/shared/empty-state';
import { YachtOwnershipHistory } from '@/components/yachts/yacht-ownership-history';

interface YachtTabsYacht {
  id: string;
  name: string;
  hullNumber: string | null;
  registration: string | null;
  flag: string | null;
  yearBuilt: number | null;
  builder: string | null;
  model: string | null;
  hullMaterial: string | null;
  lengthFt: string | null;
  widthFt: string | null;
  draftFt: string | null;
  lengthM: string | null;
  widthM: string | null;
  draftM: string | null;
  status: string;
  notes: string | null;
}

interface YachtTabsOptions {
  yachtId: string;
  currentUserId?: string;
  yacht: YachtTabsYacht;
}

function InfoRow({ label, value }: { label: string; value?: string | number | null }) {
  if (value === null || value === undefined || value === '') return null;
  return (
    <div className="flex gap-2 py-1.5 border-b last:border-0">
      <dt className="w-40 shrink-0 text-sm text-muted-foreground">{label}</dt>
      <dd className="text-sm">{value}</dd>
    </div>
  );
}

const STATUS_LABELS: Record<string, string> = {
  active: 'Active',
  retired: 'Retired',
  sold_away: 'Sold away',
};

function OverviewTab({ yacht }: { yacht: YachtTabsYacht }) {
  const hasFtDimensions = yacht.lengthFt || yacht.widthFt || yacht.draftFt;
  const hasMDimensions = yacht.lengthM || yacht.widthM || yacht.draftM;

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
      {/* Identity */}
      <div className="space-y-1">
        <h3 className="text-sm font-medium mb-2">Identity</h3>
        <dl>
          <InfoRow label="Name" value={yacht.name} />
          <InfoRow label="Hull Number" value={yacht.hullNumber} />
          <InfoRow label="Registration" value={yacht.registration} />
          <InfoRow label="Flag" value={yacht.flag} />
          <InfoRow label="Year Built" value={yacht.yearBuilt} />
          <InfoRow label="Status" value={STATUS_LABELS[yacht.status] ?? yacht.status} />
        </dl>
      </div>

      {/* Build */}
      {(yacht.builder || yacht.model || yacht.hullMaterial) && (
        <div className="space-y-1">
          <h3 className="text-sm font-medium mb-2">Build</h3>
          <dl>
            <InfoRow label="Builder" value={yacht.builder} />
            <InfoRow label="Model" value={yacht.model} />
            <InfoRow label="Hull Material" value={yacht.hullMaterial} />
          </dl>
        </div>
      )}

      {/* Dimensions (ft) */}
      {hasFtDimensions && (
        <div className="space-y-1">
          <h3 className="text-sm font-medium mb-2">Dimensions (ft)</h3>
          <dl>
            <InfoRow label="Length" value={yacht.lengthFt ? `${yacht.lengthFt} ft` : null} />
            <InfoRow label="Width" value={yacht.widthFt ? `${yacht.widthFt} ft` : null} />
            <InfoRow label="Draft" value={yacht.draftFt ? `${yacht.draftFt} ft` : null} />
          </dl>
        </div>
      )}

      {/* Dimensions (m) */}
      {hasMDimensions && (
        <div className="space-y-1">
          <h3 className="text-sm font-medium mb-2">Dimensions (m)</h3>
          <dl>
            <InfoRow label="Length" value={yacht.lengthM ? `${yacht.lengthM} m` : null} />
            <InfoRow label="Width" value={yacht.widthM ? `${yacht.widthM} m` : null} />
            <InfoRow label="Draft" value={yacht.draftM ? `${yacht.draftM} m` : null} />
          </dl>
        </div>
      )}

      {/* Notes */}
      {yacht.notes && (
        <div className="space-y-1 md:col-span-2">
          <h3 className="text-sm font-medium mb-2">Notes</h3>
          <p className="text-sm whitespace-pre-wrap rounded-md border bg-muted/30 p-3">
            {yacht.notes}
          </p>
        </div>
      )}
    </div>
  );
}

export function getYachtTabs({
  yachtId,
  // currentUserId reserved for when NotesList supports entityType='yachts'.
  currentUserId: _currentUserId,
  yacht,
}: YachtTabsOptions): DetailTab[] {
  void _currentUserId;

  return [
    {
      id: 'overview',
      label: 'Overview',
      content: <OverviewTab yacht={yacht} />,
    },
    {
      id: 'ownership-history',
      label: 'Ownership History',
      content: <YachtOwnershipHistory yachtId={yachtId} />,
    },
    {
      id: 'interests',
      label: 'Interests',
      content: <EmptyState title="Interests" description="Coming soon" />,
    },
    {
      id: 'reservations',
      label: 'Reservations',
      content: <EmptyState title="Reservations" description="Coming soon" />,
    },
    {
      id: 'notes',
      label: 'Notes',
      // TODO: NotesList currently supports entityType 'clients' | 'interests'.
      // Extend NotesList (or swap to a yacht-notes endpoint) in a follow-up.
      content: (
        <EmptyState
          title="Notes"
          description="Yacht notes coming soon — the notes endpoint is pending wiring."
        />
      ),
    },
    {
      id: 'tags',
      label: 'Tags',
      // TODO: replace with an inline tag editor once one exists; yacht tags
      // can be edited via the Edit form in the meantime.
      content: (
        <EmptyState title="Tags" description="Manage tags from the Edit yacht form for now." />
      ),
    },
  ];
}