pn-new-crm/src/components/clients/client-yachts-tab.tsx

'use client';

import { useState } from 'react';
import Link from 'next/link';
import { useParams } from 'next/navigation';
import { Plus } from 'lucide-react';

import { Button } from '@/components/ui/button';
import {
  Table,
  TableHeader,
  TableBody,
  TableCell,
  TableHead,
  TableRow,
} from '@/components/ui/table';
import { EmptyState } from '@/components/shared/empty-state';
import { PermissionGate } from '@/components/shared/permission-gate';
import { YachtForm } from '@/components/yachts/yacht-form';

interface ClientYachtsTabProps {
  clientId: string;
  yachts: Array<{
    id: string;
    name: string;
    hullNumber: string | null;
    registration: string | null;
    lengthFt: string | null;
    widthFt: string | null;
    status: string;
  }>;
}

export function ClientYachtsTab({ clientId: _clientId, yachts }: ClientYachtsTabProps) {
  const routeParams = useParams<{ portSlug: string }>();
  const portSlug = routeParams?.portSlug ?? '';
  const [createOpen, setCreateOpen] = useState(false);

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h3 className="text-sm font-medium">Client-owned yachts</h3>
        <PermissionGate resource="yachts" action="create">
          <Button size="sm" onClick={() => setCreateOpen(true)}>
            <Plus className="mr-1.5 h-4 w-4" />
            Add yacht
          </Button>
        </PermissionGate>
      </div>

      {yachts.length === 0 ? (
        <EmptyState title="No yachts" description="No yachts owned by this client yet." />
      ) : (
        <div className="rounded-md border">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Name</TableHead>
                <TableHead>Dimensions</TableHead>
                <TableHead>Hull Number</TableHead>
                <TableHead>Status</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {yachts.map((y) => (
                <TableRow key={y.id}>
                  <TableCell>
                    <Link
                      // eslint-disable-next-line @typescript-eslint/no-explicit-any
                      href={`/${portSlug}/yachts/${y.id}` as any}
                      className="text-primary hover:underline"
                    >
                      {y.name}
                    </Link>
                  </TableCell>
                  <TableCell>
                    {y.lengthFt && y.widthFt ? `${y.lengthFt} × ${y.widthFt} ft` : '-'}
                  </TableCell>
                  <TableCell>{y.hullNumber ?? '-'}</TableCell>
                  <TableCell className="capitalize">{y.status.replace('_', ' ')}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      )}

      {/*
        TODO: YachtForm (Task 5.2) does not yet accept a preset owner prop.
        When opened here, the user must manually pick this client in the owner
        picker. Wire an `initialOwner` prop into YachtForm in a follow-up so
        we can pre-select `{ type: 'client', id: clientId }`.
      */}
      {createOpen && <YachtForm open={createOpen} onOpenChange={setCreateOpen} />}
    </div>
  );
}