/* global React */

/* ============================================================
   PRODUCT-FEEL DASHBOARD — tabs, charts, "real" UI
   ============================================================ */

const TABS = [
  { id: "readiness", label: "Maturity" },
  { id: "adoption", label: "Adoption" },
  { id: "pipeline", label: "Solutions" },
];

function FullDashboard({ motion }) {
  const [tab, setTab] = React.useState("readiness");
  // Auto-rotate tabs when motion is on
  React.useEffect(() => {
    if (!motion) return;
    const id = setInterval(() => {
      setTab(prev => {
        const i = TABS.findIndex(t => t.id === prev);
        return TABS[(i + 1) % TABS.length].id;
      });
    }, 4500);
    return () => clearInterval(id);
  }, [motion]);

  return (
    <div className="fdash">
      {/* Window chrome */}
      <div className="fdash-chrome">
        <div className="fdash-dots">
          <span className="d r" /><span className="d y" /><span className="d g" />
        </div>
        <div className="fdash-url">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" style={{opacity:0.5}}><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
          <span>transform365.idealstate.co/dashboard</span>
        </div>
        <div className="fdash-meta">
          <span className={"live " + (motion ? "is-live" : "")}>● {motion ? "LIVE" : "PAUSED"}</span>
        </div>
      </div>

      {/* Header */}
      <div className="fdash-head">
        <div>
          <div className="fdash-h-eyebrow">Capability Index · Q2 2026</div>
          <div className="fdash-h-title">
            Acme Co.
            <span className="fdash-h-tag">SMB · 240 staff</span>
          </div>
        </div>
        <div className="fdash-h-actions">
          <button className="fdash-btn ghost">Export</button>
          <button className="fdash-btn primary">Share</button>
        </div>
      </div>

      {/* Tab strip */}
      <div className="fdash-tabs">
        {TABS.map(t => (
          <button
            key={t.id}
            className={"fdash-tab " + (tab === t.id ? "is-active" : "")}
            onClick={() => setTab(t.id)}
          >
            {t.label}
          </button>
        ))}
        <span className="fdash-tabs-spacer" />
        <span className="fdash-tab-meta">Updated 12 min ago</span>
      </div>

      {/* Tab content */}
      <div className="fdash-body">
        {tab === "readiness" && <ReadinessPanel motion={motion} />}
        {tab === "adoption" && <AdoptionPanel motion={motion} />}
        {tab === "pipeline" && <PipelinePanel motion={motion} />}
      </div>
    </div>
  );
}

/* ── READINESS — radar-ish 8-domain score ── */
function ReadinessPanel({ motion }) {
  const domains = [
    { l: "Strategy", v: 72 }, { l: "Data", v: 58 },
    { l: "Governance", v: 64 }, { l: "Skills", v: 48 },
    { l: "Use cases", v: 81 }, { l: "Tech stack", v: 76 },
    { l: "Change mgmt", v: 52 }, { l: "Measurement", v: 39 },
  ];
  return (
    <div className="fdash-readiness">
      <div className="fdash-r-l">
        <div className="fdash-r-score">
          <div className="num">68<span className="u">/100</span></div>
          <div className="lbl">
            <div className="t">Overall maturity</div>
            <div className="d">↑ <strong>+40</strong> since baseline · <em>top 28% of cohort</em></div>
          </div>
        </div>
        <div className="fdash-r-domains">
          {domains.map((d, i) => (
            <div className="fdash-r-row" key={i}>
              <span className="l">{d.l}</span>
              <div className="bar">
                <div className="fill" style={{ width: `${d.v}%`, transitionDelay: `${i*80}ms` }} />
              </div>
              <span className="v">{d.v}</span>
            </div>
          ))}
        </div>
      </div>
      <div className="fdash-r-r">
        <div className="fdash-r-card">
          <div className="fdash-r-card-h">Recommendations</div>
          <ul>
            <li><span className="dot p1" /><span><strong>Stand up Adoption Hub</strong> — surfaces what's working across teams.</span></li>
            <li><span className="dot p2" /><span><strong>Begin Trailblazers cohort</strong> — 8 candidates identified.</span></li>
            <li><span className="dot p3" /><span><strong>Tighten Purview policies</strong> — finance-bound data first.</span></li>
          </ul>
        </div>
      </div>
    </div>
  );
}

/* ── ADOPTION — line chart over time ── */
function AdoptionPanel({ motion }) {
  // 12 weeks of "active usage %"
  const data = [12, 18, 22, 28, 31, 38, 47, 55, 62, 68, 74, 82];
  const max = 100;
  const pts = data.map((v, i) => {
    const x = (i / (data.length - 1)) * 100;
    const y = 100 - (v / max) * 100;
    return [x, y];
  });
  const linePath = "M " + pts.map(p => `${p[0].toFixed(1)} ${p[1].toFixed(1)}`).join(" L ");
  const areaPath = linePath + ` L 100 100 L 0 100 Z`;

  return (
    <div className="fdash-adoption">
      <div className="fdash-a-stats">
        <div className="fdash-a-stat">
          <div className="num">82%</div>
          <div className="lbl">Active Copilot usage</div>
          <div className="trend up">↑ 14 pts WoW</div>
        </div>
        <div className="fdash-a-stat">
          <div className="num">59</div>
          <div className="lbl">Trailblazer community</div>
          <div className="trend up">↑ 4 graduates</div>
        </div>
        <div className="fdash-a-stat">
          <div className="num">2.3×</div>
          <div className="lbl">Time-to-value uplift</div>
          <div className="trend up">vs baseline</div>
        </div>
      </div>
      <div className="fdash-a-chart">
        <div className="fdash-a-chart-h">
          <span className="t">Active usage · last 12 weeks</span>
          <span className="legend"><span className="sw" /> Acme Co.</span>
        </div>
        <svg viewBox="0 0 100 100" className="fdash-a-svg" preserveAspectRatio="none">
          {/* gridlines */}
          {[25, 50, 75].map(y => (
            <line key={y} x1="0" y1={y} x2="100" y2={y} stroke="currentColor" strokeWidth="0.2" opacity="0.15"/>
          ))}
          <path d={areaPath} fill="var(--accent)" opacity="0.12"/>
          <path d={linePath} fill="none" stroke="var(--accent)" strokeWidth="0.8" vectorEffect="non-scaling-stroke" strokeLinecap="round" strokeLinejoin="round"/>
          {pts.map((p, i) => (
            <circle key={i} cx={p[0]} cy={p[1]} r="0.7" fill="var(--accent)" />
          ))}
          {/* highlight last point */}
          <circle cx={pts[pts.length-1][0]} cy={pts[pts.length-1][1]} r="1.6" fill="var(--accent)" />
        </svg>
        <div className="fdash-a-axis">
          <span>W1</span><span>W4</span><span>W8</span><span>W12</span>
        </div>
      </div>
    </div>
  );
}

/* ── PIPELINE — kanban-style agent pipeline ── */
function PipelinePanel({ motion }) {
  const cols = [
    { h: "Backlog", n: 7, items: [
      { t: "Vendor onboarding agent", d: "Procurement" },
      { t: "Grant deadline assistant", d: "Development" },
    ]},
    { h: "Building", n: 3, items: [
      { t: "HR knowledge agent", d: "People · v0.4", p: "p1" },
      { t: "Board pack summarizer", d: "Exec · v0.2", p: "p2" },
    ]},
    { h: "Live", n: 5, items: [
      { t: "Donor research agent", d: "Active · 142 runs/wk", p: "p1" },
      { t: "Site survey assistant", d: "Active · 38 runs/wk", p: "p2" },
    ]},
  ];
  return (
    <div className="fdash-pipeline">
      {cols.map((c, i) => (
        <div className="fdash-p-col" key={i}>
          <div className="fdash-p-h">
            <span className="t">{c.h}</span>
            <span className="n">{c.n}</span>
          </div>
          {c.items.map((it, j) => (
            <div className={"fdash-p-card " + (it.p || "")} key={j}>
              <div className="t">{it.t}</div>
              <div className="d">{it.d}</div>
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}

window.FullDashboard = FullDashboard;

/* ─────────────── STYLES injected once ─────────────── */
const fdashStyles = document.createElement("style");
fdashStyles.textContent = `
.fdash {
  background: var(--white);
  border: 1px solid rgba(14,40,65,0.14);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 80px -40px rgba(14,40,65,0.28),
              0 8px 20px -10px rgba(14,40,65,0.08);
  font-family: var(--font-display);
  color: var(--navy);
  position: relative;
  width: 100%;
}
.fdash-chrome {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 16px;
  padding: 10px 14px;
  background: #FAF8F4;
  border-bottom: 1px solid rgba(14,40,65,0.10);
}
.fdash-dots { display: inline-flex; gap: 6px; }
.fdash-dots .d { width: 10px; height: 10px; border-radius: 50%; background: #E0DDD4; }
.fdash-dots .d.r { background: #ED6A5E; }
.fdash-dots .d.y { background: #F5BF4F; }
.fdash-dots .d.g { background: #62C554; }
.fdash-url {
  display: inline-flex; align-items: center; gap: 8px; justify-self: center;
  padding: 5px 12px; min-width: 280px; max-width: 380px;
  background: var(--white); border: 1px solid rgba(14,40,65,0.10);
  border-radius: 9999px;
  font-size: 11px; color: var(--gray); font-weight: 500;
}
.fdash-meta .live {
  font-size: 10px; color: var(--soft-blue); letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 600;
}
.fdash-meta .live.is-live { color: var(--accent); }
.has-motion .fdash-meta .live.is-live { animation: dirB-pulse 1.6s ease-in-out infinite; }

.fdash-head {
  padding: 18px 22px 14px;
  display: flex; justify-content: space-between; align-items: flex-end;
  border-bottom: 1px solid var(--light-gray);
}
.fdash-h-eyebrow {
  font-size: 10px; color: var(--soft-blue);
  text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600;
}
.fdash-h-title {
  font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em;
  color: var(--navy); margin-top: 4px;
  display: inline-flex; align-items: center; gap: 12px;
}
.fdash-h-tag {
  font-size: 11px; font-weight: 500;
  color: var(--gray);
  background: var(--alt-row);
  padding: 3px 10px; border-radius: 9999px;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.fdash-h-actions { display: inline-flex; gap: 8px; }
.fdash-btn {
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
  padding: 8px 14px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(14,40,65,0.16); background: var(--white); color: var(--navy);
}
.fdash-btn.primary { background: var(--navy); color: var(--white); border-color: var(--navy); }

.fdash-tabs {
  display: flex; align-items: center; gap: 0;
  padding: 0 22px; border-bottom: 1px solid var(--light-gray);
  background: var(--white);
}
.fdash-tab {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  color: var(--gray);
  padding: 14px 18px; position: relative;
  transition: color 200ms;
}
.fdash-tab:hover { color: var(--navy); }
.fdash-tab.is-active { color: var(--navy); }
.fdash-tab.is-active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px;
  height: 2px; background: var(--accent);
}
.fdash-tabs-spacer { flex: 1; }
.fdash-tab-meta {
  font-size: 10px; color: var(--soft-blue);
  text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600;
}

.fdash-body { padding: 20px 22px 22px; min-height: 320px; }

/* Readiness panel */
.fdash-readiness {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px;
}
.fdash-r-score {
  display: flex; align-items: baseline; gap: 14px;
  padding-bottom: 16px; border-bottom: 1px solid var(--light-gray); margin-bottom: 14px;
}
.fdash-r-score .num {
  font-size: 3.4rem; font-weight: 700; color: var(--navy); line-height: 1;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
}
.fdash-r-score .num .u { font-size: 1.1rem; color: var(--soft-blue); margin-left: 2px; font-weight: 500; letter-spacing: 0; }
.fdash-r-score .lbl .t {
  font-weight: 700; font-size: 12px; color: var(--navy);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.fdash-r-score .lbl .d { font-size: 12px; color: var(--gray); margin-top: 4px; }
.fdash-r-score .lbl strong { color: var(--accent); font-weight: 700; }
.fdash-r-score .lbl em { font-style: normal; color: var(--soft-blue); }

.fdash-r-domains { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.fdash-r-row {
  display: grid; grid-template-columns: 100px 1fr 28px;
  gap: 10px; align-items: center;
  font-size: 12px;
}
.fdash-r-row .l { color: var(--navy); font-weight: 600; }
.fdash-r-row .bar { height: 6px; background: var(--alt-row); border-radius: 9999px; overflow: hidden; }
.fdash-r-row .fill {
  height: 100%; background: var(--accent); border-radius: 9999px;
  transition: width 1200ms cubic-bezier(0.2,0,0,1);
}
.no-motion .fdash-r-row .fill { transition: none; }
.fdash-r-row .v { font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; text-align: right; }

.fdash-r-card {
  background: var(--cream); border-radius: 10px; padding: 16px;
  border: 1px solid rgba(14,40,65,0.08);
}
.fdash-r-card-h {
  font-size: 11px; color: var(--navy); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 10px;
}
.fdash-r-card ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.fdash-r-card li {
  display: grid; grid-template-columns: 16px 1fr; gap: 8px; align-items: flex-start;
  font-size: 12px; color: var(--gray); line-height: 1.45;
}
.fdash-r-card li strong { color: var(--navy); font-weight: 600; }
.fdash-r-card .dot {
  width: 10px; height: 10px; border-radius: 50%; margin-top: 4px;
}
.fdash-r-card .dot.p1 { background: var(--accent); }
.fdash-r-card .dot.p2 { background: var(--blue); }
.fdash-r-card .dot.p3 { background: var(--soft-blue); }

/* Adoption panel */
.fdash-adoption { display: grid; grid-template-columns: auto 1fr; gap: 24px; }
.fdash-a-stats {
  display: flex; flex-direction: column; gap: 14px;
  border-right: 1px solid var(--light-gray); padding-right: 24px;
  min-width: 180px;
}
.fdash-a-stat .num {
  font-size: 2.2rem; font-weight: 700; color: var(--navy); line-height: 1;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.fdash-a-stat .lbl {
  font-size: 11px; color: var(--gray); margin-top: 4px;
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
}
.fdash-a-stat .trend { font-size: 11px; margin-top: 2px; font-weight: 600; }
.fdash-a-stat .trend.up { color: var(--green, #217346); }
.fdash-a-chart { display: flex; flex-direction: column; gap: 10px; }
.fdash-a-chart-h {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px;
}
.fdash-a-chart-h .t {
  color: var(--navy); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
}
.fdash-a-chart-h .legend {
  color: var(--gray);
  display: inline-flex; align-items: center; gap: 6px;
}
.fdash-a-chart-h .sw { width: 10px; height: 2px; background: var(--accent); display: inline-block; }
.fdash-a-svg { width: 100%; height: 200px; color: var(--soft-blue); }
.fdash-a-axis {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--soft-blue); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
}

/* Pipeline */
.fdash-pipeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.fdash-p-col {
  background: var(--alt-row); border-radius: 10px; padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
  min-height: 240px;
}
.fdash-p-h {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 4px 6px;
  font-size: 11px; color: var(--navy); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
}
.fdash-p-h .n {
  background: var(--white); padding: 2px 8px; border-radius: 9999px;
  font-size: 10px; color: var(--gray);
}
.fdash-p-card {
  background: var(--white); border: 1px solid rgba(14,40,65,0.08);
  border-radius: 8px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px;
  border-left: 3px solid var(--soft-blue);
}
.fdash-p-card.p1 { border-left-color: var(--accent); }
.fdash-p-card.p2 { border-left-color: var(--blue); }
.fdash-p-card .t { font-size: 12px; font-weight: 600; color: var(--navy); }
.fdash-p-card .d { font-size: 10px; color: var(--gray); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; }

@keyframes dirB-pulse { 0%,100%{opacity:1;} 50%{opacity:0.45;} }
`;
document.head.appendChild(fdashStyles);