'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 { apiFetch } from '@/lib/fetcher'
import { Separator } from '@/components/ui/separator'
import { AlertCircle } from 'lucide-react'
import type { Tenant } from '@/lib/types'

interface TenantFormModalProps {
  open: boolean
  onClose: () => void
  tenant?: Tenant | null
  onSuccess?: () => void
}

export function TenantFormModal({ open, onClose, tenant, onSuccess }: TenantFormModalProps) {
  const isEdit = !!tenant

  const [form, setForm] = useState({
    name: '',
    domain: '',
    allowGlobalAdminAccess: true,
  })

  const [adminUser, setAdminUser] = useState({
    name: '',
    email: '',
    password: '',
  })

  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')

  useEffect(() => {
    if (open) {
      setError('')
      if (tenant) {
        setForm({
          name: tenant.name ?? '',
          domain: tenant.domain ?? '',
          allowGlobalAdminAccess: (tenant as any).allow_global_admin_access !== 0,
        })
      } else {
        setForm({ name: '', domain: '', allowGlobalAdminAccess: true })
        setAdminUser({ name: '', email: '', password: '' })
      }
    }
  }, [open, tenant])

  function updateForm(field: string, value: string | boolean) {
    setForm((prev) => ({ ...prev, [field]: value }))
  }

  async function handleSubmit() {
    setError('')

    if (!form.name.trim()) { setError('Nome da empresa é obrigatório.'); return }
    if (!form.domain.trim()) { setError('Domínio é obrigatório.'); return }
    if (!isEdit) {
      if (!adminUser.name.trim()) { setError('Nome do administrador é obrigatório.'); return }
      if (!adminUser.email.trim()) { setError('E-mail do administrador é obrigatório.'); return }
      if (!adminUser.password || adminUser.password.length < 8) {
        setError('Senha do administrador deve ter ao menos 8 caracteres.'); return
      }
    }

    setLoading(true)
    try {
      const payload = {
        name: form.name,
        domain: form.domain,
        allow_global_admin_access: form.allowGlobalAdminAccess,
        ...(!isEdit && {
          admin_name: adminUser.name,
          admin_email: adminUser.email,
          admin_password: adminUser.password,
        }),
      }

      const res = await apiFetch(
        isEdit ? `/api/tenants/${(tenant as any).id}` : '/api/tenants',
        { method: isEdit ? 'PUT' : 'POST', body: JSON.stringify(payload) },
      )

      const data = await res.json()
      if (!res.ok) {
        setError(data.error ?? 'Erro ao salvar empresa.')
        return
      }

      onSuccess?.()
      onClose()
    } catch {
      setError('Erro de conexão. Tente novamente.')
    } finally {
      setLoading(false)
    }
  }

  return (
    <Dialog open={open} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>{isEdit ? 'Editar Empresa' : 'Nova Empresa'}</DialogTitle>
          <DialogDescription>
            {isEdit ? 'Atualize os dados cadastrais da empresa.' : 'Preencha os dados para criar uma nova empresa no portal.'}
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-6 py-2">
          {/* Dados da empresa */}
          <div className="space-y-4">
            <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
              Dados da Empresa
            </p>
            <div className="grid grid-cols-2 gap-4">
              <div className="col-span-2 space-y-1.5">
                <Label>Nome da empresa *</Label>
                <Input
                  value={form.name}
                  onChange={(e) => updateForm('name', e.target.value)}
                  placeholder="Ex: Construtora Horizonte S.A."
                />
              </div>
              <div className="col-span-2 space-y-1.5">
                <Label>Domínio *</Label>
                <Input
                  value={form.domain}
                  onChange={(e) => updateForm('domain', e.target.value)}
                  placeholder="empresa.com.br"
                />
                <p className="text-xs text-muted-foreground">
                  Domínio principal da empresa. As configurações de AD e LDAP podem ser definidas depois, nas configurações da empresa.
                </p>
              </div>
            </div>

            {/* Permissão ConsultarTI */}
            <div className="flex items-start gap-4 p-4 rounded-lg border border-border bg-muted/30">
              <Switch
                id="allow-global"
                checked={form.allowGlobalAdminAccess}
                onCheckedChange={(v) => updateForm('allowGlobalAdminAccess', v)}
              />
              <div className="space-y-1">
                <Label htmlFor="allow-global" className="font-medium cursor-pointer">
                  Permitir que a ConsultarTI gerencie esta empresa
                </Label>
                <p className="text-xs text-muted-foreground">
                  Quando ativo, o administrador global da ConsultarTI pode visualizar e gerenciar
                  usuários, grupos e configurações desta empresa. Desative para total autonomia.
                </p>
              </div>
            </div>
          </div>

          {/* Administrador inicial — só na criação */}
          {!isEdit && (
            <>
              <Separator />
              <div className="space-y-4">
                <div>
                  <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                    Administrador da Empresa
                  </p>
                  <p className="text-xs text-muted-foreground mt-1">
                    Este usuário terá acesso total à empresa no portal e poderá adicionar outros membros.
                  </p>
                </div>
                <div className="grid grid-cols-2 gap-4">
                  <div className="col-span-2 space-y-1.5">
                    <Label>Nome completo *</Label>
                    <Input
                      value={adminUser.name}
                      onChange={(e) => setAdminUser((p) => ({ ...p, name: e.target.value }))}
                      placeholder="Maria da Silva"
                    />
                  </div>
                  <div className="space-y-1.5">
                    <Label>E-mail de acesso ao portal *</Label>
                    <Input
                      type="email"
                      value={adminUser.email}
                      onChange={(e) => setAdminUser((p) => ({ ...p, email: e.target.value }))}
                      placeholder="admin@empresa.com.br"
                    />
                  </div>
                  <div className="space-y-1.5">
                    <Label>Senha provisória * (min. 8 caracteres)</Label>
                    <Input
                      type="password"
                      value={adminUser.password}
                      onChange={(e) => setAdminUser((p) => ({ ...p, password: e.target.value }))}
                      placeholder="••••••••"
                    />
                  </div>
                </div>
              </div>
            </>
          )}

          {error && (
            <div className="flex items-start gap-2 p-3 rounded-lg bg-destructive/10 border border-destructive/30 text-destructive text-sm">
              <AlertCircle className="w-4 h-4 shrink-0 mt-0.5" />
              {error}
            </div>
          )}
        </div>

        <DialogFooter>
          <Button variant="outline" onClick={onClose} disabled={loading}>
            Cancelar
          </Button>
          <Button onClick={handleSubmit} disabled={loading}>
            {loading ? 'Salvando...' : isEdit ? 'Salvar Alterações' : 'Criar Empresa'}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}