pn-new-crm/src/components/documents/document-list.tsx

'use client';

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

import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { usePaginatedQuery } from '@/hooks/use-paginated-query';
import { apiFetch } from '@/lib/api/client';

interface DocumentRow {
  id: string;
  documentType: string;
  title: string;
  status: string;
  createdAt: string;
  signers?: Array<{ status: string }>;
}

interface DocumentListProps {
  interestId?: string;
  clientId?: string;
}

const STATUS_COLORS: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {
  draft: 'secondary',
  sent: 'default',
  partially_signed: 'default',
  completed: 'outline',
  expired: 'destructive',
  cancelled: 'destructive',
};

const TYPE_LABELS: Record<string, string> = {
  eoi: 'EOI',
  contract: 'Contract',
  nda: 'NDA',
  reservation_agreement: 'Reservation',
  other: 'Other',
};

export function DocumentList({ interestId, clientId }: DocumentListProps) {
  const queryClient = useQueryClient();

  const queryParams = new URLSearchParams();
  if (interestId) queryParams.set('interestId', interestId);
  if (clientId) queryParams.set('clientId', clientId);

  const { data, isLoading } = usePaginatedQuery<DocumentRow>({
    queryKey: ['documents', { interestId, clientId }],
    endpoint: `/api/v1/documents?${queryParams.toString()}`,
    filterDefinitions: [],
  });

  const handleDelete = async (doc: DocumentRow) => {
    if (!confirm(`Delete "${doc.title}"? This cannot be undone.`)) return;
    try {
      await apiFetch(`/api/v1/documents/${doc.id}`, { method: 'DELETE' });
      queryClient.invalidateQueries({ queryKey: ['documents', { interestId, clientId }] });
    } catch {
      // silent
    }
  };

  const handleSend = async (doc: DocumentRow) => {
    try {
      await apiFetch(`/api/v1/documents/${doc.id}/send`, { method: 'POST' });
      queryClient.invalidateQueries({ queryKey: ['documents', { interestId, clientId }] });
    } catch {
      // silent
    }
  };

  const getSignerProgress = (doc: DocumentRow) => {
    if (!doc.signers) return '—';
    const signed = doc.signers.filter((s) => s.status === 'signed').length;
    return `${signed}/${doc.signers.length} signed`;
  };

  if (isLoading) {
    return <div className="py-8 text-center text-sm text-muted-foreground">Loading documents...</div>;
  }

  if (!data || data.length === 0) {
    return <div className="py-8 text-center text-sm text-muted-foreground">No documents yet.</div>;
  }

  return (
    <div className="rounded-md border">
      <table className="w-full text-sm">
        <thead>
          <tr className="border-b bg-muted/50">
            <th className="px-4 py-3 text-left font-medium">Type</th>
            <th className="px-4 py-3 text-left font-medium">Title</th>
            <th className="px-4 py-3 text-left font-medium">Status</th>
            <th className="px-4 py-3 text-left font-medium">Signers</th>
            <th className="px-4 py-3 text-left font-medium">Created</th>
            <th className="px-4 py-3 text-right font-medium">Actions</th>
          </tr>
        </thead>
        <tbody>
          {data.map((doc) => (
            <tr key={doc.id} className="border-b last:border-0 hover:bg-muted/20">
              <td className="px-4 py-3">
                <Badge variant="outline">{TYPE_LABELS[doc.documentType] ?? doc.documentType}</Badge>
              </td>
              <td className="px-4 py-3 font-medium">{doc.title}</td>
              <td className="px-4 py-3">
                <Badge variant={STATUS_COLORS[doc.status] ?? 'default'}>{doc.status}</Badge>
              </td>
              <td className="px-4 py-3 text-muted-foreground">{getSignerProgress(doc)}</td>
              <td className="px-4 py-3 text-muted-foreground">
                {new Date(doc.createdAt).toLocaleDateString('en-GB')}
              </td>
              <td className="px-4 py-3 text-right">
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button variant="ghost" size="sm">
                      &hellip;
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end">
                    {doc.status === 'draft' && (
                      <DropdownMenuItem onClick={() => handleSend(doc)}>
                        Send for Signing
                      </DropdownMenuItem>
                    )}
                    <DropdownMenuItem
                      onClick={() => handleDelete(doc)}
                      className="text-destructive focus:text-destructive"
                    >
                      Delete
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}