'use client'

import { useCallback, useEffect, useRef, useState } from 'react'
import styles from './page.module.css'

type Provider = 'rfb_python' | 'cnpja' | 'serpro' | 'receitaws'

const ALL_UFS = ['AC','AL','AP','AM','BA','CE','DF','ES','GO','MA','MT','MS','MG',
                 'PA','PB','PR','PE','PI','RJ','RN','RS','RO','RR','SC','SP','SE','TO']

const PROVIDERS: { value: Provider; label: string; desc: string; badge?: string }[] = [
  {
    value: 'rfb_python',
    label: 'Pipeline RFB (Python)',
    desc:  'Consulta direta à base oficial da Receita Federal via Dados Abertos — sem custo, sem rate limit',
    badge: 'PADRÃO',
  },
  { value: 'cnpja',     label: 'CNPJá',     desc: 'API paga com enriquecimento de dados em tempo real' },
  { value: 'serpro',    label: 'Serpro',     desc: 'API governamental — requer convênio com Serpro' },
  { value: 'receitaws', label: 'ReceitaWS',  desc: 'API gratuita com rate limit para consultas pontuais' },
]

interface EtlStatus {
  running:     boolean
  mes_ano:     string | null
  started_at:  string | null
  finished_at: string | null
  exit_code:   number | null
  logs:        string[]
}

function currentMesAno() {
  const d = new Date()
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`
}

export default function ConfiguracoesPage() {
  const [provider, setProvider] = useState<Provider>('rfb_python')
  const [token, setToken]       = useState('')
  const [cfgSaved, setCfgSaved] = useState(false)

  // Estados monitorados (portal_config.ufs_monitoradas)
  const [ufsMonitoradas, setUfsMonitoradas] = useState<string[]>(['MG'])
  const [ufsSaved, setUfsSaved]             = useState(false)
  const [ufsSaving, setUfsSaving]           = useState(false)

  // ETL panel
  const [mesAno, setMesAno]     = useState(currentMesAno)
  const [status, setStatus]     = useState<EtlStatus | null>(null)
  const [starting, setStarting] = useState(false)
  const [error, setError]       = useState<string | null>(null)
  const logsRef = useRef<HTMLDivElement>(null)
  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null)

  const needsToken = provider !== 'rfb_python'

  // Carrega config salva (ufs_monitoradas) ao montar
  useEffect(() => {
    fetch('/api/configuracoes').then(r => r.json()).then((cfg: Record<string, string>) => {
      if (cfg.ufs_monitoradas) {
        const ufs = cfg.ufs_monitoradas.split(',').map(s => s.trim()).filter(Boolean)
        if (ufs.length > 0) setUfsMonitoradas(ufs)
      }
    }).catch(() => {})
  }, [])

  async function saveUfs() {
    setUfsSaving(true)
    await fetch('/api/configuracoes', {
      method:  'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body:    JSON.stringify({ ufs_monitoradas: ufsMonitoradas.join(',') }),
    })
    setUfsSaving(false)
    setUfsSaved(true)
    setTimeout(() => setUfsSaved(false), 2500)
  }

  function toggleUf(uf: string) {
    setUfsMonitoradas(prev =>
      prev.includes(uf) ? prev.filter(u => u !== uf) : [...prev, uf].sort()
    )
  }

  const fetchStatus = useCallback(async () => {
    const res = await fetch('/api/etl/status')
    if (!res.ok) return
    const data: EtlStatus = await res.json()
    setStatus(data)
    // Rola log para o final
    if (logsRef.current) logsRef.current.scrollTop = logsRef.current.scrollHeight
    return data
  }, [])

  // Polling enquanto rodando
  useEffect(() => {
    fetchStatus()
  }, [fetchStatus])

  useEffect(() => {
    if (status?.running) {
      pollRef.current = setInterval(fetchStatus, 3000)
    } else {
      if (pollRef.current) clearInterval(pollRef.current)
    }
    return () => { if (pollRef.current) clearInterval(pollRef.current) }
  }, [status?.running, fetchStatus])

  async function handleRun() {
    setError(null)
    setStarting(true)
    try {
      const res = await fetch('/api/etl/run', {
        method:  'POST',
        headers: { 'Content-Type': 'application/json' },
        body:    JSON.stringify({ mes_ano: mesAno }),
      })
      const data = await res.json()
      if (!res.ok) {
        setError(data.error ?? 'Erro ao iniciar ETL')
      } else {
        await fetchStatus()
      }
    } catch (e) {
      setError(String(e))
    } finally {
      setStarting(false)
    }
  }

  function handleSaveCfg(e: React.FormEvent) {
    e.preventDefault()
    setCfgSaved(true)
    setTimeout(() => setCfgSaved(false), 2500)
  }

  const isRunning = status?.running ?? false
  const exitOk    = status?.exit_code === 0
  const hasResult = status?.finished_at != null

  return (
    <div className="animate-fade">
      <div className="eyebrow"><span className="dash" />Configurações</div>
      <h1 style={{ fontSize: 26, marginBottom: 28, fontWeight: 300 }}>Configurações</h1>

      {/* ── ETL Runner ── */}
      <div className="panel" style={{ marginBottom: 20 }}>
        <div className="panel-title">
          <h3>Executar pipeline RFB</h3>
          {isRunning && <span className={styles.runningBadge}>● em execução</span>}
          {!isRunning && hasResult && (
            <span className={exitOk ? styles.okBadge : styles.errBadge}>
              {exitOk ? '✓ concluído' : `✗ erro (código ${status?.exit_code})`}
            </span>
          )}
        </div>

        <div className={styles.runRow}>
          <div className="field" style={{ marginBottom: 0, flex: '0 0 160px' }}>
            <label>Mês / Ano</label>
            <input
              value={mesAno}
              onChange={e => setMesAno(e.target.value)}
              placeholder="2026-07"
              pattern="\d{4}-\d{2}"
              disabled={isRunning}
              style={{ fontFamily: 'var(--font-mono)' }}
            />
          </div>
          <button
            className={isRunning ? 'btn-secondary' : 'btn-primary'}
            onClick={handleRun}
            disabled={isRunning || starting}
            style={{ marginTop: 22, minWidth: 160 }}
          >
            {starting ? 'Iniciando…' : isRunning ? '⏳ Rodando…' : '▶ Executar agora'}
          </button>
          <button
            className="btn-secondary"
            onClick={fetchStatus}
            style={{ marginTop: 22 }}
            title="Atualizar status"
          >
            ↺
          </button>
        </div>

        {error && (
          <div className={styles.errorBox}>{error}</div>
        )}

        {status?.started_at && (
          <div className={styles.metaRow}>
            <span>Iniciado: <code>{new Date(status.started_at).toLocaleString('pt-BR')}</code></span>
            {status.mes_ano && <span>Rodada: <code>{status.mes_ano}</code></span>}
            {status.finished_at && (
              <span>Finalizado: <code>{new Date(status.finished_at).toLocaleString('pt-BR')}</code></span>
            )}
          </div>
        )}

        {(status?.logs?.length ?? 0) > 0 && (
          <div ref={logsRef} className={styles.logBox}>
            {status!.logs.map((line, i) => (
              <div key={i} className={styles.logLine}>{line}</div>
            ))}
          </div>
        )}

        {!status?.started_at && (
          <p style={{ fontSize: 12.5, color: 'var(--muted)', marginTop: 12, lineHeight: 1.55 }}>
            Executa o script <code style={{ fontFamily: 'var(--font-mono)', fontSize: 11 }}>run_monthly.py</code> em background:
            download dos ZIPs da RFB, filtro DuckDB (MG · alimentação), upsert no PostgreSQL.
            A operação pode levar de 10 a 30 minutos.
          </p>
        )}
      </div>

      {/* ── Estados monitorados ── */}
      <div className="panel" style={{ marginBottom: 20 }}>
        <div className="panel-title">
          <h3>Estados monitorados na importação</h3>
          {ufsSaved && <span className={styles.okBadge}>✓ salvo</span>}
        </div>
        <p style={{ fontSize: 12.5, color: 'var(--muted)', marginBottom: 16, lineHeight: 1.55 }}>
          Selecione os estados (UF) que serão filtrados ao importar dados da Receita Federal.
          Alterações entram em vigor na próxima execução do pipeline.
        </p>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 7, marginBottom: 16 }}>
          {ALL_UFS.map(uf => {
            const active = ufsMonitoradas.includes(uf)
            return (
              <button
                key={uf}
                type="button"
                onClick={() => toggleUf(uf)}
                style={{
                  fontFamily:   'var(--font-mono)',
                  fontSize:     12,
                  padding:      '4px 10px',
                  borderRadius: 4,
                  border:       `1px solid ${active ? 'var(--accent)' : 'var(--border)'}`,
                  background:   active ? 'var(--surface-3)' : 'var(--surface-2)',
                  color:        active ? 'var(--accent)'     : 'var(--muted)',
                  cursor:       'pointer',
                  transition:   'all .15s',
                }}
              >
                {uf}
              </button>
            )
          })}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <button
            className="btn-primary"
            onClick={saveUfs}
            disabled={ufsSaving || ufsMonitoradas.length === 0}
            style={{ minWidth: 140 }}
          >
            {ufsSaving ? 'Salvando…' : 'Salvar estados'}
          </button>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--muted)' }}>
            {ufsMonitoradas.length === 0 ? 'Nenhum estado selecionado' : ufsMonitoradas.join(', ')}
          </span>
        </div>
      </div>

      <div className={styles.grid}>
        {/* provider */}
        <div className="panel">
          <div className="panel-title"><h3>Provedor de consulta CNPJ</h3></div>
          <p style={{ fontSize: 12.5, color: 'var(--muted)', marginBottom: 18, lineHeight: 1.55 }}>
            Define a fonte usada ao consultar ou enriquecer dados de um CNPJ.
          </p>
          <div className={styles.providerList}>
            {PROVIDERS.map(p => (
              <label key={p.value} className={`${styles.providerOption} ${provider === p.value ? styles.selected : ''}`}>
                <input
                  type="radio"
                  name="provider"
                  value={p.value}
                  checked={provider === p.value}
                  onChange={() => setProvider(p.value)}
                  className={styles.radioHidden}
                />
                <div className={styles.providerDot} />
                <div style={{ flex: 1 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <span className={styles.providerName}>{p.label}</span>
                    {p.badge && <span className={styles.providerBadge}>{p.badge}</span>}
                  </div>
                  <div className={styles.providerDesc}>{p.desc}</div>
                </div>
              </label>
            ))}
          </div>
        </div>

        {/* token / detalhes */}
        <form className="panel" onSubmit={handleSaveCfg}>
          <div className="panel-title">
            <h3>{needsToken ? 'Token de API' : 'Configuração do pipeline'}</h3>
          </div>

          {!needsToken ? (
            <>
              <p style={{ fontSize: 12.5, color: 'var(--muted)', marginBottom: 18, lineHeight: 1.55 }}>
                Nenhuma chave necessária. O pipeline Python lê os arquivos baixados
                da Receita Federal em <code style={{ fontFamily: 'var(--font-mono)', fontSize: 11 }}>data/extracted/</code>.
              </p>
              <div className={styles.rfbStatus}>
                <span className={styles.rfbDot} />
                <span>Pipeline ativo · Dados Abertos RFB</span>
              </div>
              <div className="info-row" style={{ marginTop: 16 }}>
                <span className="k">Script</span>
                <span className="v" style={{ fontFamily: 'var(--font-mono)', fontSize: 11 }}>run_monthly.py</span>
              </div>
              <div className="info-row">
                <span className="k">ETL</span>
                <span className="v" style={{ fontFamily: 'var(--font-mono)', fontSize: 11 }}>cnpj_monitor.etl_load</span>
              </div>
              <div className="info-row">
                <span className="k">Processamento</span>
                <span className="v" style={{ fontFamily: 'var(--font-mono)', fontSize: 11 }}>DuckDB → PostgreSQL</span>
              </div>
            </>
          ) : (
            <>
              <p style={{ fontSize: 12.5, color: 'var(--muted)', marginBottom: 18, lineHeight: 1.55 }}>
                Informe a chave de API do provedor selecionado.
              </p>
              <div className="field">
                <label>Provedor selecionado</label>
                <input
                  value={PROVIDERS.find(p => p.value === provider)?.label ?? ''}
                  readOnly
                  style={{ cursor: 'default', color: 'var(--muted)' }}
                />
              </div>
              <div className="field">
                <label>Token / API Key</label>
                <input
                  type="password"
                  placeholder="cole aqui o token..."
                  value={token}
                  onChange={e => setToken(e.target.value)}
                  autoComplete="off"
                />
              </div>
            </>
          )}

          <div style={{ marginTop: 16 }}>
            <button type="submit" className="btn-primary" style={{ width: '100%' }}>
              {cfgSaved ? '✓ Salvo' : 'Salvar configuração'}
            </button>
          </div>
        </form>
      </div>
    </div>
  )
}