'use client'

import { useCallback, useEffect, useRef, useState } from 'react'
import { useRouter } from 'next/navigation'
import Link from 'next/link'
import { STAGE_LABELS, type Stage } from '@/lib/types'
import styles from './page.module.css'

interface LeadRow {
  cnpj: string
  razao_social: string
  nome_fantasia: string | null
  municipio: string
  uf: string
  cnae_principal: string
  data_abertura: string | null
  primeira_deteccao: string
  opcao_simples: boolean | null
  opcao_mei: boolean | null
  crm_type: string
  stage: Stage
  source: string
}

const 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 SORT_OPTIONS: { value: string; label: string }[] = [
  { value: '',              label: 'Ordenar: padrão' },
  { value: 'abertura_desc', label: 'Abertura: mais recente' },
  { value: 'abertura_asc',  label: 'Abertura: mais antiga' },
]

const STAGES: { value: string; label: string }[] = [
  { value: '',               label: 'Todos os estágios' },
  { value: 'novo',           label: 'Novo' },
  { value: 'contato',        label: 'Contato iniciado' },
  { value: 'aguardando',     label: 'Aguardando resposta' },
  { value: 'qualificado',    label: 'Qualificado' },
  { value: 'produto',        label: 'Produto identificado' },
  { value: 'reuniao',        label: 'Reunião agendada' },
  { value: 'ganho',          label: 'Fechado · ganho' },
  { value: 'desqualificado', label: 'Desqualificado' },
]

function fmtCnpj(v: string) {
  return v.replace(/^(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})$/, '$1.$2.$3/$4-$5')
}
function fmtDate(v: string | null) {
  return v ? new Date(v).toLocaleDateString('pt-BR') : '—'
}
const FILTERS_KEY = 'leads-filters'

interface SavedFilters {
  q: string; stage: string; type: string; simples: string
  uf: string; mun: string; source: string; sort: string
}

function readSavedFilters(): SavedFilters | null {
  if (typeof window === 'undefined') return null
  try {
    const raw = sessionStorage.getItem(FILTERS_KEY)
    return raw ? JSON.parse(raw) as SavedFilters : null
  } catch {
    return null
  }
}

function fmtCnpjInput(v: string) {
  const d = v.replace(/\D/g, '').slice(0, 14)
  if (d.length <= 2)  return d
  if (d.length <= 5)  return `${d.slice(0,2)}.${d.slice(2)}`
  if (d.length <= 8)  return `${d.slice(0,2)}.${d.slice(2,5)}.${d.slice(5)}`
  if (d.length <= 12) return `${d.slice(0,2)}.${d.slice(2,5)}.${d.slice(5,8)}/${d.slice(8)}`
  return `${d.slice(0,2)}.${d.slice(2,5)}.${d.slice(5,8)}/${d.slice(8,12)}-${d.slice(12)}`
}

export default function LeadsPage() {
  const router = useRouter()
  const [rows, setRows]       = useState<LeadRow[]>([])
  const [total, setTotal]     = useState(0)
  const [page, setPage]       = useState(1)
  const [loading, setLoading] = useState(false)

  // Todos os filtros começam vazios — igual no servidor e no cliente, pra
  // não dar mismatch de hidratação. A restauração da sessionStorage (só
  // existe no navegador) acontece depois da montagem, no useEffect abaixo.
  const [q, setQ]           = useState('')
  const [stage, setStage]   = useState('')
  const [type, setType]     = useState('')
  const [simples, setSimples] = useState('')
  const [uf, setUf]         = useState('')
  const [mun, setMun]       = useState('')
  const [source, setSource] = useState('')
  const [sort, setSort]     = useState('')

  // modal de cadastro manual
  const [showModal, setShowModal]   = useState(false)
  const [mCnpj, setMCnpj]         = useState('')
  const [mRazao, setMRazao]       = useState('')
  const [mFantasia, setMFantasia] = useState('')
  const [mMun, setMMun]           = useState('')
  const [mUf, setMUf]             = useState('MG')
  const [mDdd, setMDdd]           = useState('')
  const [mTel, setMTel]           = useState('')
  const [mEmail, setMEmail]       = useState('')
  const [mCnae, setMCnae]         = useState('')
  const [mLogr, setMLogr]         = useState('')
  const [mNum, setMNum]           = useState('')
  const [mComp, setMComp]         = useState('')
  const [mBairro, setMBairro]     = useState('')
  const [mCep, setMCep]           = useState('')
  const [mSaving, setMSaving]     = useState(false)
  const [mError, setMError]       = useState('')
  const [mLooking, setMLooking]   = useState(false)  // buscando dados na RFB
  const [mRfbOk, setMRfbOk]       = useState<boolean | null>(null)  // null=neutro, true=ok, false=erro

  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)

  const filters = { q, stage, type, simples, uf, municipio: mun, source, sort }

  const load = useCallback(async (newPage: number, f: typeof filters) => {
    setLoading(true)
    const sp = new URLSearchParams()
    if (f.q)         sp.set('q', f.q)
    if (f.stage)     sp.set('stage', f.stage)
    if (f.type)      sp.set('type', f.type)
    if (f.simples)   sp.set('simples', f.simples)
    if (f.uf)        sp.set('uf', f.uf)
    if (f.municipio) sp.set('municipio', f.municipio)
    if (f.source)    sp.set('source', f.source)
    if (f.sort)      sp.set('sort', f.sort)
    sp.set('page', String(newPage))
    const res  = await fetch(`/api/leads?${sp}`)
    const data = await res.json()
    setRows(data.rows)
    setTotal(data.total)
    setLoading(false)
  }, []) // eslint-disable-line react-hooks/exhaustive-deps

  // Só no cliente, depois da hidratação: restaura os filtros salvos (se
  // houver). Isso muda q/stage/etc., o que já dispara o efeito de busca
  // abaixo normalmente — sem precisar de nenhuma lógica especial aqui.
  useEffect(() => {
    const saved = readSavedFilters()
    if (!saved) return
    setQ(saved.q); setStage(saved.stage); setType(saved.type)
    setSimples(saved.simples); setUf(saved.uf); setMun(saved.mun)
    setSource(saved.source); setSort(saved.sort)
  }, []) // eslint-disable-line react-hooks/exhaustive-deps

  useEffect(() => {
    if (debounceRef.current) clearTimeout(debounceRef.current)
    debounceRef.current = setTimeout(() => { setPage(1); load(1, filters) }, 300)
  }, [q, stage, type, simples, uf, mun, source, sort]) // eslint-disable-line react-hooks/exhaustive-deps

  useEffect(() => { load(page, filters) }, [page]) // eslint-disable-line react-hooks/exhaustive-deps

  // Persiste os filtros pra restaurar ao voltar de um lead (a página em si
  // sempre volta pra 1, igual a qualquer mudança normal de filtro).
  useEffect(() => {
    sessionStorage.setItem(FILTERS_KEY, JSON.stringify({ q, stage, type, simples, uf, mun, source, sort }))
  }, [q, stage, type, simples, uf, mun, source, sort]) // eslint-disable-line react-hooks/exhaustive-deps

  async function lookupCnpj(digits: string) {
    if (digits.length !== 14) return
    setMLooking(true)
    setMRfbOk(null)
    try {
      const res  = await fetch(`/api/cnpj/${digits}`)
      const data = await res.json()
      if (!res.ok) { setMRfbOk(false); return }
      // Preenche todos os campos automaticamente
      setMRazao(data.razao_social ?? '')
      setMFantasia(data.nome_fantasia ?? '')
      setMMun(data.municipio ?? '')
      setMUf(data.uf || 'MG')
      setMDdd(data.ddd1 ?? '')
      setMTel(data.telefone1 ?? '')
      setMEmail(data.email ?? '')
      setMCnae(data.cnae_principal ?? '')
      setMLogr(data.logradouro ?? '')
      setMNum(data.numero ?? '')
      setMComp(data.complemento ?? '')
      setMBairro(data.bairro ?? '')
      setMCep(data.cep ?? '')
      setMRfbOk(true)
    } catch {
      setMRfbOk(false)
    } finally {
      setMLooking(false)
    }
  }

  function handleCnpjChange(raw: string) {
    const formatted = fmtCnpjInput(raw)
    setMCnpj(formatted)
    setMRfbOk(null)
    const digits = formatted.replace(/\D/g, '')
    if (digits.length === 14) lookupCnpj(digits)
  }

  async function submitManual(e: React.FormEvent) {
    e.preventDefault()
    setMError('')
    setMSaving(true)
    const res = await fetch('/api/leads', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        cnpj: mCnpj, razao_social: mRazao, nome_fantasia: mFantasia,
        municipio: mMun, uf: mUf, ddd1: mDdd, telefone1: mTel,
        email: mEmail, cnae_principal: mCnae,
        logradouro: mLogr, numero: mNum, complemento: mComp,
        bairro: mBairro, cep: mCep,
      }),
    })
    const data = await res.json()
    setMSaving(false)
    if (!res.ok) { setMError(data.error ?? 'Erro ao cadastrar'); return }
    setShowModal(false)
    // Reset form
    setMCnpj(''); setMRazao(''); setMFantasia(''); setMMun('')
    setMDdd(''); setMTel(''); setMEmail(''); setMCnae('')
    setMLogr(''); setMNum(''); setMComp(''); setMBairro(''); setMCep('')
    setMRfbOk(null)
    load(1, filters)
    router.push(`/leads/${data.cnpj}`)
  }

  const pageCount = Math.ceil(total / 50)
  const hasFilter = !!(q || stage || type || simples || uf || mun || source || sort)

  return (
    <div className="animate-fade">
      <div className="eyebrow"><span className="dash" />Leads &amp; Prospects</div>
      <div className="page-header">
        <div>
          <h1 style={{ fontSize: 26, fontWeight: 300 }}>Empresas monitoradas</h1>
        </div>
        <button className="btn-primary" onClick={() => setShowModal(true)}>+ Cadastrar manualmente</button>
      </div>

      {/* filtros linha 1 */}
      <div className={styles.filterBar}>
        <input
          className="search-input"
          placeholder="Buscar razão social, CNPJ, município..."
          value={q}
          onChange={e => setQ(e.target.value)}
          style={{ flex: 2, minWidth: 200 }}
        />
        <select className="filter-select" value={stage} onChange={e => setStage(e.target.value)}>
          {STAGES.map(s => <option key={s.value} value={s.value}>{s.label}</option>)}
        </select>
        <select className="filter-select" value={type} onChange={e => setType(e.target.value)}>
          <option value="">Lead + Prospect</option>
          <option value="lead">Lead</option>
          <option value="prospect">Prospect</option>
        </select>
      </div>

      {/* filtros linha 2 */}
      <div className={styles.filterBar} style={{ marginTop: 8 }}>
        <select className="filter-select" value={uf} onChange={e => setUf(e.target.value)}>
          <option value="">Todos os estados</option>
          {UFS.map(u => <option key={u} value={u}>{u}</option>)}
        </select>
        <input
          className="search-input"
          placeholder="Filtrar por município..."
          value={mun}
          onChange={e => setMun(e.target.value)}
          style={{ flex: 1 }}
        />
        <select className="filter-select" value={simples} onChange={e => setSimples(e.target.value)}>
          <option value="">Simples / MEI</option>
          <option value="sim">Simples Sim</option>
          <option value="mei">MEI</option>
          <option value="nao">Sem Simples</option>
        </select>
        <select className="filter-select" value={source} onChange={e => setSource(e.target.value)}>
          <option value="">Todas as origens</option>
          <option value="rfb">Receita Federal</option>
          <option value="manual">Cadastro manual</option>
        </select>
        <select className="filter-select" value={sort} onChange={e => setSort(e.target.value)}>
          {SORT_OPTIONS.map(s => <option key={s.value} value={s.value}>{s.label}</option>)}
        </select>
        {hasFilter && (
          <button
            className="filter-clear"
            onClick={() => { setQ(''); setStage(''); setType(''); setSimples(''); setUf(''); setMun(''); setSource(''); setSort('') }}
          >
            ✕ Limpar
          </button>
        )}
      </div>

      <div className="filter-count">
        {loading ? 'Carregando...' : `${total.toLocaleString('pt-BR')} empresa${total !== 1 ? 's' : ''}`}
      </div>

      <div className="panel" style={{ padding: 0, overflow: 'hidden' }}>
        <table>
          <thead>
            <tr>
              <th>Empresa</th>
              <th>Estado / Município</th>
              <th>Data de abertura</th>
              <th>Estágio</th>
              <th>Simples</th>
              <th>Detecção</th>
            </tr>
          </thead>
          <tbody>
            {rows.map(r => (
              <tr key={r.cnpj} className="lead-row">
                <td>
                  <Link href={`/leads/${r.cnpj}`} style={{ display: 'block' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
                      <div className="razao">{r.razao_social}</div>
                      {r.source === 'manual' && (
                        <span style={{
                          fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '.05em',
                          background: 'var(--surface-3)', color: 'var(--muted)',
                          padding: '1px 5px', borderRadius: 3, border: '1px solid var(--border-strong)',
                          flexShrink: 0,
                        }}>MANUAL</span>
                      )}
                    </div>
                    {r.nome_fantasia && <div className="fantasia">{r.nome_fantasia}</div>}
                    <div className="cnpj-mono">{fmtCnpj(r.cnpj)}</div>
                  </Link>
                </td>
                <td style={{ fontSize: 12.5, color: 'var(--muted)' }}>
                  <div>{r.uf}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--muted-3)' }}>{r.municipio}</div>
                </td>
                <td style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--muted-3)' }}>
                  {fmtDate(r.data_abertura)}
                </td>
                <td>
                  <span className={`badge-status st-${r.stage}`}>
                    <span className="bd" />
                    {STAGE_LABELS[r.stage]}
                  </span>
                </td>
                <td style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--muted)' }}>
                  {r.opcao_mei ? 'MEI' : r.opcao_simples ? 'SIM' : r.opcao_simples === false ? 'NÃO' : '—'}
                </td>
                <td style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--muted-3)' }}>
                  {fmtDate(r.primeira_deteccao)}
                </td>
              </tr>
            ))}
            {!loading && rows.length === 0 && (
              <tr>
                <td colSpan={6} style={{ textAlign: 'center', color: 'var(--muted-2)', padding: '32px 0' }}>
                  Nenhuma empresa encontrada
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>

      {pageCount > 1 && (
        <div className={styles.pagination}>
          <button className="btn-secondary" disabled={page <= 1} onClick={() => setPage(p => p - 1)}>← Anterior</button>
          <span className={styles.pageInfo}>{page} / {pageCount}</span>
          <button className="btn-secondary" disabled={page >= pageCount} onClick={() => setPage(p => p + 1)}>Próximo →</button>
        </div>
      )}

      {/* ── Modal cadastro manual ── */}
      <div className={`modal-overlay ${showModal ? 'visible' : ''}`} onClick={() => setShowModal(false)}>
        <div className="modal" onClick={e => e.stopPropagation()} style={{ maxWidth: 580, maxHeight: '90vh', overflowY: 'auto' }}>
          <h3>Cadastrar lead manualmente</h3>
          <p className="modal-sub">Digite o CNPJ — os dados são buscados automaticamente na Receita Federal.</p>
          <form onSubmit={submitManual}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>

              {/* CNPJ com feedback */}
              <div className="field" style={{ gridColumn: '1 / -1' }}>
                <label>CNPJ *</label>
                <div style={{ position: 'relative' }}>
                  <input
                    value={mCnpj}
                    onChange={e => handleCnpjChange(e.target.value)}
                    placeholder="00.000.000/0000-00"
                    style={{ paddingRight: 110 }}
                    required
                  />
                  <span style={{
                    position: 'absolute', right: 10, top: '50%', transform: 'translateY(-50%)',
                    fontFamily: 'var(--font-mono)', fontSize: 10.5,
                    color: mLooking ? 'var(--muted)' : mRfbOk === true ? '#2f8f7a' : mRfbOk === false ? 'var(--warn)' : 'transparent',
                  }}>
                    {mLooking ? '⏳ buscando…' : mRfbOk === true ? '✓ dados preenchidos' : mRfbOk === false ? '✗ não encontrado' : ''}
                  </span>
                </div>
              </div>

              <div className="field" style={{ gridColumn: '1 / -1' }}>
                <label>Razão Social *</label>
                <input value={mRazao} onChange={e => setMRazao(e.target.value)} placeholder="Preenchido automaticamente" required />
              </div>
              <div className="field" style={{ gridColumn: '1 / -1' }}>
                <label>Nome Fantasia</label>
                <input value={mFantasia} onChange={e => setMFantasia(e.target.value)} placeholder="Preenchido automaticamente" />
              </div>

              {/* Separador Localização */}
              <div style={{ gridColumn: '1 / -1', borderTop: '1px solid var(--border)', paddingTop: 10, marginTop: 2 }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--muted-3)', textTransform: 'uppercase', letterSpacing: '.1em' }}>Localização</span>
              </div>

              <div className="field">
                <label>Município *</label>
                <input value={mMun} onChange={e => setMMun(e.target.value)} placeholder="Ex: BELO HORIZONTE" required />
              </div>
              <div className="field">
                <label>UF *</label>
                <select value={mUf} onChange={e => setMUf(e.target.value)} required>
                  {UFS.map(u => <option key={u} value={u}>{u}</option>)}
                </select>
              </div>
              <div className="field" style={{ gridColumn: '1 / -1' }}>
                <label>Logradouro</label>
                <input value={mLogr} onChange={e => setMLogr(e.target.value)} placeholder="Rua, Av., Trav..." />
              </div>
              <div className="field">
                <label>Número</label>
                <input value={mNum} onChange={e => setMNum(e.target.value)} placeholder="123" />
              </div>
              <div className="field">
                <label>Complemento</label>
                <input value={mComp} onChange={e => setMComp(e.target.value)} placeholder="Sala, Andar..." />
              </div>
              <div className="field">
                <label>Bairro</label>
                <input value={mBairro} onChange={e => setMBairro(e.target.value)} placeholder="Centro" />
              </div>
              <div className="field">
                <label>CEP</label>
                <input value={mCep} onChange={e => setMCep(e.target.value.replace(/\D/g, '').slice(0,8))} placeholder="00000000" maxLength={8} />
              </div>

              {/* Separador Contato */}
              <div style={{ gridColumn: '1 / -1', borderTop: '1px solid var(--border)', paddingTop: 10, marginTop: 2 }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--muted-3)', textTransform: 'uppercase', letterSpacing: '.1em' }}>Contato</span>
              </div>

              <div className="field">
                <label>DDD</label>
                <input value={mDdd} onChange={e => setMDdd(e.target.value.replace(/\D/g, '').slice(0,3))} placeholder="31" maxLength={3} />
              </div>
              <div className="field">
                <label>Telefone</label>
                <input value={mTel} onChange={e => setMTel(e.target.value)} placeholder="99999-9999" />
              </div>
              <div className="field" style={{ gridColumn: '1 / -1' }}>
                <label>E-mail</label>
                <input type="email" value={mEmail} onChange={e => setMEmail(e.target.value)} placeholder="contato@empresa.com" />
              </div>
              <div className="field" style={{ gridColumn: '1 / -1' }}>
                <label>CNAE principal</label>
                <input value={mCnae} onChange={e => setMCnae(e.target.value.replace(/\D/g, '').slice(0,7))} placeholder="Ex: 5611201" maxLength={7} />
              </div>
            </div>

            {mError && (
              <p style={{ color: 'var(--warn)', fontFamily: 'var(--font-mono)', fontSize: 12, marginTop: 8 }}>{mError}</p>
            )}
            <div className="modal-actions">
              <button type="button" className="btn-secondary" onClick={() => setShowModal(false)}>Cancelar</button>
              <button type="submit" className="btn-primary" disabled={mSaving || mLooking}>
                {mSaving ? 'Cadastrando...' : 'Cadastrar lead'}
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  )
}