/* ============================================================
   B4IOU — Step 2 : School + Program input
              Step 3 : Aid eligibility
   ============================================================ */

/* ---------------- Step 2 ---------------- */

/* Live school search backed by College Scorecard. Mirrors the Combo
   look, but every result is a real institution; picking one attaches
   the school's official data + scorecard_id to the slot. */
function SchoolPicker({ value, onType, onPick, loading, picked }) {
  const [results, setResults] = useState([]);
  const [open, setOpen] = useState(false);
  const [searching, setSearching] = useState(false);
  const ref = useRef(null);
  const tmr = useRef(null);
  const live = !!(window.B4IOU_CONFIG && window.B4IOU_CONFIG.SCORECARD && window.B4IOU_CONFIG.SCORECARD.enabled);

  useEffect(() => {
    function onDoc(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }
    document.addEventListener("mousedown", onDoc);
    return () => document.removeEventListener("mousedown", onDoc);
  }, []);
  useEffect(() => {
    const card = ref.current && ref.current.closest(".card");
    if (card) card.classList.toggle("card-raised", open);
    return () => { if (card) card.classList.remove("card-raised"); };
  }, [open]);

  function handleInput(v) {
    onType(v);
    setOpen(true);
    clearTimeout(tmr.current);
    if (!live || !window.scorecardSearch) { setResults([]); return; }
    if ((v || "").trim().length < 3) { setResults([]); setSearching(false); return; }
    setSearching(true);
    tmr.current = setTimeout(async () => {
      const rs = await window.scorecardSearch(v);
      setResults(rs);
      setSearching(false);
    }, 300);
  }

  function choose(r) {
    setOpen(false);
    setResults([]);
    onPick(r);
  }

  const q = (value || "").trim();
  return (
    <div className="field combo" ref={ref}>
      <label>School name</label>
      <div style={{ position: "relative" }}>
        <input
          className="input"
          value={value}
          placeholder="Search any U.S. school — e.g. Arizona State University"
          onChange={(e) => handleInput(e.target.value)}
          onFocus={() => setOpen(true)}
          style={{ paddingRight: 42 }}
        />
        <span style={{ position: "absolute", right: 15, top: "50%", transform: "translateY(-50%)", color: loading ? "var(--accent)" : "var(--text-3)" }}>
          {loading ? <span className="sc-spin" /> : <Ico.search />}
        </span>
      </div>

      {picked && !loading && (
        <div className="sc-matched"><Ico.check /> Matched · official data loaded from College Scorecard</div>
      )}
      {loading && <div className="sc-loading mono">Loading official data…</div>}

      {open && live && q.length >= 3 && (
        <div className="combo-menu">
          <div className="combo-head">
            <span>{searching ? "Searching College Scorecard…" : `${results.length} match${results.length === 1 ? "" : "es"}`}</span>
            <span className="combo-head-hint"><Ico.shield /> Live federal data</span>
          </div>
          <div className="combo-scroll">
            {results.map((r) => (
              <div key={r.id} className="combo-item" onMouseDown={() => choose(r)}>
                <span>{r.name}{r.ownership === "For-profit" && <span className="own-tag">For-profit</span>}</span>
                {(r.city || r.state) && <span className="meta">{[r.city, r.state].filter(Boolean).join(", ")}</span>}
              </div>
            ))}
            {!searching && results.length === 0 && (
              <div className="combo-empty">No College Scorecard match yet — keep typing the full school name.</div>
            )}
          </div>
        </div>
      )}
    </div>
  );
}

function programOptionsFor(s) {
  if (s.programsMerged && s.programsMerged.length) return s.programsMerged;
  const p = (s.scorecard && window.scorecardPrograms) ? window.scorecardPrograms(s.scorecard) : [];
  return p.length ? p : PROGRAMS;
}

function SchoolInput({ schools, setSchools, usState, setUsState, allowThird, onNext, onBack }) {
  function update(i, key, val) {
    setSchools((prev) => prev.map((s, idx) => (idx === i ? { ...s, [key]: val } : s)));
  }
  function updateMany(i, obj) {
    setSchools((prev) => prev.map((s, idx) => (idx === i ? { ...s, ...obj } : s)));
  }
  async function pickSchool(i, school) {
    updateMany(i, { name: school.name, scorecardId: school.id, schoolState: school.state, scorecard: null, programsMerged: null, programNote: null, scLoading: true, program: "" });
    let raw = null;
    try { const res = await window.scorecardFetch(school.id, school.name); raw = res && res.data; } catch (e) { raw = null; }
    updateMany(i, { scorecard: raw, scLoading: false });
    // pool program catalog across sibling campuses (online + branches)
    try {
      const agg = await window.scorecardAggregatePrograms(school.id, school.name);
      if (agg && agg.programs.length) {
        const own = (raw && window.scorecardPrograms) ? window.scorecardPrograms(raw).length : 0;
        const note = agg.programs.length > own
          ? (agg.onlineDivision
              ? `Includes programs from ${agg.onlineDivision} and ${agg.siblingCount - 1} other ${school.name.split(/\s*[-–]\s*/)[0]} division${agg.siblingCount - 1 === 1 ? "" : "s"}.`
              : `Pooled across ${agg.siblingCount} ${school.name.split(/\s*[-–]\s*/)[0]} campuses (some delivered online or at another location).`)
          : null;
        updateMany(i, { programsMerged: agg.programs, programNote: note });
      }
    } catch (e) {}
  }
  const slots = allowThird ? schools : schools.slice(0, 2);
  const ready = usState && slots.every((s) => s.name.trim() && s.program.trim());
  const tags = ["A", "B", "C"];
  const tagColors = ["var(--accent)", "#7CC6FF", "#FF9F6E"];

  return (
    <div className="screen">
      <div className="pad grow stack" style={{ gap: 18 }}>
        <div className="fade-up">
          <span className="eyebrow"><Ico.search /> Step 1 of 3 · The matchup</span>
          <h2 className="title" style={{ marginTop: 12 }}>Who's in the ring?</h2>
          <p className="lede" style={{ marginTop: 8 }}>Drop two programs you're weighing. Don't see your school? Just type it — B4IOU runs any U.S. institution.</p>
        </div>

        <div className="field fade-up">
          <label>Your home state</label>
          <select className="input" value={usState} onChange={(e) => setUsState(e.target.value)} style={{ appearance: "none", cursor: "pointer" }}>
            <option value="">Select your state…</option>
            {STATES.map((s) => <option key={s} value={s}>{s}</option>)}
          </select>
        </div>

        {slots.map((s, i) => (
          <div className={`card fade-up d${Math.min(i + 1, 4)}`} key={i} style={{ padding: 16 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 14 }}>
              <span style={{ width: 26, height: 26, borderRadius: 8, background: tagColors[i], color: "var(--accent-ink)", display: "grid", placeItems: "center", fontWeight: 900, fontSize: 13 }}>{tags[i]}</span>
              <span className="mono" style={{ fontSize: 12, color: "var(--text-2)", letterSpacing: "0.06em", whiteSpace: "nowrap" }}>SCHOOL {tags[i]}</span>
            </div>
            <div className="stack" style={{ gap: 12 }}>
              <SchoolPicker
                value={s.name}
                loading={s.scLoading}
                picked={!!s.scorecard}
                onType={(v) => updateMany(i, { name: v, scorecard: null, scorecardId: null, scLoading: false })}
                onPick={(school) => pickSchool(i, school)}
              />
              <Combo label="Program / Degree" value={s.program} onChange={(v) => update(i, "program", v)} placeholder={s.scorecard ? "Pick from this school's programs" : "e.g. Nursing (BSN)"} options={programOptionsFor(s)} />
              {s.programNote && <div className="prog-note mono"><Ico.shield /> {s.programNote}</div>}
            </div>
          </div>
        ))}

        {!allowThird && (
          <div className="fade-up d4" style={{ display: "flex", alignItems: "center", gap: 10, padding: "12px 14px", border: "1px dashed var(--line-2)", borderRadius: "var(--r-md)", color: "var(--text-3)" }}>
            <Ico.lock />
            <span style={{ fontSize: 12.5 }} className="mono">A 3rd school unlocks with the $19.99 report</span>
          </div>
        )}
      </div>

      <div className="sticky-cta">
        <Btn kind="accent" size="lg" arrow disabled={!ready} onClick={onNext}>Next — Aid eligibility</Btn>
        <div style={{ textAlign: "center", marginTop: 6 }}><BackBtn onClick={onBack} /></div>
      </div>
    </div>
  );
}

/* ---------------- Step 3 ---------------- */
function AidEligibility({ aid, setAid, onNext, onBack }) {
  const mode = aid.mode; // 'questions' | 'sai' | null
  function setMode(m) { setAid((p) => ({ ...p, mode: m })); }

  return (
    <div className="screen">
      <div className="pad grow stack" style={{ gap: 18 }}>
        <div className="fade-up">
          <span className="eyebrow"><Ico.shield /> Step 2 of 3 · Your aid</span>
          <h2 className="title" style={{ marginTop: 12 }}>How much will <span style={{ color: "var(--accent)" }}>they</span> chip in?</h2>
          <p className="lede" style={{ marginTop: 8 }}>Pick one — both estimate your federal aid. Takes about a minute.</p>
        </div>

        <div className="stack fade-up d1" style={{ gap: 12 }}>
          <button className={`choice ${mode === "questions" ? "sel" : ""}`} onClick={() => setMode("questions")}>
            <div className="c-top">
              <span className="c-num">Option A · Fast</span>
              <span className="radio-dot" />
            </div>
            <span className="c-title">Answer 6 quick questions</span>
            <span className="c-desc">Mirrors the studentaid.gov flow — dependency, household, income. We estimate your aid index.</span>
          </button>

          <button className={`choice ${mode === "sai" ? "sel" : ""}`} onClick={() => setMode("sai")}>
            <div className="c-top">
              <span className="c-num">Option B · Exact</span>
              <span className="radio-dot" />
            </div>
            <span className="c-title">Upload your SAI document</span>
            <span className="c-desc">Already have your aid letter? <span style={{ color: "var(--accent)" }}>We read your SAI and pull the number automatically.</span></span>
          </button>
        </div>

        {mode === "questions" && <Questionnaire aid={aid} setAid={setAid} />}
        {mode === "sai" && <SAIUpload aid={aid} setAid={setAid} />}
      </div>

      <div className="sticky-cta">
        <Btn kind="accent" size="lg" arrow disabled={!aidReady(aid)} onClick={onNext}>Run my comparison</Btn>
        <div style={{ textAlign: "center", marginTop: 6 }}><BackBtn onClick={onBack} /></div>
      </div>
    </div>
  );
}

function aidReady(aid) {
  if (aid.mode === "questions") return AID_QUESTIONS.every((q) => aid.answers && aid.answers[q.id]);
  if (aid.mode === "sai") return !!aid.saiFile;
  return false;
}

function Questionnaire({ aid, setAid }) {
  function pick(qid, v) {
    setAid((p) => ({ ...p, answers: { ...(p.answers || {}), [qid]: v } }));
  }
  const answers = aid.answers || {};
  return (
    <div className="stack fade-up" style={{ gap: 22, marginTop: 6 }}>
      <div className="divider" />
      {AID_QUESTIONS.map((q, i) => (
        <div className="qblock" key={q.id}>
          <div style={{ display: "flex", gap: 10, alignItems: "baseline" }}>
            <span className="mono" style={{ color: "var(--accent)", fontSize: 13, fontWeight: 700 }}>{String(i + 1).padStart(2, "0")}</span>
            <span className="qlabel">{q.q}</span>
          </div>
          {q.hint && <div className="qhint" style={{ paddingLeft: 26 }}>{q.hint}</div>}
          <div className="opt-grid" style={{ paddingLeft: 26 }}>
            {q.opts.map((o) => (
              <button key={o.v} className={`opt ${answers[q.id] === o.v ? "sel" : ""}`} onClick={() => pick(q.id, o.v)}>
                <span>{o.t}</span>
                <span className="tick"><Ico.check /></span>
              </button>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

function SAIUpload({ aid, setAid }) {
  const ref = useRef(null);
  function onFile(e) {
    const f = e.target.files[0];
    if (f) setAid((p) => ({ ...p, saiFile: { name: f.name, size: f.size } }));
  }
  return (
    <div className="stack fade-up" style={{ gap: 14, marginTop: 6 }}>
      <div className="divider" />
      <div className={`upload ${aid.saiFile ? "has" : ""}`} onClick={() => ref.current && ref.current.click()}>
        <input ref={ref} type="file" accept=".pdf,.png,.jpg,.jpeg" hidden onChange={onFile} />
        <div style={{ display: "grid", placeItems: "center", gap: 10, color: aid.saiFile ? "var(--accent)" : "var(--text-2)" }}>
          {aid.saiFile ? <Ico.doc /> : <Ico.upload />}
          {aid.saiFile ? (
            <>
              <div style={{ fontWeight: 800, fontSize: 14 }}>{aid.saiFile.name}</div>
              <div className="mono" style={{ fontSize: 11, color: "var(--text-3)" }}>Tap to replace</div>
            </>
          ) : (
            <>
              <div style={{ fontWeight: 800, fontSize: 14, color: "var(--text)" }}>Upload SAI / aid document</div>
              <div className="mono" style={{ fontSize: 11, color: "var(--text-3)" }}>PDF, PNG or JPG</div>
            </>
          )}
        </div>
      </div>
      {aid.saiFile && (
        <div style={{ display: "flex", gap: 10, alignItems: "center", padding: "12px 14px", background: "var(--accent-soft)", border: "1px solid var(--accent-line)", borderRadius: "var(--r-md)" }}>
          <Ico.spark style={{ color: "var(--accent)", flex: "0 0 auto" }} />
          <span style={{ fontSize: 12.5, color: "var(--text-2)" }}><b style={{ color: "var(--accent)" }}>B4IOU will read your SAI</b> and extract your eligibility number automatically when you run the comparison.</span>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { SchoolInput, AidEligibility, SchoolPicker, programOptionsFor });