'use client'

import { useEffect, useState } from 'react'
import { useParams, useRouter } from 'next/navigation'
import Link from 'next/link'
import { STAGE_LABELS, PRODUTO_LABELS, LEAD_STAGES, PROSPECT_STAGES, type Stage, type Produto, type PhoneOption } from '@/lib/types'
import ContatoFlow from './ContatoFlow'
import { useUser } from '@/lib/user-context'

interface Socio {
  nome_socio: string | null
  cpf_cnpj_socio: string | null
  qualificacao_socio_codigo: string | null
  qualificacao_socio_desc: string | null
  representante_legal_cpf: string | null
  nome_representante: string | null
  qualificacao_representante_desc: string | null
  data_entrada_sociedade: string | null
  eh_administrador: boolean
}

interface Lead {
  cnpj: string
  cnpj_basico: string
  razao_social: string
  nome_fantasia: string | null
  cnae_principal: string
  cnae_secundaria: string | null
  natureza_juridica: string | null
  porte_empresa: string | null
  municipio: string
  uf: string
  tipo_logradouro: string | null
  logradouro: string | null
  numero: string | null
  complemento: string | null
  bairro: string | null
  cep: string | null
  ddd1: string | null
  telefone1: string | null
  ddd2: string | null
  telefone2: string | null
  email: string | null
  data_abertura: string | null
  primeira_deteccao: string
  source: string
  opcao_simples: boolean | null
  opcao_mei: boolean | null
  crm_type: string
  stage: Stage
  produto: Produto | null
  motivo: string | null
  notes: string | null
}

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) {
  if (!v) return '—'
  return new Date(v).toLocaleDateString('pt-BR')
}
function fmtFone(ddd: string | null, tel: string | null) {
  if (!tel) return null
  return ddd ? `(${ddd}) ${tel}` : tel
}

export default function LeadDetailPage() {
  const params = useParams<{ cnpj: string }>()
  const router = useRouter()
  const user   = useUser()
  const cnpj   = params.cnpj

  const [lead, setLead]         = useState<Lead | null>(null)
  const [socios, setSocios]     = useState<Socio[]>([])
  const [saving, setSaving]     = useState(false)
  const [saveError, setSaveError] = useState('')
  const [stage, setStage]       = useState<Stage>('novo')
  const [produto, setProduto]   = useState<Produto | ''>('')
  const [notes, setNotes]       = useState('')
  const [motivo, setMotivo]     = useState('')
  const [showFlow, setShowFlow] = useState(false)

  // Telefones adicionais
  const [telefones, setTelefones]       = useState<PhoneOption[]>([])
  const [showAddPhone, setShowAddPhone] = useState(false)
  const [newPhoneNome, setNewPhoneNome] = useState('')
  const [newPhoneDdd, setNewPhoneDdd]   = useState('')
  const [newPhoneNum, setNewPhoneNum]   = useState('')
  const [addingPhone, setAddingPhone]   = useState(false)

  useEffect(() => {
    fetch(`/api/leads/${cnpj}`)
      .then(r => r.json())
      .then(data => {
        setLead(data.lead)
        setSocios(data.socios)
        setStage(data.lead.stage ?? 'novo')
        setProduto(data.lead.produto ?? '')
        setNotes(data.lead.notes ?? '')
        setMotivo(data.lead.motivo ?? '')
      })

    fetch(`/api/leads/${cnpj}/telefones`)
      .then(r => r.json())
      .then((rows: PhoneOption[]) => setTelefones(rows))
  }, [cnpj])

  async function save() {
    setSaving(true)
    setSaveError('')
    const res = await fetch(`/api/leads/${cnpj}`, {
      method:  'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body:    JSON.stringify({
        stage,
        crm_type: PROSPECT_STAGES.includes(stage as Stage) ? 'prospect' : 'lead',
        produto:  produto || null,
        notes:    notes || null,
        motivo:   motivo || null,
      }),
    })
    setSaving(false)
    if (!res.ok) {
      const data = await res.json().catch(() => null)
      setSaveError(data?.error ?? 'Erro ao salvar — tente de novo.')
      return
    }
    setLead(prev => prev ? { ...prev, stage, produto: produto || null, notes, motivo } : prev)
  }

  async function addPhone() {
    if (!newPhoneNome.trim() || !newPhoneNum.trim()) return
    setAddingPhone(true)
    const res  = await fetch(`/api/leads/${cnpj}/telefones`, {
      method:  'POST',
      headers: { 'Content-Type': 'application/json' },
      body:    JSON.stringify({ nome: newPhoneNome, ddd: newPhoneDdd || undefined, numero: newPhoneNum }),
    })
    const row = await res.json() as PhoneOption
    setTelefones(prev => [...prev, row])
    setNewPhoneNome(''); setNewPhoneDdd(''); setNewPhoneNum('')
    setShowAddPhone(false)
    setAddingPhone(false)
  }

  async function deletePhone(id: number | undefined) {
    if (!id) return
    await fetch(`/api/leads/${cnpj}/telefones?id=${id}`, { method: 'DELETE' })
    setTelefones(prev => prev.filter(t => t.id !== id))
  }

  function handleFlowUpdate(updates: { notes: string; stage?: Stage; produto?: Produto; crm_type?: string }) {
    if (updates.notes)   setNotes(updates.notes)
    if (updates.stage)   setStage(updates.stage)
    if (updates.produto) setProduto(updates.produto)
    setLead(prev => prev ? {
      ...prev,
      notes:    updates.notes ?? prev.notes,
      stage:    updates.stage ?? prev.stage,
      produto:  updates.produto ?? prev.produto,
      crm_type: (updates.crm_type ?? prev.crm_type) as 'lead' | 'prospect',
    } : prev)
  }

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

  const endereco = [lead.tipo_logradouro, lead.logradouro, lead.numero, lead.complemento]
    .filter(Boolean).join(' ')
  const fone1 = fmtFone(lead.ddd1, lead.telefone1)
  const fone2 = fmtFone(lead.ddd2, lead.telefone2)
  const isResuming = stage !== 'novo'

  // Todos os telefones disponíveis para o seletor do fluxo
  const allPhones: PhoneOption[] = [
    ...(lead.ddd1 && lead.telefone1 ? [{ nome: 'Telefone 1 (RFB)', ddd: lead.ddd1, numero: lead.telefone1 }] : []),
    ...(lead.ddd2 && lead.telefone2 ? [{ nome: 'Telefone 2 (RFB)', ddd: lead.ddd2, numero: lead.telefone2 }] : []),
    ...telefones,
  ]

  const inputStyle: React.CSSProperties = {
    background: 'var(--surface-3)', border: '1px solid var(--border)',
    borderRadius: 6, color: 'var(--text)', padding: '7px 10px',
    fontSize: 13, fontFamily: 'var(--font-sans)', outline: 'none',
  }

  return (
    <div className="animate-fade">
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
        <button className="back-link" onClick={() => router.back()}>← Voltar</button>
        <button
          className="btn-primary"
          onClick={() => setShowFlow(true)}
          style={{ display: 'flex', alignItems: 'center', gap: 7 }}
        >
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11 }}>▶</span>
          {isResuming ? 'Continuar contato' : 'Iniciar contato'}
        </button>
      </div>

      <div className="eyebrow">
        <span className="dash" />
        <span>{lead.municipio} · {lead.uf}</span>
        <span className="type-flag">{lead.crm_type}</span>
      </div>
      <h1 style={{ fontSize: 22, fontWeight: 300, marginBottom: 4 }}>{lead.razao_social}</h1>
      {lead.nome_fantasia && (
        <div className="fantasia" style={{ marginBottom: 8 }}>{lead.nome_fantasia}</div>
      )}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 24 }}>
        <div className="cnpj-mono">{fmtCnpj(lead.cnpj)}</div>
        {lead.source === 'manual' && (
          <span style={{
            fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '.06em',
            background: 'var(--surface-3)', color: 'var(--muted)',
            padding: '2px 7px', borderRadius: 3, border: '1px solid var(--border-strong)',
          }}>CADASTRO MANUAL</span>
        )}
      </div>

      {showFlow && (
        <ContatoFlow
          cnpj={lead.cnpj}
          razaoSocial={lead.razao_social}
          nomeFantasia={lead.nome_fantasia}
          municipio={lead.municipio}
          currentNotes={notes}
          currentStage={stage}
          userName={user?.primeiroNome ?? 'você'}
          phones={allPhones}
          isResuming={isResuming}
          onClose={() => setShowFlow(false)}
          onLeadUpdated={handleFlowUpdate}
        />
      )}

      <div className="detail-grid">
        {/* ── Coluna esquerda: dados ── */}
        <div>
          <div className="panel">
            <div className="panel-title"><h3>Dados cadastrais</h3></div>
            <div className="info-row"><span className="k">CNAE principal</span><span className="v">{lead.cnae_principal}</span></div>
            {lead.cnae_secundaria && <div className="info-row"><span className="k">CNAE secundária</span><span className="v">{lead.cnae_secundaria}</span></div>}
            <div className="info-row"><span className="k">Porte</span><span className="v">{lead.porte_empresa ?? '—'}</span></div>
            <div className="info-row"><span className="k">Natureza jurídica</span><span className="v">{lead.natureza_juridica ?? '—'}</span></div>
            <div className="info-row"><span className="k">Abertura</span><span className="v">{fmtDate(lead.data_abertura)}</span></div>
            <div className="info-row"><span className="k">Detecção</span><span className="v">{fmtDate(lead.primeira_deteccao)}</span></div>
            <div className="info-row">
              <span className="k">Origem</span>
              <span className="v" style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5 }}>
                {lead.source === 'manual' ? 'Cadastro manual' : 'Receita Federal (RFB)'}
              </span>
            </div>
          </div>

          <div className="panel">
            <div className="panel-title"><h3>Contato</h3></div>
            {endereco && <div className="info-row"><span className="k">Endereço</span><span className="v">{endereco}</span></div>}
            {lead.bairro && <div className="info-row"><span className="k">Bairro</span><span className="v">{lead.bairro}</span></div>}
            <div className="info-row"><span className="k">CEP</span><span className="v">{lead.cep ?? '—'}</span></div>
            {fone1 && <div className="info-row"><span className="k">Telefone 1</span><span className="v">{fone1}</span></div>}
            {fone2 && <div className="info-row"><span className="k">Telefone 2</span><span className="v">{fone2}</span></div>}
            {lead.email && <div className="info-row"><span className="k">E-mail</span><span className="v">{lead.email}</span></div>}

            {/* ── Telefones adicionais ── */}
            <div style={{ marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--border)' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '.08em' }}>
                  Telefones adicionais
                </span>
                <button
                  onClick={() => setShowAddPhone(v => !v)}
                  style={{
                    background: 'none', border: '1px solid var(--border)', borderRadius: 5,
                    color: 'var(--muted)', fontSize: 11.5, cursor: 'pointer',
                    padding: '3px 8px', fontFamily: 'var(--font-sans)',
                  }}
                >
                  {showAddPhone ? 'cancelar' : '+ adicionar'}
                </button>
              </div>

              {telefones.length === 0 && !showAddPhone && (
                <p style={{ fontSize: 12, color: 'var(--muted-2)', margin: 0 }}>Nenhum número cadastrado.</p>
              )}

              {telefones.map(t => (
                <div key={t.id} style={{
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  padding: '7px 0', borderBottom: '1px solid var(--border)',
                }}>
                  <div>
                    <div style={{ fontSize: 13, color: 'var(--text)', fontFamily: 'var(--font-mono)' }}>
                      {t.ddd ? `(${t.ddd}) ${t.numero}` : t.numero}
                    </div>
                    <div style={{ fontSize: 11, color: 'var(--muted)', marginTop: 1 }}>{t.nome}</div>
                  </div>
                  <button
                    onClick={() => deletePhone(t.id)}
                    style={{
                      background: 'none', border: 'none', color: 'var(--muted-2)',
                      cursor: 'pointer', fontSize: 14, padding: '2px 6px',
                    }}
                    title="Remover"
                  >
                    ✕
                  </button>
                </div>
              ))}

              {showAddPhone && (
                <div style={{
                  marginTop: 10, background: 'var(--surface-3)',
                  border: '1px solid var(--border)', borderRadius: 8, padding: 12,
                }}>
                  <input
                    placeholder="Nome (ex: WhatsApp do dono)"
                    value={newPhoneNome}
                    onChange={e => setNewPhoneNome(e.target.value)}
                    style={{ ...inputStyle, width: '100%', marginBottom: 8, boxSizing: 'border-box' }}
                  />
                  <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
                    <input
                      placeholder="DDD"
                      value={newPhoneDdd}
                      onChange={e => setNewPhoneDdd(e.target.value.replace(/\D/g, '').slice(0, 3))}
                      maxLength={3}
                      style={{ ...inputStyle, width: 64 }}
                    />
                    <input
                      placeholder="Número"
                      value={newPhoneNum}
                      onChange={e => setNewPhoneNum(e.target.value)}
                      style={{ ...inputStyle, flex: 1 }}
                    />
                  </div>
                  <div style={{ display: 'flex', gap: 8 }}>
                    <button
                      onClick={addPhone}
                      disabled={addingPhone || !newPhoneNome.trim() || !newPhoneNum.trim()}
                      className="btn-primary"
                      style={{ flex: 1, fontSize: 12.5 }}
                    >
                      {addingPhone ? 'Salvando...' : 'Salvar'}
                    </button>
                    <button
                      onClick={() => { setShowAddPhone(false); setNewPhoneNome(''); setNewPhoneDdd(''); setNewPhoneNum('') }}
                      className="btn-secondary"
                      style={{ fontSize: 12.5 }}
                    >
                      Cancelar
                    </button>
                  </div>
                </div>
              )}
            </div>
          </div>

          {socios.length > 0 && (
            <div className="panel" style={{ padding: 0, overflow: 'hidden' }}>
              <div className="panel-title" style={{ padding: '12px 16px' }}>
                <h3>Quadro de Sócios e Administradores</h3>
                <span className="meta">{socios.length}</span>
              </div>
              <table>
                <thead>
                  <tr>
                    <th>Nome / Qualificação</th>
                    <th>CPF / CNPJ</th>
                    <th>Entrada</th>
                  </tr>
                </thead>
                <tbody>
                  {socios.map((s, i) => {
                    const raw  = (s.cpf_cnpj_socio ?? '').replace(/\D/g, '')
                    const isPj = raw.length === 14
                    const docFmt = isPj
                      ? raw.replace(/^(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})$/, '$1.$2.$3/$4-$5')
                      : s.cpf_cnpj_socio ?? '—'
                    const contactHref = s.cpf_cnpj_socio
                      ? `/contatos/${encodeURIComponent(s.cpf_cnpj_socio)}`
                      : null
                    return (
                      <tr key={i}>
                        <td>
                          <div style={{ display: 'flex', alignItems: 'center', gap: 7, fontWeight: 500, fontSize: 13 }}>
                            {contactHref ? (
                              <Link
                                href={contactHref}
                                style={{ color: 'var(--text)', textDecoration: 'none' }}
                                onMouseEnter={e => { (e.currentTarget as HTMLElement).style.color = 'var(--accent)' }}
                                onMouseLeave={e => { (e.currentTarget as HTMLElement).style.color = 'var(--text)' }}
                              >
                                {s.nome_socio ?? '—'}
                              </Link>
                            ) : (s.nome_socio ?? '—')}
                            {s.eh_administrador && <span className="qsa-badge adm">ADM</span>}
                          </div>
                          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--muted-2)', marginTop: 2 }}>
                            {s.qualificacao_socio_desc ?? '—'}
                          </div>
                          {isPj && s.nome_representante && (
                            <div className="qsa-repr" style={{ marginTop: 5 }}>
                              <span className="qsa-repr-label">Repr.</span>
                              <span className="qsa-repr-name">{s.nome_representante}</span>
                              {s.qualificacao_representante_desc && (
                                <span className="qsa-qualif">{s.qualificacao_representante_desc}</span>
                              )}
                            </div>
                          )}
                        </td>
                        <td style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--muted)' }}>
                          {isPj ? `CNPJ ${docFmt}` : docFmt}
                        </td>
                        <td style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--muted-3)', whiteSpace: 'nowrap' }}>
                          {s.data_entrada_sociedade
                            ? new Date(s.data_entrada_sociedade).toLocaleDateString('pt-BR')
                            : '—'}
                        </td>
                      </tr>
                    )
                  })}
                </tbody>
              </table>
            </div>
          )}

          <div className="panel">
            <div className="panel-title"><h3>Simples Nacional</h3></div>
            <div className="info-row">
              <span className="k">Optante Simples</span>
              <span className="v">{lead.opcao_simples === null ? '—' : lead.opcao_simples ? 'Sim' : 'Não'}</span>
            </div>
            <div className="info-row">
              <span className="k">MEI</span>
              <span className="v">{lead.opcao_mei === null ? '—' : lead.opcao_mei ? 'Sim' : 'Não'}</span>
            </div>
          </div>
        </div>

        {/* ── Coluna direita: CRM ── */}
        <div>
          <div className="panel">
            <div className="panel-title">
              <h3>CRM</h3>
              <span className={`badge-status st-${stage}`}>
                <span className="bd" />
                {STAGE_LABELS[stage]}
              </span>
            </div>

            <p className="subhead">Estágio</p>
            <select
              className="stage-select"
              value={stage}
              onChange={e => setStage(e.target.value as Stage)}
            >
              <optgroup label="Lead">
                {LEAD_STAGES.map(s => <option key={s} value={s}>{STAGE_LABELS[s]}</option>)}
              </optgroup>
              <optgroup label="Prospect">
                {PROSPECT_STAGES.map(s => <option key={s} value={s}>{STAGE_LABELS[s]}</option>)}
              </optgroup>
              <optgroup label="Encerramento">
                <option value="desqualificado">Desqualificado</option>
              </optgroup>
            </select>

            <p className="subhead">Produto de interesse</p>
            <div className="product-pick">
              {(Object.entries(PRODUTO_LABELS) as [Produto, string][]).map(([k, v]) => (
                <button
                  key={k}
                  type="button"
                  className={`prod-chip ${produto === k ? 'selected' : ''}`}
                  onClick={() => setProduto(prev => prev === k ? '' : k)}
                >
                  {v}
                </button>
              ))}
            </div>

            <div className="field" style={{ marginTop: 14 }}>
              <label>Notas internas</label>
              <textarea
                className="notes"
                rows={4}
                value={notes}
                onChange={e => setNotes(e.target.value)}
                placeholder="Histórico, observações, próximos passos..."
              />
            </div>

            {stage === 'desqualificado' && (
              <div className="field">
                <label>Motivo da desqualificação</label>
                <input
                  value={motivo}
                  onChange={e => setMotivo(e.target.value)}
                  placeholder="Ex: sem interesse, concorrente, CNPJ encerrado..."
                />
              </div>
            )}

            {saveError && (
              <p style={{ color: 'var(--warn)', fontFamily: 'var(--font-mono)', fontSize: 12, marginBottom: 8 }}>{saveError}</p>
            )}
            <button
              className="btn-primary"
              style={{ width: '100%' }}
              disabled={saving}
              onClick={save}
            >
              {saving ? 'Salvando...' : 'Salvar alterações'}
            </button>

            <div className="lgpd-note">
              <span className="tag">LGPD</span>
              Dados públicos da Receita Federal. Use apenas para contato comercial B2B com legítimo interesse.
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}