'use client'

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

interface StageData {
  count: number
  top: { cnpj: string; razao_social: string; municipio: string }[]
}
type PipelineMap = Record<string, StageData>

const ZONES: { label: string; stages: Stage[] }[] = [
  { label: 'Lead',         stages: ['novo', 'contato', 'aguardando'] },
  { label: 'Prospect',     stages: ['qualificado', 'produto', 'reuniao'] },
  { label: 'Encerramento', stages: ['ganho', 'desqualificado'] },
]

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

export default function PipelinePage() {
  const [data, setData] = useState<PipelineMap | null>(null)

  useEffect(() => {
    fetch('/api/pipeline').then(r => r.json()).then(setData)
  }, [])

  if (!data) {
    return (
      <div className="animate-fade">
        <div className="eyebrow"><span className="dash" />Pipeline</div>
        <h1 style={{ fontSize: 26, marginBottom: 28, fontWeight: 300 }}>Funil de vendas</h1>
        <div style={{ color: 'var(--muted)', fontFamily: 'var(--font-mono)', fontSize: 12 }}>Carregando…</div>
      </div>
    )
  }

  return (
    <div className="animate-fade">
      <div className="eyebrow"><span className="dash" />Pipeline</div>
      <h1 style={{ fontSize: 26, marginBottom: 28, fontWeight: 300 }}>Funil de vendas</h1>

      <div className="kanban">
        {ZONES.map((zone, zi) => (
          <>
            <div key={zone.label} className="kzone">
              <div className="kzone-label">{zone.label}</div>
              <div className="kzone-cols">
                {zone.stages.map(stage => {
                  const sd = data[stage]
                  const stageClass = stage === 'desqualificado' ? 'st-perdido' : `st-${stage}`
                  return (
                    <div key={stage} className="kcol">
                      <div className="khead">
                        <span className={`badge-status ${stageClass}`}>
                          <span className="bd" />
                          {STAGE_LABELS[stage]}
                        </span>
                        <span className="c">{(sd?.count ?? 0).toLocaleString('pt-BR')}</span>
                      </div>

                      {sd?.top.map(c => (
                        <Link key={c.cnpj} href={`/leads/${c.cnpj}`} className="kcard">
                          <div className="rz">{c.razao_social}</div>
                          <div className="cn">{fmtCnpj(c.cnpj)} · {c.municipio}</div>
                        </Link>
                      ))}

                      {(sd?.count ?? 0) > (sd?.top.length ?? 0) && (
                        <Link
                          href={`/leads?stage=${stage}`}
                          style={{
                            display: 'block', textAlign: 'center',
                            fontFamily: 'var(--font-mono)', fontSize: 10.5,
                            color: 'var(--muted-2)', padding: '6px 0',
                            borderTop: '1px solid var(--border)', marginTop: 4,
                          }}
                        >
                          + {((sd?.count ?? 0) - (sd?.top.length ?? 0)).toLocaleString('pt-BR')} mais →
                        </Link>
                      )}
                    </div>
                  )
                })}
              </div>
            </div>
            {zi < ZONES.length - 1 && <div key={`div-${zi}`} className="kzone-divider">›</div>}
          </>
        ))}
      </div>
    </div>
  )
}