/* Thesis Lab — Q8 Option B
   System proposes 3-5 distinct theses. User activates 1+. */

const { useState: useStateTL } = React;

function ThesisLabScreen({ profileId, onActivate, onBack }) {
  const profileTheses = dbq.thesesForProfile(profileId);
  const [generating, setGenerating] = useStateTL(false);
  const [theses, setTheses] = useStateTL(profileTheses);
  const [selected, setSelected] = useStateTL(profileTheses[0]?.id);

  React.useEffect(() => {
    const fresh = dbq.thesesForProfile(profileId);
    setTheses(fresh);
    setSelected(fresh[0]?.id);
  }, [profileId]);

  function reroll() {
    setGenerating(true);
    setTimeout(() => setGenerating(false), 900);
  }

  return (
    <div style={{ maxWidth: 1180, margin: "0 auto", padding: "32px 24px 80px" }}>
      <SectionHead
        eyebrow="02 — thesis lab"
        title="Five investable hypotheses from your profile"
        sub="Each card explains how it differs from the others. Pick one or more to activate."
        right={
          <div style={{ display: "flex", gap: 8 }}>
            <button className="btn btn-sm" onClick={reroll}>
              <Icon name="refresh" size={12} /> Generate another angle
            </button>
            <button className="btn btn-primary btn-sm" onClick={() => onActivate(selected)}>
              Activate selected <Icon name="arrow" size={12} />
            </button>
          </div>
        }
      />

      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))", gap: 16 }}>
        {theses.map((t, i) => (
          <ThesisCard
            key={t.id}
            t={t}
            selected={selected === t.id}
            onSelect={() => setSelected(t.id)}
            shimmer={generating && i === theses.length - 1}
          />
        ))}
      </div>

      <div style={{ marginTop: 28, padding: 16, border: "1px dashed var(--line-2)", borderRadius: "var(--d-radius-lg)", display: "flex", gap: 12, alignItems: "flex-start" }}>
        <Icon name="shield" size={18} style={{ color: "var(--ink-4)", marginTop: 2 }} />
        <div style={{ fontSize: 13, color: "var(--ink-3)", lineHeight: 1.55 }}>
          <strong style={{ color: "var(--ink)" }}>Anti-thesis is required, not optional.</strong> Each thesis above ships with a list of conditions that would invalidate it (heavy China revenue, single-customer concentration, etc). Per-company anti-thesis checks fire on the deep-dive page. ChatGPT never asks this question.
        </div>
      </div>
    </div>
  );
}

function ThesisCard({ t, selected, onSelect, shimmer }) {
  if (shimmer) {
    return (
      <div className="card">
        <ShimmerBlock h={18} w="60%" />
        <ShimmerBlock h={12} w="100%" mt={12} />
        <ShimmerBlock h={12} w="92%" mt={6} />
        <ShimmerBlock h={12} w="40%" mt={20} />
      </div>
    );
  }
  return (
    <div
      className={"card card-hover fade-in"}
      onClick={onSelect}
      style={{
        borderColor: selected ? "var(--ink)" : undefined,
        boxShadow: selected ? "0 0 0 1px var(--ink) inset" : undefined,
        display: "flex",
        flexDirection: "column",
        gap: 12,
      }}
    >
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 12 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <div style={{
            width: 18, height: 18, borderRadius: 4,
            border: "1.5px solid " + (selected ? "var(--ink)" : "var(--line-2)"),
            background: selected ? "var(--ink)" : "transparent",
            display: "grid", placeItems: "center",
            color: "var(--accent-fg)",
          }}>
            {selected && <Icon name="check2" size={11} />}
          </div>
          <h3 style={{ margin: 0, fontFamily: "var(--font-serif)", fontWeight: 500, fontSize: 19, letterSpacing: "-0.01em" }}>
            {t.title}
          </h3>
        </div>
        <FitScore value={t.fit} />
      </div>

      <ScoreBar value={t.fit} />

      <p style={{ margin: 0, fontSize: "var(--d-text-sm)", lineHeight: 1.55, color: "var(--ink-2)" }}>
        {t.narrative}
      </p>

      <div style={{ padding: "10px 12px", background: "var(--bg-2)", borderRadius: "var(--d-radius)", fontSize: 12, color: "var(--ink-3)", lineHeight: 1.5 }}>
        <span className="label" style={{ fontSize: 10, marginRight: 6 }}>vs other angles</span>
        {t.differentiator}
      </div>

      <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
        {t.sample.map((s) => (
          <span key={s} className="mono" style={{ fontSize: 11, padding: "2px 6px", border: "1px solid var(--line)", borderRadius: 4, color: "var(--ink-2)" }}>
            {s}
          </span>
        ))}
        <span className="mono" style={{ fontSize: 11, color: "var(--ink-4)", alignSelf: "center" }}>
          + {Math.max(0, t.candidates_count - 3)} more
        </span>
      </div>

      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: "auto", paddingTop: 4 }}>
        <FeasibilityDot kind={t.feasibility} />
        <button className="btn btn-ghost btn-sm" onClick={(e) => { e.stopPropagation(); }}>
          <Icon name="edit" size={11} /> Edit
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { ThesisLabScreen });