'use client'

import { useState } from 'react'
import useSWR, { mutate } from 'swr'
import { Plus, MoreHorizontal, Eye, Settings, Power, Cpu, Trash2, Puzzle } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { DataTable } from '@/components/ui/data-table'
import { StatusBadge, AgentStatusBadge } from '@/components/ui/status-badge'
import { formatRelativeTime } from '@/lib/utils-ad'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { TenantFormModal } from './_components/tenant-form-modal'
import Link from 'next/link'
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog'
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
} from '@/components/ui/sheet'
import { Switch } from '@/components/ui/switch'
import { Label } from '@/components/ui/label'
import { arrayFetcher, apiFetch } from '@/lib/fetcher'
import { AVAILABLE_MODULES, type ModuleId } from '@/components/layout/sidebar'

function mapTenant(t: any) {
  return {
    id: String(t.id),
    name: t.name,
    domain: t.domain,
    status: t.status,
    agentStatus: t.agent_status ?? 'offline',
    agentHostname: t.agent_hostname ?? null,
    agentVersion: t.agent_version ?? null,
    lastAgentHeartbeat: t.last_heartbeat ?? null,
    usersCount: t.users_count ?? 0,
    groupsCount: t.groups_count ?? 0,
    allowGlobalAdminAccess: t.allow_global_admin_access !== 0,
    createdAt: t.created_at,
  }
}

export default function TenantsPage() {
  const { data: rawTenants = [], isLoading } = useSWR('/api/tenants', arrayFetcher, { refreshInterval: 15000 })
  const tenants = rawTenants.map(mapTenant)

  const [showForm, setShowForm] = useState(false)
  const [editingTenant, setEditingTenant] = useState<any | null>(null)
  const [deletingTenant, setDeletingTenant] = useState<any | null>(null)
  const [deleteError, setDeleteError] = useState<string | null>(null)
  const [moduleTenant, setModuleTenant] = useState<any | null>(null)
  const [savingModules, setSavingModules] = useState(false)

  function getEnabledModules(tenant: any): ModuleId[] {
    try {
      const raw = tenant?.enabled_modules
      if (!raw) return []
      const parsed = typeof raw === 'string' ? JSON.parse(raw) : raw
      return Array.isArray(parsed) ? parsed : []
    } catch { return [] }
  }

  async function handleToggleModule(moduleId: ModuleId, enabled: boolean) {
    if (!moduleTenant) return
    const current = getEnabledModules(moduleTenant)
    const next = enabled
      ? [...new Set([...current, moduleId])]
      : current.filter((m) => m !== moduleId)

    setSavingModules(true)
    const res = await apiFetch(`/api/tenants/${moduleTenant.id}/modules`, {
      method: 'PUT',
      body: JSON.stringify({ enabled_modules: next }),
    })
    if (res.ok) {
      const updated = await res.json()
      setModuleTenant({ ...moduleTenant, enabled_modules: updated.enabled_modules })
      mutate('/api/tenants')
    }
    setSavingModules(false)
  }

  async function handleDelete(id: string) {
    const res = await apiFetch(`/api/tenants/${id}`, { method: 'DELETE' })
    const data = await res.json()
    if (!res.ok) {
      setDeleteError(data.error ?? 'Erro ao excluir empresa.')
      return
    }
    setDeletingTenant(null)
    setDeleteError(null)
    mutate('/api/tenants')
  }

  async function handleToggle(id: string, currentStatus: string) {
    await apiFetch(`/api/tenants/${id}`, {
      method: 'PUT',
      body: JSON.stringify({ status: currentStatus === 'active' ? 'inactive' : 'active' }),
    })
    mutate('/api/tenants')
  }

  const columns = [
    {
      key: 'name',
      header: 'Empresa',
      render: (t: any) => (
        <div>
          <p className="font-medium text-foreground">{t.name}</p>
          <p className="text-xs text-muted-foreground">{t.domain}</p>
        </div>
      ),
    },
    {
      key: 'status',
      header: 'Status',
      render: (t: any) => <StatusBadge status={t.status} />,
      className: 'w-28',
    },
    {
      key: 'agent',
      header: 'Agente',
      render: (t: any) => (
        <div className="space-y-1">
          <AgentStatusBadge status={t.agentStatus} />
          {t.agentHostname && (
            <p className="text-xs text-muted-foreground">{t.agentHostname}</p>
          )}
        </div>
      ),
      className: 'w-36',
    },
    {
      key: 'heartbeat',
      header: 'Último Contato',
      render: (t: any) => (
        <span className="text-sm text-muted-foreground">
          {formatRelativeTime(t.lastAgentHeartbeat)}
        </span>
      ),
      className: 'w-36',
    },
    {
      key: 'version',
      header: 'Versão Agente',
      render: (t: any) => (
        <span className="text-sm text-muted-foreground font-mono">
          {t.agentVersion ?? '—'}
        </span>
      ),
      className: 'w-28',
    },
    {
      key: 'actions',
      header: '',
      render: (t: any) => (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" size="sm" className="w-8 h-8 p-0">
              <MoreHorizontal className="w-4 h-4" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuItem asChild>
              <Link href={`/tenants/${t.id}`}>
                <Eye className="w-4 h-4 mr-2" />
                Visualizar
              </Link>
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => { setEditingTenant(t); setShowForm(true) }}>
              <Settings className="w-4 h-4 mr-2" />
              Configurar
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => setModuleTenant(rawTenants.find((r: any) => r.id === t.id) ?? t)}>
              <Puzzle className="w-4 h-4 mr-2" />
              Módulos
            </DropdownMenuItem>
            <DropdownMenuItem asChild>
              <Link href={`/agent?tenant=${t.id}`}>
                <Cpu className="w-4 h-4 mr-2" />
                Gerenciar Agente
              </Link>
            </DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem
              onClick={() => handleToggle(t.id, t.status)}
              className={t.status === 'active' ? 'text-destructive' : 'text-green-600'}
            >
              <Power className="w-4 h-4 mr-2" />
              {t.status === 'active' ? 'Desativar' : 'Ativar'}
            </DropdownMenuItem>
            {t.status === 'inactive' && (
              <DropdownMenuItem
                onClick={() => { setDeleteError(null); setDeletingTenant(t) }}
                className="text-destructive focus:text-destructive"
              >
                <Trash2 className="w-4 h-4 mr-2" />
                Excluir empresa
              </DropdownMenuItem>
            )}
          </DropdownMenuContent>
        </DropdownMenu>
      ),
      className: 'w-12',
    },
  ]

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-xl font-bold text-foreground">Empresas</h2>
          <p className="text-sm text-muted-foreground">{tenants.length} empresa(s) cadastrada(s)</p>
        </div>
        <Button onClick={() => { setEditingTenant(null); setShowForm(true) }}>
          <Plus className="w-4 h-4 mr-2" />
          Nova Empresa
        </Button>
      </div>

      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
        {[
          { label: 'Total', value: tenants.length, color: 'text-foreground' },
          { label: 'Ativas', value: tenants.filter((t: any) => t.status === 'active').length, color: 'text-green-600' },
          { label: 'Online', value: tenants.filter((t: any) => t.agentStatus === 'online').length, color: 'text-green-600' },
          { label: 'Offline', value: tenants.filter((t: any) => t.agentStatus !== 'online').length, color: 'text-red-600' },
        ].map((s) => (
          <div key={s.label} className="bg-card border border-border rounded-xl p-4">
            <p className={`text-2xl font-bold ${s.color}`}>{s.value}</p>
            <p className="text-sm text-muted-foreground">{s.label}</p>
          </div>
        ))}
      </div>

      <div className="bg-card border border-border rounded-xl p-5">
        <DataTable
          data={tenants}
          columns={columns}
          searchPlaceholder="Pesquisar empresa, domínio..."
          searchKeys={['name', 'domain']}
          getRowKey={(t: any) => t.id}
          emptyMessage={isLoading ? 'Carregando...' : 'Nenhuma empresa encontrada.'}
        />
      </div>

      <TenantFormModal
        open={showForm}
        onClose={() => setShowForm(false)}
        onSuccess={() => { mutate('/api/tenants') }}
        tenant={editingTenant}
      />

      {/* Sheet de gestão de módulos */}
      <Sheet open={!!moduleTenant} onOpenChange={(open) => { if (!open) setModuleTenant(null) }}>
        <SheetContent>
          <SheetHeader>
            <SheetTitle>Módulos — {moduleTenant?.name}</SheetTitle>
            <SheetDescription>
              Ative ou desative os módulos disponíveis para esta empresa. Os menus do portal serão
              ajustados automaticamente para os usuários desta empresa.
            </SheetDescription>
          </SheetHeader>
          <div className="mt-6 space-y-4">
            {AVAILABLE_MODULES.map((mod) => {
              const enabled = getEnabledModules(moduleTenant).includes(mod.id)
              return (
                <div
                  key={mod.id}
                  className="flex items-start gap-4 p-4 rounded-lg border border-border bg-muted/30"
                >
                  <Switch
                    id={`mod-${mod.id}`}
                    checked={enabled}
                    disabled={savingModules}
                    onCheckedChange={(v) => handleToggleModule(mod.id, v)}
                  />
                  <div className="space-y-1">
                    <Label htmlFor={`mod-${mod.id}`} className="font-medium cursor-pointer">
                      {mod.label}
                    </Label>
                    <p className="text-xs text-muted-foreground">{mod.description}</p>
                  </div>
                </div>
              )
            })}
          </div>
        </SheetContent>
      </Sheet>

      <AlertDialog
        open={!!deletingTenant}
        onOpenChange={(open) => { if (!open) { setDeletingTenant(null); setDeleteError(null) } }}
      >
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Excluir empresa permanentemente?</AlertDialogTitle>
            <AlertDialogDescription>
              A empresa <strong>{deletingTenant?.name}</strong> e todos os seus usuários do portal
              serão removidos definitivamente. Esta ação não pode ser desfeita.
            </AlertDialogDescription>
          </AlertDialogHeader>
          {deleteError && (
            <p className="text-sm text-destructive px-1">{deleteError}</p>
          )}
          <AlertDialogFooter>
            <AlertDialogCancel>Cancelar</AlertDialogCancel>
            <AlertDialogAction
              className="bg-destructive hover:bg-destructive/90 text-white"
              onClick={() => deletingTenant && handleDelete(deletingTenant.id)}
            >
              Excluir permanentemente
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  )
}