'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;
  berthId?: string | null;
  client?: {
    fullName?: string | null;
    yachtLengthFt?: string | null;
    yachtLengthM?: string | null;
    contacts?: Array<{ channel: string; value: string }>;
  };
}

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?.client?.fullName),
    hasEmail: Boolean(
      interest?.client?.contacts?.some((c) => c.channel === 'email' && c.value),
    ),
    hasYachtDims: Boolean(
      interest?.client?.yachtLengthFt || interest?.client?.yachtLengthM,
    ),
    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>
  );
}