/* Metrics dashboard — numbers counting up + bar chart filling. */
const { useState: useStateM, useEffect: useEffectM, useRef: useRefM } = React;

function useCountUp(target, duration = 1800, loopPause = 2400) {
  const [val, setVal] = useStateM(0);
  useEffectM(() => {
    let raf, start, done;
    const run = (ts) => {
      if (!start) start = ts;
      const t = Math.min(1, (ts - start) / duration);
      const eased = 1 - Math.pow(1 - t, 3);
      setVal(Math.round(target * eased));
      if (t < 1) raf = requestAnimationFrame(run);
      else { done = setTimeout(() => { setVal(0); start = null; raf = requestAnimationFrame(run); }, loopPause); }
    };
    raf = requestAnimationFrame(run);
    return () => { cancelAnimationFrame(raf); clearTimeout(done); };
  }, [target, duration, loopPause]);
  return val;
}

function BarChart() {
  const bars = [0.45, 0.6, 0.4, 0.75, 0.55, 0.82, 0.7, 0.95, 0.78, 0.88];
  const [k, setK] = useStateM(0);
  useEffectM(() => {
    const t = setInterval(() => setK(x => x + 1), 4400);
    return () => clearInterval(t);
  }, []);
  return (
    <div className="metrics-bars" key={k}>
      {bars.map((b, i) => (
        <div key={i} className="metrics-bar" style={{ ['--h']: `${b * 100}%`, animationDelay: `${i * 70}ms` }} />
      ))}
    </div>
  );
}

function MetricsStage() {
  const sent = useCountUp(12840, 2000, 2000);
  const conv = useCountUp(38, 1600, 2400);
  const rev  = useCountUp(184200, 2200, 1800);

  return (
    <div className="metrics-stage">
      <div className="metrics-head">
        <div>
          <div className="eyebrow">Campaign · Last 30 days</div>
          <div className="metrics-title">Diwali Offer · WA Broadcast</div>
        </div>
        <div className="metrics-live"><span className="live-dot" /> Live</div>
      </div>

      <div className="metrics-kpis">
        <div className="kpi">
          <div className="kpi-label">Messages delivered</div>
          <div className="kpi-val">{sent.toLocaleString()}</div>
          <div className="kpi-delta up">▲ 24%</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Reply rate</div>
          <div className="kpi-val">{conv}<span className="unit">%</span></div>
          <div className="kpi-delta up">▲ 12%</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Revenue attributed</div>
          <div className="kpi-val">₹{(rev/1000).toFixed(1)}k</div>
          <div className="kpi-delta up">▲ 41%</div>
        </div>
      </div>

      <BarChart />

      <div className="metrics-footer">
        <span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span>
        <span>Sat</span><span>Sun</span><span>Mon</span><span>Tue</span><span>Wed</span>
      </div>

      <style>{`
        .metrics-stage { width: 100%; height: 100%; padding: 18px; display: flex; flex-direction: column; gap: 14px; font-family: var(--f-sans); }
        .metrics-head { display: flex; justify-content: space-between; align-items: flex-start; }
        .metrics-title { font-size: 15px; font-weight: 500; margin-top: 4px; }
        .metrics-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-family: var(--f-mono); color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
        .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse-dot 1.6s ease-in-out infinite; }
        .metrics-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
        .kpi { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 12px 12px 14px; }
        html.dark .kpi { background: var(--paper-3); }
        .kpi-label { font-size: 10.5px; color: var(--muted); font-family: var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
        .kpi-val { font-family: var(--f-serif); font-style: italic; font-size: 28px; letter-spacing: -0.02em; margin-top: 4px; line-height: 1; color: var(--ink); }
        .kpi-val .unit { font: 500 14px/1 var(--f-sans); color: var(--muted); font-style: normal; margin-left: 2px; }
        .kpi-delta { margin-top: 6px; font-size: 11px; font-weight: 500; display: inline-block; padding: 2px 6px; border-radius: 999px; }
        .kpi-delta.up { background: var(--accent-soft); color: var(--accent-ink); }
        html.dark .kpi-delta.up { color: #7ce3b0; }

        .metrics-bars { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; align-items: end; height: 90px; padding: 8px 2px; }
        .metrics-bar {
          width: 100%; background: var(--ink);
          border-radius: 3px 3px 0 0;
          animation: bar-grow 1.2s cubic-bezier(.2,.7,.2,1) both;
          transform-origin: bottom;
        }
        .metrics-bar:last-child { background: var(--accent); }
        @keyframes bar-grow {
          from { height: 0%; }
          to   { height: var(--h); }
        }
        .metrics-footer { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; font: 500 10px/1 var(--f-mono); color: var(--muted); letter-spacing: .04em; text-align: center; }
      `}</style>
    </div>
  );
}

window.MetricsStage = MetricsStage;