/* Conversion Funnel ================================================ */

function Funnel({ steps, compact=false }){
  const max = Math.max(...steps.map(s=>s.value));
  const tones = [
    { bar:'#8351ff', text:'text-accent-700 dark:text-accent-200', bg:'bg-accent-50  dark:bg-accent-500/10' },
    { bar:'#06b6d4', text:'text-sky-700    dark:text-sky-200',     bg:'bg-sky-50     dark:bg-sky-500/10' },
    { bar:'#f59e0b', text:'text-amber-700  dark:text-amber-200',   bg:'bg-amber-50   dark:bg-amber-500/10' },
    { bar:'#10b981', text:'text-emerald-700 dark:text-emerald-200',bg:'bg-emerald-50 dark:bg-emerald-500/10' },
  ];

  return (
    <div className={`grid gap-2 ${compact?'grid-cols-4':'grid-cols-4'}`}>
      {steps.map((s,i) => {
        const t = tones[i];
        const w = (s.value / max) * 100;
        const prev = i>0 ? steps[i-1].value : null;
        const drop = prev ? ((prev - s.value)/prev*100) : null;
        return (
          <div key={s.stage} className={`relative rounded-lg ${t.bg} p-3 overflow-hidden`}>
            {/* Background bar showing rel. magnitude */}
            <div className="absolute inset-y-0 left-0 opacity-25" style={{ width:`${w}%`, background:t.bar }}/>
            <div className="relative">
              <div className={`text-[10px] uppercase tracking-wide font-bold ${t.text}`}>{s.short || s.stage}</div>
              <div className="mt-1 text-[20px] font-semibold leading-none tabular">
                {s.value >= 1000 ? (s.value/1000).toFixed(s.value>=10000?0:1)+'k' : s.value.toLocaleString()}
              </div>
              {drop !== null && (
                <div className="mt-1.5 text-[10.5px] font-mono text-ink-500 dark:text-ink-300">
                  <span className="opacity-70">↳</span> {(100-drop).toFixed(1)}% pass-through
                </div>
              )}
              {drop === null && (
                <div className="mt-1.5 text-[10.5px] font-mono text-ink-400">top of funnel</div>
              )}
            </div>
          </div>
        );
      })}
    </div>
  );
}

/* Compact horizontal funnel (used inside expanded campaign rows) */
function FunnelStrip({ steps }){
  if (!steps || !steps.length) return null;
  const max = steps[0].value;
  const last = steps[steps.length-1];
  const tones = ['#8351ff','#06b6d4','#f59e0b','#10b981'];

  return (
    <div className="rounded-xl bg-white dark:bg-ink-900/40 border border-ink-100 dark:border-white/5 p-3">
      <div className="flex items-center justify-between mb-2">
        <div className="text-[11px] uppercase tracking-wide font-semibold text-ink-500 dark:text-ink-300">Conversion funnel</div>
        <div className="text-[10.5px] font-mono text-ink-400">
          End-to-end conversion {((last.value/max)*100).toFixed(2)}%
        </div>
      </div>
      <div className="flex items-center gap-2">
        {steps.map((s,i)=>{
          const w = (s.value / max) * 100;
          const prev = i>0 ? steps[i-1].value : null;
          const drop = prev ? ((prev - s.value)/prev*100) : null;
          return (
            <Fragment key={s.stage}>
              <div className="flex-1 min-w-0">
                <div className="flex items-baseline justify-between gap-1">
                  <span className="text-[10.5px] uppercase font-semibold tracking-wide text-ink-500 dark:text-ink-300">{s.short}</span>
                  <span className="text-[10px] font-mono text-ink-400">{((s.value/max)*100).toFixed(1)}%</span>
                </div>
                <div className="text-[15px] font-semibold tabular mt-0.5">
                  {s.value >= 1000 ? (s.value/1000).toFixed(s.value>=10000?0:1)+'k' : s.value.toLocaleString()}
                </div>
                <div className="mt-1 h-1.5 rounded-full bg-ink-100 dark:bg-white/10 overflow-hidden">
                  <div className="h-full transition-all" style={{ width:`${w}%`, background:tones[i] }}/>
                </div>
              </div>
              {i < steps.length-1 && (
                <div className="flex-shrink-0 flex flex-col items-center gap-0.5 w-12 text-center">
                  <Icon name="chev-right" size={12} className="text-ink-300"/>
                  {drop !== null && (
                    <div className={`text-[9px] font-mono ${drop>70?'text-rose-500':drop>40?'text-amber-500':'text-ink-400'}`}>
                      −{drop.toFixed(0)}%
                    </div>
                  )}
                </div>
              )}
            </Fragment>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, { Funnel, FunnelStrip });