// Versions page — release history cards

function VersionCard({ v, isSelected, onClick }) {
  const kindStyles = {
    launch:  { color:"var(--accent)",         label:"출시",     icon:"◉" },
    patch:   { color:"var(--fg-subtle)",      label:"패치",     icon:"·" },
    feature: { color:"var(--accent-amber-500)", label:"기능",     icon:"＋" },
    major:   { color:"var(--accent-coral-500)", label:"메이저",   icon:"★" },
    final:   { color:"#A67DB8",                 label:"마지막",   icon:"◼" },
  };
  const style = kindStyles[v.kind];
  return (
    <button className={"version-card" + (isSelected ? " selected" : "")} onClick={onClick} style={{"--v-color": style.color}}>
      <div className="version-head">
        <div className="version-kind" style={{background:`color-mix(in srgb, ${style.color} 15%, transparent)`, color: style.color}}>
          <span>{style.icon}</span>
          <span>{style.label}</span>
        </div>
        <div className="mono" style={{fontSize:11, color:"var(--fg-subtle)"}}>{v.date}</div>
      </div>
      <div className="version-number">
        <span className="mono">v{v.version}</span>
      </div>
      <div className="version-title">{v.title}</div>
      <div className="version-note">
        {v.notes.ko}
      </div>
      <div className="version-meta">
        <span>📦 {v.size}MB</span>
        {v.notes.en && <span className="badge badge-lang">EN</span>}
        {v.notes.ja && <span className="badge badge-lang">JA</span>}
      </div>
    </button>
  );
}

function VersionDetail({ v, onClose }) {
  if (!v) return null;
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <button onClick={onClose} style={{ float: "right", width: 40, height: 40, borderRadius: 10, border: "1px solid var(--border-default)", background: "var(--bg-surface)", color: "var(--fg-default)", fontSize: 16, cursor: "pointer" }}>✕</button>
        <div className="mono" style={{fontSize:12, color:"var(--fg-muted)", marginBottom:6}}>{v.date}</div>
        <h2 className="mono" style={{margin:"0 0 6px", fontSize:36, fontWeight:700, color:"var(--accent)"}}>v{v.version}</h2>
        <h3 style={{margin:"0 0 24px", fontSize:22, fontWeight:700}}>{v.title}</h3>

        <div style={{background:"var(--bg-surface-alt)", padding:"18px 22px", borderRadius:12, marginBottom:16}}>
          <div className="micro" style={{color:"var(--fg-muted)", marginBottom:10}}>한국어 릴리즈 노트</div>
          <p style={{margin:0, fontSize:15, lineHeight:1.75}}>{v.notes.ko}</p>
        </div>

        {v.notes.en && (
          <div style={{background:"var(--bg-surface-alt)", padding:"18px 22px", borderRadius:12, marginBottom:16, borderLeft:"3px solid var(--accent-amber-500)"}}>
            <div className="micro" style={{color:"var(--fg-muted)", marginBottom:10}}>English</div>
            <p style={{margin:0, fontSize:15, lineHeight:1.7}}>{v.notes.en}</p>
          </div>
        )}

        {v.notes.ja && (
          <div style={{background:"var(--bg-surface-alt)", padding:"18px 22px", borderRadius:12, borderLeft:"3px solid var(--accent-amber-500)"}}>
            <div className="micro" style={{color:"var(--fg-muted)", marginBottom:10}}>日本語</div>
            <p style={{margin:0, fontSize:15, lineHeight:1.7}}>{v.notes.ja}</p>
          </div>
        )}
      </div>
    </div>
  );
}

function VersionsPage() {
  const versions = window.VERSION_DATA;
  const [selected, setSelected] = React.useState(null);
  const [filter, setFilter] = React.useState("all");

  const filtered = filter === "all" ? versions : versions.filter(v => v.kind === filter);

  return (
    <div className="page">
      <section className="reviews-hero">
        <div style={{fontSize:12, letterSpacing:"0.18em", fontWeight:600, textTransform:"uppercase", color:"var(--fg-muted)", marginBottom:16}}>
          Versions · 버전 변천사
        </div>
        <h1>66개의 <em style={{fontStyle:"normal", color:"var(--accent)"}}>릴리즈</em> 중 10개</h1>
        <p className="reviews-hero-sub">v1.0에서 v2.4.7까지, 이 앱이 커가던 방식</p>
      </section>

      <section className="section" style={{marginTop:48}}>
        <div className="version-filter">
          {[
            {k:"all",label:"전체"},{k:"launch",label:"출시"},{k:"major",label:"메이저"},
            {k:"feature",label:"기능"},{k:"patch",label:"패치"},{k:"final",label:"마지막"}
          ].map(f => (
            <button key={f.k} className={"rating-pill" + (filter === f.k ? " active" : "")} onClick={() => setFilter(f.k)}>{f.label}</button>
          ))}
        </div>

        <div className="versions-grid">
          {filtered.map(v => (
            <VersionCard key={v.version} v={v} isSelected={selected === v.version} onClick={() => setSelected(v)} />
          ))}
        </div>
      </section>

      <section className="section" style={{marginTop:96}}>
        <div className="chart-card" style={{padding:"24px 28px"}}>
          <div className="chart-card-head">
            <h4 className="chart-title">앱 크기 추이</h4>
            <span className="caption muted">MB</span>
          </div>
          <p className="chart-sub">v1.0 18.2MB에서 v2.4.7 42.4MB로. 두 배 조금 넘게 자랐다.</p>
          <div style={{display:"flex", alignItems:"flex-end", gap:6, height:120, marginTop:16, paddingBottom:20, borderBottom:"1px solid var(--border-default)"}}>
            {versions.map((v, i) => {
              const max = 44;
              const h = (v.size / max) * 100;
              return (
                <div key={v.version} style={{flex:1, display:"flex", flexDirection:"column", alignItems:"center", gap:6}}>
                  <div className="mono" style={{fontSize:10, color:"var(--fg-muted)"}}>{v.size}</div>
                  <div style={{width:"100%", height:`${h}%`, background: v.kind === "major" ? "var(--accent)" : v.kind === "final" ? "var(--accent-coral-500)" : "var(--brand-mint-300)", borderRadius:"4px 4px 0 0", transition:"height 600ms var(--ease-out)"}}></div>
                  <div className="mono" style={{fontSize:9, color:"var(--fg-subtle)"}}>v{v.version}</div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {selected && <VersionDetail v={selected} onClose={() => setSelected(null)} />}
    </div>
  );
}

Object.assign(window, { VersionsPage });