/* Placar — home page · v2 Caribe */

const { useState: useStateP, useMemo: useMemoP, useEffect: useEffectP } = React;

/* ---------- HERO with cruise photo ---------- */
function PlacarHero(){
  const days = CDC.daysUntil(CDC.EMBARQUE_DATE);
  return (
    <div className="hero-photo">
      <div className="bg placar"></div>
      <div className="veil"></div>
      <div className="content">
        <div className="eb"><span className="bar"></span><span>Cruzeiro dos Campeões · Maio 2026</span></div>
        <h1>Bem-vindo <span className="not-italic">a</span> <span className="turq">bordo.</span></h1>
      </div>
    </div>
  );
}

/* ---------- Welcome strip with boarding pass ---------- */
function Welcome(){
  const days = CDC.daysUntil(CDC.EMBARQUE_DATE);
  return (
    <div className="welcome">
      <div className="left">
        <div className="page-eyebrow"><span className="bar"></span>Placar · Home</div>
        <p className="page-sub" style={{ marginTop:0, fontSize:22, color:'var(--ink)' }}>
          São <b style={{ color:'var(--ocean)' }}>13 colaboradores</b>, <b style={{ color:'var(--ocean)' }}>uma meta</b> de R$400M, e <b style={{ color:'var(--turq-deep)' }}>um destino</b>. O placar abaixo é a fotografia exata de quem está produzindo, em que ritmo, e em qual cabine cada um está dormindo se o ano fechar hoje.
        </p>
        <div className="updated">
          <span className="dot"></span>
          Atualizado · {CDC.KPIS_COLETIVOS.ultimaAtualizacao}
        </div>
      </div>
      <div className="bp">
        <div className="main">
          <span className="label">Cartão de embarque</span>
          <div className="from-to">
            <div className="pt">SSZ<small>Santos</small></div>
            <span className="arrow">→</span>
            <div className="pt">AMS<small>América do Sul</small></div>
          </div>
          <div className="meta">
            <span>Voo: <b>GM27</b></span>
            <span>Classe: <b>Cruzeiro</b></span>
          </div>
        </div>
        <div className="divider"></div>
        <div className="stub">
          <span className="d">{days}</span>
          <span className="l">Dias</span>
        </div>
      </div>
    </div>
  );
}

/* ---------- Rota panel — ship moving along the route ---------- */
function Rota(){
  const k = CDC.KPIS_COLETIVOS;
  const pct = (k.receitaYTD / k.receitaMeta) * 100;
  const linearPace = (k.mesAtual / k.mesTotal) * 100;
  const ahead = pct - linearPace;
  const [animPct, setAnimPct] = useStateP(0);
  useEffectP(() => {
    const id = setTimeout(() => setAnimPct(pct), 300);
    return () => clearTimeout(id);
  }, [pct]);

  return (
    <div className="rota">
      <div className="rota-head">
        <div className="rota-eb">Rota · Receita coletiva 2026</div>
        <div className="rota-fig">
          <span style={{ fontStyle:'normal', fontFamily:'var(--mono)', fontSize:11, color:'var(--ink-mute)', letterSpacing:'.2em', marginRight:14 }}>YTD</span>
          <b>{CDC.fmtMoney(k.receitaYTD)}</b> <span style={{ color:'var(--ink-mute)' }}>/ {CDC.fmtMoney(k.receitaMeta)}</span>
        </div>
      </div>

      <div className="route">
        <div className="port">
          <span className="l">Origem</span>
          <span className="n">Santos</span>
          <span className="s">R$ 0 · jan 2026</span>
        </div>
        <div className="track">
          <div className="start"></div>
          <div className="line"></div>
          <div className="line passed" style={{ right: `${100 - animPct}%`, width:'auto' }}></div>
          <div className="end"></div>
          <div className="ship" style={{ left: animPct + '%' }}>
            <div className="pulse"></div>
            <div className="badge">{pct.toFixed(1).replace('.', ',')}% · {CDC.fmtMoney(k.receitaYTD)}</div>
            <svg width="46" height="46" viewBox="0 0 46 46" fill="none">
              <circle cx="23" cy="23" r="22" fill="#fffbf0" stroke="#15a3b8" strokeWidth="1.5"/>
              {/* ship glyph */}
              <path d="M10 28 L36 28 L34 32 L12 32 Z" fill="#0b3556"/>
              <path d="M14 28 L14 24 L17 24 L17 22 L29 22 L29 24 L32 24 L32 28" stroke="#0b3556" strokeWidth="1.5" fill="#0b3556"/>
              <rect x="19" y="17" width="2" height="5" fill="#0b3556"/>
              <rect x="23" y="15" width="2" height="7" fill="#0b3556"/>
              <path d="M19 17 L17 15 M23 15 L21 13" stroke="#e8765a" strokeWidth="1.2" fill="none"/>
              {/* water */}
              <path d="M9 35 Q12 33 15 35 T21 35 T27 35 T33 35 T37 35" stroke="#15a3b8" strokeWidth="1.2" fill="none" opacity=".6"/>
            </svg>
          </div>
        </div>
        <div className="port right">
          <span className="l">Destino</span>
          <span className="n">América do Sul</span>
          <span className="s">R$ 400M · fev 2027</span>
        </div>
      </div>

      <div className="footer">
        <span>Mês <b>{k.mesAtual} / {k.mesTotal}</b></span>
        <span>Pace vs linear · <span className={ahead >= 0 ? 'good' : 'bad'}>{(ahead >= 0 ? '+' : '') + ahead.toFixed(1).replace('.', ',')} pp</span></span>
        <span>Projeção · <b>{CDC.fmtMoney(Math.round(k.receitaYTD / k.mesAtual * k.mesTotal))}</b></span>
        <span>Faltam · <b>{CDC.fmtMoney(k.receitaMeta - k.receitaYTD)}</b></span>
      </div>
    </div>
  );
}

/* ---------- KPI strip ---------- */
function KpiStrip(){
  const k = CDC.KPIS_COLETIVOS;
  const items = [
    {
      ix:'K · 01', nm:'Close Rate', val:k.closeRateAvg, unit:'%', dec:1,
      meta:`alvo ${k.closeRateAlvo}%`, side:'YTD · 5 meses',
      tag: k.closeRateAvg >= k.closeRateAlvo ? { c:'ok', t:'NA META' } : { c:'warn', t:`-${(k.closeRateAlvo - k.closeRateAvg).toFixed(1).replace('.', ',')} pp` },
    },
    {
      ix:'K · 02', nm:'Leads qualificados / mês', val:k.leadsMesAvg, unit:'', dec:0,
      meta:`alvo ${k.leadsMesAlvo.toLocaleString('pt-BR')}`, side:'YTD · 5 meses',
      tag: k.leadsMesAvg >= k.leadsMesAlvo ? { c:'ok', t:'NA META' } : { c:'warn', t:`-${(k.leadsMesAlvo - k.leadsMesAvg)} leads` },
    },
    {
      ix:'K · 03', nm:'Inadimplência', val:k.inadAvg, unit:'%', dec:1,
      meta:`teto ${k.inadTeto}%`, side:'YTD · 5 meses',
      tag: k.inadAvg <= k.inadTeto ? { c:'ok', t:'CONTROLADA' } : { c:'bad', t:'ACIMA' },
    },
  ];
  return (
    <div className="kpi-strip">
      {items.map((it, i) => (
        <div className="kpi-card" key={i}>
          <div className="top">
            <span className="ix">{it.ix}</span>
            <span className={`tag ${it.tag.c}`}>{it.tag.t}</span>
          </div>
          <div className="nm">{it.nm}</div>
          <div className="v">
            {it.dec > 0 ? it.val.toFixed(1).replace('.', ',') : it.val.toLocaleString('pt-BR')}
            {it.unit && <span className="u">{it.unit}</span>}
          </div>
          <div className="meta">
            <span>{it.meta}</span>
            <span>{it.side}</span>
          </div>
        </div>
      ))}
    </div>
  );
}

/* ---------- Podium ---------- */
function Podium({ people }){
  const top3 = people.slice(0, 3);
  const display = [top3[1], top3[0], top3[2]].filter(Boolean);
  return (
    <div className="podium">
      {display.map((p) => {
        const isFirst = p.rank === 1;
        const statDisp = p.statKey === 'leads'
          ? p.statVal.toLocaleString('pt-BR')
          : p.statVal.toFixed(1).replace('.', ',') + '%';
        return (
          <div key={p.id} className={`pcard ${isFirst ? 'first' : ''}`}>
            <span className="corner-rank">{p.rank}</span>
            {!isFirst && <span className="corner-rank" style={{ display:'none' }}>{p.rank}</span>}
            <div className="badge-row">
              <CDCComp.TierPill pts={p.pts} />
            </div>
            <div className="who">
              <div className="nm">{p.nome}</div>
              <div className="role">{p.cargo} · {p.time}</div>
            </div>
            <div className="pts">
              <span className="v">{p.pts.toLocaleString('pt-BR')}</span>
              <span className="u">pontos</span>
            </div>
            <div className="stat-row">
              <span className="k">{p.statSub}</span>
              <span className="v">{statDisp}</span>
            </div>
          </div>
        );
      })}
    </div>
  );
}

/* ---------- Progress to next tier ---------- */
function ProgressToNext({ pts }){
  const next = CDC.nextTier(pts);
  if (!next){
    return (
      <div className="progress">
        <div className="bar"><div className="fill" style={{ width:'100%' }}></div></div>
        <div className="lab"><span>Suíte garantida</span><span className="nxt">A BORDO</span></div>
      </div>
    );
  }
  const cur = CDC.tierOf(pts);
  const floor = cur.min;
  const ceiling = next.tier.min;
  const pct = ((pts - floor) / (ceiling - floor)) * 100;
  return (
    <div className="progress">
      <div className="bar"><div className="fill" style={{ width: Math.max(2, pct) + '%' }}></div></div>
      <div className="lab">
        <span>{cur.nome}</span>
        <span className="nxt">+{next.delta} → {next.tier.nome}</span>
      </div>
    </div>
  );
}

/* ---------- Rank row ---------- */
function RankRow({ p }){
  const tier = CDC.tierOf(p.pts);
  const isSuite = p.pts >= 1000;
  const statDisp = p.statKey === 'leads'
    ? p.statVal.toLocaleString('pt-BR')
    : p.statVal.toFixed(1).replace('.', ',') + '%';
  return (
    <div className={`rank-row ${isSuite ? 'is-suite' : ''}`}>
      <span className="rk"><small>#</small>{p.rank}</span>
      <div className="av">{CDCComp.initials(p.nome)}</div>
      <div className="who">
        <span className="nm">{p.nome}</span>
        <span className="rl">{p.cargo} · {p.time}</span>
      </div>
      <div className="stat">
        <span className="v">{statDisp}</span>
        <span className="k">{p.statSub}</span>
      </div>
      <div className="tier-cell">
        <CDCComp.TierPill pts={p.pts} />
        <span className="sub">Convés {tier.convés}</span>
      </div>
      <ProgressToNext pts={p.pts} />
      <div className="pts-cell">
        <span className="v">{p.pts.toLocaleString('pt-BR')}</span>
        <CDCComp.Delta value={p.delta} />
      </div>
    </div>
  );
}

/* ---------- Ranking ---------- */
function Ranking({ people }){
  const [filter, setFilter] = useStateP('Todos');
  const [q, setQ] = useStateP('');
  const filtered = useMemoP(() => {
    let r = people;
    if (filter !== 'Todos') r = r.filter(p => p.time === filter);
    if (q.trim()) r = r.filter(p => p.nome.toLowerCase().includes(q.toLowerCase()));
    return r;
  }, [people, filter, q]);

  const teams = ['Todos', 'Closers', 'Growth', 'CS'];
  const counts = {
    Todos: people.length,
    Closers: people.filter(p => p.time === 'Closers').length,
    Growth: people.filter(p => p.time === 'Growth').length,
    CS: people.filter(p => p.time === 'CS').length,
  };

  return (
    <div style={{ marginTop:64 }}>
      <div className="section-h">
        <div className="left">
          <span className="eb">Ranking · Maio 2026</span>
          <h2><span className="not-italic">Os 13.</span> <span className="light">Em ordem.</span></h2>
        </div>
        <div className="right">Últ. atualização · {CDC.KPIS_COLETIVOS.ultimaAtualizacao}</div>
      </div>

      <div className="rank-tools">
        <div className="rank-filters">
          {teams.map(t => (
            <button key={t} className={filter === t ? 'active' : ''} onClick={() => setFilter(t)}>
              {t}<span className="ct">{counts[t]}</span>
            </button>
          ))}
        </div>
        <div className="rank-search">
          <svg className="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
            <circle cx="11" cy="11" r="7"/>
            <path d="M16 16 L21 21"/>
          </svg>
          <input
            placeholder="Buscar colaborador…"
            value={q}
            onChange={e => setQ(e.target.value)}
          />
        </div>
      </div>

      <div className="ranking">
        <div className="rank-row head">
          <span className="rk">#</span>
          <span></span>
          <span>Colaborador</span>
          <span>KPI primário</span>
          <span>Cabine atual</span>
          <span>Progresso</span>
          <span style={{ textAlign:'right' }}>Pontos</span>
        </div>
        {filtered.map(p => <RankRow key={p.id} p={p} />)}
        {filtered.length === 0 && (
          <div style={{ padding:'40px', textAlign:'center', color:'var(--ink-mute)' }}>Nenhum colaborador encontrado.</div>
        )}
      </div>
    </div>
  );
}

/* ---------- Team cards ---------- */
function TeamCards({ people }){
  const teamClass = { 'Closers':'closers', 'Growth':'growth', 'CS':'cs' };
  return (
    <div className="teams-grid">
      {CDC.TEAM_AGG.map(t => {
        const roster = people.filter(p => p.time === t.time);
        return (
          <div className={`team-card ${teamClass[t.time]}`} key={t.time}>
            <div className="nm">{t.time}</div>
            <div className="sz">{t.time.toUpperCase().slice(0,3)} · {t.size} colaboradores</div>
            <div className="kpi">
              <div className="k">{t.kpiK}</div>
              <div className="v">{t.kpiV}</div>
              <div className="sub">{t.kpiSub}</div>
            </div>
            <div className="sec">
              <span className="k">{t.secK}</span>
              <span className="v">{t.secV}</span>
            </div>
            <div className="sec" style={{ borderTop:'none', paddingTop:0, marginTop:8 }}>
              <span className="k">Pts médio</span>
              <span className="v">{t.ptsMedia.toLocaleString('pt-BR')}</span>
            </div>
            <div className="roster">
              {roster.map(p => {
                const tier = CDC.tierOf(p.pts);
                const dotColor = tier.key === 'suite' ? 'var(--turq)'
                  : tier.key === 'premium' ? 'var(--ocean)'
                  : tier.key === 'vista' ? 'var(--lagoon)'
                  : 'var(--sand-mute, #d4c6a5)';
                return (
                  <span className="chip" key={p.id} title={`${p.nome} · ${p.pts} pts`}>
                    <span className="dot" style={{ background: dotColor }}></span>
                    {p.nome.split(' ')[0]}
                  </span>
                );
              })}
            </div>
          </div>
        );
      })}
    </div>
  );
}

/* ---------- Placar root ---------- */
function Placar(){
  const people = CDC.PEOPLE;
  return (
    <div className="fade-in">
      <PlacarHero />
      <div className="page">
        <Welcome />
        <Rota />
        <KpiStrip />

        <div className="podium-wrap">
          <div className="section-h">
            <div className="left">
              <span className="eb">Pódio · Top 3</span>
              <h2>Quem está <span className="turq">à frente.</span></h2>
            </div>
            <div className="right">Suíte · 1.000+ pts</div>
          </div>
          <Podium people={people} />
        </div>

        <Ranking people={people} />

        <div style={{ marginTop:64 }}>
          <div className="section-h">
            <div className="left">
              <span className="eb">Times · Por cadeira</span>
              <h2>Como cada <span className="turq">cadeira</span> está.</h2>
            </div>
            <div className="right">3 times · 13 pessoas</div>
          </div>
          <TeamCards people={people} />
        </div>
      </div>
    </div>
  );
}

window.Placar = Placar;