'use client';

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

import { Button } from '@/components/ui/button';
import { DocumentList } from '@/components/documents/document-list';
import { EoiGenerateDialog } from '@/components/documents/eoi-generate-dialog';
import { apiFetch } from '@/lib/api/client';

interface InterestDocumentsTabProps {
  interestId: string;
}

interface InterestData {
  id: string;
  yachtId?: string | null;
  berthId?: string | null;
  clientName?: string | null;
}

export function InterestDocumentsTab({ interestId }: InterestDocumentsTabProps) {
  const [eoiDialogOpen, setEoiDialogOpen] = useState(false);

  const { data: interestRes } = useQuery({
    queryKey: ['interests', interestId],
    queryFn: () => apiFetch<{ data: InterestData }>(`/api/v1/interests/${interestId}`),
  });

  const interest = interestRes?.data;

  const prerequisites = {
    hasName: Boolean(interest?.clientName),
    hasYacht: Boolean(interest?.yachtId),
    hasBerth: Boolean(interest?.berthId),
  };

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h3 className="text-sm font-medium text-muted-foreground">Documents</h3>
        <Button size="sm" onClick={() => setEoiDialogOpen(true)}>
          Generate EOI
        </Button>
      </div>

      <DocumentList interestId={interestId} />

      <EoiGenerateDialog
        interestId={interestId}
        open={eoiDialogOpen}
        onOpenChange={setEoiDialogOpen}
        prerequisites={prerequisites}
      />
    </div>
  );
}