import { useCallback, useEffect, useState } from 'react'
import { useSearchParams } from 'react-router-dom'
import DnsViewerPanel from '../../components/DnsViewerPanel'
import { apiGet } from '../../lib/api'
import { canReadDnsViewer, clearSession, getToken, getUser, isLoggedIn } from '../../lib/auth'

export default function AdminDominio() {
  const [params, setParams] = useSearchParams()
  const [domain, setDomain] = useState(params.get('domain') || '')
  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')
  const user = getUser()
  const canRead = user && canReadDnsViewer(user.role)

  const loadDns = useCallback(async (dom) => {
    const d = (dom || '').trim().toLowerCase()
    if (!d || d.length < 3) return
    if (!canReadDnsViewer(getUser()?.role)) {
      setError('O seu perfil não tem permissão para consultar DNS (Spec 027).')
      return
    }
    const token = getToken()
    if (!token) {
      setError('Sessão inválida — volte a entrar na área Admin.')
      return
    }
    setLoading(true)
    setError('')
    try {
      const payload = await apiGet(
        `/api/v1/domain-console/dns/viewer/${encodeURIComponent(d)}?email_service=true`,
        { token },
      )
      setData(payload)
    } catch (e) {
      setData(null)
      if (e.status === 401) {
        clearSession()
        setError('Sessão expirada — faça login novamente na área Admin.')
        window.location.reload()
        return
      }
      if (e.status === 403) {
        setError('Sem permissão para este domínio ou recurso DNS.')
        return
      }
      setError(e.message || 'Falha ao carregar DNS')
    } finally {
      setLoading(false)
    }
  }, [])

  useEffect(() => {
    const q = params.get('domain')
    if (q) {
      setDomain(q)
      if (isLoggedIn() && canRead) loadDns(q)
    }
  }, [params, loadDns, canRead])

  function handleSearch(e) {
    e.preventDefault()
    setParams(domain ? { domain } : {})
    loadDns(domain)
  }

  if (!canRead) {
    return (
      <div>
        <h2 style={{ marginTop: 0 }}>Domínio & DNS</h2>
        <p className="error-text">
          O perfil <strong>{user?.role || 'desconhecido'}</strong> não inclui consulta DNS.
          Peça acesso na matriz Spec 027 ou use outro menu conforme o seu role.
        </p>
      </div>
    )
  }

  return (
    <div>
      <h2 style={{ marginTop: 0 }}>Domínio & DNS</h2>
      <p style={{ color: 'var(--lb-text-secondary)', maxWidth: 640 }}>
        Apontamentos read-only — Cloudflare Ligbox, OpenPanel BIND ou DNS público.
        Alterações via suporte ou painel externo (links abaixo, conforme o seu perfil).
      </p>

      <form
        className="card domain-search"
        onSubmit={handleSearch}
        style={{
          display: 'flex',
          gap: '0.5rem',
          flexWrap: 'wrap',
          alignItems: 'flex-end',
          marginBottom: '1rem',
        }}
      >
        <label className="form-label" style={{ flex: '1 1 220px', margin: 0 }}>
          Domínio
          <input
            className="form-input"
            placeholder="empresa.com.br"
            value={domain}
            onChange={(e) => setDomain(e.target.value)}
          />
        </label>
        <button type="submit" className="btn btn-primary" disabled={loading}>
          {loading ? 'Carregando…' : 'Consultar DNS'}
        </button>
      </form>

      <DnsViewerPanel data={data} loading={loading} error={error} />
    </div>
  )
}
