'use client'

import { useState } from 'react'
import {
  Plus,
  MoreHorizontal,
  Eye,
  Edit,
  UserPlus,
  UserMinus,
  Shield,
  ChevronRight,
} from 'lucide-react'
import { Button } from '@/components/ui/button'
import { DataTable } from '@/components/ui/data-table'
import useSWR from 'swr'
import { formatRelativeTime } from '@/lib/utils-ad'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
  DialogDescription,
} from '@/components/ui/dialog'
import { apiFetch, arrayFetcher } from '@/lib/fetcher'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { useAuth } from '@/lib/auth-context'
import { cn } from '@/lib/utils'
import { OUTree } from '@/components/ad/ou-tree'

export default function ADGroupsPage() {
  const { user: portalUser } = useAuth()
  const [selectedOU, setSelectedOU] = useState<string | null>(null)

  // Árvore de OUs
  const { data: treeData } = useSWR('/api/ad/tree', (url: string) =>
    fetch(url, {
      headers: { Authorization: `Bearer ${typeof window !== 'undefined' ? sessionStorage.getItem('adm_token') ?? '' : ''}` },
    }).then((r) => (r.ok ? r.json() : { tree: [], tenantName: '', baseDn: '' })),
  )

  // Grupos filtrados por OU
  const ouParam = selectedOU ? `?ou=${encodeURIComponent(selectedOU)}` : ''
  const { data: rawGroups = [], isLoading, mutate: mutateGroups } = useSWR(
    `/api/ad/groups${ouParam}`,
    arrayFetcher,
    { refreshInterval: 30000 },
  )

  const groups = rawGroups.map((g: any) => ({
    id: String(g.id),
    tenantId: String(g.tenant_id),
    displayName: g.display_name,
    samAccountName: g.sam_account_name,
    description: g.description,
    ouPath: g.ou_path,
    scope: g.scope,
    type: g.group_type,
    memberCount: g.member_count ?? 0,
    syncStatus: g.sync_status,
    lastSyncAt: g.last_sync_at,
  }))

  const [showMembersModal, setShowMembersModal] = useState(false)
  const [selectedGroup, setSelectedGroup] = useState<any | null>(null)
  const [showCreateModal, setShowCreateModal] = useState(false)
  const [newGroupName, setNewGroupName] = useState('')
  const [newGroupDesc, setNewGroupDesc] = useState('')
  const [saving, setSaving] = useState(false)

  const { data: rawMembers = [], isLoading: loadingMembers, mutate: mutateMembers } = useSWR(
    selectedGroup ? `/api/ad/groups/${selectedGroup.id}/members` : null,
    arrayFetcher,
  )
  const groupMembers = rawMembers.map((m: any) => ({
    id: String(m.id),
    displayName: m.display_name,
    samAccount: m.sam_account,
    email: m.email,
  }))

  function openMembers(g: any) {
    setSelectedGroup(g)
    setShowMembersModal(true)
  }

  async function handleCreateGroup() {
    if (!newGroupName.trim()) return
    setSaving(true)
    await apiFetch('/api/ad/groups', {
      method: 'POST',
      body: JSON.stringify({
        sam_account_name: newGroupName.replace(/\s+/g, ''),
        display_name: newGroupName,
        description: newGroupDesc,
        ou_path: selectedOU ?? '',
        scope: 'global',
        group_type: 'security',
      }),
    })
    await mutateGroups()
    setSaving(false)
    setShowCreateModal(false)
    setNewGroupName('')
    setNewGroupDesc('')
  }

  async function handleRemoveMember(userId: string) {
    if (!selectedGroup) return
    await apiFetch(`/api/ad/groups/${selectedGroup.id}/members`, {
      method: 'DELETE',
      body: JSON.stringify({ user_id: userId }),
    })
    mutateMembers()
  }

  const canWrite = portalUser?.role !== 'tenant_viewer'

  const columns = [
    {
      key: 'name',
      header: 'Grupo',
      render: (g: any) => (
        <div>
          <p className="font-medium text-foreground">{g.displayName}</p>
          <p className="text-xs text-muted-foreground font-mono">{g.samAccountName}</p>
        </div>
      ),
    },
    {
      key: 'description',
      header: 'Descrição',
      render: (g: any) => (
        <span className="text-muted-foreground text-sm">{g.description || '—'}</span>
      ),
    },
    {
      key: 'ou',
      header: 'OU',
      render: (g: any) => (
        <span className="text-xs text-muted-foreground font-mono truncate max-w-[140px] block" title={g.ouPath ?? ''}>
          {g.ouPath ? g.ouPath.split(',')[0]?.replace(/^OU=/i, '') : '—'}
        </span>
      ),
      className: 'w-36',
    },
    {
      key: 'scope',
      header: 'Escopo / Tipo',
      render: (g: any) => (
        <div className="flex flex-col gap-0.5">
          <span className={cn(
            'inline-flex items-center text-xs font-medium px-2 py-0.5 rounded-full w-fit',
            g.scope === 'global' ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400' :
            g.scope === 'domain_local' ? 'bg-purple-100 text-purple-700' :
            'bg-gray-100 text-gray-700',
          )}>
            {g.scope === 'global' ? 'Global' : g.scope === 'domain_local' ? 'Dom. Local' : 'Universal'}
          </span>
          <span className={cn(
            'inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded-full w-fit',
            g.type === 'security' ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400' :
            'bg-green-100 text-green-700',
          )}>
            <Shield className="w-3 h-3" />
            {g.type === 'security' ? 'Segurança' : 'Distribuição'}
          </span>
        </div>
      ),
      className: 'w-36',
    },
    {
      key: 'memberCount',
      header: 'Membros',
      render: (g: any) => (
        <span className="text-foreground font-medium">{g.memberCount}</span>
      ),
      className: 'w-20',
    },
    {
      key: 'syncStatus',
      header: 'Sincronização',
      render: (g: any) => (
        <div>
          <span className={cn(
            'text-xs px-2 py-0.5 rounded-full font-medium',
            g.syncStatus === 'synced' ? 'bg-green-100 text-green-700' :
            g.syncStatus === 'pending' ? 'bg-yellow-100 text-yellow-700' :
            g.syncStatus === 'error' ? 'bg-red-100 text-red-700' :
            'bg-gray-100 text-gray-600',
          )}>
            {g.syncStatus === 'synced' ? 'Sincronizado' :
             g.syncStatus === 'pending' ? 'Pendente' :
             g.syncStatus === 'error' ? 'Erro' : 'Não sincronizado'}
          </span>
          {g.lastSyncAt && (
            <p className="text-xs text-muted-foreground mt-0.5">{formatRelativeTime(g.lastSyncAt)}</p>
          )}
        </div>
      ),
      className: 'w-36',
    },
    {
      key: 'actions',
      header: '',
      render: (g: any) => (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" size="icon" className="h-8 w-8">
              <MoreHorizontal className="w-4 h-4" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuItem onClick={() => openMembers(g)}>
              <Eye className="w-4 h-4 mr-2" />
              Ver membros
            </DropdownMenuItem>
            {canWrite && (
              <DropdownMenuItem>
                <Edit className="w-4 h-4 mr-2" />
                Editar grupo
              </DropdownMenuItem>
            )}
          </DropdownMenuContent>
        </DropdownMenu>
      ),
      className: 'w-12',
    },
  ]

  const selectedOULabel = selectedOU
    ? selectedOU.split(',')[0]?.replace(/^OU=/i, '') ?? selectedOU
    : treeData?.tenantName ?? 'Todos'

  return (
    <div className="flex gap-0 h-[calc(100vh-8rem)]">
      {/* Painel lateral — árvore de OUs */}
      <aside className="w-56 shrink-0 border-r border-border bg-card flex flex-col">
        <div className="px-3 pt-4 pb-2">
          <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
            Estrutura do AD
          </p>
        </div>
        <div className="flex-1 overflow-y-auto px-2 pb-4">
          {treeData ? (
            <OUTree
              tree={treeData.tree}
              tenantName={treeData.tenantName}
              baseDn={treeData.baseDn}
              selectedOU={selectedOU}
              onSelect={setSelectedOU}
              mode="groups"
            />
          ) : (
            <div className="space-y-1.5 mt-2">
              {[1, 2, 3, 4].map((i) => (
                <div key={i} className="h-7 rounded-md bg-muted animate-pulse" style={{ width: `${60 + i * 8}%` }} />
              ))}
            </div>
          )}
        </div>
      </aside>

      {/* Conteúdo principal */}
      <div className="flex-1 overflow-y-auto px-6 py-5 space-y-5">
        <div className="flex items-center justify-between gap-4">
          <div>
            <div className="flex items-center gap-1.5 text-xs text-muted-foreground mb-1">
              <span>Grupos AD</span>
              <ChevronRight className="w-3 h-3" />
              <span className="text-foreground font-medium">{selectedOULabel}</span>
            </div>
            <h2 className="text-xl font-bold text-foreground leading-tight">Grupos do Active Directory</h2>
            <p className="text-sm text-muted-foreground">
              {groups.length} grupo(s) {selectedOU ? 'nesta OU' : 'no total'}
            </p>
          </div>
          {canWrite && (
            <Button onClick={() => setShowCreateModal(true)}>
              <Plus className="w-4 h-4 mr-2" />
              Novo Grupo
            </Button>
          )}
        </div>

        <div className="bg-card border border-border rounded-xl p-4">
          <DataTable
            columns={columns}
            data={groups}
            isLoading={isLoading}
            emptyMessage="Nenhum grupo encontrado nesta OU."
            searchable
            searchPlaceholder="Buscar grupos..."
            searchKeys={['displayName', 'samAccountName', 'description']}
          />
        </div>
      </div>

      {/* Modal de membros */}
      <Dialog open={showMembersModal} onOpenChange={setShowMembersModal}>
        <DialogContent className="max-w-2xl">
          <DialogHeader>
            <DialogTitle>Membros — {selectedGroup?.displayName}</DialogTitle>
            <DialogDescription>{groupMembers.length} membro(s) neste grupo</DialogDescription>
          </DialogHeader>
          <div className="max-h-80 overflow-y-auto space-y-2">
            {loadingMembers && (
              <p className="text-sm text-muted-foreground text-center py-4">Carregando...</p>
            )}
            {!loadingMembers && groupMembers.length === 0 && (
              <p className="text-sm text-muted-foreground text-center py-4">Nenhum membro neste grupo.</p>
            )}
            {groupMembers.map((u: any) => (
              <div key={u.id} className="flex items-center justify-between p-3 rounded-lg bg-muted/30 border border-border">
                <div>
                  <p className="text-sm font-medium text-foreground">{u.displayName}</p>
                  <p className="text-xs text-muted-foreground">{u.email || u.samAccount}</p>
                </div>
                {canWrite && (
                  <Button
                    variant="ghost"
                    size="sm"
                    className="text-destructive hover:text-destructive"
                    onClick={() => handleRemoveMember(u.id)}
                  >
                    <UserMinus className="w-4 h-4 mr-1.5" />
                    Remover
                  </Button>
                )}
              </div>
            ))}
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowMembersModal(false)}>Fechar</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Modal de criação */}
      <Dialog open={showCreateModal} onOpenChange={setShowCreateModal}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Novo Grupo AD</DialogTitle>
            <DialogDescription>
              {selectedOU
                ? `Será criado em: ${selectedOU.split(',')[0]?.replace(/^OU=/i, '')}`
                : 'O grupo será criado no Active Directory via agente.'}
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4">
            <div>
              <Label htmlFor="gname">Nome do grupo *</Label>
              <Input
                id="gname"
                value={newGroupName}
                onChange={(e) => setNewGroupName(e.target.value)}
                placeholder="Ex: GRP_TI_Admins"
                className="mt-1"
              />
            </div>
            <div>
              <Label htmlFor="gdesc">Descrição</Label>
              <Input
                id="gdesc"
                value={newGroupDesc}
                onChange={(e) => setNewGroupDesc(e.target.value)}
                placeholder="Descrição do grupo"
                className="mt-1"
              />
            </div>
            {selectedOU && (
              <div className="p-3 rounded-lg bg-muted/50 border border-border">
                <p className="text-xs text-muted-foreground">
                  OU de destino: <code className="font-mono text-foreground">{selectedOU}</code>
                </p>
              </div>
            )}
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowCreateModal(false)}>Cancelar</Button>
            <Button onClick={handleCreateGroup} disabled={!newGroupName.trim() || saving}>
              {saving ? 'Criando...' : 'Criar Grupo'}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}