'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 {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { Checkbox } from '@/components/ui/checkbox'
import type { PortalUser } from '@/lib/types'
import useSWR from 'swr'
import { arrayFetcher } from '@/lib/fetcher'

const MODULES = [
  { id: 'users', label: 'Gerenciar Usuários AD' },
  { id: 'groups', label: 'Gerenciar Grupos AD' },
  { id: 'sync', label: 'Sincronização' },
  { id: 'audit', label: 'Auditoria' },
  { id: 'config', label: 'Configurações do Tenant' },
]

interface PortalUserFormModalProps {
  open: boolean
  onClose: () => void
  user?: PortalUser | null
}

export function PortalUserFormModal({ open, onClose, user }: PortalUserFormModalProps) {
  const isEdit = !!user
  const { data: tenantsList = [] } = useSWR('/api/tenants', arrayFetcher)

  const [form, setForm] = useState({
    name: '',
    email: '',
    role: 'tenant_operator',
    tenantId: '',
    password: '',
    permissions: [] as string[],
  })

  useEffect(() => {
    if (user) {
      setForm({
        name: user.name,
        email: user.email,
        role: user.role,
        tenantId: user.tenantId ?? '',
        password: '',
        permissions: user.permissions?.map((p) => p.module) ?? [],
      })
    } else {
      setForm({ name: '', email: '', role: 'tenant_operator', tenantId: '', password: '', permissions: [] })
    }
  }, [user])

  function togglePermission(id: string) {
    setForm((prev) => ({
      ...prev,
      permissions: prev.permissions.includes(id)
        ? prev.permissions.filter((p) => p !== id)
        : [...prev.permissions, id],
    }))
  }

  return (
    <Dialog open={open} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-lg">
        <DialogHeader>
          <DialogTitle>{isEdit ? 'Editar Usuário do Portal' : 'Novo Usuário do Portal'}</DialogTitle>
          <DialogDescription>
            {isEdit ? 'Atualize os dados e permissões do usuário.' : 'Preencha os dados para criar um novo acesso ao portal.'}
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-5">
          <div className="grid grid-cols-2 gap-4">
            <div className="col-span-2 space-y-2">
              <Label>Nome completo *</Label>
              <Input
                value={form.name}
                onChange={(e) => setForm((p) => ({ ...p, name: e.target.value }))}
                placeholder="João da Silva"
              />
            </div>
            <div className="col-span-2 space-y-2">
              <Label>E-mail *</Label>
              <Input
                type="email"
                value={form.email}
                onChange={(e) => setForm((p) => ({ ...p, email: e.target.value }))}
                placeholder="joao@empresa.com"
              />
            </div>

            <div className="space-y-2">
              <Label>Perfil *</Label>
              <Select value={form.role} onValueChange={(v) => setForm((p) => ({ ...p, role: v }))}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="admin_global">Admin Global</SelectItem>
                  <SelectItem value="tenant_admin">Admin do Tenant</SelectItem>
                  <SelectItem value="tenant_operator">Operador</SelectItem>
                  <SelectItem value="tenant_viewer">Visualizador</SelectItem>
                </SelectContent>
              </Select>
            </div>

            {form.role !== 'admin_global' && (
              <div className="space-y-2">
                <Label>Empresa *</Label>
                <Select value={form.tenantId} onValueChange={(v) => setForm((p) => ({ ...p, tenantId: v }))}>
                  <SelectTrigger>
                    <SelectValue placeholder="Selecione..." />
                  </SelectTrigger>
                  <SelectContent>
                    {tenantsList.map((t: any) => (
                      <SelectItem key={t.id} value={String(t.id)}>{t.name}</SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            )}

            <div className="col-span-2 space-y-2">
              <Label>{isEdit ? 'Nova senha (deixe em branco para manter)' : 'Senha temporária *'}</Label>
              <Input
                type="password"
                value={form.password}
                onChange={(e) => setForm((p) => ({ ...p, password: e.target.value }))}
                placeholder="••••••••"
              />
            </div>
          </div>

          {/* Permissões granulares */}
          <div className="space-y-3">
            <Label className="text-sm font-semibold">Permissões de acesso</Label>
            <div className="space-y-2 rounded-lg border border-border p-4">
              {MODULES.map((m) => (
                <div key={m.id} className="flex items-center gap-3">
                  <Checkbox
                    id={`perm-${m.id}`}
                    checked={form.permissions.includes(m.id)}
                    onCheckedChange={() => togglePermission(m.id)}
                  />
                  <Label htmlFor={`perm-${m.id}`} className="text-sm cursor-pointer">
                    {m.label}
                  </Label>
                </div>
              ))}
            </div>
            <p className="text-xs text-muted-foreground">
              Admin Global e Admin do Tenant têm acesso total automaticamente.
            </p>
          </div>
        </div>

        <DialogFooter>
          <Button variant="outline" onClick={onClose}>Cancelar</Button>
          <Button onClick={onClose}>{isEdit ? 'Salvar' : 'Criar Usuário'}</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}