'use client'

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

type Sort = 'nome' | 'recente' | 'antigo'

interface ContatoRow {
  cpf_cnpj_socio: string | null
  nome_socio: string | null
  qualificacao_socio_desc: string | null
  nome_representante: string | null
  eh_administrador: boolean
  empresa_count: number
}

function fmtDoc(v: string | null) {
  if (!v) return '—'
  const raw = v.replace(/\D/g, '')
  if (raw.length === 14) return `CNPJ ${raw.replace(/^(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})$/, '$1.$2.$3/$4-$5')}`
  return v  // CPF já vem mascarado pela RFB: ***346506**
}

export default function ContatosPage() {
  const [rows, setRows]       = useState<ContatoRow[]>([])
  const [total, setTotal]     = useState(0)
  const [page, setPage]       = useState(1)
  const [loading, setLoading] = useState(false)
  const [q, setQ]             = useState('')
  const [sort, setSort]       = useState<Sort>('nome')
  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)

  const load = useCallback(async (newPage: number, search: string, sortBy: Sort) => {
    setLoading(true)
    const sp = new URLSearchParams()
    if (search) sp.set('q', search)
    sp.set('page', String(newPage))
    sp.set('sort', sortBy)
    const res = await fetch(`/api/contatos?${sp}`)
    const data = await res.json()
    setRows(data.rows)
    setTotal(data.total)
    setLoading(false)
  }, [])

  useEffect(() => {
    if (debounceRef.current) clearTimeout(debounceRef.current)
    debounceRef.current = setTimeout(() => { setPage(1); load(1, q, sort) }, 300)
  }, [q, sort, load])

  useEffect(() => { load(page, q, sort) }, [page]) // eslint-disable-line

  const pageCount = Math.ceil(total / 50)

  return (
    <div className="animate-fade">
      <div className="eyebrow"><span className="dash" />Contatos</div>
      <h1 style={{ fontSize: 26, marginBottom: 24, fontWeight: 300 }}>Sócios &amp; Administradores</h1>

      <div className={styles.filterBar} style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
        <input
          className="search-input"
          placeholder="Buscar nome, CPF/CNPJ..."
          value={q}
          onChange={e => setQ(e.target.value)}
          style={{ flex: 1 }}
        />
        <select
          value={sort}
          onChange={e => { setSort(e.target.value as Sort); setPage(1) }}
          style={{
            background: 'var(--surface-2)', border: '1px solid var(--border)',
            borderRadius: 6, color: 'var(--muted)', padding: '8px 12px',
            fontSize: 12.5, fontFamily: 'var(--font-sans)', cursor: 'pointer',
            outline: 'none', minWidth: 180,
          }}
        >
          <option value="nome">Ordenar: Nome A–Z</option>
          <option value="recente">Mais recente no QSA</option>
          <option value="antigo">Mais antigo no QSA</option>
        </select>
      </div>

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

      <div className="panel" style={{ padding: 0, overflow: 'hidden' }}>
        <table>
          <thead>
            <tr>
              <th>Nome / Qualificação</th>
              <th>CPF / CNPJ</th>
              <th>Empresas</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r, i) => {
              const isPj = (r.cpf_cnpj_socio ?? '').replace(/\D/g, '').length === 14
              const href = `/contatos/${encodeURIComponent(r.cpf_cnpj_socio ?? '')}`
              return (
                <tr key={i} className="lead-row">
                  <td>
                    <Link href={href} style={{ display: 'block' }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 7, fontWeight: 500, fontSize: 13 }}>
                        {r.nome_socio ?? '—'}
                        {r.eh_administrador && <span className="qsa-badge adm">ADM</span>}
                      </div>
                      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--muted-2)', marginTop: 2 }}>
                        {r.qualificacao_socio_desc ?? '—'}
                      </div>
                      {isPj && r.nome_representante && (
                        <div style={{ fontSize: 11.5, color: 'var(--muted-3)', marginTop: 2 }}>
                          Repr.: {r.nome_representante}
                        </div>
                      )}
                    </Link>
                  </td>
                  <td style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--muted)' }}>
                    {fmtDoc(r.cpf_cnpj_socio)}
                  </td>
                  <td>
                    <Link
                      href={href}
                      style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--muted-2)' }}
                    >
                      {r.empresa_count} empresa{r.empresa_count !== 1 ? 's' : ''} →
                    </Link>
                  </td>
                </tr>
              )
            })}
            {!loading && rows.length === 0 && (
              <tr>
                <td colSpan={3} style={{ textAlign: 'center', color: 'var(--muted-2)', padding: '32px 0' }}>
                  {total === 0 && !q
                    ? 'Sócios ainda não carregados — reprocesse a ETL para popular esta tabela.'
                    : 'Nenhum contato encontrado.'}
                </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>
      )}
    </div>
  )
}