// Tela: Painel — visão geral

/* ── Modal: Nova Tarefa ──────────────────────────────────── */
function NovaTarefaModal({ onClose, onAdd }) {
  const [titulo, setTitulo] = React.useState('');
  const [data, setData] = React.useState('');
  const [hora, setHora] = React.useState('09:00');
  const [prio, setPrio] = React.useState('Média');
  const [conta, setConta] = React.useState('');
  const toast = useToast();

  const PRIOS = ['Baixa', 'Média', 'Alta', 'Urgente'];
  const PRIO_CLS = { Baixa: 'pill', Média: 'pill-blue', Alta: 'pill-yellow', Urgente: 'pill-pink' };
  const PRIO_DOT = { Baixa: 'lav', Média: 'blue', Alta: 'yellow', Urgente: 'pink' };
  const valid = titulo.trim().length > 0;

  const submit = () => {
    if (!valid) return;
    if (onAdd) onAdd({ titulo: titulo.trim(), data, hora, prio, conta });
    toast(`Tarefa criada: "${titulo.trim()}" ✓`);
    onClose();
  };

  return (
    <div className="modal-wrap" onClick={onClose}>
      <div className="card modal-card" onClick={e => e.stopPropagation()} style={{width: 500}}>
        <div className="modal-head">
          <div>
            <div className="modal-title">Nova <em>Tarefa</em></div>
            <div className="modal-sub muted">Adicionar à lista de hoje</div>
          </div>
          <div className="mini-btn" onClick={onClose}>{ICN.x}</div>
        </div>

        <div className="form-grid">
          <div className="field field-full">
            <label className="field-lbl">Título *</label>
            <input className="ezz-input" placeholder="Ex: Ligar para cliente sobre proposta"
              value={titulo} onChange={e => setTitulo(e.target.value)} autoFocus />
          </div>
          <div className="field">
            <label className="field-lbl">Data</label>
            <input className="ezz-input" type="date" value={data} onChange={e => setData(e.target.value)} />
          </div>
          <div className="field">
            <label className="field-lbl">Horário</label>
            <input className="ezz-input" type="time" value={hora} onChange={e => setHora(e.target.value)} />
          </div>
          <div className="field field-full">
            <label className="field-lbl">Prioridade</label>
            <div className="row" style={{gap: 6}}>
              {PRIOS.map(p => (
                <span key={p} className={`pill ${prio === p ? PRIO_CLS[p] : ''}`}
                  onClick={() => setPrio(p)} style={{cursor:'default', fontSize:11}}>{p}</span>
              ))}
            </div>
          </div>
          <div className="field field-full">
            <label className="field-lbl">Conta / Empresa (opcional)</label>
            <input className="ezz-input" placeholder="Ex: Tecnoluz Solar"
              value={conta} onChange={e => setConta(e.target.value)} />
          </div>
        </div>

        <div className="modal-actions">
          <button className="btn-ghost" onClick={onClose}>Cancelar</button>
          <button className="btn-primary" onClick={submit} disabled={!valid} style={{opacity: valid ? 1 : 0.5}}>
            {ICN.plus} Criar tarefa
          </button>
        </div>
      </div>
    </div>
  );
}

function StatCard({ icon, label, value, sub, color, onClick }) {
  const palette = {
    blue:   { bg: 'oklch(0.93 0.06 250)',  ic: 'oklch(0.45 0.18 250)', border: 'oklch(0.82 0.1 250)' },
    mint:   { bg: 'oklch(0.93 0.05 165)',  ic: 'oklch(0.45 0.14 165)', border: 'oklch(0.82 0.09 165)' },
    yellow: { bg: 'oklch(0.95 0.07 85)',   ic: 'oklch(0.52 0.18 85)',  border: 'oklch(0.86 0.12 85)'  },
    pink:   { bg: 'oklch(0.94 0.05 10)',   ic: 'oklch(0.52 0.18 10)',  border: 'oklch(0.84 0.1 10)'   },
    lav:    { bg: 'oklch(0.93 0.06 290)',  ic: 'oklch(0.48 0.16 290)', border: 'oklch(0.82 0.1 290)'  },
  };
  const p = palette[color] || palette.blue;

  return (
    <div className="card stat"
      onClick={onClick}
      style={{ cursor: onClick ? 'pointer' : 'default', transition: 'box-shadow .15s, transform .15s' }}
      onMouseEnter={e => { if (onClick) { e.currentTarget.style.boxShadow = '0 6px 24px -6px rgba(80,60,180,.16)'; e.currentTarget.style.transform = 'translateY(-1px)'; }}}
      onMouseLeave={e => { e.currentTarget.style.boxShadow = ''; e.currentTarget.style.transform = ''; }}
    >
      {/* Topo: label + ícone */}
      <div className="stat-top">
        <span className="stat-label">{label}</span>
        <div className="stat-ic" style={{ background: p.bg, color: p.ic }}>{icon}</div>
      </div>

      {/* Valor principal */}
      <div className="stat-val money">{value}</div>

      {/* Rodapé: sub + barra colorida */}
      <div className="stat-foot">
        <span className="stat-sub">{sub}</span>
        <div className="stat-bar" style={{ background: p.border }} />
      </div>

      <style>{`
        .stat { padding: 20px 22px 16px !important; display: flex; flex-direction: column; gap: 0; }
        .stat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
        .stat-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; }
        .stat-ic svg { width: 18px; height: 18px; }
        .stat-label { font-size: 12px; color: var(--ink-muted); font-weight: 600; letter-spacing: 0.01em; text-transform: uppercase; }
        .stat-val { font-size: 28px; font-weight: 750; letter-spacing: -0.03em; line-height: 1; color: var(--ink); margin-bottom: 14px; }
        .stat-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
        .stat-sub { font-size: 12px; color: var(--ink-muted); }
        .stat-bar { height: 3px; border-radius: 99px; flex: 1; opacity: 0.7; }
      `}</style>
    </div>
  );
}

const painelHeaders = () => { const t = localStorage.getItem('ezza_token'); return { 'Content-Type':'application/json', ...(t?{'Authorization':`Bearer ${t}`}:{}) }; };

function Painel({ goto, onOpenContact, user }) {
  const [weight, setWeight] = React.useState('ponderado');
  const [doneTasks, setDoneTasks] = React.useState({});
  const [showTarefa, setShowTarefa] = React.useState(false);
  const [extraTarefas, setExtraTarefas] = React.useState([]);
  const [kpis, setKpis] = React.useState(null);

  const [ops, setOps] = React.useState(null);        // oportunidades reais
  const [contatosReais, setContatosReais] = React.useState(null);
  const [tarefas, setTarefas] = React.useState(null); // tarefas reais

  const carregarTarefas = () => {
    fetch('/api/tarefas', { headers: painelHeaders() })
      .then(r => r.json())
      .then(d => { if (d.ok) setTarefas(d.tarefas); })
      .catch(() => {});
  };

  React.useEffect(() => {
    fetch('/api/painel/kpis', { headers: painelHeaders() })
      .then(r => r.json())
      .then(d => { if (d.ok) setKpis(d.kpis); })
      .catch(() => {});
    fetch('/api/oportunidades', { headers: painelHeaders() })
      .then(r => r.json())
      .then(d => { if (d.ok) setOps(d.oportunidades.map(o => ({ ...o, valor: parseFloat(o.valor) || 0 }))); })
      .catch(() => {});
    fetch('/api/contatos', { headers: painelHeaders() })
      .then(r => r.json())
      .then(d => { if (d.ok) setContatosReais(d.contatos); })
      .catch(() => {});
    carregarTarefas();
  }, []);

  // Cria tarefa no banco
  const criarTarefaReal = async (form) => {
    try {
      const r = await fetch('/api/tarefas', {
        method: 'POST', headers: painelHeaders(),
        body: JSON.stringify({
          titulo: form.titulo + (form.conta ? ` — ${form.conta}` : ''),
          quando: form.data ? `${form.data}${form.hora ? ' ' + form.hora : ''}` : (form.hora || null),
          cor: { Baixa:'lav', Média:'blue', Alta:'yellow', Urgente:'pink' }[form.prio] || 'blue',
        }),
      });
      const d = await r.json();
      if (d.ok) setTarefas(prev => [d.tarefa, ...(prev || [])]);
    } catch (e) {}
  };

  // Marca/desmarca tarefa
  const toggleTarefa = async (t) => {
    setTarefas(prev => prev.map(x => x.id === t.id ? { ...x, concluida: x.concluida ? 0 : 1 } : x));
    try {
      await fetch(`/api/tarefas/${t.id}`, {
        method: 'PUT', headers: painelHeaders(),
        body: JSON.stringify({ ...t, concluida: t.concluida ? 0 : 1 }),
      });
    } catch (e) {}
  };

  // Oportunidades em uso: reais se houver, senão demo
  const OPS = (ops && ops.length) ? ops : window.OPORTUNIDADES;
  const toast = useToast();

  const handleAddTarefa = (t) => {
    criarTarefaReal(t);            // salva no banco
    setExtraTarefas(prev => [...prev, t]); // fallback visual (demo / offline)
  };

  // ── Saudação dinâmica ──────────────────────────────────────
  const now = new Date();
  const hour = now.getHours();
  const saudacao = hour < 12 ? 'Bom dia' : hour < 18 ? 'Boa tarde' : 'Boa noite';

  const primeiroNome = React.useMemo(() => {
    const raw = (user && user.name) ? user.name : 'Usuário';
    return raw.split(' ')[0];
  }, [user]);

  const dataHoje = React.useMemo(() => {
    const dias = ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado'];
    const meses = ['janeiro','fevereiro','março','abril','maio','junho','julho','agosto','setembro','outubro','novembro','dezembro'];
    const d = new Date();
    return `${dias[d.getDay()]}, ${d.getDate()} de ${meses[d.getMonth()]}`;
  }, []);

  const BASE_TAREFAS = [
    { t: "Enviar proposta — Construtora Paineiras", w: "Hoje 14:00", c: "pink" },
    { t: "Ligar para Ana Carvalho (Tecnoluz)",       w: "Hoje 15:30", c: "blue" },
    { t: "Revisar SLA com Brasil Logística",          w: "Amanhã 09:00", c: "yellow" },
    { t: "Aprovar materiais — Editora Pampa",         w: "Sexta 11:00", c: "mint" },
    { t: "Demo para Café do Vale",                    w: "Próx. segunda", c: "lav" },
  ];
  const totalTarefas = BASE_TAREFAS.length + extraTarefas.length;
  const tarefasHoje = BASE_TAREFAS.filter(t => t.w.startsWith('Hoje')).length
    + extraTarefas.filter(e => e.data === new Date().toISOString().slice(0,10)).length;

  return (
    <>
      {showTarefa && <NovaTarefaModal onClose={() => setShowTarefa(false)} onAdd={handleAddTarefa} />}
      <PageHead
        title={<>{saudacao}, <em>{primeiroNome}</em></>}
        subtitle={`${dataHoje} · ${tarefasHoje} ${tarefasHoje === 1 ? 'tarefa' : 'tarefas'} para hoje`}
        right={
          <div className="row">
            <div className="pill pill-mint">{(() => {
              const avg = Math.round(OPS.reduce((s,n) => s + (n.prob||0), 0) / Math.max(1, OPS.length));
              return `Pipeline · ${avg}% prob. média`;
            })()}</div>
            <ActionBtn icon={ICN.plus} title="Nova tarefa" size="icon" onClick={() => setShowTarefa(true)} />
          </div>
        }
      />

      {(() => {
        // KPIs: usa dados reais do banco se disponível, senão usa dados demo
        const k = kpis;
        const negFechados   = k ? k.opsFechadas    : NEGOCIOS.filter(n => n.etapa === 'Fechado').length;
        const receitaV      = k ? k.receita        : NEGOCIOS.filter(n => n.etapa === 'Fechado').reduce((s,n) => s+n.valor, 0);
        const receitaFmt    = receitaV >= 1e6
          ? `R$ ${(receitaV/1e6).toFixed(2).replace('.',',')}M`
          : receitaV > 0 ? `R$ ${receitaV.toLocaleString('pt-BR')}` : 'R$ 0';
        const totalNegocios = k ? k.opsTotal       : NEGOCIOS.length;
        const totalContatos = k ? k.totalContatos  : CONTATOS.length;
        const casosAbertos  = k ? k.casosAbertos   : CASOS.filter(c => c.status !== 'Resolvido').length;
        const casosCriticos = k ? k.casosCriticos  : CASOS.filter(c => c.prioridade === 'Crítica').length;
        const leadsAtivos   = k ? k.leadsAtivos    : LEADS.filter(l => l.etapa !== 'fechado' && l.etapa !== 'perdido').length;
        const leadsTotal    = k ? k.leadsTotal     : LEADS.length;
        return (
          <div className="painel-stats">
            <StatCard icon={ICN.trendUp}   color="blue"   label="Receita fechada"      value={receitaFmt}          sub={`${negFechados} negócio${negFechados!==1?'s':''} fechado${negFechados!==1?'s':''}`} onClick={() => goto('relatorios')} />
            <StatCard icon={ICN.users}     color="mint"   label="Total de contatos"    value={`+${totalContatos}`} sub={`${leadsTotal} lead${leadsTotal!==1?'s':''} no pipeline`}  onClick={() => goto('contatos')} />
            <StatCard icon={ICN.briefcase} color="yellow" label="Oportunidades"        value={`+${totalNegocios}`} sub={`${leadsAtivos} lead${leadsAtivos!==1?'s':''} em andamento`} onClick={() => goto('oportunidades')} />
            <StatCard icon={ICN.inbox}     color="pink"   label="Casos em aberto"      value={String(casosAbertos)} sub={`${casosCriticos} crítico${casosCriticos!==1?'s':''}`} onClick={() => goto('casos')} />
          </div>
        );
      })()}

      <div className="painel-grid">
        <div className="card painel-pipeline">
          <div className="card-head">
            <div className="card-title">Funil de Pipeline</div>
            <div className="row">
              <div className="pill">R$ {(OPS.filter(n => n.etapa !== 'Fechado').reduce((s,n) => s + n.valor, 0) / 1000).toFixed(0)}k em aberto</div>
              <div className="row" style={{gap:4}}>
                <span className={`pill ${weight === 'ponderado' ? 'pill-dark' : ''}`} onClick={() => setWeight('ponderado')} style={{cursor:'default'}}>Ponderado</span>
                <span className={`pill ${weight === 'total' ? 'pill-dark' : ''}`} onClick={() => setWeight('total')} style={{cursor:'default'}}>Total</span>
              </div>
            </div>
          </div>
          <FunnelBars weight={weight} goto={goto} ops={OPS} />
        </div>

        <div className="card painel-tasks">
          <div className="card-head">
            <div className="card-title">Próximas tarefas</div>
            <CardActions createLabel="Nova tarefa" onCreate={() => setShowTarefa(true)} onPeriod={() => goto('calendario')} />
          </div>
          <ul className="tasks">
            {/* Tarefas reais do banco (se autenticado) */}
            {tarefas !== null && tarefas.map((t) => (
              <li key={'r'+t.id} style={{opacity: t.concluida ? 0.5 : 1}}>
                <span className={`tdot tdot-${t.cor || 'blue'}`} />
                <div className="col" style={{flex:1}}>
                  <span className="ttitle" style={{textDecoration: t.concluida ? 'line-through' : 'none'}}>{t.titulo}</span>
                  <span className="twhen muted">{t.quando || 'Sem data'}</span>
                </div>
                <button className={`mini-btn ${t.concluida ? 'mini-btn-on' : ''}`} onClick={() => { toggleTarefa(t); toast(t.concluida ? 'Tarefa reaberta' : 'Tarefa concluída'); }}>{ICN.check}</button>
              </li>
            ))}
            {/* Empty state real */}
            {tarefas !== null && tarefas.length === 0 && (
              <li style={{justifyContent:'center', color:'var(--ink-muted)', fontSize:13, padding:'16px 0'}}>Nenhuma tarefa. Crie a primeira no botão acima.</li>
            )}
            {/* Fallback demo (não autenticado) */}
            {tarefas === null && [
              ...BASE_TAREFAS,
              ...extraTarefas.map(e => ({ t: e.titulo + (e.conta ? ` — ${e.conta}` : ''), w: e.data ? `${e.data}${e.hora ? ' ' + e.hora : ''}` : e.hora || 'Sem data', c: { Baixa:'lav', Média:'blue', Alta:'yellow', Urgente:'pink' }[e.prio] || 'blue' })),
            ].map((it, i) => (
              <li key={i} style={{opacity: doneTasks[i] ? 0.5 : 1}}>
                <span className={`tdot tdot-${it.c}`} />
                <div className="col" style={{flex:1}}>
                  <span className="ttitle" style={{textDecoration: doneTasks[i] ? 'line-through' : 'none'}}>{it.t}</span>
                  <span className="twhen muted">{it.w}</span>
                </div>
                <button className={`mini-btn ${doneTasks[i] ? 'mini-btn-on' : ''}`} onClick={() => { setDoneTasks(d => ({ ...d, [i]: !d[i] })); toast(doneTasks[i] ? 'Tarefa reaberta' : 'Tarefa concluída'); }}>{ICN.check}</button>
              </li>
            ))}
          </ul>
        </div>
      </div>

      <div className="painel-grid-2">
        <div className="card">
          <div className="card-head">
            <div className="card-title">Histórico de Interações</div>
            <CardActions createLabel="Nova oportunidade" onCreate={() => goto('oportunidades')} onPeriod={() => goto('relatorios')} />
          </div>
          <div className="interactions">
            {(() => {
              const CORES = ['azul','teal','preto','amarelo','claro'];
              const fmtData = (o) => {
                const raw = o.criado_em || o.fecha;
                if (!raw) return '—';
                const d = new Date(raw);
                if (!isNaN(d)) return `${String(d.getDate()).padStart(2,'0')}/${String(d.getMonth()+1).padStart(2,'0')}`;
                return String(raw).slice(0, 5); // já formatado "DD/MM"
              };
              const interacoes = OPS.slice(0, 6).map((o, i) => ({
                d: fmtData(o),
                t: o.conta,
                empresa: o.conta,
                tipo: o.etapa === 'Fechado' ? 'fechamento' : o.etapa === 'Proposta' ? 'proposta' : o.etapa === 'Negociação' ? 'reuniao' : 'ligacao',
                status: o.etapa === 'Fechado' ? 'ganho' : 'andamento',
                v: `R$ ${(o.valor || 0).toLocaleString('pt-BR')}`,
                c: CORES[i % CORES.length],
                ids: [i % 12, (i + 4) % 12],
              }));
              if (interacoes.length === 0) {
                return <div className="muted" style={{gridColumn:'1/-1', textAlign:'center', padding:'32px 0', fontSize:13}}>
                  Nenhuma oportunidade ainda. Crie a primeira na aba Oportunidades.
                </div>;
              }
              return interacoes.map((it,i) => <InteractionCard key={i} it={it} goto={goto} />);
            })()}
          </div>
        </div>

        {(() => {
          // Contato em destaque: real se houver, demo se não autenticado, empty state se cliente sem contatos
          const destaque = contatosReais === null ? window.CONTATOS[4] : (contatosReais[0] || null);
          if (!destaque) {
            return (
              <div className="card painel-contact-mini">
                <div className="card-head"><div className="card-title">Cliente em destaque</div></div>
                <div style={{display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', padding:'40px 16px', textAlign:'center', gap:12}}>
                  <div style={{width:64, height:64, borderRadius:'50%', background:'oklch(0.94 0.01 250)', display:'grid', placeItems:'center', color:'var(--ink-muted)'}}>{ICN.users}</div>
                  <div className="muted" style={{fontSize:13}}>Nenhum contato cadastrado ainda.</div>
                  <button className="btn-primary" onClick={() => goto && goto('contatos')}>{ICN.plus} Adicionar contato</button>
                </div>
              </div>
            );
          }
          const avatarSrc = destaque.avatar || AVATAR_URLS[(destaque.id || 0) % 12];
          return (
            <div className="card painel-contact-mini" onClick={() => onOpenContact(destaque.id)}>
              <div className="card-head">
                <div className="card-title">Cliente em destaque</div>
                <div className="row" style={{gap:4}}>
                  <ActionBtn icon={ICN.link} title="Copiar link" onClick={() => { navigator.clipboard?.writeText(`${window.location.origin}/contatos/${destaque.id}`).catch(()=>{}); toast('Link copiado ✓'); }} />
                  <ActionBtn icon={ICN.arrowUp} title="Abrir contato" onClick={() => onOpenContact(destaque.id)} />
                </div>
              </div>
              <div style={{display:'flex', flexDirection:'column', alignItems:'center', padding:'4px 0 14px'}}>
                <img src={avatarSrc} style={{width:108, height:108, borderRadius:'50%', objectFit:'cover', border:'4px solid white', boxShadow:'0 12px 28px -12px rgba(20,30,60,.25)'}} alt="" />
                <div style={{fontSize:20, fontWeight:700, marginTop:14, letterSpacing:'-0.02em'}}>{destaque.nome.split(' ').slice(0,2).join(' ')}</div>
                <div className="muted" style={{fontSize:12.5, marginTop:2, textAlign:'center'}}>{[destaque.cargo, destaque.empresa].filter(Boolean).join(' · ') || '—'}</div>
                <div className="row" style={{marginTop:16, gap:8}} onClick={(e) => e.stopPropagation()}>
                  <ActionBtn icon={ICN.edit}  title="Editar contato" onClick={() => onOpenContact(destaque.id)} />
                  {destaque.email && <ActionBtn icon={ICN.mail}  title="Enviar e-mail" onClick={() => window.open(`mailto:${destaque.email}?subject=Olá, ${destaque.nome.split(' ')[0]}!`)} />}
                  {destaque.fone && <ActionBtn icon={ICN.phone} title="Ligar" onClick={() => window.open(`tel:${destaque.fone.replace(/\D/g,'')}`)} />}
                  <ActionBtn icon={ICN.plus}  title="Nova oportunidade" onClick={() => goto && goto('oportunidades')} />
                  <ActionBtn icon={ICN.cal}   title="Agendar reunião" onClick={() => goto && goto('calendario')} />
                </div>
                {destaque.tag && <div className="pill pill-mint" style={{marginTop:14}}>{destaque.tag}</div>}
              </div>
            </div>
          );
        })()}
      </div>

      <style>{`
        .painel-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 14px; }
        .painel-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; margin-bottom: 14px; }
        .painel-grid-2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; }
        .tasks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
        .tasks li { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid oklch(0.93 0.01 255); }
        .tasks li:last-child { border-bottom: 0; }
        .tdot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
        .tdot-blue { background: var(--acc-blue); }
        .tdot-pink { background: var(--acc-pink); }
        .tdot-yellow { background: var(--acc-yellow); }
        .tdot-mint { background: var(--acc-mint); }
        .tdot-lav { background: var(--acc-lav); }
        .ttitle { font-size: 13px; font-weight: 500; }
        .twhen { font-size: 11.5px; margin-top: 2px; }

        .interactions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
        .painel-contact-mini { cursor: default; }
      `}</style>
    </>
  );
}

function InteractionCard({ it, goto }) {
  const bg = {
    azul:    'oklch(0.55 0.16 250)',
    teal:    'oklch(0.50 0.10 200)',
    preto:   'oklch(0.18 0.01 250)',
    amarelo: 'oklch(0.82 0.16 85)',
    claro:   'oklch(0.96 0.01 250)',
  }[it.c];
  const isLight = it.c === 'amarelo' || it.c === 'claro';
  const ink     = isLight ? 'oklch(0.18 0.02 250)' : 'white';
  const inkMid  = isLight ? 'rgba(0,0,0,.5)'       : 'rgba(255,255,255,.65)';
  const pillBg  = isLight ? 'rgba(0,0,0,.09)'      : 'rgba(255,255,255,.18)';

  const TIPO_ICN = {
    proposta:   '📄', reuniao:    '🗓️',
    fechamento: '🏆', email:      '✉️',
    ligacao:    '📞',
  };
  const STATUS = {
    ganho:     { label: 'Ganho',       bg: 'rgba(34,197,94,.22)',  color: isLight ? 'oklch(0.35 0.14 145)' : 'oklch(0.88 0.14 145)' },
    perdido:   { label: 'Perdido',     bg: 'rgba(239,68,68,.22)',  color: isLight ? 'oklch(0.40 0.18 25)'  : 'oklch(0.88 0.14 25)'  },
    andamento: { label: 'Em andamento',bg: 'rgba(255,255,255,.14)',color: inkMid },
  };
  const st = STATUS[it.status] || STATUS.andamento;

  return (
    <div onClick={() => goto && goto('pipeline')}
      style={{
        background: bg, color: ink, borderRadius: 18, padding: '14px 16px',
        minHeight: 130, display: 'flex', flexDirection: 'column',
        justifyContent: 'space-between', cursor: 'pointer',
        boxShadow: '0 8px 24px -12px rgba(20,30,60,.3)',
        transition: 'transform .15s, box-shadow .15s',
      }}
      onMouseEnter={e => { e.currentTarget.style.transform='translateY(-2px)'; e.currentTarget.style.boxShadow='0 14px 32px -12px rgba(20,30,60,.4)'; }}
      onMouseLeave={e => { e.currentTarget.style.transform=''; e.currentTarget.style.boxShadow='0 8px 24px -12px rgba(20,30,60,.3)'; }}
    >
      {/* Topo: data + tipo */}
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 10}}>
        <span style={{fontSize:10, fontWeight:700, background: pillBg, padding:'3px 8px', borderRadius:999, color: inkMid, letterSpacing:'0.04em'}}>
          {it.d}
        </span>
        <span style={{fontSize:14}}>{TIPO_ICN[it.tipo] || '💬'}</span>
      </div>

      {/* Título + empresa */}
      <div style={{flex:1}}>
        <div style={{fontSize:13, fontWeight:700, lineHeight:1.2, marginBottom:2}}>{it.t}</div>
        <div style={{fontSize:11, color: inkMid, fontWeight:500}}>{it.empresa}</div>
      </div>

      {/* Rodapé: valor + status + avatares */}
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginTop:12}}>
        <div>
          <div style={{fontSize:18, fontWeight:800, letterSpacing:'-0.03em', lineHeight:1}}>{it.v}</div>
          <span style={{fontSize:10, fontWeight:700, background: st.bg, color: st.color, padding:'2px 7px', borderRadius:999, marginTop:5, display:'inline-block'}}>
            {st.label}
          </span>
        </div>
        <div className="av-stack">
          {it.ids.slice(0,3).map(id => <img key={id} src={AVATAR_URLS[id]} alt="" />)}
        </div>
      </div>
    </div>
  );
}

function FunnelBars({ weight = 'ponderado', goto, ops }) {
  // Agrupa oportunidades por etapa, soma valor bruto e valor ponderado por prob individual
  const STAGE_META = {
    'Qualificado': { label: 'Qualificação',    color: 'blue'   },
    'Proposta':    { label: 'Proposta',         color: 'pink'   },
    'Negociação':  { label: 'Negociação',       color: 'mint'   },
    'Fechado':     { label: 'Fechado',          color: 'lav'    },
  };
  const ORDER = ['Qualificado', 'Proposta', 'Negociação', 'Fechado'];
  const grouped = {};
  (ops || window.OPORTUNIDADES || []).forEach(n => {
    if (!grouped[n.etapa]) grouped[n.etapa] = { v: 0, w: 0 };
    grouped[n.etapa].v += n.valor;
    grouped[n.etapa].w += n.valor * ((n.prob || 0) / 100);
  });
  const stages = ORDER.filter(k => grouped[k]).map(k => ({
    label: STAGE_META[k].label,
    color: STAGE_META[k].color,
    v: grouped[k].v,
    w: grouped[k].w,
  }));
  if (stages.length === 0) {
    return <div className="muted" style={{padding:'32px 0', textAlign:'center', fontSize:13}}>
      Nenhuma oportunidade no funil ainda.
    </div>;
  }
  const maxV = Math.max(...stages.map(s => s.v), 1);
  const maxW = Math.max(...stages.map(s => s.w), 1);
  return (
    <div style={{display:'flex', flexDirection:'column', gap: 10, paddingTop: 4}}>
      {stages.map((s, i) => {
        const pct = weight === 'ponderado'
          ? (s.w / maxW) * 100
          : (s.v / maxV) * 100;
        const displayV = weight === 'ponderado'
          ? Math.round(s.w)
          : s.v;
        return (
          <div key={i} style={{display:'flex', alignItems:'center', gap: 12}}>
            <div style={{flex: 1}}>
              <div style={{display:'flex', justifyContent:'space-between', fontSize: 12, marginBottom: 6}}>
                <span className="muted">{s.label}</span>
                <span className="money" style={{fontWeight: 600}}>R$ {displayV.toLocaleString('pt-BR')}</span>
              </div>
              <div style={{height: 10, borderRadius: 99, background:'oklch(0.94 0.01 250)', overflow:'hidden'}}>
                <div style={{
                  width: `${pct}%`, height: '100%',
                  background: `var(--acc-${s.color})`,
                  borderRadius: 99,
                  transition: 'width .4s cubic-bezier(.2,.8,.2,1)',
                }} />
              </div>
            </div>
            <ActionBtn icon={ICN.arrowUp} title={`Ver no Pipeline — ${s.label}`} onClick={() => goto ? goto('pipeline') : null} />
          </div>
        );
      })}
    </div>
  );
}

window.Painel = Painel;
window.InteractionCard = InteractionCard;
window.FunnelBars = FunnelBars;
window.StatCard = StatCard;