// Step 2 — Use Case multi-select grid

function Step2({ selected, setSelected, suggested, onNext, onBack }) {
  const { USE_CASES } = window.TB_DATA;
  const [videoId, setVideoId] = React.useState(null);
  const [watched, setWatched] = React.useState(() => {
    try { return new Set(JSON.parse(localStorage.getItem("tb_watched_v1") || "[]")); } catch { return new Set(); }
  });

  const toggle = (id, soon) => {
    if (soon) return;
    setSelected(selected.includes(id) ? selected.filter(x => x !== id) : [...selected, id]);
  };

  const openVideo = (uc, e) => {
    e.stopPropagation();
    setVideoId(uc.video);
    const next = new Set(watched); next.add(uc.id);
    setWatched(next);
    localStorage.setItem("tb_watched_v1", JSON.stringify([...next]));
  };

  const currentUc = USE_CASES.find(u => u.video === videoId);

  return (
    <div className="fade-enter">
      <div className="step-header green">
        <div>
          <div className="eyebrow green">Step 02 — Use Case Selection</div>
          <h1 className="h-display">What should the demo showcase?</h1>
          <p className="h-sub">Pick one or more. Each use case ships with a ready-to-demo set of components. You'll fine-tune names next.</p>
        </div>
        <div className="step-header-badge">
          <div className="v">{selected.length}</div>
          <div className="k">selected</div>
        </div>
      </div>

      <div className="uc-grid">
        {USE_CASES.map(uc => {
          const isSel = selected.includes(uc.id);
          const isSuggested = (suggested || []).includes(uc.id);
          return (
            <div key={uc.id}
              className={`uc ${isSel ? "selected" : ""} ${uc.soon ? "disabled" : ""}`}
              onClick={() => toggle(uc.id, uc.soon)}
              role="button" tabIndex={uc.soon ? -1 : 0}
              onKeyDown={(e) => (e.key === " " || e.key === "Enter") && toggle(uc.id, uc.soon)}>
              {uc.soon && <span className="soon">Coming soon</span>}
              {isSuggested && !uc.soon && <span className="suggested-pill" title="Suggested from imported prep guide">Suggested</span>}
              <div className="uc-head">
                <div className="uc-title">{uc.name}</div>
                {!uc.soon && (
                  <div className={`check ${isSel ? "pop" : ""}`}>
                    <Ic.check />
                  </div>
                )}
              </div>
              <div className="uc-desc">{uc.desc}</div>
              <div className="uc-tags">
                {uc.tags.map(t => <span key={t} className="tag">{t}</span>)}
              </div>
              {uc.video && (
                <button className={`uc-watch ${watched.has(uc.id) ? "watched" : ""}`}
                  onClick={(e) => openVideo(uc, e)}
                  title="Watch explainer">
                  <svg viewBox="0 0 24 24" width="11" height="11" fill="currentColor"><polygon points="6 4 20 12 6 20"/></svg>
                  {watched.has(uc.id) ? "Re-watch" : "Watch explainer"}
                </button>
              )}
            </div>
          );
        })}
      </div>

      {videoId && (
        <div className="modal-shade" onClick={() => setVideoId(null)}>
          <div className="video-modal" onClick={(e) => e.stopPropagation()}>
            <div className="video-modal-head">
              <div>
                <div className="eyebrow green" style={{ marginBottom: 4 }}>Use case explainer</div>
                <h3 style={{ margin: 0, fontSize: 18, letterSpacing: "-0.02em" }}>{currentUc?.name}</h3>
                <p style={{ color: "var(--ink-3)", fontSize: 13.5, margin: "4px 0 0" }}>{currentUc?.desc}</p>
              </div>
              <button className="btn btn-ghost" onClick={() => setVideoId(null)} style={{ fontSize: 18, padding: "6px 10px" }}>×</button>
            </div>
            <div className="video-frame">
              <iframe
                src={`https://www.youtube.com/embed/${videoId}?autoplay=1&rel=0&cc_load_policy=1`}
                title={currentUc?.name}
                frameBorder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowFullScreen />
            </div>
          </div>
        </div>
      )}

      <FooterActions
        left={<>
          <span className="count-pill">{selected.length} selected</span>
          <span>{selected.length === 0 ? "Pick at least one use case to continue." : "Ready when you are."}</span>
        </>}
        primaryLabel={<>Next <Ic.arrow /></>}
        primaryDisabled={selected.length === 0}
        onPrimary={onNext}
        onBack={onBack}
      />
    </div>
  );
}

Object.assign(window, { Step2 });