/* global React, window */
const { SharedMasthead, Breadcrumb, Colophon } = window.cynixShared;
const { EVENTS } = window.cynixCommunityData;
const { AUTHORS } = window.cynixDataExt;
const { useState, useMemo } = React;

const findAuth = (id) => AUTHORS.find(a => a.slug === id) || AUTHORS[0];
const fmtMonth = (d) => {
  const [y, m] = d.split("-");
  return `${y}.${m}`;
};

const App = () => {
  const [filter, setFilter] = useState("ALL");

  const upcoming = EVENTS.filter(e => e.status.includes("募集"));
  const past = EVENTS.filter(e => !e.status.includes("募集"));

  const list = useMemo(() => {
    if (filter === "OFFLINE") return EVENTS.filter(e => e.type === "オフライン");
    if (filter === "ONLINE") return EVENTS.filter(e => e.type === "オンライン");
    return EVENTS;
  }, [filter]);

  const total = EVENTS.length;
  const totalApplied = EVENTS.reduce((s, e) => s + e.applied, 0);
  const offlineCount = EVENTS.filter(e => e.type === "オフライン").length;

  return (
    <>
      <SharedMasthead section="EVENTS" />
      <main className="mod-shell">
        <Breadcrumb items={[{ label: "TOP", href: "index.html" }, { label: "編集部夜会・ウェビナー" }]} />

        {/* Hero */}
        <section style={{ borderTop: "4px double var(--ink)", borderBottom: "4px double var(--ink)", padding: "52px 0 60px", margin: "16px 0 48px", display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 48, alignItems: "end" }}>
          <div>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.3em", color: "var(--vermilion)", marginBottom: 14 }}>EDITORIAL GATHERINGS</div>
            <h1 style={{ fontFamily: "'Crimson Pro', serif", fontSize: 88, fontWeight: 500, lineHeight: 0.92, margin: 0, letterSpacing: "-0.03em" }}>編集部夜会と<br/>ウェビナー記録</h1>
            <div style={{ fontFamily: "'Crimson Pro', serif", fontSize: 24, fontStyle: "italic", marginTop: 10, opacity: 0.7 }}>Where pages meet people.</div>
            <p style={{ maxWidth: 540, marginTop: 22, fontSize: 14, lineHeight: 1.85, opacity: 0.85 }}>
              紙面に書ききれなかった話を、月に一度、読者と編集部が直接交わす場。<br />
              オフライン (定員30名前後) とオンライン (200-500名) の二系統で開催しています。
            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, border: "2px solid var(--ink)" }}>
            <div style={{ padding: "20px 18px", borderRight: "1px solid var(--ink)", borderBottom: "1px solid var(--ink)" }}>
              <div style={{ fontFamily: "'Crimson Pro', serif", fontSize: 48, fontWeight: 600, lineHeight: 1, color: "var(--vermilion)" }}>{total}</div>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: "0.2em", marginTop: 4 }}>HELD TO DATE</div>
            </div>
            <div style={{ padding: "20px 18px", borderBottom: "1px solid var(--ink)" }}>
              <div style={{ fontFamily: "'Crimson Pro', serif", fontSize: 48, fontWeight: 600, lineHeight: 1 }}>{totalApplied.toLocaleString()}</div>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: "0.2em", marginTop: 4 }}>TOTAL ATTENDEES</div>
            </div>
            <div style={{ padding: "20px 18px", borderRight: "1px solid var(--ink)" }}>
              <div style={{ fontFamily: "'Crimson Pro', serif", fontSize: 48, fontWeight: 600, lineHeight: 1 }}>{offlineCount}</div>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: "0.2em", marginTop: 4 }}>OFFLINE NIGHTS</div>
            </div>
            <div style={{ padding: "20px 18px" }}>
              <div style={{ fontFamily: "'Crimson Pro', serif", fontSize: 48, fontWeight: 600, lineHeight: 1 }}>4.7<small style={{ fontSize: 18 }}>/5</small></div>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: "0.2em", marginTop: 4 }}>SATISFACTION</div>
            </div>
          </div>
        </section>

        {/* Upcoming */}
        {upcoming.length > 0 && (
          <section style={{ marginBottom: 56 }}>
            <div style={{ display: "flex", alignItems: "baseline", gap: 16, borderBottom: "2px solid var(--ink)", paddingBottom: 10, marginBottom: 20 }}>
              <h2 style={{ fontFamily: "'Crimson Pro', serif", fontSize: 36, fontWeight: 500, margin: 0 }}>Upcoming</h2>
              <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.2em", color: "var(--vermilion)" }}>NEXT EVENT — 募集中</span>
            </div>
            {upcoming.map(e => {
              const fillPct = Math.round((e.applied / e.capacity) * 100);
              return (
                <article key={e.id} style={{ display: "grid", gridTemplateColumns: "180px 1fr 280px", gap: 28, border: "3px solid var(--ink)", padding: "32px 36px", marginBottom: 20, background: "var(--cream)" }}>
                  <div style={{ borderRight: "1px solid var(--ink)", paddingRight: 20 }}>
                    <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.2em", color: "var(--vermilion)", marginBottom: 6 }}>{e.type === "オフライン" ? "OFFLINE" : "ONLINE"}</div>
                    <div style={{ fontFamily: "'Crimson Pro', serif", fontSize: 56, fontWeight: 600, lineHeight: 1 }}>{e.date.slice(8, 10)}</div>
                    <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, letterSpacing: "0.15em", marginTop: 4 }}>{fmtMonth(e.date)}</div>
                    <div style={{ fontSize: 12, marginTop: 12, opacity: 0.85 }}>{e.time}</div>
                  </div>
                  <div>
                    <h3 style={{ fontFamily: "'Crimson Pro', serif", fontSize: 30, fontWeight: 500, margin: "0 0 10px", lineHeight: 1.25 }}>{e.title}</h3>
                    <p style={{ fontSize: 13, lineHeight: 1.85, margin: "0 0 14px", opacity: 0.9 }}>{e.desc}</p>
                    <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                      {e.speakers.map(sid => {
                        const a = findAuth(sid);
                        return <span key={sid} style={{ fontSize: 11, padding: "2px 10px", border: "1px solid var(--ink)" }}>登壇 — <b style={{ color: "var(--vermilion)" }}>{a.name_jp}</b></span>;
                      })}
                    </div>
                    <div style={{ fontSize: 11, marginTop: 12, opacity: 0.7 }}>会場: {e.location} · 参加費: <b>{e.fee}</b></div>
                  </div>
                  <div style={{ textAlign: "right" }}>
                    <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: "0.18em", marginBottom: 6 }}>SEATS — {e.applied}/{e.capacity}</div>
                    <div style={{ width: "100%", height: 8, background: "var(--paper)", border: "1px solid var(--ink)", marginBottom: 10 }}>
                      <div style={{ width: `${fillPct}%`, height: "100%", background: "var(--vermilion)" }} />
                    </div>
                    <div style={{ fontFamily: "'Crimson Pro', serif", fontSize: 13, fontStyle: "italic", marginBottom: 14 }}>残り {e.capacity - e.applied} 席</div>
                    <a href="/contact.html?type=event" style={{ display: "block", background: "var(--ink)", color: "var(--paper)", padding: "12px 20px", textAlign: "center", fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.2em" }}>申し込む →</a>
                  </div>
                </article>
              );
            })}
          </section>
        )}

        {/* Filter bar */}
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", borderTop: "2px solid var(--ink)", borderBottom: "1px solid var(--ink)", padding: "12px 0", marginBottom: 28 }}>
          <h2 style={{ fontFamily: "'Crimson Pro', serif", fontSize: 28, fontWeight: 500, margin: 0 }}>Past Events / 過去開催</h2>
          <div style={{ display: "flex", gap: 6 }}>
            {[{ id: "ALL", label: "ALL" }, { id: "OFFLINE", label: "OFFLINE" }, { id: "ONLINE", label: "ONLINE" }].map(t => (
              <button key={t.id} onClick={() => setFilter(t.id)} style={{
                padding: "5px 14px",
                border: "1px solid var(--ink)",
                background: filter === t.id ? "var(--ink)" : "var(--paper)",
                color: filter === t.id ? "var(--paper)" : "var(--ink)",
                fontFamily: "'JetBrains Mono', monospace",
                fontSize: 11, letterSpacing: "0.18em",
                cursor: "pointer",
              }}>{t.label}</button>
            ))}
          </div>
        </div>

        {/* Past events list */}
        <div style={{ display: "grid", gap: 0 }}>
          {list.filter(e => !e.status.includes("募集")).map((e, idx) => (
            <article key={e.id} style={{ display: "grid", gridTemplateColumns: "120px 1fr 240px 140px", borderTop: idx === 0 ? "1px solid var(--ink)" : "none", borderBottom: "1px solid var(--ink)", padding: "22px 0", gap: 24, alignItems: "start" }}>
              <div>
                <div style={{ fontFamily: "'Crimson Pro', serif", fontSize: 34, fontWeight: 600, lineHeight: 1 }}>{e.date.slice(8, 10)}</div>
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.15em", marginTop: 2 }}>{fmtMonth(e.date)}</div>
                <div style={{ fontSize: 10, fontFamily: "'JetBrains Mono', monospace", letterSpacing: "0.18em", marginTop: 8, color: e.type === "オフライン" ? "var(--vermilion)" : "var(--ink)", opacity: 0.85 }}>{e.type === "オフライン" ? "● OFFLINE" : "○ ONLINE"}</div>
              </div>
              <div>
                <h3 style={{ fontFamily: "'Crimson Pro', serif", fontSize: 22, fontWeight: 500, margin: "0 0 6px", lineHeight: 1.3 }}>{e.title}</h3>
                <p style={{ fontSize: 12, lineHeight: 1.8, margin: "0 0 8px", opacity: 0.85 }}>{e.desc}</p>
                <div style={{ fontSize: 11, opacity: 0.7 }}>
                  登壇: {e.speakers.map(s => findAuth(s).name_jp).join(", ")} · {e.location}
                </div>
              </div>
              <div>
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: "0.18em", opacity: 0.6, marginBottom: 4 }}>ATTENDED</div>
                <div style={{ display: "flex", alignItems: "baseline", gap: 4 }}>
                  <span style={{ fontFamily: "'Crimson Pro', serif", fontSize: 30, fontWeight: 600 }}>{e.applied}</span>
                  <span style={{ fontSize: 11, opacity: 0.6 }}> / {e.capacity}</span>
                </div>
                <div style={{ fontSize: 10, marginTop: 4, opacity: 0.7 }}>{e.fee}</div>
              </div>
              <div style={{ textAlign: "right" }}>
                {e.status.includes("録画") ? (
                  <>
                    <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.15em", color: "var(--vermilion)", marginBottom: 6 }}>● REC AVAILABLE</div>
                    <a href="/newsletter.html" style={{ fontSize: 11, fontFamily: "'JetBrains Mono', monospace", letterSpacing: "0.15em", borderBottom: "1px solid currentColor" }}>録画を見る →</a>
                  </>
                ) : (
                  <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.15em", opacity: 0.6 }}>{e.status}</div>
                )}
              </div>
            </article>
          ))}
        </div>

        {/* House rules */}
        <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
          <div style={{ border: "2px solid var(--ink)", padding: "28px 32px" }}>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.2em", color: "var(--vermilion)", marginBottom: 8 }}>HOUSE RULES — 編集部夜会のルール</div>
            <h3 style={{ fontFamily: "'Crimson Pro', serif", fontSize: 24, fontWeight: 500, margin: "0 0 14px" }}>夜会の3つの約束。</h3>
            <ol style={{ fontSize: 13, lineHeight: 1.85, paddingLeft: 18, margin: 0 }}>
              <li><b>記事ネタの本音を持ち寄る。</b> 紙面に書けなかった話を、ここで初めて出します。</li>
              <li><b>SNS投稿は要相談。</b> 発言の引用は登壇者の同意を取ってから。</li>
              <li><b>営業目的の参加はお断り。</b> 名刺交換会ではなく、編集会議の延長です。</li>
            </ol>
          </div>
          <div style={{ background: "var(--ink)", color: "var(--paper)", padding: "28px 32px" }}>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.2em", color: "var(--vermilion)", marginBottom: 8 }}>SUBSCRIBE</div>
            <h3 style={{ fontFamily: "'Crimson Pro', serif", fontSize: 24, fontWeight: 500, margin: "0 0 12px" }}>次回開催の案内を最初に受け取る。</h3>
            <p style={{ fontSize: 12, lineHeight: 1.85, opacity: 0.9, margin: "0 0 16px" }}>
              編集部夜会はサブスク会員に1週間先行で案内されます。オフライン会は定員が小さいため、ほぼ毎回先行募集で埋まります。
            </p>
            <a href="/newsletter.html" style={{ display: "inline-block", background: "var(--vermilion)", color: "var(--paper)", padding: "10px 22px", fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.2em" }}>メルマガ登録 →</a>
          </div>
        </div>

        <Colophon />
      </main>
    </>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<App />);