"use client";

import {
  AlertTriangle,
  Building2,
  Calendar,
  CheckCircle2,
  DollarSign,
  KeyRound,
  Loader2,
  Lock,
  Mail,
  Phone,
  ShieldCheck,
  UserCheck,
  UserX,
  X,
} from "lucide-react";
import { useState } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { currency, formatDate } from "@/lib/utils";
import { TenantCompany, TenantStatus } from "@/types/saas-admin";

interface TenantDetailDrawerProps {
  tenant: TenantCompany | null;
  onClose: () => void;
  onToggleStatus: (id: string, status: TenantStatus) => Promise<any>;
  onUpdateBilling: (
    id: string,
    data: { monthlyFee?: number; dueDay?: number; lastPaymentStatus?: "PAID" | "PENDENTE" | "OVERDUE" }
  ) => Promise<any>;
  isSaving?: boolean;
}

export function TenantDetailDrawer({
  tenant,
  onClose,
  onToggleStatus,
  onUpdateBilling,
  isSaving = false,
}: TenantDetailDrawerProps) {
  const [feeInput, setFeeInput] = useState<number>(tenant?.monthlyFee || 499);
  const [dueDayInput, setDueDayInput] = useState<number>(tenant?.dueDay || 10);
  const [paymentStatus, setPaymentStatus] = useState<string>(tenant?.lastPaymentStatus || "PAID");

  if (!tenant) return null;

  const isSuspended = tenant.status === "SUSPENDED";

  const handleSaveBilling = async () => {
    await onUpdateBilling(tenant.id, {
      monthlyFee: feeInput,
      dueDay: dueDayInput,
      lastPaymentStatus: paymentStatus as any,
    });
  };

  return (
    <div className="fixed inset-0 z-50 flex justify-end bg-black/60 backdrop-blur-xs">
      <div className="w-full max-w-xl bg-card p-6 shadow-2xl overflow-y-auto space-y-6 flex flex-col h-full border-l">
        {/* Header Drawer */}
        <div className="flex items-center justify-between border-b pb-4">
          <div className="flex items-center gap-3">
            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary/10 text-primary font-bold">
              <Building2 className="h-5 w-5" />
            </div>
            <div>
              <h2 className="text-lg font-bold text-foreground">{tenant.tradeName}</h2>
              <p className="text-xs text-muted-foreground font-mono">{tenant.legalName}</p>
            </div>
          </div>
          <Button variant="ghost" size="icon" onClick={onClose}>
            <X className="h-5 w-5" />
          </Button>
        </div>

        {/* Status do Acesso e Botão de Ação Crítica */}
        <Card className={`p-4 border shadow-xs ${isSuspended ? "bg-rose-500/10 border-rose-500/30" : "bg-emerald-500/10 border-emerald-500/30"}`}>
          <div className="flex flex-wrap items-center justify-between gap-3">
            <div>
              <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                Status do Acesso ao ERP
              </p>
              <div className="mt-1 flex items-center gap-2">
                {isSuspended ? (
                  <Badge tone="red" className="flex items-center gap-1">
                    <Lock className="h-3 w-3" /> ACESSO SUSPENSO (Inadimplente)
                  </Badge>
                ) : (
                  <Badge tone="green" className="flex items-center gap-1">
                    <CheckCircle2 className="h-3 w-3" /> ACESSO ATIVO & LIBERADO
                  </Badge>
                )}
                <span className="text-xs text-muted-foreground font-semibold">({tenant.plan})</span>
              </div>
            </div>

            <Button
              variant={isSuspended ? "default" : "secondary"}
              onClick={() => onToggleStatus(tenant.id, isSuspended ? "ACTIVE" : "SUSPENDED")}
              disabled={isSaving}
              className={`text-xs font-bold ${isSuspended ? "bg-emerald-600 hover:bg-emerald-700 text-white" : "text-rose-600 hover:bg-rose-500/10 border-rose-200"}`}
            >
              {isSaving && <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />}
              {isSuspended ? (
                <>
                  <CheckCircle2 className="mr-1.5 h-3.5 w-3.5" /> Reativar Acesso do Cliente
                </>
              ) : (
                <>
                  <Lock className="mr-1.5 h-3.5 w-3.5" /> Bloquear Acesso por Pendência
                </>
              )}
            </Button>
          </div>
        </Card>

        {/* Informações Cadastrais */}
        <div className="space-y-3 border-t pt-4">
          <h3 className="text-xs font-bold uppercase tracking-wider text-muted-foreground">
            Informações da Empresa
          </h3>
          <div className="grid gap-3 sm:grid-cols-2 text-xs">
            <div>
              <span className="text-muted-foreground">CNPJ:</span>
              <p className="font-bold font-mono text-foreground">{tenant.document}</p>
            </div>
            <div>
              <span className="text-muted-foreground">E-mail:</span>
              <p className="font-semibold text-foreground">{tenant.email}</p>
            </div>
            <div>
              <span className="text-muted-foreground">Telefone:</span>
              <p className="font-medium text-foreground">{tenant.phone || "Não informado"}</p>
            </div>
            <div>
              <span className="text-muted-foreground">Data de Cadastro:</span>
              <p className="font-medium text-foreground">{formatDate(tenant.createdAt)}</p>
            </div>
          </div>
        </div>

        {/* Gestão de Cobrança e Mensalidade SaaS */}
        <div className="space-y-4 border-t pt-4">
          <h3 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 Assinatura & Mensalidade
          </h3>

          <div className="grid gap-3 sm:grid-cols-3">
            <div>
              <label className="mb-1 block text-xs font-medium">Mensalidade (R$)</label>
              <Input
                type="number"
                step="0.01"
                value={feeInput}
                onChange={(e) => setFeeInput(parseFloat(e.target.value) || 0)}
                className="text-xs"
              />
            </div>

            <div>
              <label className="mb-1 block text-xs font-medium">Dia de Vencimento</label>
              <select
                value={dueDayInput}
                onChange={(e) => setDueDayInput(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</option>
                <option value={10}>Dia 10</option>
                <option value={15}>Dia 15</option>
                <option value={20}>Dia 20</option>
                <option value={25}>Dia 25</option>
              </select>
            </div>

            <div>
              <label className="mb-1 block text-xs font-medium">Status do Pagamento</label>
              <select
                value={paymentStatus}
                onChange={(e) => setPaymentStatus(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="PAID">✓ Quitado / Pago</option>
                <option value="PENDENTE">⏳ Pendente</option>
                <option value="OVERDUE">⚠️ Em Atraso</option>
              </select>
            </div>
          </div>

          <Button onClick={handleSaveBilling} disabled={isSaving} size="sm" className="w-full text-xs">
            {isSaving && <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />}
            Salvar Alterações de Mensalidade
          </Button>
        </div>

        {/* Usuários com Acesso nesta Empresa */}
        <div className="space-y-3 border-t pt-4 flex-1">
          <h3 className="text-xs font-bold uppercase tracking-wider text-muted-foreground flex items-center justify-between">
            <span>Usuários Cadastrados ({tenant.userCount})</span>
          </h3>

          <div className="space-y-2">
            {tenant.users && tenant.users.length > 0 ? (
              tenant.users.map((u) => (
                <div
                  key={u.id}
                  className="flex items-center justify-between rounded-lg border bg-muted/30 p-3 text-xs"
                >
                  <div className="flex items-center gap-2.5">
                    <div className="flex h-7 w-7 items-center justify-center rounded-full bg-primary/10 text-primary font-bold text-[10px]">
                      {u.name.charAt(0)}
                    </div>
                    <div>
                      <p className="font-bold text-foreground">{u.name}</p>
                      <p className="text-[11px] text-muted-foreground font-mono">{u.email}</p>
                    </div>
                  </div>
                  <Badge tone="blue" className="text-[10px]">
                    {u.role}
                  </Badge>
                </div>
              ))
            ) : (
              <p className="text-xs text-muted-foreground italic">Nenhum usuário secundário encontrado.</p>
            )}
          </div>
        </div>

        {/* Rodapé Drawer */}
        <div className="border-t pt-4 flex justify-end">
          <Button variant="secondary" onClick={onClose} size="sm">
            Fechar Painel
          </Button>
        </div>
      </div>
    </div>
  );
}