'use client'

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

interface ProspectRow {
  cnpj: string
  razao_social: string
  nome_fantasia: string | null
  municipio: string
  cnae_principal: string
  data_abertura: string | null
  primeira_deteccao: string
  stage: Stage
  produto: string | null
  notes: string | null
}

const PROSPECT_STAGES: { value: string; label: string }[] = [
  { value: '',           label: 'Todos' },
  { value: 'qualificado', label: 'Qualificado' },
  { value: 'produto',    label: 'Produto identificado' },
  { value: 'reuniao',    label: 'Reunião agendada' },
  { value: 'ganho',      label: 'Fechado · ganho' },
]

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 PRODUTO_LABELS: Record<string, string> = {
  retail: 'Retail', hcm: 'HCM', tef: 'TEF · CTF', ravsign: 'RavSign',
}

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') : '—'
}

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

  const load = useCallback(async (newPage: number, filters: { q: string; stage: string; sort: string }) => {
    setLoading(true)
    const sp = new URLSearchParams()
    if (filters.q)     sp.set('q', filters.q)
    if (filters.stage) sp.set('stage', filters.stage)
    if (filters.sort)  sp.set('sort', filters.sort)
    sp.set('page', String(newPage))
    const res = await fetch(`/api/prospects?${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, stage, sort }) }, 300)
  }, [q, stage, sort, load])

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

  const pageCount = Math.ceil(total / 50)

  return (
    <div className="animate-fade">
      <div className="eyebrow"><span className="dash" />Prospect</div>
      <h1 style={{ fontSize: 26, marginBottom: 24, fontWeight: 300 }}>Prospects</h1>

      <div className={styles.filterBar}>
        <input
          className="search-input"
          placeholder="Buscar empresa, CNPJ, município..."
          value={q}
          onChange={e => setQ(e.target.value)}
        />
        <select className="filter-select" value={stage} onChange={e => setStage(e.target.value)}>
          {PROSPECT_STAGES.map(s => <option key={s.value} value={s.value}>{s.label}</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>
      </div>

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

      <div className="panel" style={{ padding: 0, overflow: 'hidden' }}>
        <table>
          <thead>
            <tr>
              <th>Empresa</th>
              <th>Município</th>
              <th>Data de abertura</th>
              <th>Estágio</th>
              <th>Produto</th>
              <th>Observações</th>
            </tr>
          </thead>
          <tbody>
            {rows.map(r => (
              <tr key={r.cnpj} className="lead-row">
                <td>
                  <Link href={`/leads/${r.cnpj}`} style={{ display: 'block' }}>
                    <div className="razao">{r.razao_social}</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)' }}>{r.municipio}</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.produto ? PRODUTO_LABELS[r.produto] ?? r.produto : '—'}
                </td>
                <td style={{ fontSize: 12, color: 'var(--muted-2)', maxWidth: 200 }}>
                  {r.notes ? <span title={r.notes}>{r.notes.slice(0, 60)}{r.notes.length > 60 ? '…' : ''}</span> : '—'}
                </td>
              </tr>
            ))}
            {!loading && rows.length === 0 && (
              <tr>
                <td colSpan={6} style={{ textAlign: 'center', color: 'var(--muted-2)', padding: '32px 0' }}>
                  Nenhum prospect 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>
  )
}