const { useState, useEffect, useMemo, useRef } = React;

/* Admin — Analytics (revenue + usage) */

function AdminAnalyticsPage() {
  const ciq = window.ContactIQ ? window.ContactIQ.useContactIQ() : { isAuthed: false, isAdmin: false };
  const [remote, setRemote] = useState(null);
  useEffect(() => {
    if (!ciq.isAdmin) { setRemote(null); return; }
    let cancelled = false;
    window.ContactIQ.adminAnalytics().then(d => { if (!cancelled) setRemote(d); });
    return () => { cancelled = true; };
  }, [ciq.isAdmin]);

  // Hard-block signed-in non-admins; never show mock numbers in real session.
  if (ciq.isAuthed && !ciq.isAdmin) {
    return (
      <>
        <div className="work-head">
          <div className="col" style={{ gap: 2 }}>
            <div className="title">Analytics</div>
            <div className="sub">Admin access required.</div>
          </div>
        </div>
        <div className="work-body">
          <div className="dash-empty">
            <div className="dash-empty-icon"><I.Chart style={{ width: 36, height: 36 }}/></div>
            <h3 style={{ font: "600 18px var(--font-sans)", letterSpacing: "-0.01em" }}>Admins only</h3>
            <p className="dim" style={{ maxWidth: 380, textAlign: "center", lineHeight: 1.55, fontSize: 13 }}>
              Revenue and usage analytics are restricted to admin accounts.
            </p>
          </div>
        </div>
      </>
    );
  }

  // Signed-in admin: real data. Unauthenticated preview: prototype fixtures.
  const ANALYTICS = ciq.isAuthed
    ? (remote || window.CONTACTIQ_DATA.ANALYTICS)  // remote may be loading
    : window.CONTACTIQ_DATA.ANALYTICS;
  const k = ANALYTICS.kpis;
  const [range, setRange] = useState("12w");

  return (
    <>
      <div className="work-head">
        <div className="col" style={{ gap: 2 }}>
          <div className="title">Analytics</div>
          <div className="sub">Revenue and usage across the entire user base.</div>
        </div>
        <div className="spacer"/>
        <div className="row tight">
          <div className="seg">
            {[["7d","7 days"],["30d","30 days"],["12w","12 weeks"],["12m","12 months"]].map(([rk, l]) => (
              <button key={rk} className={"seg-btn " + (range === rk ? "on" : "")} onClick={() => setRange(rk)}>{l}</button>
            ))}
          </div>
          <button className="btn sm"><I.Download/> Export</button>
        </div>
      </div>

      <div className="work-body">
        {/* KPI tiles */}
        <div className="analytics-kpis">
          <KPI label="MRR"            val={`$${k.mrr.val.toLocaleString()}`}  delta={k.mrr.delta}        trend="up" big/>
          <KPI label="Active paid"    val={k.activePaid.val}                    delta={k.activePaid.delta} trend="up"/>
          <KPI label="Trialing"       val={k.trialing.val}                      delta={k.trialing.delta}   trend="up"/>
          <KPI label="Past due"       val={k.pastDue.val}                       delta={k.pastDue.delta}    trend="dn"/>
          <KPI label="Churn (mo)"     val={k.churn.val}                         delta={k.churn.delta}      trend="up"/>
          <KPI label="ARPU"           val={k.arpu.val}                          delta="—"                  trend="flat"/>
          <KPI label="Lookups · 7d"   val={k.lookups7d.val.toLocaleString()}    delta={k.lookups7d.delta}  trend="up"/>
          <KPI label="Trial → paid"   val={k.trialConv.val}                     delta={k.trialConv.delta}  trend="up"/>
        </div>

        <div className="analytics-grid">
          {/* Signups chart */}
          <div className="card analytics-card">
            <div className="analytics-card-head">
              <div className="col" style={{ gap: 2 }}>
                <span className="eyebrow">SIGNUPS · 12 WEEKS</span>
                <div style={{ fontWeight: 600, fontSize: 14 }}>
                  <span className="mono">{ANALYTICS.signups.reduce((a,b) => a+b, 0)}</span>
                  <span className="dim" style={{ fontWeight: 400, marginLeft: 6, fontSize: 11 }}>signups, <span className="mono" style={{ color: "var(--green)" }}>+34%</span> vs prior 12w</span>
                </div>
              </div>
              <button className="btn ghost sm">View detail <I.ChevR/></button>
            </div>
            <BarChart data={ANALYTICS.signups} height={140} accent="var(--accent)"/>
            <div className="chart-axis">
              <span>12w ago</span><span>9w</span><span>6w</span><span>3w</span><span>This week</span>
            </div>
          </div>

          {/* Lookups chart */}
          <div className="card analytics-card">
            <div className="analytics-card-head">
              <div className="col" style={{ gap: 2 }}>
                <span className="eyebrow">DAILY LOOKUPS · 14 DAYS</span>
                <div style={{ fontWeight: 600, fontSize: 14 }}>
                  <span className="mono">{ANALYTICS.lookups.reduce((a,b) => a+b, 0).toLocaleString()}</span>
                  <span className="dim" style={{ fontWeight: 400, marginLeft: 6, fontSize: 11 }}>total · <span className="mono" style={{ color: "var(--green)" }}>+22%</span> vs prior 14d</span>
                </div>
              </div>
              <button className="btn ghost sm">View detail <I.ChevR/></button>
            </div>
            <LineChart data={ANALYTICS.lookups} height={140}/>
            <div className="chart-axis">
              <span>May 12</span><span>15</span><span>18</span><span>21</span><span>May 25</span>
            </div>
          </div>

          {/* Plan distribution donut */}
          <div className="card analytics-card">
            <div className="analytics-card-head">
              <div className="col" style={{ gap: 2 }}>
                <span className="eyebrow">PLAN DISTRIBUTION</span>
                <div style={{ fontWeight: 600, fontSize: 14 }}><span className="mono">{Object.values(ANALYTICS.plans).reduce((a,b)=>a+b,0)}</span> <span className="dim" style={{ fontWeight: 400, fontSize: 11 }}>accounts</span></div>
              </div>
            </div>
            <Donut data={[
              { label: "Active",   v: ANALYTICS.plans.active,    c: "var(--green)" },
              { label: "Trialing", v: ANALYTICS.plans.trialing,  c: "var(--accent)" },
              { label: "Past due", v: ANALYTICS.plans.past_due,  c: "var(--amber)" },
              { label: "Canceled", v: ANALYTICS.plans.canceled,  c: "var(--fg-3)" },
            ]}/>
          </div>

          {/* Top users */}
          <div className="card analytics-card">
            <div className="analytics-card-head">
              <div className="col" style={{ gap: 2 }}>
                <span className="eyebrow">TOP 5 USERS · BY LOOKUPS</span>
                <div className="dim" style={{ fontSize: 11 }}>Last 30 days</div>
              </div>
              <button className="btn ghost sm">All users <I.ChevR/></button>
            </div>
            <div className="col" style={{ gap: 8 }}>
              {ANALYTICS.topUsers.map((u, i) => {
                const max = ANALYTICS.topUsers[0].lookups;
                const pct = (u.lookups / max) * 100;
                return (
                  <div key={i} className="top-user-row">
                    <div className="row" style={{ gap: 8, minWidth: 0, flex: 1 }}>
                      <Avatar name={u.name} size="sm"/>
                      <span style={{ fontSize: 12, fontWeight: 500 }}>{u.name}</span>
                    </div>
                    <div className="top-user-bar">
                      <div style={{ width: pct + "%", background: "var(--accent)" }}/>
                    </div>
                    <span className="mono" style={{ fontSize: 11.5, fontWeight: 600, width: 60, textAlign: "right" }}>{u.lookups.toLocaleString()}</span>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Lookup source breakdown */}
          <div className="card analytics-card" style={{ gridColumn: "span 2" }}>
            <div className="analytics-card-head">
              <div className="col" style={{ gap: 2 }}>
                <span className="eyebrow">LOOKUP SOURCE</span>
                <div className="dim" style={{ fontSize: 11 }}>How users are triggering lookups in the extension</div>
              </div>
            </div>
            <div className="source-bars">
              {ANALYTICS.sources.map((s, i) => (
                <div key={s.name} className="source-bar-row">
                  <span style={{ fontSize: 12, width: 180 }}>{s.name}</span>
                  <div className="source-bar">
                    <div style={{ width: s.pct + "%", background: ["var(--accent)", "var(--src-business)", "var(--src-attorney)"][i] }}/>
                  </div>
                  <span className="mono" style={{ fontSize: 12, fontWeight: 600, width: 50, textAlign: "right" }}>{s.pct}%</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

function KPI({ label, val, delta, trend, big }) {
  return (
    <div className="kpi">
      <span className="lbl">{label}</span>
      <span className={"val " + (big ? "accent" : "")} style={big ? { fontSize: 30 } : {}}>{val}</span>
      <span className={"delta " + (trend === "dn" ? "dn" : trend === "flat" ? "" : "")} style={trend === "flat" ? { color: "var(--fg-3)" } : trend === "dn" ? { color: "var(--red)" } : {}}>
        {trend === "up" && "↑ "}
        {trend === "dn" && "↑ "}
        {trend === "down" && "↓ "}
        {delta}
      </span>
    </div>
  );
}

function BarChart({ data, height = 120, accent = "var(--accent)" }) {
  const max = Math.max(...data);
  return (
    <div className="bar-chart" style={{ height }}>
      {data.map((v, i) => (
        <div key={i} className="bar-col" title={String(v)}>
          <div className="bar-val" style={{ height: (v / max) * 100 + "%", background: accent }}/>
        </div>
      ))}
    </div>
  );
}

function LineChart({ data, height = 120 }) {
  const max = Math.max(...data);
  const min = Math.min(...data);
  const range = max - min || 1;
  const w = 400;
  const h = height;
  const points = data.map((v, i) => {
    const x = (i / (data.length - 1)) * w;
    const y = h - ((v - min) / range) * (h - 24) - 12;
    return [x, y];
  });
  const path = points.map((p, i) => (i === 0 ? "M" : "L") + p[0] + " " + p[1]).join(" ");
  const area = path + ` L ${w} ${h} L 0 ${h} Z`;
  return (
    <svg viewBox={`0 0 ${w} ${h}`} className="line-chart" preserveAspectRatio="none" style={{ width: "100%", height }}>
      <defs>
        <linearGradient id="line-grad" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.18"/>
          <stop offset="100%" stopColor="var(--accent)" stopOpacity="0"/>
        </linearGradient>
      </defs>
      <path d={area} fill="url(#line-grad)"/>
      <path d={path} fill="none" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
      {points.map(([x, y], i) => (
        <circle key={i} cx={x} cy={y} r="2.5" fill="#fff" stroke="var(--accent)" strokeWidth="1.5"/>
      ))}
    </svg>
  );
}

function Donut({ data }) {
  const total = data.reduce((a, b) => a + b.v, 0);
  const r = 60;
  const c = 2 * Math.PI * r;
  let offset = 0;
  return (
    <div className="donut-wrap">
      <svg width="160" height="160" viewBox="0 0 160 160">
        <circle cx="80" cy="80" r={r} fill="none" stroke="var(--bg-3)" strokeWidth="20"/>
        {data.map((d, i) => {
          const len = (d.v / total) * c;
          const el = (
            <circle
              key={i}
              cx="80" cy="80" r={r}
              fill="none"
              stroke={d.c}
              strokeWidth="20"
              strokeDasharray={`${len} ${c - len}`}
              strokeDashoffset={-offset}
              transform="rotate(-90 80 80)"
            />
          );
          offset += len;
          return el;
        })}
        <text x="80" y="76" textAnchor="middle" style={{ font: "700 22px var(--font-mono)", fill: "var(--fg-1)", letterSpacing: "-0.02em" }}>{total}</text>
        <text x="80" y="93" textAnchor="middle" style={{ font: "500 10px var(--font-sans)", fill: "var(--fg-3)", letterSpacing: "0.06em" }}>USERS</text>
      </svg>
      <div className="donut-legend">
        {data.map((d, i) => (
          <div key={i} className="donut-leg-row">
            <span className="donut-dot" style={{ background: d.c }}/>
            <span style={{ fontSize: 12, flex: 1 }}>{d.label}</span>
            <span className="mono" style={{ fontSize: 12, fontWeight: 600 }}>{d.v}</span>
            <span className="dim mono" style={{ fontSize: 10.5, width: 36, textAlign: "right" }}>{Math.round(d.v/total*100)}%</span>
          </div>
        ))}
      </div>
    </div>
  );
}

window.AdminAnalyticsPage = AdminAnalyticsPage;