// ─── SHORTLIST TAB ────────────────────────────────────────────────

const LENSES = [
  { id:"ai",        label:"AI lens" },
  { id:"sporty",    label:"Sporty" },
  { id:"creative",  label:"Creative" },
  { id:"community", label:"Community" },
  { id:"tate",      label:"Tate / siblings" },
];

function ShortlistCard({ school, idx, status, setStatus, note, setNote, noteOpen, setNoteOpen, lensOpen, setLensOpen }) {
  const isTop = school.topChoice;
  const mapsHref = `https://www.google.com/maps/search/${encodeURIComponent(school.name + ", " + school.location + ", Los Angeles")}`;

  const metrics = [
    { label: "Porter fit", val: school.porterFit },
    { label: "Arts",       val: school.arts },
    { label: "SEL",        val: school.sel },
    { label: "AI-ready",   val: school.ai },
  ];

  return (
    <article style={{
      background: "var(--cream-soft)",
      border: `1px solid ${isTop ? "var(--gold)" : "var(--line)"}`,
      borderTop: isTop ? "2px solid var(--gold)" : "1px solid var(--line)",
      padding: "28px 26px 22px",
      position: "relative",
    }}>
      {/* Rank tag */}
      <div style={{
        display: "flex",
        alignItems: "baseline",
        justifyContent: "space-between",
        marginBottom: 14,
        gap: 12,
      }}>
        <span className="serif" style={{
          fontSize: 13,
          fontStyle: "italic",
          color: "var(--gold)",
          letterSpacing: "0.04em",
        }}>
          № {String(idx + 1).padStart(2, "0")}
          {isTop && <span style={{ marginLeft: 10, color: "var(--ink-3)" }}>· top choice</span>}
        </span>
        {status && (
          <span style={{
            fontSize: 10,
            fontWeight: 500,
            letterSpacing: "0.16em",
            textTransform: "uppercase",
            color: "var(--forest)",
            padding: "3px 9px",
            background: "var(--cream-warm)",
            border: "1px solid rgba(168,138,74,0.3)",
          }}>{status}</span>
        )}
      </div>

      {/* Name */}
      <h3 className="serif" style={{
        margin: 0,
        fontSize: 30,
        fontWeight: 400,
        lineHeight: 1.1,
        letterSpacing: "-0.01em",
        color: "var(--ink)",
      }}>{school.name}</h3>

      <p style={{
        margin: "8px 0 22px",
        fontSize: 12,
        letterSpacing: "0.04em",
        color: "var(--ink-3)",
      }}>
        <a href={mapsHref} target="_blank" rel="noopener" style={{
          color: "var(--forest)",
          textDecoration: "none",
          borderBottom: "1px solid rgba(44,63,51,0.3)",
          paddingBottom: 1,
        }}>{school.location} ↗</a>
        <span style={{ margin: "0 6px", color: "var(--line)" }}>·</span>
        {school.type}
      </p>

      {/* Metrics */}
      <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(4, 1fr)",
        gap: 0,
        borderTop: "1px solid var(--line)",
        borderBottom: "1px solid var(--line)",
        padding: "16px 0",
        marginBottom: 22,
      }}>
        {metrics.map((m, i) => (
          <div key={m.label} style={{
            paddingLeft: i === 0 ? 0 : 14,
            borderLeft: i === 0 ? "none" : "1px solid var(--line)",
          }}>
            <p style={{
              margin: "0 0 8px",
              fontSize: 9.5,
              fontWeight: 500,
              letterSpacing: "0.14em",
              textTransform: "uppercase",
              color: "var(--ink-3)",
            }}>{m.label}</p>
            <Dots value={m.val} />
          </div>
        ))}
      </div>

      {/* Note */}
      <p style={{
        margin: "0 0 18px",
        fontSize: 14,
        lineHeight: 1.7,
        color: "var(--ink-2)",
      }}>{school.note}</p>

      {/* Lens panel */}
      {lensOpen && school.lenses && school.lenses[lensOpen] && (
        <div style={{
          padding: "16px 18px",
          background: "var(--cream-warm)",
          borderLeft: "2px solid var(--gold)",
          marginBottom: 18,
        }}>
          <Eyebrow tone="gold" style={{ marginBottom: 8 }}>
            {LENSES.find(l => l.id === lensOpen)?.label} · {school.name}
          </Eyebrow>
          <p className="serif" style={{
            margin: 0,
            fontSize: 17,
            fontStyle: "italic",
            lineHeight: 1.5,
            color: "var(--forest-deep)",
            fontWeight: 400,
          }}>{school.lenses[lensOpen]}</p>
        </div>
      )}

      {/* Lens chooser */}
      <div style={{
        display: "flex",
        flexWrap: "wrap",
        gap: 6,
        marginBottom: 18,
        paddingBottom: 14,
        borderBottom: "1px solid var(--line-2)",
      }}>
        <span style={{
          fontSize: 10,
          letterSpacing: "0.18em",
          textTransform: "uppercase",
          color: "var(--ink-3)",
          fontWeight: 500,
          alignSelf: "center",
          marginRight: 4,
        }}>Lenses</span>
        {LENSES.map(l => {
          const active = lensOpen === l.id;
          return (
            <button key={l.id}
              onClick={() => setLensOpen(active ? null : l.id)}
              style={{
                padding: "4px 10px",
                fontSize: 11,
                fontWeight: 400,
                fontFamily: "var(--serif)",
                fontStyle: "italic",
                background: active ? "var(--gold)" : "transparent",
                color: active ? "var(--cream)" : "var(--gold)",
                border: "1px solid var(--gold)",
                cursor: "pointer",
                transition: "all 0.15s ease",
                letterSpacing: "0.02em",
              }}>{l.label}</button>
          );
        })}
      </div>

      {/* Note textarea */}
      {noteOpen && (
        <textarea
          placeholder={`Your notes on ${school.name}…`}
          value={note || ""}
          onChange={e => setNote(e.target.value)}
          style={{
            width: "100%",
            minHeight: 80,
            fontSize: 14,
            lineHeight: 1.6,
            color: "var(--ink)",
            background: "var(--cream)",
            border: "1px solid var(--line)",
            borderRadius: 0,
            padding: "12px 14px",
            resize: "vertical",
            marginBottom: 18,
            outline: "none",
            fontFamily: "var(--sans)",
            boxSizing: "border-box",
          }}
        />
      )}

      {/* Status row */}
      <div style={{
        display: "flex",
        flexWrap: "wrap",
        alignItems: "center",
        gap: 6,
        paddingTop: 18,
        borderTop: "1px solid var(--line)",
      }}>
        {STATUS_OPTIONS.map(label => {
          const active = status === label;
          return (
            <button key={label}
              onClick={() => setStatus(active ? "" : label)}
              style={{
                padding: "5px 12px",
                fontSize: 10.5,
                fontWeight: 500,
                letterSpacing: "0.12em",
                textTransform: "uppercase",
                background: active ? "var(--forest)" : "transparent",
                color: active ? "var(--cream)" : "var(--ink-2)",
                border: `1px solid ${active ? "var(--forest)" : "rgba(31,27,22,0.18)"}`,
                cursor: "pointer",
                transition: "all 0.15s ease",
              }}>{label}</button>
          );
        })}
        <div style={{ marginLeft: "auto", display: "flex", gap: 6 }}>
          <button onClick={() => setNoteOpen(!noteOpen)} style={{
            padding: "5px 12px",
            fontSize: 10.5,
            fontWeight: 500,
            letterSpacing: "0.12em",
            textTransform: "uppercase",
            background: "transparent",
            color: "var(--ink-2)",
            border: "1px solid rgba(31,27,22,0.18)",
            cursor: "pointer",
          }}>{noteOpen ? "Close" : "Notes"}</button>
        </div>
      </div>
    </article>
  );
}

function ShortlistTab({ statuses, setStatuses, notes, setNotes }) {
  const [activeNote, setActiveNote] = React.useState(null);
  const [activeLens, setActiveLens] = React.useState({});

  return (
    <div style={{ padding: "0 20px" }}>
      <p className="serif" style={{
        margin: "0 0 6px",
        fontSize: 22,
        lineHeight: 1.4,
        color: "var(--ink)",
        fontStyle: "italic",
      }}>
        Seven schools.
      </p>
      <p style={{
        margin: "0 0 32px",
        fontSize: 14,
        lineHeight: 1.7,
        color: "var(--ink-2)",
      }}>
        Center for Early Education is your top choice. Track status as you move through each visit — open any lens (AI, sporty, creative, community, Tate) to see how the school reads through that filter. Tap the location to open it on a map.
      </p>

      <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
        {SHORTLIST.map((school, idx) => (
          <ShortlistCard
            key={school.name}
            school={school}
            idx={idx}
            status={statuses[school.name] || ""}
            setStatus={s => setStatuses({ ...statuses, [school.name]: s })}
            note={notes[school.name]}
            setNote={v => setNotes({ ...notes, [school.name]: v })}
            noteOpen={activeNote === school.name}
            setNoteOpen={v => setActiveNote(v ? school.name : null)}
            lensOpen={activeLens[school.name] || null}
            setLensOpen={v => setActiveLens({ ...activeLens, [school.name]: v })}
          />
        ))}
      </div>
    </div>
  );
}

window.ShortlistTab = ShortlistTab;