/* global React */

// ------- Icon helper (Tabler-style, 1.25px stroke) --------
const ICONS = {
  chevronDown: "M6 9l6 6 6-6",
  chevronUp: "M6 15l6-6 6 6",
  arrowLeft: "M19 12H5M12 19l-7-7 7-7",
  export: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5-5 5 5M12 5v12",
  dotsV: "M12 5h.01M12 12h.01M12 19h.01",
  search: "M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM21 21l-4.3-4.3",
};
function Icon({ d, size = 18, stroke = 1.25, style }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" style={style}>
      <path d={d}></path>
    </svg>
  );
}

// ------- Shared primitives --------

function Eyebrow({ children, color }) {
  return (
    <div className="eyebrow" style={color ? { color } : null}>
      <span className="dot"></span>{children}
    </div>
  );
}

function Confidence({ level = 3, label }) {
  // level 1-4
  const bars = [];
  for (let i = 0; i < 4; i++) bars.push(<span key={i} className={i < level ? "on" : ""}></span>);
  const labels = ["Low", "Medium", "High", "Very high"];
  return (
    <span className="confidence">
      <span className="confidence__bars">{bars}</span>
      {label || labels[level - 1]} confidence
      <span className="i" title="Built from 1,284 responses across 3 questions">i</span>
    </span>
  );
}

function Delta({ value, dir = "up" }) {
  return (
    <span className={"stat__delta" + (dir === "down" ? " stat__delta--neg" : "")}>
      {dir === "up" ? "▲" : "▼"} {value}
    </span>
  );
}

function Chip({ kind = "default", children }) {
  const cls = kind === "accent" ? "chip chip--accent"
            : kind === "warm" ? "chip chip--warm"
            : kind === "ghost" ? "chip chip--ghost"
            : "chip";
  return <span className={cls}>{children}</span>;
}

function DrillLink({ children = "Open filtered view" }) {
  return <a className="drill">{children}</a>;
}

// Sparkline / mini-bar chart placeholders ----------------------

function MiniBars({ heights, label, accent = -1, height = 80 }) {
  const compact = height < 60;
  const barsStyle = compact ? { padding: "4px 6px" } : null;
  return (
    <div className="chart" style={{ height }}>
      {label && !compact && <div className="chart__label">{label}</div>}
      <div className="bars" style={barsStyle}>
        {heights.map((h, i) => (
          <span
            key={i}
            className={i === accent ? "accent" : (i < heights.length - 4 ? "muted" : "")}
            style={{ height: `${h}%` }}
          ></span>
        ))}
      </div>
    </div>
  );
}

function Sparkline({ points, height = 60, accentEnd = true, label }) {
  const w = 220, h = 60, pad = 4;
  const max = Math.max(...points), min = Math.min(...points);
  const xs = (i) => pad + (i * (w - 2 * pad)) / (points.length - 1);
  const ys = (v) => h - pad - ((v - min) / (max - min || 1)) * (h - 2 * pad);
  const d = points.map((v, i) => `${i === 0 ? "M" : "L"}${xs(i).toFixed(1)},${ys(v).toFixed(1)}`).join(" ");
  return (
    <div className="chart" style={{ height }}>
      {label && <div className="chart__label">{label}</div>}
      <svg className="spark" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none">
        <path d={d} fill="none" stroke="var(--ms-fg)" strokeWidth="1.5" />
        {accentEnd && (
          <circle cx={xs(points.length - 1)} cy={ys(points[points.length - 1])} r="3.5" fill="var(--ms-dusty-green)" />
        )}
      </svg>
    </div>
  );
}

function Donut({ pct = 64, label, color = "var(--ms-dusty-green)", size = 110 }) {
  const r = 38, c = 2 * Math.PI * r;
  return (
    <div className="donut" style={{ height: size }}>
      <svg viewBox="0 0 100 100" style={{ width: size, height: size }}>
        <circle cx="50" cy="50" r={r} fill="none" stroke="var(--ms-ink-7)" strokeWidth="9" />
        <circle
          cx="50" cy="50" r={r}
          fill="none" stroke={color} strokeWidth="9"
          strokeDasharray={`${(pct / 100) * c} ${c}`}
          strokeDashoffset={c * 0.25}
          transform="rotate(-90 50 50)"
          strokeLinecap="round"
        />
        <text x="50" y="55" textAnchor="middle" fontSize="24" fontFamily="PPTelegraf, sans-serif" fontWeight="700" fill="var(--ms-fg)">{pct}%</text>
      </svg>
      {label && <div style={{ fontSize: 12, color: "var(--ms-fg-muted)", marginLeft: 8, lineHeight: 1.3 }}>{label}</div>}
    </div>
  );
}

function SegBars({ rows }) {
  return (
    <div style={{ display: "grid", gap: 6 }}>
      {rows.map((r, i) => (
        <div key={i} style={{ display: "grid", gridTemplateColumns: "100px 1fr 40px", gap: 8, alignItems: "center" }}>
          <div style={{ fontSize: 12, color: "var(--ms-fg-muted)" }}>{r.label}</div>
          <div style={{ height: 10, background: "var(--ms-ink-7)", borderRadius: 2, overflow: "hidden" }}>
            <div style={{ width: `${r.value}%`, height: "100%", background: r.color || "var(--ms-fg)" }}></div>
          </div>
          <div style={{ fontSize: 12, fontWeight: 500, textAlign: "right" }}>{r.value}%</div>
        </div>
      ))}
    </div>
  );
}

function HandLabel({ children, style }) {
  return <span className="hand" style={style}>{children}</span>;
}

// Story arc band component
function StoryArc({ what, soWhat, nowWhat, layout = "row" }) {
  if (layout === "stack") {
    return (
      <div style={{ display: "grid", gap: 10 }}>
        <ArcBand step="01" kicker="WHAT" tone="what" copy={what} />
        <ArcBand step="02" kicker="SO WHAT" tone="so" copy={soWhat} />
        <ArcBand step="03" kicker="NOW WHAT" tone="now" copy={nowWhat} />
      </div>
    );
  }
  return (
    <div className="arc">
      <ArcBand step="01" kicker="WHAT" copy={what} />
      <ArcBand step="02" kicker="SO WHAT" tone="so" copy={soWhat} />
      <ArcBand step="03" kicker="NOW WHAT" tone="now" copy={nowWhat} />
    </div>
  );
}

function ArcBand({ step, kicker, copy, tone }) {
  const cls = "arc__band" + (tone === "so" ? " arc__band--so" : tone === "now" ? " arc__band--now" : "");
  return (
    <div className={cls}>
      <div className="arc__kicker">
        <span className="step">{step}</span> {kicker}
      </div>
      <div className="arc__copy">{copy}</div>
    </div>
  );
}

// App chrome: sidebar + topbar + viewtabs ----------------

function AppChrome({
  workspace = "Q2 Brand Tracker · 1,284 responses",
  activeTab = "Insights",
  lockTabs = false,
  unlockedTabs = null,
  controlledTab = null,
  onTabChange = null,
  tabRenderers = null,
  children
}) {
  const _allTabs = ["Intake", "Context", "Raw results", "Narrative", "Insights", "Synthetic"];
  const _hide = (typeof window !== "undefined" && Array.isArray(window.__HIDE_TABS)) ? window.__HIDE_TABS : [];
  const TABS = _allTabs.filter((t) => !_hide.includes(t));
  const [internalTab, setInternalTab] = React.useState(activeTab);
  const tab = controlledTab != null ? controlledTab : internalTab;
  function setTab(t) {
    if (onTabChange) onTabChange(t);
    if (controlledTab == null) setInternalTab(t);
  }
  function isTabLocked(t) {
    if (Array.isArray(unlockedTabs)) return !unlockedTabs.includes(t);
    if (lockTabs) return t !== "Insights";
    return false;
  }
  function renderBody() {
    if (tabRenderers && tabRenderers[tab] !== undefined) return tabRenderers[tab];
    if (tab === "Insights") return children;
    if (tab === "Raw results" && window.RawResultsView) return <window.RawResultsView />;
    if (tab === "Context" && window.ContextView) return <window.ContextView />;
    if (tab === "Narrative" && window.NarrativeView) return <window.NarrativeView />;
    return <EmptyTabPanel name={tab} />;
  }
  // Split "Title · meta" workspace string into title + meta
  const wsParts = String(workspace).split(" · ");
  const studyTitle = wsParts[0];
  const studyMeta = wsParts.slice(1).join(" · ");
  const NAV = ["MakerLabs", "Studies", "Products", "Settings"];

  return (
    <div className="pf-app">
      {/* Global black top nav */}
      <div className="pf-topnav">
        <div className="pf-topnav__logo">M</div>
        <button className="pf-topnav__ws" type="button">
          <span>[Admin] All Brands</span>
          <Icon d={ICONS.chevronDown} size={12} />
        </button>
        <div className="pf-topnav__nav">
          {NAV.map((it) => (
            <button key={it} type="button" className={it === "Studies" ? "is-active" : ""}>{it}</button>
          ))}
        </div>
        <div className="pf-topnav__spacer"></div>
        <button className="pf-topnav__user" type="button">
          <span className="pf-topnav__avatar">DI</span>
          <span>Di</span>
          <Icon d={ICONS.chevronDown} size={12} />
        </button>
      </div>

      {/* Study header */}
      <div className="pf-studyhead">
        <button className="pf-studyhead__back" type="button" title="Back to studies" aria-label="Back to studies">
          <Icon d={ICONS.arrowLeft} size={18} stroke={1.6} />
        </button>
        <h1 className="pf-studyhead__title">
          {studyTitle}
          {studyMeta && <span className="pf-studyhead__meta"> · {studyMeta}</span>}
        </h1>
        <span className="pf-studyhead__status">Live</span>
        <div className="pf-studyhead__spacer"></div>
        <div className="pf-studyhead__actions">
          <button className="pf-btn pf-btn--outline" type="button">
            <Icon d={ICONS.export} size={14} stroke={1.6} /> Export
          </button>
          <button className="pf-iconbtn" type="button" title="More" aria-label="More">
            <Icon d={ICONS.dotsV} size={16} />
          </button>
          <button className="pf-iconbtn" type="button" title="Collapse" aria-label="Collapse">
            <Icon d={ICONS.chevronUp} size={16} />
          </button>
        </div>
      </div>

      {/* Green-underlined sub-tabs (study views) */}
      <div className="pf-subtabs">
        {TABS.map((t) => {
          const isLocked = isTabLocked(t);
          return (
            <button
              key={t}
              className={"pf-subtab" + (tab === t ? " is-active" : "")}
              onClick={() => !isLocked && setTab(t)}
              disabled={isLocked}
              title={isLocked ? "Available in the Insights discovery flow variation" : undefined}
              type="button"
            >
              {t}
            </button>
          );
        })}
      </div>

      <div className="app__body">
        {renderBody()}
      </div>
    </div>
  );
}

function EmptyTabPanel({ name }) {
  return (
    <div className="empty-tab">
      <div className="empty-tab__panel">
        <Eyebrow>{name}</Eyebrow>
        <div className="empty-tab__title">{name} — empty</div>
        <div className="empty-tab__sub">
          Nothing here yet. This view will hold the {name.toLowerCase()} for the study.
        </div>
        <div className="empty-tab__cta">
          <button className="studio__btn studio__btn--primary">+ Add {name.toLowerCase()}</button>
          <button className="studio__btn studio__btn--ghost">Import from another study</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  Icon, ICONS,
  Eyebrow, Confidence, Delta, Chip, DrillLink,
  MiniBars, Sparkline, Donut, SegBars,
  HandLabel, StoryArc, ArcBand,
  AppChrome, EmptyTabPanel,
});