'use client';

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

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { apiFetch } from '@/lib/api/client';

interface EoiPrerequisites {
  hasName: boolean;
  hasEmail: boolean;
  hasYachtDims: boolean;
  hasBerth: boolean;
}

interface EoiGenerateDialogProps {
  interestId: string;
  open: boolean;
  onOpenChange: (open: boolean) => void;
  prerequisites: EoiPrerequisites;
}

const PREREQUISITE_LABELS: { key: keyof EoiPrerequisites; label: string }[] = [
  { key: 'hasName', label: 'Client has full name' },
  { key: 'hasEmail', label: 'Client has email address' },
  { key: 'hasYachtDims', label: 'Yacht dimensions set' },
  { key: 'hasBerth', label: 'Berth linked to interest' },
];

export function EoiGenerateDialog({
  interestId,
  open,
  onOpenChange,
  prerequisites,
}: EoiGenerateDialogProps) {
  const queryClient = useQueryClient();
  const [isGenerating, setIsGenerating] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const allMet = Object.values(prerequisites).every(Boolean);

  const handleGenerate = async () => {
    if (!allMet) return;

    setIsGenerating(true);
    setError(null);

    try {
      await apiFetch('/api/v1/documents/generate-eoi', {
        method: 'POST',
        body: { interestId },
      });

      queryClient.invalidateQueries({ queryKey: ['documents', { interestId }] });
      onOpenChange(false);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to generate EOI');
    } finally {
      setIsGenerating(false);
    }
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Generate Expression of Interest</DialogTitle>
          <DialogDescription>
            The following prerequisites must be met before generating the EOI document.
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-2 py-2">
          {PREREQUISITE_LABELS.map(({ key, label }) => (
            <div key={key} className="flex items-center gap-3">
              <span
                className={`flex h-5 w-5 items-center justify-center rounded-full text-xs font-bold ${
                  prerequisites[key]
                    ? 'bg-green-100 text-green-700'
                    : 'bg-red-100 text-red-700'
                }`}
              >
                {prerequisites[key] ? '✓' : '✗'}
              </span>
              <span className={prerequisites[key] ? 'text-foreground' : 'text-muted-foreground'}>
                {label}
              </span>
            </div>
          ))}
        </div>

        {error && (
          <p className="text-sm text-destructive">{error}</p>
        )}

        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            Cancel
          </Button>
          <Button onClick={handleGenerate} disabled={!allMet || isGenerating}>
            {isGenerating ? 'Generating...' : 'Generate EOI'}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}