'use client'

import { useEffect, useState } from 'react'
import { useParams, useRouter } from 'next/navigation'
import Link from 'next/link'
import { STAGE_LABELS, type Stage } from '@/lib/types'

interface Contato {
  nome_socio: string | null
  cpf_cnpj_socio: string | null
  qualificacao_socio_codigo: string | null
  qualificacao_socio_desc: string | null
  nome_representante: string | null
  qualificacao_representante_desc: string | null
}

interface EmpresaRow {
  cnpj: string
  razao_social: string
  nome_fantasia: string | null
  municipio: string
  uf: string
  cnae_principal: string
  ddd1: string | null
  telefone1: string | null
  email: string | null
  qualificacao_socio_desc: string | null
  eh_administrador: boolean
  data_entrada_sociedade: string | null
  opcao_simples: boolean | null
  opcao_mei: boolean | null
  stage: Stage
}

function fmtCnpj(v: string) {
  return v.replace(/^(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})$/, '$1.$2.$3/$4-$5')
}

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
}

export default function ContatoDetailPage() {
  const { doc }  = useParams<{ doc: string }>()
  const router   = useRouter()

  const [contato, setContato]   = useState<Contato | null>(null)
  const [empresas, setEmpresas] = useState<EmpresaRow[]>([])
  const [loading, setLoading]   = useState(true)

  useEffect(() => {
    fetch(`/api/contatos/${doc}`)
      .then(r => r.json())
      .then(data => {
        setContato(data.contato)
        setEmpresas(data.empresas)
        setLoading(false)
      })
  }, [doc])

  if (loading) {
    return (
      <div style={{ color: 'var(--muted)', fontFamily: 'var(--font-mono)', fontSize: 13, padding: 40 }}>
        Carregando...
      </div>
    )
  }

  if (!contato) {
    return (
      <div style={{ color: 'var(--muted)', fontFamily: 'var(--font-mono)', fontSize: 13, padding: 40 }}>
        Contato não encontrado.
      </div>
    )
  }

  const isPj = (contato.cpf_cnpj_socio ?? '').replace(/\D/g, '').length === 14

  return (
    <div className="animate-fade">
      <button className="back-link" onClick={() => router.back()}>← Voltar</button>

      <div className="eyebrow"><span className="dash" />Contatos</div>
      <h1 style={{ fontSize: 22, fontWeight: 300, marginBottom: 4 }}>
        {contato.nome_socio ?? '—'}
      </h1>

      <div style={{ display: 'flex', gap: 14, alignItems: 'center', marginBottom: 24, flexWrap: 'wrap' }}>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--muted)' }}>
          {fmtDoc(contato.cpf_cnpj_socio)}
        </span>
        {contato.qualificacao_socio_desc && (
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--muted-3)' }}>
            {contato.qualificacao_socio_desc}
          </span>
        )}
        {isPj && contato.nome_representante && (
          <span style={{ fontSize: 12, color: 'var(--muted-2)' }}>
            Repr.: <strong style={{ color: 'var(--text)' }}>{contato.nome_representante}</strong>
          </span>
        )}
      </div>

      <div className="panel" style={{ padding: 0, overflow: 'hidden' }}>
        <div className="panel-title" style={{ padding: '12px 16px' }}>
          <h3>Empresas vinculadas</h3>
          <span className="meta">{empresas.length}</span>
        </div>
        <table>
          <thead>
            <tr>
              <th>Empresa</th>
              <th>Qualificação</th>
              <th>Estágio CRM</th>
              <th>Simples</th>
              <th>Entrada</th>
              <th>Telefone</th>
            </tr>
          </thead>
          <tbody>
            {empresas.map(e => (
              <tr key={e.cnpj} className="lead-row">
                <td>
                  <Link href={`/leads/${e.cnpj}`} style={{ display: 'block' }}>
                    <div style={{ fontWeight: 500, fontSize: 13 }}>{e.razao_social}</div>
                    {e.nome_fantasia && (
                      <div className="fantasia">{e.nome_fantasia}</div>
                    )}
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--muted-3)' }}>
                      {fmtCnpj(e.cnpj)} · {e.municipio}/{e.uf}
                    </div>
                  </Link>
                </td>
                <td>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                    {e.eh_administrador && <span className="qsa-badge adm">ADM</span>}
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--muted-2)' }}>
                      {e.qualificacao_socio_desc ?? '—'}
                    </span>
                  </div>
                </td>
                <td>
                  <span className={`badge-status st-${e.stage}`}>
                    <span className="bd" />
                    {STAGE_LABELS[e.stage]}
                  </span>
                </td>
                <td style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--muted)' }}>
                  {e.opcao_mei ? 'MEI' : e.opcao_simples ? 'SIM' : e.opcao_simples === false ? 'NÃO' : '—'}
                </td>
                <td style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--muted-3)', whiteSpace: 'nowrap' }}>
                  {e.data_entrada_sociedade
                    ? new Date(e.data_entrada_sociedade).toLocaleDateString('pt-BR')
                    : '—'}
                </td>
                <td style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--muted)' }}>
                  {e.ddd1 && e.telefone1 ? `(${e.ddd1}) ${e.telefone1}` : '—'}
                </td>
              </tr>
            ))}
            {empresas.length === 0 && (
              <tr>
                <td colSpan={6} style={{ textAlign: 'center', color: 'var(--muted-2)', padding: '32px 0' }}>
                  Nenhuma empresa vinculada encontrada.
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  )
}