pn-new-crm/src/components/berths/berth-deal-documents-tab.tsx

'use client';

import { useState } from 'react';
import Link from 'next/link';
import { useParams } from 'next/navigation';
import { useQuery } from '@tanstack/react-query';
import { FileText, ExternalLink, Eye } from 'lucide-react';

import { apiFetch } from '@/lib/api/client';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { FilePreviewDialog } from '@/components/files/file-preview-dialog';

interface BerthDealDoc {
  id: string;
  title: string;
  documentType: string;
  status: string;
  createdAt: string;
  interestId: string;
  fileId: string | null;
  fileName: string | null;
  mimeType: string | null;
}

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

export function BerthDealDocumentsTab({ berthId }: { berthId: string }) {
  const params = useParams<{ portSlug: string }>();
  const portSlug = params?.portSlug ?? '';
  const [previewDoc, setPreviewDoc] = useState<BerthDealDoc | null>(null);

  const { data: docs = [], isLoading } = useQuery<BerthDealDoc[]>({
    queryKey: ['berth-interest-documents', berthId],
    queryFn: () =>
      apiFetch<{ data: BerthDealDoc[] }>(`/api/v1/berths/${berthId}/interest-documents`).then(
        (r) => r.data,
      ),
  });

  return (
    <div className="space-y-4">
      <p className="text-sm text-muted-foreground">
        EOIs, contracts, and other deal documents attached to interests currently linked to this
        berth. Read-only - to send, sign, or edit, open the document on the linked interest&apos;s
        page.
      </p>
      <Card>
        <CardHeader className="pb-3">
          <CardTitle className="text-sm font-medium">Linked deal documents</CardTitle>
        </CardHeader>
        <CardContent className="pt-0">
          {isLoading ? (
            <p className="text-sm text-muted-foreground">Loading…</p>
          ) : docs.length === 0 ? (
            <p className="text-sm text-muted-foreground">
              No deal documents yet. Documents created on a linked interest will appear here.
            </p>
          ) : (
            <ul className="divide-y">
              {docs.map((doc) => {
                const canPreview = Boolean(doc.fileId);
                return (
                  <li
                    key={doc.id}
                    className="flex flex-wrap items-center justify-between gap-2 py-2.5 text-sm"
                  >
                    {/* Title area is itself the preview trigger when a
                        backing file exists. Falls back to a non-clickable
                        row for drafts whose PDF hasn't landed yet. */}
                    {canPreview ? (
                      <button
                        type="button"
                        onClick={() => setPreviewDoc(doc)}
                        className="flex min-w-0 flex-1 items-center gap-2 rounded -mx-1 px-1 py-0.5 text-left hover:bg-muted/60 focus-visible:bg-muted/60 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring"
                        title="Preview document"
                      >
                        <FileText className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
                        <span className="truncate font-medium">{doc.title}</span>
                        <span className="text-xs text-muted-foreground">{doc.documentType}</span>
                        <Eye
                          className="ml-1 h-3 w-3 shrink-0 opacity-40 transition-opacity group-hover:opacity-80"
                          aria-hidden
                        />
                      </button>
                    ) : (
                      <div className="flex min-w-0 flex-1 items-center gap-2">
                        <FileText className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
                        <span className="truncate font-medium">{doc.title}</span>
                        <span className="text-xs text-muted-foreground">{doc.documentType}</span>
                        <span
                          className="text-xs italic text-muted-foreground"
                          title="No PDF attached yet — open on the interest to generate or upload"
                        >
                          no file yet
                        </span>
                      </div>
                    )}
                    <div className="flex items-center gap-2">
                      <Badge variant={STATUS_TONE[doc.status] ?? 'outline'}>{doc.status}</Badge>
                      <Link
                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
                        href={`/${portSlug}/interests/${doc.interestId}` as any}
                        className="inline-flex items-center gap-1 text-xs text-primary hover:underline"
                      >
                        Open <ExternalLink className="h-3 w-3" aria-hidden />
                      </Link>
                    </div>
                  </li>
                );
              })}
            </ul>
          )}
        </CardContent>
      </Card>

      <FilePreviewDialog
        open={!!previewDoc?.fileId}
        onOpenChange={(open) => !open && setPreviewDoc(null)}
        fileId={previewDoc?.fileId ?? undefined}
        fileName={previewDoc?.fileName ?? previewDoc?.title ?? undefined}
        mimeType={previewDoc?.mimeType ?? undefined}
      />
    </div>
  );
}