'use client';

import Link from 'next/link';
import { useParams } from 'next/navigation';
import { format } from 'date-fns';

import {
  Table,
  TableHeader,
  TableBody,
  TableCell,
  TableHead,
  TableRow,
} from '@/components/ui/table';
import { Badge } from '@/components/ui/badge';
import { EmptyState } from '@/components/shared/empty-state';

interface ClientCompaniesTabProps {
  clientId: string;
  companies: Array<{
    membershipId: string;
    role: string;
    isPrimary: boolean;
    startDate: string | Date;
    company: {
      id: string;
      name: string;
      legalName: string | null;
      status: string;
    };
  }>;
}

function formatSince(startDate: string | Date): string {
  const d = typeof startDate === 'string' ? new Date(startDate) : startDate;
  if (Number.isNaN(d.getTime())) return '—';
  return format(d, 'MMM d, yyyy');
}

export function ClientCompaniesTab({ clientId: _clientId, companies }: ClientCompaniesTabProps) {
  const routeParams = useParams<{ portSlug: string }>();
  const portSlug = routeParams?.portSlug ?? '';

  if (companies.length === 0) {
    return (
      <EmptyState
        title="No company memberships"
        description="This client is not affiliated with any companies yet. Add a membership from a company's detail page."
      />
    );
  }

  return (
    <div className="space-y-4">
      <h3 className="text-sm font-medium">Company affiliations</h3>
      <div className="rounded-md border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Company</TableHead>
              <TableHead>Role</TableHead>
              <TableHead>Primary</TableHead>
              <TableHead>Since</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {companies.map((m) => (
              <TableRow key={m.membershipId}>
                <TableCell>
                  <Link
                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                    href={`/${portSlug}/companies/${m.company.id}` as any}
                    className="text-primary hover:underline"
                  >
                    {m.company.name}
                  </Link>
                  {m.company.legalName && (
                    <span className="ml-2 text-xs text-muted-foreground">
                      ({m.company.legalName})
                    </span>
                  )}
                </TableCell>
                <TableCell className="capitalize">{m.role.replace('_', ' ')}</TableCell>
                <TableCell>
                  {m.isPrimary ? (
                    <Badge variant="secondary" className="text-xs">
                      Primary
                    </Badge>
                  ) : (
                    <span className="text-muted-foreground">—</span>
                  )}
                </TableCell>
                <TableCell className="text-muted-foreground text-sm">
                  {formatSince(m.startDate)}
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}