"use client";

import { useState } from "react";
import { X, Send, Paperclip, Loader2, Check } from "lucide-react";
import { Button } from "@/components/ui/button";
import { sendInvoiceEmail } from "@/lib/supabase/invoicing-actions";

export interface InvoiceToSend {
  id: string;
  invoice_number: string;
  client_name: string;
  client_email: string;
  total: string;
}

interface SendInvoiceModalProps {
  invoices: InvoiceToSend[];
  orgName: string;
  onClose: () => void;
  onSuccess: () => void;
}

export default function SendInvoiceModal({ invoices, orgName, onClose, onSuccess }: SendInvoiceModalProps) {
  const [subject, setSubject] = useState(
    invoices.length === 1
      ? `Invoice ${invoices[0].invoice_number} from ${orgName}`
      : `Invoices from ${orgName}`
  );
  const [message, setMessage] = useState(
    invoices.length === 1
      ? `Hi ${invoices[0].client_name || "there"},\n\nPlease find attached invoice ${invoices[0].invoice_number} for ${invoices[0].total}.\n\nIf you have any questions, feel free to reach out.\n\nBest regards,\n${orgName}`
      : `Hi,\n\nPlease find attached invoices from ${orgName}.\n\nIf you have any questions, feel free to reach out.\n\nBest regards,\n${orgName}`
  );
  const [sending, setSending] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [sentCount, setSentCount] = useState(0);

  const handleSend = async () => {
    setError(null);
    setSending(true);
    setSentCount(0);

    for (let i = 0; i < invoices.length; i++) {
      const inv = invoices[i];
      if (!inv.client_email) continue;

      try {
        const result = await sendInvoiceEmail({
          invoice_number: inv.invoice_number,
          client_name: inv.client_name,
          client_email: inv.client_email,
          total: inv.total,
          subject,
          message,
          org_name: orgName,
          invoice_id: inv.id,
        });

        if (result.success) {
          setSentCount((c) => c + 1);
        } else {
          setError(result.error || `Failed to send invoice ${inv.invoice_number}`);
        }
      } catch (e: any) {
        setError(e.message || `Failed to send invoice ${inv.invoice_number}`);
      }
    }

    setSending(false);
    if (sentCount + (sentCount === 0 ? 0 : 0) === invoices.filter((i) => i.client_email).length) {
      onSuccess();
    }
  };

  const validInvoices = invoices.filter((i) => i.client_email);
  const invalidInvoices = invoices.filter((i) => !i.client_email);

  return (
    <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50" onClick={onClose}>
      <div className="bg-white rounded-xl shadow-xl w-full max-w-lg mx-4 overflow-hidden" onClick={(e) => e.stopPropagation()}>
        {/* Header */}
        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-100">
          <div>
            <h3 className="text-sm font-semibold text-gray-900">
              {sentCount > 0 ? `Sent ${sentCount} of ${validInvoices.length}` : `Send ${invoices.length} invoice${invoices.length > 1 ? "s" : ""}`}
            </h3>
            <p className="text-xs text-gray-500 mt-0.5">
              {validInvoices.length} with email{invalidInvoices.length > 0 ? `, ${invalidInvoices.length} missing email` : ""}
            </p>
          </div>
          <button onClick={onClose} className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer">
            <X className="w-4 h-4 text-gray-400" />
          </button>
        </div>

        {/* Invoice list */}
        <div className="px-6 py-3 bg-gray-50 border-b border-gray-100">
          {invoices.map((inv) => (
            <div key={inv.id} className="flex items-center justify-between py-1.5">
              <div className="flex items-center gap-2">
                <Paperclip className="w-3.5 h-3.5 text-gray-400 flex-shrink-0" />
                <span className="text-sm text-gray-700">{inv.invoice_number || "Draft"}</span>
              </div>
              <div className="flex items-center gap-2">
                <span className="text-xs text-gray-500">{inv.client_name || "No client"}</span>
                <span className="text-xs font-medium text-gray-900">{inv.total}</span>
              </div>
            </div>
          ))}
        </div>

        {/* Form */}
        <div className="px-6 py-4 space-y-4">
          {error && (
            <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">{error}</div>
          )}
          <div>
            <label className="text-xs font-medium text-gray-600">Subject</label>
            <input
              value={subject}
              onChange={(e) => setSubject(e.target.value)}
              className="mt-1 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75]"
            />
          </div>
          <div>
            <label className="text-xs font-medium text-gray-600">Message</label>
            <textarea
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              rows={6}
              className="mt-1 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75] resize-none"
            />
          </div>
        </div>

        {/* Footer */}
        <div className="flex items-center justify-end gap-2 px-6 py-4 border-t border-gray-100 bg-gray-50">
          <Button variant="outline" onClick={onClose} disabled={sending} className="cursor-pointer text-xs">
            Cancel
          </Button>
          <Button
            onClick={handleSend}
            disabled={sending || validInvoices.length === 0}
            className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer text-xs disabled:opacity-50"
          >
            {sending ? (
              <>
                <Loader2 className="w-3.5 h-3.5 animate-spin" />
                Sending...
              </>
            ) : sentCount > 0 ? (
              <>
                <Check className="w-3.5 h-3.5" />
                Sent {sentCount}/{validInvoices.length}
              </>
            ) : (
              <>
                <Send className="w-3.5 h-3.5" />
                Send {validInvoices.length > 1 ? `${validInvoices.length} invoices` : "invoice"}
              </>
            )}
          </Button>
        </div>
      </div>
    </div>
  );
}