/* Ranked candidates screen — Q10 Option B
   Card grid (10-15) with rich previews. Three card-style variants exposed via tweak:
   - 'rich'   : the default — generous, sparkline + reasons (default)
   - 'compact' : data-table feel
   - 'editorial' : serif-led editorial cards */

const { useState: useStateRC } = React;

function RankedScreen({ profileId, thesisId, onOpen, cardStyle = "rich" }) {
  const [filter, setFilter] = useStateRC("all");
  const [shareCopied, setShareCopied] = useStateRC(false);
  const profile = dbq.profileById(profileId);
  const thesis = dbq.thesisById(thesisId) || dbq.thesesForProfile(profileId)[0];
  const publicSlug = `${profile.slug}-${thesis.slug}`;
  const publicUrl = `${window.location.origin}/t/${publicSlug}`;
  const allCandidates = dbq.candidatesForThesis(thesis.id);

  async function handleShare() {
    try {
      await navigator.clipboard.writeText(publicUrl);
      setShareCopied(true);
      setTimeout(() => setShareCopied(false), 1800);
    } catch {
      window.open(`/t/${publicSlug}`, "_blank", "noopener");
    }
  }
  const candidates =
    filter === "green" ? allCandidates.filter((c) => !c.antiTriggered) :
    filter === "risk" ? allCandidates.filter((c) => c.antiTriggered) :
    allCandidates;

  return (
    <div style={{ maxWidth: 1180, margin: "0 auto", padding: "24px 24px 80px" }}>
      {/* Compliance line — top of page */}
      <div style={{ marginBottom: 16 }}>
        <Disclaimer />
      </div>

      <SectionHead
        eyebrow={`03 — active thesis · ${thesis.slug}`}
        title={thesis.title}
        sub={thesis.narrative}
        right={
          <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
            <span className="tag"><span className="tag-dot" />Snapshot · 2026-04-26 14:02 UTC</span>
            <button
              className="btn btn-sm"
              onClick={handleShare}
              title={`Copy ${publicUrl}`}
              aria-live="polite"
            >
              <Icon name={shareCopied ? "check2" : "external"} size={12} />
              {shareCopied ? " Copied" : " Share"}
            </button>
            <a
              className="btn btn-ghost btn-sm"
              href={`/t/${publicSlug}`}
              target="_blank"
              rel="noopener"
              title="Open public page in a new tab"
              style={{ textDecoration: "none" }}
            >
              <Icon name="external" size={12} /> View public
            </a>
            <button className="btn btn-sm"><Icon name="refresh" size={12} /> Re-run</button>
          </div>
        }
      />

      <RankedToolbar count={candidates.length} filter={filter} setFilter={setFilter} />

      {cardStyle === "compact" ? (
        <CompactTable candidates={candidates} onOpen={onOpen} />
      ) : (
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))", gap: 14 }}>
          {candidates.map((c) =>
            cardStyle === "editorial" ? (
              <EditorialCard key={c.ticker} c={c} onOpen={() => onOpen(c.ticker)} />
            ) : (
              <RichCard key={c.ticker} c={c} onOpen={() => onOpen(c.ticker)} />
            )
          )}
        </div>
      )}

      <SnapshotHint />
    </div>
  );
}

function RankedToolbar({ count, filter, setFilter }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14, paddingBottom: 12, borderBottom: "1px solid var(--line)" }}>
      <div style={{ display: "flex", gap: 14, alignItems: "center" }}>
        <span className="mono" style={{ fontSize: 12, color: "var(--ink-3)" }}>
          {count} candidates · ranked by fit
        </span>
        <span style={{ width: 1, height: 14, background: "var(--line-2)" }} />
        <div style={{ display: "flex", gap: 4 }}>
          {[
            ["all", "All"],
            ["green", "Anti-thesis clear"],
            ["risk", "Anti-thesis triggered"],
          ].map(([id, label]) => (
            <button
              key={id}
              onClick={() => setFilter(id)}
              className={"btn btn-sm" + (filter === id ? " btn-primary" : " btn-ghost")}
            >
              {label}
            </button>
          ))}
        </div>
      </div>
      <div style={{ display: "flex", gap: 8 }}>
        <button className="btn btn-sm btn-ghost"><Icon name="filter" size={12} /> Sort</button>
        <button className="btn btn-sm btn-ghost"><Icon name="chart" size={12} /> Compare</button>
      </div>
    </div>
  );
}

function RichCard({ c, onOpen }) {
  return (
    <div className="card card-hover fade-in" onClick={onOpen} style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
        <div>
          <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
            <span className="mono" style={{ fontSize: 9, color: "var(--ink-4)" }}>#{c.rank}</span>
            <span className="mono" style={{ fontSize: 18, fontWeight: 600, letterSpacing: "-0.01em" }}>{c.ticker}</span>
          </div>
          <div style={{ fontSize: 12, color: "var(--ink-3)", marginTop: 2 }}>{c.name}</div>
        </div>
        <div style={{ textAlign: "right" }}>
          <FitScore value={c.fit} />
          <div className="mono" style={{ fontSize: 10, color: c.delta >= 0 ? "var(--pos)" : "var(--neg)", marginTop: 2 }}>
            {c.delta >= 0 ? "▲" : "▼"} {Math.abs(c.delta).toFixed(2)} wk
          </div>
        </div>
      </div>

      <ScoreBar value={c.fit} />

      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12 }}>
        <div style={{ flex: 1 }}>
          <Sparkline data={c.spark} height={28} />
        </div>
        <div style={{ textAlign: "right" }}>
          <div className="mono" style={{ fontSize: 10, color: "var(--ink-4)", textTransform: "uppercase", letterSpacing: "0.06em" }}>
            {c.keyMetric.label}
          </div>
          <div className="mono" style={{ fontSize: 14, fontWeight: 600 }}>
            {c.keyMetric.value}
            <span style={{ fontSize: 10, color: "var(--ink-4)", marginLeft: 4, fontWeight: 400 }}>{c.keyMetric.delta}</span>
          </div>
        </div>
      </div>

      <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "grid", gap: 6 }}>
        {c.reasons.map((r, i) => (
          <li key={i} style={{ fontSize: 12, color: "var(--ink-2)", lineHeight: 1.5, paddingLeft: 14, position: "relative" }}>
            <span style={{ position: "absolute", left: 0, top: 7, width: 6, height: 1, background: "var(--ink-4)" }} />
            {r}
          </li>
        ))}
      </ul>

      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 4 }}>
        <div style={{ display: "flex", gap: 6 }}>
          <span className="tag"><Icon name="doc" size={9} /> {(c.sources || []).length} sources</span>
          {c.antiTriggered && <span className="tag tag-warn"><span className="tag-dot" />anti-thesis</span>}
        </div>
        <span className="mono" style={{ fontSize: 11, color: "var(--ink-3)" }}>{c.mcap}</span>
      </div>
    </div>
  );
}

function EditorialCard({ c, onOpen }) {
  return (
    <div className="card card-hover fade-in" onClick={onOpen} style={{ display: "flex", flexDirection: "column", gap: 12, background: "var(--surface)" }}>
      <div className="mono" style={{ fontSize: 10, color: "var(--ink-4)" }}>#{c.rank} · {c.sector}</div>
      <div style={{ fontFamily: "var(--font-serif)", fontWeight: 500, fontSize: 22, lineHeight: 1.15, letterSpacing: "-0.015em" }}>
        {c.name}
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <span className="mono" style={{ fontSize: 13, fontWeight: 600 }}>{c.ticker}</span>
        <FitScore value={c.fit} />
      </div>
      <div style={{ borderTop: "1px solid var(--line)", paddingTop: 10 }}>
        <p style={{ margin: 0, fontSize: 13, color: "var(--ink-2)", lineHeight: 1.55, fontFamily: "var(--font-serif)" }}>
          {c.reasons[0]}
        </p>
      </div>
      <Sparkline data={c.spark} height={24} />
    </div>
  );
}

function CompactTable({ candidates, onOpen }) {
  return (
    <div className="card" style={{ padding: 0, overflow: "hidden" }}>
      <div style={{ display: "grid", gridTemplateColumns: "40px 80px 1.6fr 80px 90px 1fr 80px", gap: 12, padding: "10px 16px", borderBottom: "1px solid var(--line)", background: "var(--bg-2)" }}>
        {["#", "Ticker", "Name", "Fit", "Δ wk", "Sparkline", "Sources"].map((h) => (
          <div key={h} className="label" style={{ fontSize: 10 }}>{h}</div>
        ))}
      </div>
      {candidates.map((c) => (
        <div
          key={c.ticker}
          onClick={() => onOpen(c.ticker)}
          style={{
            display: "grid",
            gridTemplateColumns: "40px 80px 1.6fr 80px 90px 1fr 80px",
            gap: 12,
            padding: "10px 16px",
            borderBottom: "1px solid var(--line)",
            cursor: "pointer",
            alignItems: "center",
            fontSize: 13,
          }}
          className="ranked-row"
        >
          <span className="mono" style={{ color: "var(--ink-4)" }}>{c.rank}</span>
          <span className="mono" style={{ fontWeight: 600 }}>{c.ticker}</span>
          <span style={{ color: "var(--ink-2)" }}>{c.name}</span>
          <span className="mono">{c.fit.toFixed(2)}</span>
          <span className="mono" style={{ color: c.delta >= 0 ? "var(--pos)" : "var(--neg)", fontSize: 11 }}>
            {c.delta >= 0 ? "▲" : "▼"} {Math.abs(c.delta).toFixed(2)}
          </span>
          <Sparkline data={c.spark} height={20} />
          <span className="mono" style={{ fontSize: 11, color: "var(--ink-3)" }}>{(c.sources || []).length}</span>
        </div>
      ))}
    </div>
  );
}

function SnapshotHint() {
  return (
    <div style={{ marginTop: 24, padding: "14px 16px", border: "1px solid var(--line)", borderRadius: "var(--d-radius-lg)", background: "var(--bg-2)", display: "flex", alignItems: "flex-start", gap: 12 }}>
      <Icon name="refresh" size={16} style={{ color: "var(--ink-4)", marginTop: 2 }} />
      <div style={{ flex: 1, fontSize: 13, color: "var(--ink-3)", lineHeight: 1.55 }}>
        <strong style={{ color: "var(--ink)" }}>Snapshot 1.</strong> Every run is stored immutably. Pro plans see the weekly diff: who moved up/down, which criterion shifted, what triggered an anti-thesis.
        <span className="mono" style={{ fontSize: 11, color: "var(--ink-4)", marginLeft: 6 }}>v1.5 · tracking</span>
      </div>
      <button className="btn btn-sm">Preview diff →</button>
    </div>
  );
}

Object.assign(window, { RankedScreen });