"use client";

import {
  AlertTriangle,
  Bell,
  Building2,
  CheckCircle2,
  ChevronLeft,
  ChevronRight,
  DollarSign,
  Eye,
  Lock,
  Plus,
  RefreshCw,
  Search,
  ShieldAlert,
  Users,
  LogOut,
  Trash2,
  ShieldCheck,
  UserPlus,
  X,
  Loader2,
  Edit,
} from "lucide-react";
import { useState } from "react";
import { BroadcastNotificationModal } from "@/components/saas-admin/broadcast-notification-modal";
import { SaaSStatsCards } from "@/components/saas-admin/saas-stats-cards";
import { TenantDetailDrawer } from "@/components/saas-admin/tenant-detail-drawer";
import { TenantFormModal } from "@/components/saas-admin/tenant-form-modal";
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 { useSaaSAdmin } from "@/hooks/use-saas-admin";
import { logoutUser } from "@/services/auth-service";
import { currency, formatDate } from "@/lib/utils";
import { TenantCompany, TenantStatus } from "@/types/saas-admin";

export default function SaaSAdminPage() {
  const {
    tenants,
    stats,
    admins,
    isLoading,
    isSaving,
    search,
    statusFilter,
    selectedTenant,
    setSelectedTenant,
    setSearch,
    setStatusFilter,
    loadData,
    createTenant,
    toggleTenantStatus,
    updateTenantBilling,
    sendBroadcast,
    createAdmin,
    deleteAdmin,
    updateAdmin,
    resetDatabase,
  } = useSaaSAdmin();

  const [activeTab, setActiveTab] = useState<"tenants" | "admins">("tenants");
  const [isTenantModalOpen, setIsTenantModalOpen] = useState(false);
  const [isBroadcastModalOpen, setIsBroadcastModalOpen] = useState(false);
  const [isAdminModalOpen, setIsAdminModalOpen] = useState(false);
  const [isAdminEditModalOpen, setIsAdminEditModalOpen] = useState(false);

  const [selectedAdmin, setSelectedAdmin] = useState<any | null>(null);
  const [newAdminData, setNewAdminData] = useState({ name: "", email: "" });
  const [editAdminData, setEditAdminData] = useState({ name: "", email: "", password: "" });
  const [adminError, setAdminError] = useState<string | null>(null);

  const handleLogout = () => {
    logoutUser();
    window.location.href = "/admin/login";
  };

  const handleOpenEditAdmin = (admin: any) => {
    setSelectedAdmin(admin);
    setEditAdminData({ name: admin.name, email: admin.email, password: "" });
    setAdminError(null);
    setIsAdminEditModalOpen(true);
  };

  const handleUpdateAdminSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setAdminError(null);
    if (!editAdminData.name.trim() || !editAdminData.email.trim()) {
      setAdminError("Por favor, preencha o nome e e-mail.");
      return;
    }
    try {
      await updateAdmin(selectedAdmin.id, editAdminData);
      setSelectedAdmin(null);
      setIsAdminEditModalOpen(false);
    } catch (err: any) {
      setAdminError(err.message || "Erro ao atualizar administrador.");
    }
  };

  const handleCreateAdminSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setAdminError(null);
    if (!newAdminData.name.trim() || !newAdminData.email.trim()) {
      setAdminError("Por favor, preencha todos os campos.");
      return;
    }
    try {
      await createAdmin(newAdminData);
      setNewAdminData({ name: "", email: "" });
      setIsAdminModalOpen(false);
    } catch (err: any) {
      setAdminError(err.message || "Erro ao cadastrar administrador.");
    }
  };

  const renderStatusBadge = (status: TenantStatus) => {
    switch (status) {
      case "ACTIVE":
        return <Badge tone="green">Ativo & Liberado</Badge>;
      case "SUSPENDED":
        return <Badge tone="red">Suspenso / Bloqueado</Badge>;
      case "TRIAL":
        return <Badge tone="blue">Período de Degustação</Badge>;
      default:
        return <Badge tone="blue">{status}</Badge>;
    }
  };

  const renderPaymentBadge = (status: "PAID" | "PENDENTE" | "OVERDUE") => {
    switch (status) {
      case "PAID":
        return <span className="font-semibold text-emerald-600 dark:text-emerald-400">✓ Quitado</span>;
      case "PENDENTE":
        return <span className="font-semibold text-amber-600 dark:text-amber-400">⏳ Pendente</span>;
      case "OVERDUE":
        return <span className="font-semibold text-rose-600 dark:text-rose-400">⚠️ Em Atraso</span>;
      default:
        return <span>{status}</span>;
    }
  };

  return (
    <div className="space-y-6 max-w-7xl mx-auto px-4 py-6">
      {/* Header com Título e Ações Master */}
      <div className="flex flex-wrap items-center justify-between gap-4 border-b pb-6">
        <div>
          <div className="flex items-center gap-2">
            <span className="rounded-full bg-blue-500/10 px-2.5 py-0.5 text-xs font-bold text-blue-600 border border-blue-500/20">
              Painel Master SuperAdmin
            </span>
          </div>
          <h1 className="mt-1 text-2xl font-bold tracking-tight text-foreground sm:text-3xl">
            SaaS Master Controller
          </h1>
        </div>

        <div className="flex flex-wrap items-center gap-2">
          <Button variant="secondary" size="icon" onClick={() => loadData()} title="Atualizar dados">
            <RefreshCw className={`h-4 w-4 ${isLoading ? "animate-spin" : ""}`} />
          </Button>

          <Button
            variant="secondary"
            onClick={() => setIsBroadcastModalOpen(true)}
            className="text-xs font-semibold shadow-xs"
          >
            <Bell className="mr-1.5 h-4 w-4 text-blue-500" /> Transmitir Aviso em Tela
          </Button>

          <Button
            variant="secondary"
            onClick={async () => {
              if (
                window.confirm(
                  "ATENÇÃO: Deseja zerar todo o banco de dados e manter apenas as contas de usuário padrão de produção?\n\nTodas as movimentações e dados de teste serão apagados permanentemente."
                )
              ) {
                await resetDatabase();
                alert("✓ Banco de dados zerado e configurado para Produção com sucesso!");
              }
            }}
            className="text-xs font-semibold text-rose-600 border-rose-500/30 hover:bg-rose-500/10 hover:text-rose-700 shadow-xs"
            title="Limpar todos os dados de teste para subir em Produção"
          >
            <Trash2 className="mr-1.5 h-4 w-4 text-rose-500" /> Limpar Banco para Produção
          </Button>

          <Button
            variant="ghost"
            onClick={handleLogout}
            className="text-xs text-rose-600 hover:bg-rose-500/10 hover:text-rose-700 font-semibold"
          >
            <LogOut className="mr-1.5 h-4 w-4" /> Sair do Painel
          </Button>
        </div>
      </div>

      {/* Navegação por Abas */}
      <div className="flex gap-2 border-b pb-3">
        <button
          onClick={() => setActiveTab("tenants")}
          className={`flex items-center gap-2 rounded-lg px-4 py-2 text-xs font-semibold transition-all ${
            activeTab === "tenants"
              ? "bg-primary text-primary-foreground shadow-sm"
              : "bg-card border text-muted-foreground hover:bg-muted hover:text-foreground"
          }`}
        >
          <Building2 className="h-4 w-4" />
          Empresas & Licenças SaaS
        </button>
        <button
          onClick={() => setActiveTab("admins")}
          className={`flex items-center gap-2 rounded-lg px-4 py-2 text-xs font-semibold transition-all ${
            activeTab === "admins"
              ? "bg-primary text-primary-foreground shadow-sm"
              : "bg-card border text-muted-foreground hover:bg-muted hover:text-foreground"
          }`}
        >
          <ShieldCheck className="h-4 w-4" />
          Administradores SaaS
        </button>
      </div>

      {activeTab === "tenants" ? (
        <>
          {/* Cards KPI Financeiros e Operacionais do SaaS */}
          <SaaSStatsCards stats={stats} />

          {/* Seção Master de Licenças */}
          <div className="flex items-center justify-between pt-2">
            <h2 className="text-lg font-bold text-foreground">Empresas Contratantes</h2>
            <Button onClick={() => setIsTenantModalOpen(true)} className="shadow-xs text-xs font-semibold">
              <Plus className="mr-1.5 h-4 w-4" /> Nova Empresa Cliente
            </Button>
          </div>

          {/* Tabela de Empresas Contratantes com Filtros */}
          <Card className="overflow-hidden shadow-xs border">
            {/* Barra de Pesquisa e Filtros */}
            <div className="flex flex-col gap-4 border-b bg-card p-4 lg:flex-row lg:items-center lg:justify-between">
              <div className="relative flex-1 max-w-md">
                <Search className="pointer-events-none absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                <Input
                  value={search}
                  onChange={(e) => setSearch(e.target.value)}
                  className="pl-9"
                  placeholder="Buscar por razão social, nome fantasia, CNPJ..."
                />
              </div>

              <div className="flex items-center gap-3">
                <select
                  value={statusFilter}
                  onChange={(e) => setStatusFilter(e.target.value)}
                  className="rounded-md border border-input bg-background px-3 py-1.5 text-xs font-medium shadow-xs focus:outline-hidden focus:ring-1 focus:ring-ring"
                >
                  <option value="ALL">Todos os Status de Acesso</option>
                  <option value="ACTIVE">Somente Ativos & Liberados</option>
                  <option value="SUSPENDED">Somente Suspensos / Inadimplentes</option>
                  <option value="TRIAL">Somente em Trial</option>
                </select>
              </div>
            </div>

            {/* Tabela de Licenças */}
            <div className="overflow-x-auto">
              <table className="w-full min-w-[850px] text-left text-sm">
                <thead className="bg-muted/50 text-xs uppercase text-muted-foreground">
                  <tr>
                    <th className="px-4 py-3.5 font-medium">Empresa Contratante</th>
                    <th className="px-4 py-3.5 font-medium">CNPJ / Contato</th>
                    <th className="px-4 py-3.5 font-medium">Plano & Mensalidade</th>
                    <th className="px-4 py-3.5 font-medium">Situação Financeira</th>
                    <th className="px-4 py-3.5 font-medium">Status de Acesso</th>
                    <th className="w-32 px-4 py-3.5 text-right font-medium">Ações Master</th>
                  </tr>
                </thead>
                <tbody className="divide-y">
                  {isLoading ? (
                    <tr>
                      <td colSpan={6} className="p-8 text-center text-muted-foreground">
                        <RefreshCw className="mx-auto h-6 w-6 animate-spin text-primary" />
                        <p className="mt-2 text-xs">Carregando lista de empresas contratantes...</p>
                      </td>
                    </tr>
                  ) : tenants.length === 0 ? (
                    <tr>
                      <td colSpan={6} className="p-12 text-center text-muted-foreground">
                        Nenhuma empresa encontrada com os filtros selecionados.
                      </td>
                    </tr>
                  ) : (
                    tenants.map((tenant) => (
                      <tr key={tenant.id} className="group hover:bg-muted/40 transition-colors">
                        {/* Razão Social & Nome Fantasia */}
                        <td className="px-4 py-3.5">
                          <div className="flex items-center gap-3">
                            <div className="flex h-9 w-9 items-center justify-center rounded-lg border bg-background font-bold text-primary text-xs shadow-xs">
                              <Building2 className="h-4 w-4" />
                            </div>
                            <div>
                              <p
                                onClick={() => setSelectedTenant(tenant)}
                                className="font-bold text-foreground hover:text-primary hover:underline cursor-pointer"
                              >
                                {tenant.tradeName}
                              </p>
                              <p className="text-xs text-muted-foreground font-mono">{tenant.legalName}</p>
                            </div>
                          </div>
                        </td>

                        {/* CNPJ & E-mail */}
                        <td className="px-4 py-3.5 text-xs text-muted-foreground">
                          <p className="font-mono text-foreground">{tenant.document}</p>
                          <p className="truncate max-w-[200px]">{tenant.email}</p>
                        </td>

                        {/* Plano & Mensalidade */}
                        <td className="px-4 py-3.5">
                          <p className="font-bold text-emerald-600 dark:text-emerald-400">
                            {currency(tenant.monthlyFee)}
                            <span className="text-[11px] font-normal text-muted-foreground">/mês</span>
                          </p>
                          <p className="text-xs text-muted-foreground">
                            {tenant.plan} • Vence dia {tenant.dueDay}
                          </p>
                        </td>

                        {/* Situação Financeira */}
                        <td className="px-4 py-3.5 text-xs">
                          {renderPaymentBadge(tenant.lastPaymentStatus)}
                        </td>

                        {/* Status de Acesso */}
                        <td className="px-4 py-3.5">{renderStatusBadge(tenant.status)}</td>

                        {/* Ações Master */}
                        <td className="px-4 py-3.5 text-right">
                          <div className="flex items-center justify-end gap-1">
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => setSelectedTenant(tenant)}
                              title="Gerenciar Detalhes da Empresa"
                              className="text-xs"
                            >
                              <Eye className="mr-1 h-3.5 w-3.5 text-muted-foreground" /> Detalhes
                            </Button>

                            <Button
                              variant="ghost"
                              size="icon"
                              onClick={() =>
                                toggleTenantStatus(
                                  tenant.id,
                                  tenant.status === "SUSPENDED" ? "ACTIVE" : "SUSPENDED"
                                )
                              }
                              title={tenant.status === "SUSPENDED" ? "Reativar Acesso" : "Bloquear Acesso"}
                              className={
                                tenant.status === "SUSPENDED"
                                  ? "text-emerald-600 hover:bg-emerald-500/10"
                                  : "text-rose-500 hover:bg-rose-500/10"
                              }
                            >
                              {tenant.status === "SUSPENDED" ? (
                                <CheckCircle2 className="h-4 w-4" />
                              ) : (
                                <Lock className="h-4 w-4" />
                              )}
                            </Button>
                          </div>
                        </td>
                      </tr>
                    ))
                  )}
                </tbody>
              </table>
            </div>
          </Card>
        </>
      ) : (
        <>
          {/* Seção Master de Administradores */}
          <div className="flex items-center justify-between pt-2">
            <div>
              <h2 className="text-lg font-bold text-foreground flex items-center gap-2">
                <ShieldCheck className="h-5 w-5 text-blue-600" /> Operadores Administrativos
              </h2>
              <p className="text-xs text-muted-foreground">
                Lista de administradores com permissão total de acesso ao painel master SaaS.
              </p>
            </div>
            <Button onClick={() => setIsAdminModalOpen(true)} className="shadow-xs text-xs font-semibold bg-blue-600 hover:bg-blue-500 text-white">
              <UserPlus className="mr-1.5 h-4 w-4" /> Novo Administrador
            </Button>
          </div>

          <Card className="overflow-hidden shadow-xs border">
            <div className="overflow-x-auto">
              <table className="w-full min-w-[700px] text-left text-sm">
                <thead className="bg-muted/50 text-xs uppercase text-muted-foreground">
                  <tr>
                    <th className="px-4 py-3.5 font-medium">Nome</th>
                    <th className="px-4 py-3.5 font-medium">E-mail</th>
                    <th className="px-4 py-3.5 font-medium">Nível de Permissão</th>
                    <th className="px-4 py-3.5 font-medium">Data de Cadastro</th>
                    <th className="w-24 px-4 py-3.5 text-right font-medium">Ações</th>
                  </tr>
                </thead>
                <tbody className="divide-y">
                  {isLoading ? (
                    <tr>
                      <td colSpan={5} className="p-8 text-center text-muted-foreground">
                        <RefreshCw className="mx-auto h-6 w-6 animate-spin text-primary" />
                        <p className="mt-2 text-xs">Carregando lista de administradores...</p>
                      </td>
                    </tr>
                  ) : admins.length === 0 ? (
                    <tr>
                      <td colSpan={5} className="p-12 text-center text-muted-foreground">
                        Nenhum administrador cadastrado.
                      </td>
                    </tr>
                  ) : (
                    admins.map((admin) => (
                      <tr key={admin.id} className="hover:bg-muted/40 transition-colors">
                        <td className="px-4 py-3.5">
                          <div className="flex items-center gap-3">
                            <div className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-500/10 font-bold text-blue-600 text-xs">
                              {admin.name.charAt(0).toUpperCase()}
                            </div>
                            <span className="font-bold text-foreground">{admin.name}</span>
                          </div>
                        </td>
                        <td className="px-4 py-3.5 font-mono text-xs text-foreground">{admin.email}</td>
                        <td className="px-4 py-3.5">
                          <Badge tone="blue">SuperAdmin Master</Badge>
                        </td>
                        <td className="px-4 py-3.5 text-xs text-muted-foreground">
                          {admin.createdAt ? formatDate(admin.createdAt) : "-"}
                        </td>
                        <td className="px-4 py-3.5 text-right">
                          <div className="flex items-center justify-end gap-1">
                            <Button
                              variant="ghost"
                              size="icon"
                              onClick={() => handleOpenEditAdmin(admin)}
                              title="Editar Administrador / Alterar Senha"
                            >
                              <Edit className="h-4 w-4 text-muted-foreground hover:text-foreground" />
                            </Button>
                            <Button
                              variant="ghost"
                              size="icon"
                              disabled={admin.email === "superadmin@rentx.local"}
                              onClick={() => {
                                if (confirm(`Remover acesso do administrador ${admin.name}?`)) {
                                  deleteAdmin(admin.id);
                                }
                              }}
                              title={admin.email === "superadmin@rentx.local" ? "O SuperAdmin raiz não pode ser excluído" : "Remover Acesso"}
                              className="text-rose-500 hover:bg-rose-500/10 disabled:opacity-30"
                            >
                              <Trash2 className="h-4 w-4" />
                            </Button>
                          </div>
                        </td>
                      </tr>
                    ))
                  )}
                </tbody>
              </table>
            </div>
          </Card>
        </>
      )}

      {/* Modal de Cadastro de SuperAdmin */}
      {isAdminModalOpen && (
        <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-md p-6 shadow-2xl">
            <div className="flex items-center justify-between border-b pb-3">
              <h3 className="text-lg font-bold flex items-center gap-2">
                <ShieldCheck className="h-5 w-5 text-blue-600" /> Novo Administrador SaaS
              </h3>
              <Button variant="ghost" size="icon" onClick={() => setIsAdminModalOpen(false)}>
                <X className="h-5 w-5" />
              </Button>
            </div>

            {adminError && (
              <div className="mt-4 flex items-center gap-2 rounded-lg border border-rose-500/30 bg-rose-500/10 p-3 text-xs font-medium text-rose-600 dark:text-rose-400">
                <AlertTriangle className="h-4 w-4 shrink-0" />
                <span>{adminError}</span>
              </div>
            )}

            <form onSubmit={handleCreateAdminSubmit} className="mt-4 space-y-4">
              <div>
                <label className="mb-1 block text-xs font-semibold">Nome Completo *</label>
                <Input
                  value={newAdminData.name}
                  onChange={(e) => setNewAdminData({ ...newAdminData, name: e.target.value })}
                  placeholder="Ex: Carlos Eduardo"
                  required
                />
              </div>

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

              <div className="rounded-lg border bg-muted/40 p-3 text-xs text-muted-foreground">
                <span className="font-semibold text-foreground">🔒 Nota de Segurança:</span> A senha inicial será configurada por padrão e poderá ser alterada no primeiro acesso.
              </div>

              <div className="flex justify-end gap-2 border-t pt-4">
                <Button type="button" variant="secondary" onClick={() => setIsAdminModalOpen(false)}>
                  Cancelar
                </Button>
                <Button type="submit" disabled={isSaving} className="bg-blue-600 hover:bg-blue-500 text-white">
                  {isSaving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                  Cadastrar Operador
                </Button>
              </div>
            </form>
          </Card>
        </div>
      )}

      {/* Modal de Edição de SuperAdmin / Alteração de Senha */}
      {isAdminEditModalOpen && (
        <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-md p-6 shadow-2xl">
            <div className="flex items-center justify-between border-b pb-3">
              <h3 className="text-lg font-bold flex items-center gap-2">
                <ShieldCheck className="h-5 w-5 text-blue-600" /> Editar Administrador SaaS
              </h3>
              <Button variant="ghost" size="icon" onClick={() => setIsAdminEditModalOpen(false)}>
                <X className="h-5 w-5" />
              </Button>
            </div>

            {adminError && (
              <div className="mt-4 flex items-center gap-2 rounded-lg border border-rose-500/30 bg-rose-500/10 p-3 text-xs font-medium text-rose-600 dark:text-rose-400">
                <AlertTriangle className="h-4 w-4 shrink-0" />
                <span>{adminError}</span>
              </div>
            )}

            <form onSubmit={handleUpdateAdminSubmit} className="mt-4 space-y-4">
              <div>
                <label className="mb-1 block text-xs font-semibold">Nome Completo *</label>
                <Input
                  value={editAdminData.name}
                  onChange={(e) => setEditAdminData({ ...editAdminData, name: e.target.value })}
                  placeholder="Ex: Carlos Eduardo"
                  required
                />
              </div>

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

              <div>
                <label className="mb-1 block text-xs font-semibold">Nova Senha (deixe em branco para manter a atual)</label>
                <Input
                  type="password"
                  value={editAdminData.password}
                  onChange={(e) => setEditAdminData({ ...editAdminData, password: e.target.value })}
                  placeholder="Mínimo 6 caracteres"
                />
              </div>

              <div className="flex justify-end gap-2 border-t pt-4">
                <Button type="button" variant="secondary" onClick={() => setIsAdminEditModalOpen(false)}>
                  Cancelar
                </Button>
                <Button type="submit" disabled={isSaving} className="bg-blue-600 hover:bg-blue-500 text-white">
                  {isSaving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                  Salvar Alterações
                </Button>
              </div>
            </form>
          </Card>
        </div>
      )}

      {/* Modais do SuperAdmin de Licenças */}
      <TenantFormModal
        isOpen={isTenantModalOpen}
        onClose={() => setIsTenantModalOpen(false)}
        onSubmit={createTenant}
        isSaving={isSaving}
      />

      <BroadcastNotificationModal
        isOpen={isBroadcastModalOpen}
        onClose={() => setIsBroadcastModalOpen(false)}
        onSubmit={sendBroadcast}
        tenants={tenants}
        isSaving={isSaving}
      />

      <TenantDetailDrawer
        tenant={selectedTenant}
        onClose={() => setSelectedTenant(null)}
        onToggleStatus={toggleTenantStatus}
        onUpdateBilling={updateTenantBilling}
        isSaving={isSaving}
      />
    </div>
  );
}