'use client'

import { useState, useEffect } from 'react'
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Switch } from '@/components/ui/switch'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { RefreshCw, Copy } from 'lucide-react'
import { generatePassword, suggestUPN } from '@/lib/utils-ad'
import type { ADUser } from '@/lib/types'
import { Checkbox } from '@/components/ui/checkbox'
import useSWR from 'swr'
import { arrayFetcher } from '@/lib/fetcher'

interface ADUserFormModalProps {
  open: boolean
  onClose: () => void
  user?: ADUser | null
  tenantId: string
  upnSuffix: string
  defaultOU: string
}

export function ADUserFormModal({
  open,
  onClose,
  user,
  tenantId,
  upnSuffix,
  defaultOU,
}: ADUserFormModalProps) {
  const isEdit = !!user

  const [form, setForm] = useState({
    firstName: '',
    lastName: '',
    upn: '',
    samAccountName: '',
    displayName: '',
    email: '',
    department: '',
    title: '',
    phone: '',
    ou: defaultOU,
    password: '',
    mustChangePassword: true,
    cannotChangePassword: false,
    passwordNeverExpires: false,
    enabled: true,
    selectedGroups: [] as string[],
  })

  const [showPassword, setShowPassword] = useState(false)
  const [copiedPassword, setCopiedPassword] = useState(false)
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    if (user) {
      setForm({
        firstName: user.firstName,
        lastName: user.lastName,
        upn: user.upn,
        samAccountName: user.samAccountName,
        displayName: user.displayName,
        email: user.email,
        department: user.department ?? '',
        title: (user as any).title ?? '',
        phone: user.phone ?? '',
        ou: user.ou ?? '',
        password: '',
        mustChangePassword: user.mustChangePassword,
        cannotChangePassword: user.cannotChangePassword,
        passwordNeverExpires: user.passwordNeverExpires,
        enabled: user.enabled,
        selectedGroups: Array.isArray(user.groups) ? user.groups : [],
      })
    } else {
      const pwd = generatePassword()
      setForm({
        firstName: '',
        lastName: '',
        upn: '',
        samAccountName: '',
        displayName: '',
        email: '',
        department: '',
        title: '',
        phone: '',
        ou: defaultOU,
        password: pwd,
        mustChangePassword: true,
        cannotChangePassword: false,
        passwordNeverExpires: false,
        enabled: true,
        selectedGroups: [],
      })
    }
  }, [user, open, defaultOU])

  function updateName(field: 'firstName' | 'lastName', value: string) {
    const updated = { ...form, [field]: value }
    if (!isEdit) {
      const firstName = field === 'firstName' ? value : form.firstName
      const lastName = field === 'lastName' ? value : form.lastName
      if (firstName && lastName) {
        const suggestedUpn = suggestUPN(firstName, lastName, upnSuffix)
        const sam = suggestedUpn.split('@')[0].slice(0, 20)
        updated.upn = suggestedUpn
        updated.samAccountName = sam
        updated.displayName = `${firstName} ${lastName}`
        updated.email = suggestedUpn
      }
    }
    setForm(updated)
  }

  function regeneratePassword() {
    setForm((p) => ({ ...p, password: generatePassword() }))
  }

  function copyPassword() {
    navigator.clipboard.writeText(form.password)
    setCopiedPassword(true)
    setTimeout(() => setCopiedPassword(false), 2000)
  }

  function toggleGroup(g: string) {
    setForm((p) => ({
      ...p,
      selectedGroups: p.selectedGroups.includes(g)
        ? p.selectedGroups.filter((x) => x !== g)
        : [...p.selectedGroups, g],
    }))
  }

  async function handleSubmit() {
    setError(null)
    if (!form.upn || !form.samAccountName) {
      setError('UPN e sAMAccountName são obrigatórios.')
      return
    }
    if (!isEdit && !form.password) {
      setError('Senha inicial é obrigatória.')
      return
    }

    setSaving(true)
    try {
      const token = typeof window !== 'undefined' ? sessionStorage.getItem('adm_token') ?? '' : ''
      const headers: Record<string, string> = {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${token}`,
      }

      const payload = {
        first_name: form.firstName,
        last_name: form.lastName,
        upn: form.upn,
        sam_account_name: form.samAccountName,
        display_name: form.displayName || `${form.firstName} ${form.lastName}`.trim(),
        email: form.email || null,
        department: form.department || null,
        title: form.title || null,
        phone: form.phone || null,
        distinguished_name: form.ou || null,
        enabled: form.enabled,
        password_never_expires: form.passwordNeverExpires,
        must_change_password: form.mustChangePassword,
        cannot_change_password: form.cannotChangePassword,
        ...(form.password ? { password: form.password } : {}),
        groups: form.selectedGroups,
        tenant_id: tenantId,
      }

      const res = await fetch(
        isEdit ? `/api/ad/users/${user!.id}` : '/api/ad/users',
        { method: isEdit ? 'PUT' : 'POST', headers, body: JSON.stringify(payload) },
      )

      if (!res.ok) {
        const data = await res.json().catch(() => ({}))
        setError(data.error ?? 'Erro ao salvar usuário.')
        return
      }

      onClose()
    } catch {
      setError('Erro de conexão com o servidor.')
    } finally {
      setSaving(false)
    }
  }

  const { data: tenantGroups = [] } = useSWR(
    open && tenantId ? '/api/ad/groups' : null,
    arrayFetcher,
  )

  return (
    <Dialog open={open} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>{isEdit ? 'Editar Usuário AD' : 'Criar Usuário AD'}</DialogTitle>
          <DialogDescription>
            {isEdit ? 'Edite os atributos do usuário no Active Directory.' : 'Preencha os dados para criar um novo usuário no Active Directory.'}
          </DialogDescription>
        </DialogHeader>

        <Tabs defaultValue="info">
          <TabsList className="mb-4">
            <TabsTrigger value="info">Dados pessoais</TabsTrigger>
            <TabsTrigger value="account">Conta</TabsTrigger>
            <TabsTrigger value="groups">Grupos</TabsTrigger>
          </TabsList>

          {/* Tab: Dados pessoais */}
          <TabsContent value="info" className="space-y-4 mt-0">
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label>Primeiro nome *</Label>
                <Input
                  value={form.firstName}
                  onChange={(e) => updateName('firstName', e.target.value)}
                  placeholder="João"
                />
              </div>
              <div className="space-y-2">
                <Label>Sobrenome *</Label>
                <Input
                  value={form.lastName}
                  onChange={(e) => updateName('lastName', e.target.value)}
                  placeholder="da Silva"
                />
              </div>
              <div className="col-span-2 space-y-2">
                <Label>Nome de exibição</Label>
                <Input
                  value={form.displayName}
                  onChange={(e) => setForm((p) => ({ ...p, displayName: e.target.value }))}
                  placeholder="João da Silva"
                />
              </div>
              <div className="space-y-2">
                <Label>Cargo / Título</Label>
                <Input
                  value={form.title}
                  onChange={(e) => setForm((p) => ({ ...p, title: e.target.value }))}
                  placeholder="Analista de TI"
                />
              </div>
              <div className="space-y-2">
                <Label>Departamento</Label>
                <Input
                  value={form.department}
                  onChange={(e) => setForm((p) => ({ ...p, department: e.target.value }))}
                  placeholder="Tecnologia da Informação"
                />
              </div>
              <div className="space-y-2">
                <Label>Telefone</Label>
                <Input
                  value={form.phone}
                  onChange={(e) => setForm((p) => ({ ...p, phone: e.target.value }))}
                  placeholder="+55 11 99999-0000"
                />
              </div>
              <div className="space-y-2">
                <Label>E-mail</Label>
                <Input
                  value={form.email}
                  onChange={(e) => setForm((p) => ({ ...p, email: e.target.value }))}
                  placeholder="joao.silva@empresa.local"
                  className="font-mono text-sm"
                />
              </div>
            </div>
          </TabsContent>

          {/* Tab: Conta */}
          <TabsContent value="account" className="space-y-4 mt-0">
            <div className="grid grid-cols-2 gap-4">
              <div className="col-span-2 space-y-2">
                <Label>UPN (User Principal Name) *</Label>
                <Input
                  value={form.upn}
                  onChange={(e) => setForm((p) => ({ ...p, upn: e.target.value }))}
                  placeholder={`joao.silva@${upnSuffix}`}
                  className="font-mono text-sm"
                />
              </div>
              <div className="space-y-2">
                <Label>sAMAccountName *</Label>
                <Input
                  value={form.samAccountName}
                  onChange={(e) => setForm((p) => ({ ...p, samAccountName: e.target.value }))}
                  placeholder="joao.silva"
                  className="font-mono text-sm"
                />
              </div>
              <div className="space-y-2">
                <Label>OU de destino *</Label>
                <Input
                  value={form.ou}
                  onChange={(e) => setForm((p) => ({ ...p, ou: e.target.value }))}
                  placeholder="OU=Usuarios,DC=empresa,DC=local"
                  className="font-mono text-xs"
                />
              </div>

              {/* Senha */}
              <div className="col-span-2 space-y-2">
                <Label>{isEdit ? 'Nova senha (deixar em branco para manter)' : 'Senha inicial *'}</Label>
                <div className="flex gap-2">
                  <div className="relative flex-1">
                    <Input
                      type={showPassword ? 'text' : 'password'}
                      value={form.password}
                      onChange={(e) => setForm((p) => ({ ...p, password: e.target.value }))}
                      className="font-mono pr-20"
                    />
                    <button
                      type="button"
                      onClick={() => setShowPassword((s) => !s)}
                      className="absolute right-2 top-1/2 -translate-y-1/2 text-xs text-muted-foreground hover:text-foreground px-2"
                    >
                      {showPassword ? 'Ocultar' : 'Mostrar'}
                    </button>
                  </div>
                  <Button type="button" variant="outline" size="sm" onClick={regeneratePassword} title="Gerar nova senha">
                    <RefreshCw className="w-4 h-4" />
                  </Button>
                  <Button type="button" variant="outline" size="sm" onClick={copyPassword} title="Copiar senha">
                    <Copy className="w-4 h-4" />
                    {copiedPassword && <span className="ml-1 text-xs text-green-600">Copiado</span>}
                  </Button>
                </div>
              </div>

              {/* Opções de conta */}
              <div className="col-span-2 space-y-3 pt-2 border-t border-border">
                <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Opções de conta</p>
                {[
                  { id: 'enabled', label: 'Conta habilitada' },
                  { id: 'mustChangePassword', label: 'Usuário deve alterar senha no próximo logon' },
                  { id: 'cannotChangePassword', label: 'Usuário não pode alterar a senha' },
                  { id: 'passwordNeverExpires', label: 'Senha nunca expira' },
                ].map((opt) => (
                  <div key={opt.id} className="flex items-center gap-3">
                    <Switch
                      id={`opt-${opt.id}`}
                      checked={form[opt.id as keyof typeof form] as boolean}
                      onCheckedChange={(v) => setForm((p) => ({ ...p, [opt.id]: v }))}
                    />
                    <Label htmlFor={`opt-${opt.id}`} className="text-sm cursor-pointer">{opt.label}</Label>
                  </div>
                ))}
              </div>
            </div>
          </TabsContent>

          {/* Tab: Grupos */}
          <TabsContent value="groups" className="space-y-4 mt-0">
            <p className="text-sm text-muted-foreground">
              Selecione os grupos do Active Directory para adicionar este usuário.
            </p>
            <div className="space-y-2 rounded-lg border border-border p-4 max-h-72 overflow-y-auto">
              {tenantGroups.length === 0 ? (
                <p className="text-sm text-muted-foreground text-center py-4">
                  Nenhum grupo disponível. Execute uma sincronização primeiro.
                </p>
              ) : tenantGroups.map((g) => (
                <div key={g.id} className="flex items-start gap-3 py-1">
                  <Checkbox
                    id={`grp-${g.id}`}
                    checked={form.selectedGroups.includes(g.samAccountName)}
                    onCheckedChange={() => toggleGroup(g.samAccountName)}
                    disabled={g.protected}
                  />
                  <div>
                    <Label htmlFor={`grp-${g.id}`} className="text-sm cursor-pointer font-medium">
                      {g.displayName}
                    </Label>
                    {g.description && (
                      <p className="text-xs text-muted-foreground">{g.description}</p>
                    )}
                    {g.protected && (
                      <p className="text-xs text-destructive">Grupo protegido</p>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </TabsContent>
        </Tabs>

        {error && (
          <p className="text-sm text-destructive px-1">{error}</p>
        )}
        <DialogFooter>
          <Button variant="outline" onClick={onClose} disabled={saving}>Cancelar</Button>
          <Button onClick={handleSubmit} disabled={saving}>
            {saving ? 'Salvando...' : isEdit ? 'Salvar Alterações' : 'Criar Usuário'}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}