'use client'

import { useState } from 'react'
import {
  Plus,
  MoreHorizontal,
  Eye,
  Edit,
  KeyRound,
  Power,
  Copy,
  UsersRound,
  UserX,
  UserCheck,
  RefreshCw,
  ChevronRight,
} from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { DataTable } from '@/components/ui/data-table'
import { ConfirmActionModal } from '@/components/ui/confirm-action-modal'
import useSWR from 'swr'
import { formatRelativeTime, generatePassword } from '@/lib/utils-ad'
import { apiFetch, arrayFetcher } from '@/lib/fetcher'
import type { ADUser } from '@/lib/types'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from '@/components/ui/dialog'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { ADUserFormModal } from './_components/ad-user-form-modal'
import { useAuth } from '@/lib/auth-context'
import Link from 'next/link'
import { cn } from '@/lib/utils'
import { OUTree } from '@/components/ad/ou-tree'

export default function ADUsersPage() {
  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: '' })),
  )

  // Usuários filtrados por OU
  const ouParam = selectedOU ? `&ou=${encodeURIComponent(selectedOU)}` : ''
  const { data: rawUsers = [], isLoading, mutate: mutateUsers } = useSWR(
    `/api/ad/users?${ouParam}`,
    arrayFetcher,
    { refreshInterval: 15000 },
  )

  const users: ADUser[] = rawUsers.map((u: any) => ({
    id: String(u.id),
    tenantId: String(u.tenant_id),
    samAccountName: u.sam_account_name,
    upn: u.upn ?? '',
    displayName: u.display_name ?? `${u.first_name ?? ''} ${u.last_name ?? ''}`.trim(),
    firstName: u.first_name ?? '',
    lastName: u.last_name ?? '',
    email: u.email ?? '',
    department: u.department ?? null,
    title: u.title ?? null,
    phone: u.phone ?? null,
    ou: u.distinguished_name ?? u.ou ?? '',
    groups: Array.isArray(u.groups) ? u.groups : [],
    enabled: !!u.enabled,
    passwordNeverExpires: !!u.password_never_expires,
    mustChangePassword: !!u.must_change_password,
    cannotChangePassword: !!u.cannot_change_password,
    lastSync: u.last_sync ?? u.updated_at ?? '',
    createdAt: u.created_at ?? '',
  }))

  const [showForm, setShowForm] = useState(false)
  const [editingUser, setEditingUser] = useState<ADUser | null>(null)
  const [resetTarget, setResetTarget] = useState<ADUser | null>(null)
  const [newPassword, setNewPassword] = useState('')
  const [showResetPassword, setShowResetPassword] = useState(false)
  const [resetLoading, setResetLoading] = useState(false)
  const [toggleTarget, setToggleTarget] = useState<ADUser | null>(null)
  const [showConfirm, setShowConfirm] = useState(false)
  const [toggleLoading, setToggleLoading] = useState(false)

  function openReset(u: ADUser) {
    setResetTarget(u)
    setNewPassword(generatePassword())
    setShowResetPassword(true)
  }

  function openToggle(u: ADUser) {
    setToggleTarget(u)
    setShowConfirm(true)
  }

  async function handleToggle() {
    if (!toggleTarget) return
    setToggleLoading(true)
    await apiFetch(`/api/ad/users/${toggleTarget.id}/toggle-enabled`, { method: 'POST' })
    await mutateUsers()
    setToggleLoading(false)
    setShowConfirm(false)
    setToggleTarget(null)
  }

  async function handleResetPassword() {
    if (!resetTarget || !newPassword) return
    setResetLoading(true)
    await apiFetch(`/api/ad/users/${resetTarget.id}/reset-password`, {
      method: 'POST',
      body: JSON.stringify({ new_password: newPassword, must_change: true }),
    })
    setResetLoading(false)
    setShowResetPassword(false)
  }

  const columns = [
    {
      key: 'user',
      header: 'Usuário',
      render: (u: ADUser) => (
        <div className="flex items-center gap-3">
          <div className={cn(
            'w-8 h-8 rounded-full flex items-center justify-center shrink-0 text-xs font-bold',
            u.enabled ? 'bg-primary/10 text-primary' : 'bg-muted text-muted-foreground',
          )}>
            {u.displayName.slice(0, 2).toUpperCase()}
          </div>
          <div>
            <p className="font-medium text-foreground">{u.displayName}</p>
            <p className="text-xs text-muted-foreground font-mono">{u.samAccountName}</p>
          </div>
        </div>
      ),
    },
    {
      key: 'upn',
      header: 'E-mail',
      render: (u: ADUser) => (
        <span className="text-sm text-muted-foreground font-mono text-xs">{u.email ?? '—'}</span>
      ),
    },
    {
      key: 'dept',
      header: 'Depto / Cargo',
      render: (u: ADUser) => (
          <div>
          <p className="text-sm text-foreground">{u.department ?? '—'}</p>
          <p className="text-xs text-muted-foreground">{u.title ?? ''}</p>
        </div>
      ),
      className: 'w-40',
    },
    {
      key: 'ou',
      header: 'OU',
      render: (u: ADUser) => (
        <span className="text-xs text-muted-foreground font-mono truncate max-w-[160px] block" title={u.ou ?? ''}>
          {u.ou ? u.ou.split(',')[0]?.replace(/^OU=/i, '') : '—'}
        </span>
      ),
      className: 'w-36',
    },
    {
      key: 'status',
      header: 'Status',
      render: (u: ADUser) => (
        <span className={cn(
          'inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium',
          u.enabled ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-600',
        )}>
          {u.enabled ? 'Habilitado' : 'Desabilitado'}
        </span>
      ),
      className: 'w-32',
    },
    {
      key: 'sync',
      header: 'Última sinc.',
      render: (u: ADUser) => (
        <span className="text-xs text-muted-foreground">{formatRelativeTime(u.lastSync)}</span>
      ),
      className: 'w-28',
    },
    {
      key: 'actions',
      header: '',
      render: (u: ADUser) => (
        <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={`/ad/users/${u.id}`}>
                <Eye className="w-4 h-4 mr-2" />
                Visualizar
              </Link>
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => { setEditingUser(u); setShowForm(true) }}>
              <Edit className="w-4 h-4 mr-2" />
              Editar
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => openReset(u)}>
              <KeyRound className="w-4 h-4 mr-2" />
              Redefinir senha
            </DropdownMenuItem>
            <DropdownMenuItem>
              <UsersRound className="w-4 h-4 mr-2" />
              Gerenciar grupos
            </DropdownMenuItem>
            <DropdownMenuItem>
              <Copy className="w-4 h-4 mr-2" />
              Clonar usuário
            </DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem
              onClick={() => openToggle(u)}
              className={u.enabled ? 'text-destructive' : 'text-green-600'}
            >
              {u.enabled ? (
                <><UserX className="w-4 h-4 mr-2" />Desabilitar</>
              ) : (
                <><UserCheck className="w-4 h-4 mr-2" />Habilitar</>
              )}
            </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="users"
            />
          ) : (
            <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>Usuários 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">
              Usuários do Active Directory
            </h2>
            <p className="text-sm text-muted-foreground">
              {users.length} usuário(s) {selectedOU ? 'nesta OU' : 'no total'}
            </p>
          </div>
          <Button onClick={() => { setEditingUser(null); setShowForm(true) }}>
            <Plus className="w-4 h-4 mr-2" />
            Criar Usuário
          </Button>
        </div>

        {/* Cards de status */}
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
          {[
            { label: 'Total', value: users.length, color: 'text-foreground' },
            { label: 'Habilitados', value: users.filter((u) => u.enabled).length, color: 'text-green-600' },
            { label: 'Desabilitados', value: users.filter((u) => !u.enabled).length, color: 'text-muted-foreground' },
            { label: 'Troca de senha', value: users.filter((u: any) => u.mustChangePassword).length, color: 'text-yellow-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-4">
          <DataTable
            data={users}
            columns={columns}
            searchPlaceholder="Pesquisar por nome, e-mail, sAMAccountName..."
            searchKeys={['displayName', 'email', 'samAccountName', 'department']}
            getRowKey={(u) => u.id}
            emptyMessage="Nenhum usuário encontrado nesta OU."
            isLoading={isLoading}
          />
        </div>
      </div>

      {/* Modal criar/editar */}
      <ADUserFormModal
        open={showForm}
        onClose={() => { setShowForm(false); mutateUsers() }}
        user={editingUser}
        tenantId={portalUser?.tenantId ?? ''}
        upnSuffix={''}
        defaultOU={selectedOU ?? ''}
      />

      {/* Modal redefinir senha */}
      <Dialog open={showResetPassword} onOpenChange={setShowResetPassword}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <KeyRound className="w-5 h-5 text-primary" />
              Redefinir Senha
            </DialogTitle>
            <DialogDescription>
              Define uma nova senha para o usuário no Active Directory.
            </DialogDescription>
          </DialogHeader>
          {resetTarget && (
            <div className="space-y-4">
              <p className="text-sm text-muted-foreground">
                Redefina a senha para{' '}
                <span className="font-medium text-foreground">{resetTarget.displayName}</span>.
              </p>
              <div className="space-y-2">
                <Label>Nova senha</Label>
                <div className="flex gap-2">
                  <Input
                    value={newPassword}
                    onChange={(e) => setNewPassword(e.target.value)}
                    className="font-mono"
                  />
                  <Button variant="outline" size="sm" onClick={() => setNewPassword(generatePassword())}>
                    <RefreshCw className="w-4 h-4" />
                  </Button>
                  <Button variant="outline" size="sm" onClick={() => navigator.clipboard.writeText(newPassword)}>
                    <Copy className="w-4 h-4" />
                  </Button>
                </div>
              </div>
              <p className="text-xs text-muted-foreground">
                Esta ação ficará registrada na auditoria.
              </p>
            </div>
          )}
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowResetPassword(false)}>Cancelar</Button>
            <Button onClick={handleResetPassword} disabled={resetLoading}>
              {resetLoading ? 'Redefinindo...' : 'Redefinir Senha'}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <ConfirmActionModal
        open={showConfirm}
        onClose={() => setShowConfirm(false)}
        onConfirm={handleToggle}
        title={toggleTarget?.enabled ? 'Desabilitar conta' : 'Habilitar conta'}
        description={
          toggleTarget?.enabled
            ? 'A conta será desabilitada no Active Directory. O usuário perderá acesso a todos os recursos.'
            : 'A conta será habilitada no Active Directory. O usuário recuperará acesso aos recursos.'
        }
        objectName={toggleTarget?.displayName ?? ''}
        changeSummary={`${toggleTarget?.enabled ? 'Desabilitar' : 'Habilitar'} conta: ${toggleTarget?.samAccountName}`}
        confirmLabel={toggleTarget?.enabled ? 'Desabilitar conta' : 'Habilitar conta'}
        variant={toggleTarget?.enabled ? 'destructive' : 'default'}
      />
    </div>
  )
}