'use client';

/**
 * Client-detail multi-step "Send documents" dialog (Phase 7 §5.7).
 *
 * The client header action opens this dialog. The rep picks one of the
 * client's interest-linked berths (to send a per-berth PDF) OR a brochure
 * (defaults to the port default when unspecified). The actual send flow
 * delegates to {@link SendDocumentDialog}; this wrapper is the picker.
 */
import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { FileText, Loader2, Mail } from 'lucide-react';

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

interface SendDocumentsDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  clientId: string;
  clientName: string;
  /** When the rep is launching from a specific interest, pin it. */
  interestId?: string;
}

interface BrochureOption {
  id: string;
  label: string;
  isDefault: boolean;
  archivedAt: string | null;
  versionCount: number;
}

interface BrochuresResponse {
  data: BrochureOption[];
}

export function SendDocumentsDialog({
  open,
  onOpenChange,
  clientId,
  clientName,
  interestId,
}: SendDocumentsDialogProps) {
  const [activeSend, setActiveSend] = useState<
    | { kind: 'brochure'; brochureId?: string }
    | { kind: 'berth_pdf'; berthId: string; mooring: string }
    | null
  >(null);

  // Lightweight brochures fetch — only fires once dialog is opened.
  const brochuresQuery = useQuery<BrochuresResponse>({
    queryKey: ['brochures', 'list'],
    queryFn: () => apiFetch('/api/v1/admin/brochures'),
    enabled: open,
  });

  const usableBrochures =
    brochuresQuery.data?.data.filter((b) => !b.archivedAt && b.versionCount > 0) ?? [];

  return (
    <>
      <Dialog open={open && activeSend === null} onOpenChange={onOpenChange}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Send documents to {clientName}</DialogTitle>
            <DialogDescription>
              Pick a brochure or open the berth detail page to send a per-berth spec sheet.
            </DialogDescription>
          </DialogHeader>

          <div className="space-y-3">
            <div>
              <h3 className="mb-2 flex items-center gap-2 text-sm font-semibold">
                <Mail className="h-4 w-4" /> Brochures
              </h3>
              {brochuresQuery.isLoading && (
                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                  <Loader2 className="h-4 w-4 animate-spin" /> Loading brochures…
                </div>
              )}
              {!brochuresQuery.isLoading && usableBrochures.length === 0 && (
                <p className="text-sm text-muted-foreground">
                  No brochures uploaded yet. Add one in /admin/brochures.
                </p>
              )}
              <div className="space-y-2">
                {usableBrochures.map((b) => (
                  <Button
                    key={b.id}
                    variant="outline"
                    className="w-full justify-between"
                    onClick={() => setActiveSend({ kind: 'brochure', brochureId: b.id })}
                  >
                    <span className="flex items-center gap-2">
                      <FileText className="h-4 w-4" />
                      {b.label}
                      {b.isDefault && (
                        <span className="rounded bg-primary/10 px-2 py-0.5 text-xs text-primary">
                          default
                        </span>
                      )}
                    </span>
                    <span className="text-xs text-muted-foreground">{b.versionCount} ver.</span>
                  </Button>
                ))}
              </div>
            </div>
          </div>

          <DialogFooter>
            <Button variant="outline" onClick={() => onOpenChange(false)}>
              Close
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {activeSend?.kind === 'brochure' && (
        <SendDocumentDialog
          open
          onOpenChange={(o) => {
            if (!o) {
              setActiveSend(null);
              onOpenChange(false);
            }
          }}
          documentKind="brochure"
          recipient={{ clientId, interestId }}
          context={{ brochureId: activeSend.brochureId }}
          title={`Send brochure to ${clientName}`}
          onSent={() => setActiveSend(null)}
        />
      )}

      {activeSend?.kind === 'berth_pdf' && (
        <SendDocumentDialog
          open
          onOpenChange={(o) => {
            if (!o) {
              setActiveSend(null);
              onOpenChange(false);
            }
          }}
          documentKind="berth_pdf"
          recipient={{ clientId, interestId }}
          context={{ berthId: activeSend.berthId }}
          title={`Send berth ${activeSend.mooring} spec sheet`}
          onSent={() => setActiveSend(null)}
        />
      )}
    </>
  );
}