"use client";

import { Building2, DollarSign, KeyRound, Loader2, User, 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 { CreateTenantDTO } from "@/types/saas-admin";

interface TenantFormModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSubmit: (data: CreateTenantDTO) => Promise<any>;
  isSaving?: boolean;
}

export function TenantFormModal({
  isOpen,
  onClose,
  onSubmit,
  isSaving = false,
}: TenantFormModalProps) {
  const [formData, setFormData] = useState<CreateTenantDTO>({
    legalName: "",
    tradeName: "",
    document: "",
    email: "",
    phone: "",
    plan: "Pro Enterprise",
    monthlyFee: 499.0,
    dueDay: 10,
    adminName: "",
    adminEmail: "",
    adminPassword: "",
  });

  if (!isOpen) return null;

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    await onSubmit(formData);
    onClose();
  };

  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-2xl p-6 shadow-2xl space-y-5 max-h-[90vh] overflow-y-auto">
        <div className="flex items-center justify-between border-b pb-3">
          <h3 className="text-lg font-bold flex items-center gap-2">
            <Building2 className="h-5 w-5 text-primary" /> Cadastrar Nova Empresa Cliente (Tenant)
          </h3>
          <Button variant="ghost" size="icon" onClick={onClose}>
            <X className="h-5 w-5" />
          </Button>
        </div>

        <form onSubmit={handleSubmit} className="space-y-5">
          {/* Seção 1: Dados da Empresa Contratante */}
          <div className="space-y-3">
            <h4 className="text-xs font-bold uppercase tracking-wider text-muted-foreground flex items-center gap-1.5">
              <Building2 className="h-4 w-4 text-primary" /> Dados da Empresa Contratante
            </h4>
            <div className="grid gap-3 sm:grid-cols-2">
              <div>
                <label className="mb-1 block text-xs font-medium">Razão Social *</label>
                <Input
                  value={formData.legalName}
                  onChange={(e) => setFormData({ ...formData, legalName: e.target.value })}
                  placeholder="Ex: Locadora Nordeste LTDA"
                  required
                />
              </div>

              <div>
                <label className="mb-1 block text-xs font-medium">Nome Fantasia</label>
                <Input
                  value={formData.tradeName}
                  onChange={(e) => setFormData({ ...formData, tradeName: e.target.value })}
                  placeholder="Ex: Nordeste Locações"
                />
              </div>

              <div>
                <label className="mb-1 block text-xs font-medium">CNPJ *</label>
                <Input
                  value={formData.document}
                  onChange={(e) => setFormData({ ...formData, document: e.target.value })}
                  placeholder="12.345.678/0001-90"
                  required
                />
              </div>

              <div>
                <label className="mb-1 block text-xs font-medium">E-mail Corporativo *</label>
                <Input
                  type="email"
                  value={formData.email}
                  onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                  placeholder="contato@empresa.com.br"
                  required
                />
              </div>

              <div>
                <label className="mb-1 block text-xs font-medium">Telefone / WhatsApp</label>
                <Input
                  value={formData.phone}
                  onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                  placeholder="(81) 3344-5566"
                />
              </div>

              <div>
                <label className="mb-1 block text-xs font-medium">Plano Contratado *</label>
                <select
                  value={formData.plan}
                  onChange={(e) => setFormData({ ...formData, plan: 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="Starter">Starter (Até 50 equipamentos)</option>
                  <option value="Pro Enterprise">Pro Enterprise (Ilimitado)</option>
                  <option value="Custom Corporate">Custom Corporate (Personalizado)</option>
                </select>
              </div>
            </div>
          </div>

          {/* Seção 2: Configuração de Cobrança / Mensalidade SaaS */}
          <div className="space-y-3 border-t pt-4">
            <h4 className="text-xs font-bold uppercase tracking-wider text-muted-foreground flex items-center gap-1.5">
              <DollarSign className="h-4 w-4 text-emerald-600" /> Configuração da Mensalidade (SaaS)
            </h4>
            <div className="grid gap-3 sm:grid-cols-2">
              <div>
                <label className="mb-1 block text-xs font-medium">Valor da Mensalidade (R$) *</label>
                <Input
                  type="number"
                  step="0.01"
                  value={formData.monthlyFee}
                  onChange={(e) => setFormData({ ...formData, monthlyFee: parseFloat(e.target.value) || 0 })}
                  placeholder="499.00"
                  required
                />
              </div>

              <div>
                <label className="mb-1 block text-xs font-medium">Dia de Vencimento Mensal *</label>
                <select
                  value={formData.dueDay}
                  onChange={(e) => setFormData({ ...formData, dueDay: parseInt(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={5}>Dia 05 de cada mês</option>
                  <option value={10}>Dia 10 de cada mês</option>
                  <option value={15}>Dia 15 de cada mês</option>
                  <option value={20}>Dia 20 de cada mês</option>
                  <option value={25}>Dia 25 de cada mês</option>
                </select>
              </div>
            </div>
          </div>

          {/* Seção 3: Primeiro Usuário Administrador da Empresa */}
          <div className="space-y-3 border-t pt-4">
            <h4 className="text-xs font-bold uppercase tracking-wider text-muted-foreground flex items-center gap-1.5">
              <KeyRound className="h-4 w-4 text-primary" /> Credenciais do Primeiro Acesso (Admin)
            </h4>
            <div className="grid gap-3 sm:grid-cols-3">
              <div>
                <label className="mb-1 block text-xs font-medium">Nome do Responsável *</label>
                <Input
                  value={formData.adminName}
                  onChange={(e) => setFormData({ ...formData, adminName: e.target.value })}
                  placeholder="Ex: Carlos Eduardo"
                  required
                />
              </div>

              <div>
                <label className="mb-1 block text-xs font-medium">E-mail de Login *</label>
                <Input
                  type="email"
                  value={formData.adminEmail}
                  onChange={(e) => setFormData({ ...formData, adminEmail: e.target.value })}
                  placeholder="carlos@empresa.com.br"
                  required
                />
              </div>

              <div>
                <label className="mb-1 block text-xs font-medium">Senha de Acesso *</label>
                <Input
                  type="password"
                  value={formData.adminPassword}
                  onChange={(e) => setFormData({ ...formData, adminPassword: e.target.value })}
                  placeholder="Mínimo 6 caracteres"
                  required
                />
              </div>
            </div>
          </div>

          {/* Botões de Ação */}
          <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}>
              {isSaving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
              Cadastrar Empresa & Liberar Acesso
            </Button>
          </div>
        </form>
      </Card>
    </div>
  );
}