"use client";

import { AlertTriangle, Bell, Info, Loader2, Lock, Send, X } from "lucide-react";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { BroadcastNotificationDTO, TenantCompany } from "@/types/saas-admin";

interface BroadcastNotificationModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSubmit: (data: BroadcastNotificationDTO) => Promise<any>;
  tenants: TenantCompany[];
  isSaving?: boolean;
}

export function BroadcastNotificationModal({
  isOpen,
  onClose,
  onSubmit,
  tenants,
  isSaving = false,
}: BroadcastNotificationModalProps) {
  const [formData, setFormData] = useState<BroadcastNotificationDTO>({
    companyId: "",
    title: "",
    message: "",
    type: "INFO",
  });

  const [sentSuccess, setSentSuccess] = useState(false);

  if (!isOpen) return null;

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    await onSubmit(formData);
    setSentSuccess(true);
    setTimeout(() => {
      setSentSuccess(false);
      onClose();
    }, 1500);
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-xs">
      <Card className="w-full max-w-lg p-6 shadow-2xl space-y-4">
        <div className="flex items-center justify-between border-b pb-3">
          <h3 className="text-lg font-bold flex items-center gap-2">
            <Bell className="h-5 w-5 text-primary" /> Transmitir Notificação / Aviso em Tela
          </h3>
          <Button variant="ghost" size="icon" onClick={onClose}>
            <X className="h-5 w-5" />
          </Button>
        </div>

        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label className="mb-1 block text-xs font-semibold">Empresa Destinatária *</label>
            <select
              value={formData.companyId || ""}
              onChange={(e) => setFormData({ ...formData, companyId: e.target.value })}
              className="w-full rounded-md border border-input bg-background px-3 py-2 text-xs shadow-xs focus:ring-1 focus:ring-ring"
            >
              <option value="">📢 TODAS AS EMPRESAS (Aviso Global no ERP)</option>
              {tenants.map((tenant) => (
                <option key={tenant.id} value={tenant.id}>
                  🏢 {tenant.legalName} ({tenant.tradeName})
                </option>
              ))}
            </select>
          </div>

          <div>
            <label className="mb-1 block text-xs font-semibold">Tipo do Aviso *</label>
            <select
              value={formData.type}
              onChange={(e) => setFormData({ ...formData, type: e.target.value as any })}
              className="w-full rounded-md border border-input bg-background px-3 py-2 text-xs shadow-xs focus:ring-1 focus:ring-ring"
            >
              <option value="INFO">ℹ️ Comunicado Informativo (Blue)</option>
              <option value="WARNING">⚠️ Alerta de Sistema / Cobrança (Amber)</option>
              <option value="BLOCK">⛔ Manutenção do Servidor (Red)</option>
            </select>
          </div>

          <div>
            <label className="mb-1 block text-xs font-semibold">Título da Notificação *</label>
            <Input
              value={formData.title}
              onChange={(e) => setFormData({ ...formData, title: e.target.value })}
              placeholder="Ex: Atualização do Sistema ou Lembrete de Cobrança"
              required
            />
          </div>

          <div>
            <label className="mb-1 block text-xs font-semibold">Conteúdo da Mensagem *</label>
            <textarea
              rows={4}
              value={formData.message}
              onChange={(e) => setFormData({ ...formData, message: e.target.value })}
              className="w-full rounded-md border border-input bg-background p-3 text-xs shadow-xs focus:ring-1 focus:ring-ring outline-none"
              placeholder="Escreva a mensagem que aparecerá no topo da tela do cliente..."
              required
            />
          </div>

          {sentSuccess && (
            <div className="rounded-md bg-emerald-500/10 border border-emerald-500/30 p-2.5 text-center text-xs font-bold text-emerald-600 dark:text-emerald-400">
              ✓ Notificação enviada em tempo real para os clientes!
            </div>
          )}

          <div className="flex justify-end gap-2 border-t pt-4">
            <Button type="button" variant="secondary" onClick={onClose}>
              Cancelar
            </Button>
            <Button type="submit" disabled={isSaving || sentSuccess}>
              {isSaving ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Send className="mr-1.5 h-4 w-4" />}
              Transmitir Notificação
            </Button>
          </div>
        </form>
      </Card>
    </div>
  );
}