'use client';

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

import { apiFetch } from '@/lib/api/client';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';

interface BerthDealDoc {
  id: string;
  title: string;
  documentType: string;
  status: string;
  createdAt: string;
  interestId: string;
}

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 { 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) => (
                <li
                  key={doc.id}
                  className="flex flex-wrap items-center justify-between gap-2 py-2.5 text-sm"
                >
                  <div className="flex min-w-0 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>
                  </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>
    </div>
  );
}