'use client'

import { useCallback, useRef, useState } from 'react'
import type { JSX } from 'react'
import type { Produto, Stage, PhoneOption } from '@/lib/types'
import { ConfirmTaskModal } from '@/components/ConfirmTaskModal'

type Screen =
  | 'phone-select'
  | 'entry'
  | 'outbound-name-check' | 'msg-with-name' | 'msg-without-name'
  | 'recem-aberta'
  | 'followup' | 'inbound' | 'qualification'
  | 'product-select'
  | 'retail' | 'hcm' | 'tef' | 'ravsign'
  | 'meeting'

const TRAIL: Record<Screen, string[]> = {
  'phone-select':          ['Número de contato'],
  'entry':                 ['Início'],
  'outbound-name-check':   ['Início', 'Outbound'],
  'msg-with-name':         ['Início', 'Outbound', 'Com nome'],
  'msg-without-name':      ['Início', 'Outbound', 'Sem nome'],
  'recem-aberta':          ['Início', 'Empresa recém-aberta'],
  'followup':              ['Início', 'Follow-up'],
  'inbound':               ['Início', 'Inbound'],
  'qualification':         ['Início', 'Qualificação'],
  'product-select':        ['Início', 'Produto'],
  'retail':                ['Início', 'Produto', 'Retail'],
  'hcm':                   ['Início', 'Produto', 'HCM'],
  'tef':                   ['Início', 'Produto', 'TEF'],
  'ravsign':               ['Início', 'Produto', 'RavSign'],
  'meeting':               ['Início', 'Produto', 'Reunião'],
}

interface Props {
  cnpj: string
  razaoSocial: string
  nomeFantasia: string | null
  municipio: string
  currentNotes: string
  currentStage: Stage
  userName: string
  phones: PhoneOption[]
  isResuming: boolean
  onClose: () => void
  onLeadUpdated: (updates: { notes: string; stage?: Stage; produto?: Produto; crm_type?: string }) => void
}

function fmtNow() {
  return new Date().toLocaleString('pt-BR', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' })
}

function fmtPhone(ddd: string | null, num: string) {
  return ddd ? `(${ddd}) ${num}` : num
}

export default function ContatoFlow({
  cnpj, razaoSocial, nomeFantasia, municipio,
  currentNotes, currentStage, userName,
  phones, isResuming,
  onClose, onLeadUpdated,
}: Props) {
  const [screen, setScreen]           = useState<Screen>('phone-select')
  const [copied, setCopied]           = useState<string | null>(null)
  const [saving, setSaving]           = useState(false)
  const [showTaskModal, setShowTaskModal] = useState(false)

  // custom phone input state
  const [showCustomPhone, setShowCustomPhone] = useState(false)
  const [customDdd, setCustomDdd]     = useState('')
  const [customNum, setCustomNum]     = useState('')

  // contact name step (after picking a phone)
  const [pendingPhone, setPendingPhone] = useState<{ num: string; label: string } | null>(null)
  const [contactName, setContactName]   = useState('')
  // sobrevive além do passo de seleção de número, pra personalizar a
  // mensagem de "empresa recém-aberta" mais adiante no fluxo
  const [savedContactName, setSavedContactName] = useState('')

  const logRef    = useRef<string[]>([])
  const headerRef = useRef<string>(`\n\n──── Fluxo de contato · ${fmtNow()} ────`)

  const buildNotes = useCallback(() => {
    const lines = logRef.current
    if (!lines.length) return currentNotes
    const block = headerRef.current + '\n' + lines.join('\n')
    return (currentNotes ?? '').trim() + block
  }, [currentNotes])

  const patch = useCallback(async (extra: Record<string, unknown> = {}) => {
    setSaving(true)
    const notes = buildNotes()
    await fetch(`/api/leads/${cnpj}`, {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ notes, ...extra }),
    })
    setSaving(false)
    onLeadUpdated({ notes, stage: extra.stage as Stage, produto: extra.produto as Produto, crm_type: extra.crm_type as string })
  }, [buildNotes, cnpj, onLeadUpdated])

  const log = useCallback((line: string) => {
    logRef.current.push(line)
  }, [])

  const goTo = useCallback((next: Screen, logLine?: string, patchExtra?: Record<string, unknown>) => {
    if (logLine) log(logLine)
    setScreen(next)
    if (patchExtra || logLine) {
      patch(patchExtra ?? {})
    }
    if (next === 'followup' || next === 'meeting') {
      setShowTaskModal(true)
    }
  }, [log, patch])

  function confirmPhone(num: string, label: string, name: string) {
    const namePart = name.trim() ? ` — ${name.trim()}` : ''
    goTo('entry', `Contato via: ${num} (${label})${namePart}`)
    setPendingPhone(null)
    setSavedContactName(name.trim())
    setContactName('')
  }

  function confirmPhoneWhatsApp(num: string, label: string, name: string) {
    const digits = num.replace(/\D/g, '')
    const waNumber = digits.length <= 11 ? `55${digits}` : digits
    window.open(`https://wa.me/${waNumber}?text=${encodeURIComponent(MSG_WITH_NAME)}`, '_blank', 'noopener,noreferrer')
    confirmPhone(num, label, name)
  }

  function copyText(text: string, key: string) {
    navigator.clipboard.writeText(text).then(() => {
      setCopied(key)
      setTimeout(() => setCopied(null), 1800)
    })
  }

  const cleanNome = (s: string) => s.replace(/^'+|'+$/g, '').trim()
  const nome = cleanNome(nomeFantasia || razaoSocial)

  const MSG_WITH_NAME = `Oi, tudo bem? Meu nome é ${userName}, sou consultor de Tecnologia e representante da Teknisa. Falo com o responsável pelo estabelecimento ${nome}?

A Teknisa é uma software house pioneira e referência no ramo de Food Service — estamos no mercado há mais de 36 anos e atuamos em 11 países. Nossas soluções integram toda a operação, conectando todo o ecossistema de um negócio de food service, e atendemos desde grandes clientes como Madero, Giraffas e Senac até operações médias e pequenas.

Meu contato é para entender um pouco sobre o ${nome} visando uma futura parceria de sucesso — vocês revendem algum software hoje?`

  const MSG_WITHOUT_NAME = `Oi, tudo bem? Meu nome é ${userName}, sou consultor de Tecnologia e representante da Teknisa. Você é responsável por um estabelecimento aí do ramo de alimentação, certo?

A Teknisa é uma software house pioneira e referência no ramo de Food Service — estamos no mercado há mais de 36 anos e atuamos em 11 países. Nossas soluções integram toda a operação, conectando todo o ecossistema de um negócio de food service, e atendemos desde grandes clientes como Madero, Giraffas e Senac até operações médias e pequenas.

Meu contato é para entender um pouco sobre o negócio de vocês visando uma futura parceria de sucesso — hoje vocês revendem algum software?`

  const MSG_RECEM_ABERTA = `Oi${savedContactName ? `, ${savedContactName}` : ''}, tudo bem? Parabéns pela abertura do ${nome}! Que essa nova fase traga muito sucesso pro negócio de vocês.

Me chamo ${userName}, sou consultor de Tecnologia e represento a Teknisa por aqui.

Como vocês estão começando agora, esse é justamente o momento ideal pra já deixar a gestão do negócio bem estruturada e ficar em dia com a parte legal desde o início — controle de caixa, estoque, emissão de nota fiscal e as obrigações da Receita — pra evitar dor de cabeça mais pra frente.

A Teknisa é uma software house pioneira no ramo de Food Service, com mais de 36 anos de mercado e presença em 11 países. Hoje atendemos desde grandes redes, como Madero e Giraffas, até negócios que estão começando agora, como o de vocês.

Vocês já têm algum sistema definido pro dia a dia do estabelecimento, ou ainda estão organizando essa parte?`

  // ── UI helpers ───────────────────────────────────────────────────────────
  const Tag = ({ children }: { children: string }) => (
    <span style={{
      fontFamily: 'var(--font-mono)', fontSize: 10.5, background: 'var(--surface-3)',
      color: 'var(--muted)', padding: '2px 7px', borderRadius: 4,
      border: '1px solid var(--border)',
    }}>{children}</span>
  )

  const NodeTitle = ({ tag, children }: { tag: string; children: string }) => (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
      <Tag>{tag}</Tag>
      <span style={{ fontFamily: 'var(--font-heading)', fontSize: 15, color: 'var(--muted)' }}>{children}</span>
    </div>
  )

  const Card = ({ title, desc, onClick }: { title: string; desc: string; onClick: () => void }) => (
    <button
      onClick={onClick}
      style={{
        display: 'block', width: '100%', textAlign: 'left',
        background: 'var(--surface-2)', border: '1px solid var(--border)',
        borderRadius: 8, padding: '14px 16px', cursor: 'pointer',
        transition: 'border-color .15s, background .15s',
        marginBottom: 10,
      }}
      onMouseEnter={e => { (e.currentTarget as HTMLElement).style.borderColor = 'var(--accent)' }}
      onMouseLeave={e => { (e.currentTarget as HTMLElement).style.borderColor = 'var(--border)' }}
    >
      <div style={{ fontFamily: 'var(--font-heading)', fontSize: 14, color: 'var(--text)', marginBottom: 4 }}>{title} →</div>
      <div style={{ fontSize: 12.5, color: 'var(--muted)', lineHeight: 1.5 }}>{desc}</div>
    </button>
  )

  const MsgBox = ({ label, text, msgKey }: { label: string; text: string; msgKey: string }) => (
    <div style={{
      background: 'var(--surface-3)', border: '1px solid var(--border)',
      borderRadius: 8, padding: 14, marginBottom: 14,
    }}>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '.06em', marginBottom: 8 }}>{label}</div>
      <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--text)', marginBottom: 10 }}>{text}</p>
      <button
        onClick={() => copyText(text, msgKey)}
        style={{
          fontFamily: 'var(--font-mono)', fontSize: 11, background: 'transparent',
          border: `1px solid ${copied === msgKey ? 'var(--accent)' : 'var(--border)'}`,
          color: copied === msgKey ? 'var(--text)' : 'var(--muted)',
          padding: '5px 10px', borderRadius: 5, cursor: 'pointer', transition: '.15s',
        }}
      >
        {copied === msgKey ? 'copiado ✓' : 'copiar texto'}
      </button>
    </div>
  )

  const InfoList = ({ items }: { items: { bold?: string; text?: string }[] }) => (
    <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 18px' }}>
      {items.map((it, i) => (
        <li key={i} style={{
          padding: '9px 0 9px 18px', borderBottom: '1px solid var(--border)',
          fontSize: 13, color: 'var(--muted)', lineHeight: 1.5, position: 'relative',
        }}>
          <span style={{ position: 'absolute', left: 0, color: 'var(--border-strong)' }}>›</span>
          {it.bold && <strong style={{ color: 'var(--text)', fontWeight: 500 }}>{it.bold}</strong>}
          {it.text}
        </li>
      ))}
    </ul>
  )

  const Back = ({ to, label = '← voltar' }: { to: Screen; label?: string }) => (
    <button
      onClick={() => setScreen(to)}
      style={{ background: 'none', border: 'none', color: 'var(--muted)', fontSize: 12.5, cursor: 'pointer', marginBottom: 18, padding: 0, fontFamily: 'var(--font-sans)' }}
    >
      {label}
    </button>
  )

  const SectionLabel = ({ children }: { children: string }) => (
    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, color: 'var(--muted-2)', textTransform: 'uppercase', letterSpacing: '.1em', margin: '20px 0 10px' }}>{children}</div>
  )

  const QualQ = ({ n, q, why }: { n: number; q: string; why: string }) => (
    <div style={{ display: 'flex', gap: 12, padding: '13px 0', borderBottom: '1px solid var(--border)' }}>
      <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--accent)', fontSize: 13, flexShrink: 0, width: 18 }}>{n}</span>
      <div>
        <p style={{ margin: 0, fontSize: 13.5, color: 'var(--text)', lineHeight: 1.5 }}>{q}</p>
        <p style={{ margin: '4px 0 0', fontSize: 12.5, color: 'var(--muted)' }}>{why}</p>
      </div>
    </div>
  )

  const ProductCard = ({ code, title, desc, color, prod }: { code: string; title: string; desc: string; color: string; prod: Produto }) => (
    <button
      onClick={() => goTo(prod, `Produto selecionado: ${title}`, { produto: prod, stage: 'produto', crm_type: 'prospect' })}
      style={{
        display: 'block', width: '100%', textAlign: 'left',
        background: 'var(--surface-2)', borderRadius: 8, padding: '14px 16px',
        borderLeft: `3px solid ${color}`, border: `1px solid var(--border)`,
        borderLeftColor: color, cursor: 'pointer', transition: '.15s', marginBottom: 10,
      }}
      onMouseEnter={e => { (e.currentTarget as HTMLElement).style.background = 'var(--surface-3)' }}
      onMouseLeave={e => { (e.currentTarget as HTMLElement).style.background = 'var(--surface-2)' }}
    >
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--muted-3)', letterSpacing: '.08em', marginBottom: 4 }}>{code}</div>
      <div style={{ fontFamily: 'var(--font-heading)', fontSize: 14, color: 'var(--text)', marginBottom: 4 }}>{title} →</div>
      <div style={{ fontSize: 12.5, color: 'var(--muted)', lineHeight: 1.45 }}>{desc}</div>
    </button>
  )

  // ── Screens ──────────────────────────────────────────────────────────────
  const screens: Record<Screen, () => JSX.Element> = {

    'phone-select': () => (
      <>
        <NodeTitle tag="00">
          {isResuming ? 'Retomando — qual número você está usando?' : 'Qual número você vai usar?'}
        </NodeTitle>

        {isResuming && (
          <div style={{
            background: 'var(--surface-2)', border: '1px solid var(--border)',
            borderRadius: 8, padding: '10px 14px', marginBottom: 16,
            display: 'flex', alignItems: 'center', gap: 10,
          }}>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--muted)', textTransform: 'uppercase' }}>Estágio atual</span>
            <span style={{ fontSize: 12.5, color: 'var(--text)' }}>
              {{
                contato: 'Contato iniciado',
                aguardando: 'Aguardando resposta',
                qualificado: 'Qualificado',
                produto: 'Produto identificado',
                reuniao: 'Reunião agendada',
                ganho: 'Fechado · ganho',
                desqualificado: 'Desqualificado',
                novo: 'Novo',
              }[currentStage] ?? currentStage}
            </span>
          </div>
        )}

        {phones.length === 0 && !pendingPhone && (
          <p style={{ fontSize: 13, color: 'var(--muted)', marginBottom: 16, lineHeight: 1.5 }}>
            Nenhum número cadastrado para este lead. Use um número abaixo ou siga sem registrar.
          </p>
        )}

        {/* Passo 2: campo de nome após selecionar o número */}
        {pendingPhone ? (
          <div style={{
            background: 'var(--surface-2)', border: '1px solid var(--accent)',
            borderRadius: 8, padding: 16, marginBottom: 10,
          }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--accent)', marginBottom: 6 }}>
              {pendingPhone.num}
            </div>
            <div style={{ fontSize: 12, color: 'var(--muted)', marginBottom: 10 }}>
              Com quem você vai falar? (opcional)
            </div>
            <input
              autoFocus
              value={contactName}
              onChange={e => setContactName(e.target.value)}
              onKeyDown={e => { if (e.key === 'Enter') confirmPhone(pendingPhone.num, pendingPhone.label, contactName) }}
              placeholder="Ex: João — dono, Maria — gerente..."
              style={{
                width: '100%', boxSizing: 'border-box',
                background: 'var(--surface-3)', border: '1px solid var(--border)',
                borderRadius: 6, color: 'var(--text)', padding: '8px 10px',
                fontSize: 13, fontFamily: 'var(--font-sans)', marginBottom: 10,
              }}
            />
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <button
                onClick={() => confirmPhone(pendingPhone.num, pendingPhone.label, contactName)}
                style={{
                  padding: '8px 12px', borderRadius: 6, cursor: 'pointer',
                  background: 'var(--accent)', border: 'none', color: '#000',
                  fontSize: 13, fontFamily: 'var(--font-sans)',
                }}
              >
                Iniciar com este número →
              </button>
              <button
                onClick={() => confirmPhoneWhatsApp(pendingPhone.num, pendingPhone.label, contactName)}
                style={{
                  padding: '8px 12px', borderRadius: 6, cursor: 'pointer',
                  background: '#25D366', border: 'none', color: '#04210f',
                  fontSize: 13, fontFamily: 'var(--font-sans)', fontWeight: 500,
                  display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7,
                }}
              >
                Iniciar no WhatsApp ↗
              </button>
              <button
                onClick={() => { setPendingPhone(null); setContactName('') }}
                style={{
                  padding: '8px 12px', borderRadius: 6, cursor: 'pointer',
                  background: 'transparent', border: '1px solid var(--border)',
                  color: 'var(--muted)', fontSize: 13, fontFamily: 'var(--font-sans)',
                }}
              >
                ← Voltar
              </button>
            </div>
          </div>
        ) : (
          <>
            {phones.map((p, i) => {
              const num = fmtPhone(p.ddd, p.numero)
              return (
                <Card
                  key={i}
                  title={num}
                  desc={p.nome}
                  onClick={() => setPendingPhone({ num, label: p.nome })}
                />
              )
            })}

            {!showCustomPhone ? (
              <button
                onClick={() => setShowCustomPhone(true)}
                style={{
                  width: '100%', padding: '12px 16px', textAlign: 'left',
                  background: 'transparent', border: '1px dashed var(--border)',
                  borderRadius: 8, color: 'var(--muted)', fontSize: 13,
                  cursor: 'pointer', marginBottom: 10,
                  fontFamily: 'var(--font-sans)',
                }}
              >
                + Outro número (não cadastrado)
              </button>
            ) : (
              <div style={{
                background: 'var(--surface-2)', border: '1px solid var(--border)',
                borderRadius: 8, padding: 14, marginBottom: 10,
              }}>
                <div style={{ fontSize: 12, color: 'var(--muted)', marginBottom: 10 }}>Digite o número que você está usando:</div>
                <div style={{ display: 'flex', gap: 8, marginBottom: 10 }}>
                  <input
                    value={customDdd}
                    onChange={e => setCustomDdd(e.target.value.replace(/\D/g, '').slice(0, 3))}
                    placeholder="DDD"
                    maxLength={3}
                    style={{
                      width: 64, background: 'var(--surface-3)', border: '1px solid var(--border)',
                      borderRadius: 6, color: 'var(--text)', padding: '8px 10px',
                      fontSize: 13, fontFamily: 'var(--font-mono)',
                    }}
                  />
                  <input
                    value={customNum}
                    onChange={e => setCustomNum(e.target.value)}
                    placeholder="Número"
                    style={{
                      flex: 1, background: 'var(--surface-3)', border: '1px solid var(--border)',
                      borderRadius: 6, color: 'var(--text)', padding: '8px 10px',
                      fontSize: 13, fontFamily: 'var(--font-mono)',
                    }}
                  />
                </div>
                <div style={{ display: 'flex', gap: 8 }}>
                  <button
                    disabled={!customNum.trim()}
                    onClick={() => {
                      if (!customNum.trim()) return
                      const num = fmtPhone(customDdd || null, customNum)
                      setPendingPhone({ num, label: 'número avulso' })
                      setShowCustomPhone(false)
                      setCustomDdd(''); setCustomNum('')
                    }}
                    style={{
                      flex: 1, padding: '8px 12px', borderRadius: 6, cursor: 'pointer',
                      background: customNum.trim() ? 'var(--accent)' : 'var(--surface-3)',
                      border: 'none', color: customNum.trim() ? '#000' : 'var(--muted)',
                      fontSize: 13, fontFamily: 'var(--font-sans)',
                      transition: '.15s',
                    }}
                  >
                    Continuar
                  </button>
                  <button
                    onClick={() => { setShowCustomPhone(false); setCustomDdd(''); setCustomNum('') }}
                    style={{
                      padding: '8px 12px', borderRadius: 6, cursor: 'pointer',
                      background: 'transparent', border: '1px solid var(--border)',
                      color: 'var(--muted)', fontSize: 13, fontFamily: 'var(--font-sans)',
                    }}
                  >
                    Cancelar
                  </button>
                </div>
              </div>
            )}

            <button
              onClick={() => setScreen('entry')}
              style={{
                background: 'none', border: 'none', color: 'var(--muted-2)',
                fontSize: 12.5, cursor: 'pointer', padding: '8px 0',
                fontFamily: 'var(--font-sans)', display: 'block',
              }}
            >
              Seguir sem registrar número →
            </button>
          </>
        )}
      </>
    ),

    entry: () => (
      <>
        <Back to="phone-select" />
        <NodeTitle tag="01">Como o contato começou?</NodeTitle>
        <Card
          title="Eu inicio o contato"
          desc="Você aborda ativamente o lead por WhatsApp ou telefone."
          onClick={() => goTo('outbound-name-check', 'Abordagem outbound iniciada', { stage: 'contato' })}
        />
        <Card
          title="O lead me procura"
          desc="Indicação ou interesse espontâneo chegou até você primeiro."
          onClick={() => goTo('inbound', 'Lead entrou em contato espontaneamente (inbound)', { stage: 'contato' })}
        />
        <Card
          title="Empresa recém-aberta"
          desc="CNPJ com data de abertura recente — use o gancho de parabenização."
          onClick={() => goTo('recem-aberta', 'Abordagem via gancho de empresa recém-aberta', { stage: 'contato' })}
        />
      </>
    ),

    'recem-aberta': () => (
      <>
        <Back to="entry" />
        <NodeTitle tag="02">Empresa recém-aberta — parabenização + apresentação</NodeTitle>
        <MsgBox label="Primeira mensagem" text={MSG_RECEM_ABERTA} msgKey="m3" />
        <SectionLabel>Próximo passo</SectionLabel>
        <Card
          title="Sem resposta"
          desc="Ver régua de follow-up."
          onClick={() => goTo('followup', 'Mensagem enviada (empresa recém-aberta) — aguardando resposta', { stage: 'aguardando' })}
        />
        <Card
          title="Respondeu"
          desc="Seguir para apresentação do produto."
          onClick={() => goTo('product-select', 'Mensagem enviada (empresa recém-aberta) — lead respondeu')}
        />
      </>
    ),

    'outbound-name-check': () => (
      <>
        <Back to="entry" />
        <NodeTitle tag="02">Você sabe o nome do estabelecimento?</NodeTitle>
        <Card
          title="Sim, tenho o nome"
          desc="Use a abordagem direta, citando o estabelecimento."
          onClick={() => goTo('msg-with-name')}
        />
        <Card
          title="Não, só sei o setor"
          desc="Tenho o nome do dono/telefone, mas não o nome do negócio."
          onClick={() => goTo('msg-without-name')}
        />
      </>
    ),

    'msg-with-name': () => (
      <>
        <Back to="outbound-name-check" />
        <NodeTitle tag="03">Modelo 1 — com nome do estabelecimento</NodeTitle>
        <MsgBox label="Primeira mensagem" text={MSG_WITH_NAME} msgKey="m1" />
        <SectionLabel>Próximo passo</SectionLabel>
        <Card
          title="Sem resposta"
          desc="Ver régua de follow-up."
          onClick={() => goTo('followup', 'Mensagem enviada (com nome) — aguardando resposta', { stage: 'aguardando' })}
        />
        <Card
          title="Respondeu"
          desc="Seguir para apresentação do produto."
          onClick={() => goTo('product-select', 'Mensagem enviada (com nome) — lead respondeu')}
        />
      </>
    ),

    'msg-without-name': () => (
      <>
        <Back to="outbound-name-check" />
        <NodeTitle tag="03">Modelo 2 — sem nome do estabelecimento</NodeTitle>
        <MsgBox label="Primeira mensagem" text={MSG_WITHOUT_NAME} msgKey="m2" />
        <SectionLabel>Próximo passo</SectionLabel>
        <Card
          title="Sem resposta"
          desc="Ver régua de follow-up."
          onClick={() => goTo('followup', 'Mensagem enviada (sem nome do estabelecimento) — aguardando resposta', { stage: 'aguardando' })}
        />
        <Card
          title="Respondeu"
          desc="Seguir para apresentação do produto."
          onClick={() => goTo('product-select', 'Mensagem enviada (sem nome) — lead respondeu')}
        />
      </>
    ),

    followup: () => (
      <>
        <Back to="product-select" label="continuar para produtos →" />
        <NodeTitle tag="04">Régua de follow-up — sem resposta</NodeTitle>
        <InfoList items={[
          { bold: 'Dia 0: ', text: 'primeira mensagem enviada.' },
          { bold: 'Dia +2: ', text: 'follow-up leve — "oi, só confirmando se chegou minha mensagem, sem pressa."' },
          { bold: 'Dia +5 a +6: ', text: 'última tentativa, perguntando se prefere que o contato seja removido da lista (respeita LGPD).' },
          { bold: 'Após 3 tentativas sem resposta: ', text: 'encerrar o contato e marcar o lead como frio.' },
        ]} />
        <Card
          title="3 tentativas — sem resposta"
          desc="Encerrar fluxo e marcar como desqualificado."
          onClick={() => goTo('product-select', 'Follow-up encerrado sem resposta — lead frio', { stage: 'desqualificado', motivo: 'Sem resposta após 3 tentativas' })}
        />
      </>
    ),

    inbound: () => (
      <>
        <Back to="entry" />
        <NodeTitle tag="02">Lead chegou por conta própria</NodeTitle>
        <p style={{ fontSize: 13.5, color: 'var(--muted)', lineHeight: 1.55, marginBottom: 20 }}>
          Como já existe interesse, pule direto para a qualificação e o produto de interesse.
        </p>
        <Card
          title="Qualificar antes"
          desc="Fazer as 3 perguntas de porte antes de apresentar o produto."
          onClick={() => goTo('qualification', 'Qualificação iniciada via WhatsApp', { stage: 'qualificado' })}
        />
        <Card
          title="Já sei o produto"
          desc="Lead já demonstrou interesse específico."
          onClick={() => goTo('product-select', 'Lead inbound com interesse específico declarado', { stage: 'qualificado' })}
        />
      </>
    ),

    qualification: () => (
      <>
        <Back to="product-select" label="continuar para produtos →" />
        <NodeTitle tag="03">Qualificação rápida (via WhatsApp)</NodeTitle>
        <QualQ
          n={1}
          q="Quantos caixas ou terminais de venda o estabelecimento tem hoje?"
          why="Separa lead pequeno de conta grande escondida."
        />
        <QualQ
          n={2}
          q="Já usam algum sistema de PDV ou ainda é tudo manual?"
          why="Troca de sistema exige discurso diferente de implantação do zero."
        />
        <QualQ
          n={3}
          q="É um estabelecimento único ou tem mais unidades?"
          why="Rede de lojas deve migrar para o funil de contas grandes."
        />
        <div style={{ marginTop: 18 }}>
          <Card
            title="Qualificação concluída"
            desc="Avançar para seleção do produto."
            onClick={() => goTo('product-select', 'Qualificação concluída — 3 perguntas respondidas')}
          />
        </div>
      </>
    ),

    'product-select': () => (
      <>
        <Back to="entry" label="↺ reiniciar fluxo" />
        <NodeTitle tag="05">Qual produto está em jogo?</NodeTitle>
        <ProductCard code="RETAIL"    title="Retail"   desc="PDV, retaguarda e totem de autoatendimento."            color="#2f8f7a" prod="retail" />
        <ProductCard code="HCM"       title="HCM"      desc="Gestão de pessoas, ponto, escala e folha."              color="#5b8fd6" prod="hcm" />
        <ProductCard code="TEF · CTF" title="TEF"      desc="Transação de cartão integrada ao PDV, via CTF."         color="#d67a4c" prod="tef" />
        <ProductCard code="RAVSIGN"   title="RavSign"  desc="Certificado digital, empresa do próprio grupo."          color="#c0629b" prod="ravsign" />
      </>
    ),

    retail: () => (
      <>
        <Back to="product-select" label="← trocar produto" />
        <NodeTitle tag="RETAIL">Discurso de abordagem</NodeTitle>
        <InfoList items={[
          { bold: 'Foco na operação do caixa no dia a dia: ', text: 'agilidade no atendimento.' },
          { bold: 'Redução de erro ', text: 'na venda e no fechamento de caixa.' },
          { bold: 'Controle de estoque ', text: 'integrado à retaguarda.' },
          { bold: 'Totem de autoatendimento: ', text: 'existe no escopo, mas a venda por ora é do sistema — equipamento fica para segunda etapa.' },
        ]} />
        <div style={{ background: 'var(--surface-3)', border: '1px solid var(--border)', borderRadius: 8, padding: 14, marginBottom: 14 }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--muted)', textTransform: 'uppercase', marginBottom: 6 }}>Proposta base</div>
          <p style={{ fontSize: 13, color: 'var(--muted)', margin: 0, lineHeight: 1.5 }}>Escopo básico com valor de referência a definir por Rafael — usar como ponto de partida da negociação, não como pacote fechado.</p>
        </div>
        <Card title="Cliente demonstrou interesse" desc="Agendar reunião única de demo + proposta." onClick={() => goTo('meeting', 'Cliente (Retail) demonstrou interesse — reunião a agendar', { stage: 'reuniao' })} />
      </>
    ),

    hcm: () => (
      <>
        <Back to="product-select" label="← trocar produto" />
        <NodeTitle tag="HCM">Discurso de abordagem</NodeTitle>
        <InfoList items={[
          { bold: 'Eixo é retaguarda administrativa, ', text: 'não operação de caixa.' },
          { bold: 'Controle de ponto ', text: 'e escala de funcionários.' },
          { bold: 'Folha de pagamento ', text: 'mais confiável.' },
          { bold: 'Gatilho de venda: ', text: 'economia de tempo do RH e redução de risco/erro trabalhista.' },
        ]} />
        <div style={{ background: 'var(--surface-3)', border: '1px solid var(--border)', borderRadius: 8, padding: 14, marginBottom: 14 }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--muted)', textTransform: 'uppercase', marginBottom: 6 }}>Proposta base</div>
          <p style={{ fontSize: 13, color: 'var(--muted)', margin: 0, lineHeight: 1.5 }}>Escopo básico com valor de referência a definir por Rafael — usar como ponto de partida da negociação.</p>
        </div>
        <Card title="Cliente demonstrou interesse" desc="Agendar reunião única de demo + proposta." onClick={() => goTo('meeting', 'Cliente (HCM) demonstrou interesse — reunião a agendar', { stage: 'reuniao' })} />
      </>
    ),

    tef: () => (
      <>
        <Back to="product-select" label="← trocar produto" />
        <NodeTitle tag="TEF · CTF">Discurso de abordagem</NodeTitle>
        <InfoList items={[
          { bold: 'Segurança da transação ', text: '— não é sobre taxa de cartão.' },
          { bold: 'Integração direta com o PDV, ', text: 'dispensando digitação manual.' },
          { bold: 'Agilidade no fechamento de caixa.' },
          { bold: 'Praticamente obrigatório ', text: 'para quem quer totem de autoatendimento — sem operador, não há como passar o cartão manualmente.' },
        ]} />
        <Card title="Cliente demonstrou interesse" desc="Agendar reunião única de demo + proposta." onClick={() => goTo('meeting', 'Cliente (TEF) demonstrou interesse — reunião a agendar', { stage: 'reuniao' })} />
      </>
    ),

    ravsign: () => (
      <>
        <Back to="product-select" label="← trocar produto" />
        <NodeTitle tag="RAVSIGN">Discurso de abordagem</NodeTitle>
        <InfoList items={[
          { bold: 'Venda de necessidade legal, ', text: 'não de conveniência opcional.' },
          { bold: 'Obrigatoriedade ', text: 'e prazo de validade do certificado.' },
          { bold: 'Vantagem: ', text: 'já resolver isso com quem cuida do resto da tecnologia do negócio.' },
          { bold: 'Empresa do próprio grupo RAVAPI.' },
        ]} />
        <Card title="Cliente demonstrou interesse" desc="Agendar reunião única de demo + proposta." onClick={() => goTo('meeting', 'Cliente (RavSign) demonstrou interesse — reunião a agendar', { stage: 'reuniao' })} />
      </>
    ),

    meeting: () => (
      <>
        <Back to="product-select" label="← voltar aos produtos" />
        <NodeTitle tag="06">Agendamento — reunião única de demo + proposta</NodeTitle>
        <InfoList items={[
          { bold: 'Duração: ', text: '15 a 20 minutos, sem separar diagnóstico de proposta.' },
          { bold: 'Proposta base ajustada: ', text: 'a qualificação por WhatsApp já feita é suficiente para chegar pronto.' },
          { bold: 'Na reunião: ', text: 'mostrar o sistema funcionando e já apresentar a proposta com o interesse ainda quente.' },
          { text: 'Não separar levantamento + proposta em reuniões distintas — cada etapa extra é uma chance do lead esfriar.' },
        ]} />
        <div style={{
          background: 'var(--surface-3)', border: '1px solid var(--border)', borderRadius: 8,
          padding: 14, display: 'flex', gap: 10,
        }}>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--muted)', textTransform: 'uppercase', flexShrink: 0, paddingTop: 1 }}>Atenção</span>
          <p style={{ fontSize: 13, color: 'var(--muted)', margin: 0, lineHeight: 1.5 }}>
            Esse formato vale só para o funil de <strong style={{ color: 'var(--text)' }}>pequenos estabelecimentos</strong>. Contas grandes seguem caminho consultivo separado.
          </p>
        </div>
        <div style={{ marginTop: 16 }}>
          <Card
            title="Reunião realizada — ganho!"
            desc="Fechar o lead como ganho."
            onClick={() => goTo('product-select', 'Reunião realizada — lead fechado como GANHO', { stage: 'ganho' })}
          />
          <Card
            title="Reunião realizada — sem fechamento"
            desc="Voltou para qualificação ou aguardando resposta."
            onClick={() => goTo('product-select', 'Reunião realizada — aguardando decisão do cliente', { stage: 'qualificado' })}
          />
        </div>
      </>
    ),
  }

  const trail = TRAIL[screen]

  async function criarTarefa(data: { tipo: string; descricao: string; vencimento: string }) {
    await fetch('/api/tarefas', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ cnpj, ...data }),
    })
    setShowTaskModal(false)
  }

  return (
    <>
      {/* backdrop */}
      <div
        onClick={onClose}
        style={{
          position: 'fixed', inset: 0, background: 'rgba(0,0,0,.55)',
          zIndex: 900, backdropFilter: 'blur(2px)',
        }}
      />

      {/* drawer */}
      <div style={{
        position: 'fixed', top: 0, right: 0, bottom: 0,
        width: 440, background: 'var(--surface)',
        borderLeft: '1px solid var(--border-strong)',
        zIndex: 901, display: 'flex', flexDirection: 'column',
        overflowY: 'auto',
      }}>
        {/* header */}
        <div style={{
          padding: '18px 20px 14px',
          borderBottom: '1px solid var(--border)',
          display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between',
          position: 'sticky', top: 0, background: 'var(--surface)', zIndex: 1,
        }}>
          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '.1em', marginBottom: 4 }}>
              {isResuming ? 'Retomar contato' : 'Fluxo de prospecção'}
            </div>
            <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--text)', lineHeight: 1.3 }}>{cleanNome(razaoSocial)}</div>
            {nomeFantasia && <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 2 }}>{cleanNome(nomeFantasia)}</div>}
          </div>
          <button
            onClick={onClose}
            style={{ background: 'none', border: 'none', color: 'var(--muted)', fontSize: 18, cursor: 'pointer', lineHeight: 1, padding: 4 }}
          >
            ✕
          </button>
        </div>

        {/* trail */}
        <div style={{ padding: '10px 20px', borderBottom: '1px solid var(--border)', display: 'flex', flexWrap: 'wrap', gap: 5 }}>
          {trail.map((step, i) => {
            const isLast = i === trail.length - 1
            return (
              <span key={i} style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
                <span style={{
                  fontFamily: 'var(--font-mono)', fontSize: 11,
                  color: isLast ? 'var(--text)' : 'var(--muted-2)',
                  padding: '3px 8px', borderRadius: 20,
                  border: `1px solid ${isLast ? 'var(--border-strong)' : 'transparent'}`,
                }}>{step}</span>
                {!isLast && <span style={{ color: 'var(--muted-3)', fontSize: 11 }}>›</span>}
              </span>
            )
          })}
        </div>

        {/* content */}
        <div style={{ padding: '20px 20px 40px', flex: 1 }}>
          {screens[screen]()}
        </div>

        {saving && (
          <div style={{
            position: 'sticky', bottom: 0,
            background: 'var(--surface-2)', borderTop: '1px solid var(--border)',
            padding: '8px 20px', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--muted)',
          }}>
            Salvando nas observações…
          </div>
        )}
      </div>

      {showTaskModal && (
        <ConfirmTaskModal
          cnpj={cnpj}
          razaoSocial={cleanNome(razaoSocial)}
          onConfirm={criarTarefa}
          onCancel={() => setShowTaskModal(false)}
        />
      )}
    </>
  )
}