/* page-event-detail.jsx — 三级页：活动详情 + 报名 (社区 / 企业通用)
   视觉：标题与关键信息直接浮在 aurora 背景上；介绍 / 报名使用同系半透明玻璃，
   避免「白块硬贴背景」。无嘉宾、无日程、无受众套话。 */

function EvBack({ href, label }) {
  return <a className="back" href={href}><Arrow size={14} />{label}</a>;
}

function RegCard({ e, org, loc, dateStr, scope, idx }) {
  const db = useKataDB();
  const already = db.isRegistered(scope, idx);
  const [done, setDone] = React.useState(false);
  const [form, setForm] = React.useState({ name: '', contact: '', role: '开发者' });
  const roles = ['开发者', '研究者', '产品/运营', '学生', '其他'];
  const submit = (ev) => { ev.preventDefault(); db.registerEvent(scope, idx, form); setDone(true); };

  if (done || already) {
    return (
      <div className="event-reg-card event-glass">
        <div className="done-card">
          <span className="check" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 13l4 4L19 7" /></svg>
          </span>
          <h3>已报名 ✓</h3>
          <p>你已成功报名「{e.title}」。活动详情与提醒将通过你留的联系方式发送，期待见到你。</p>
          <div className="reg-meta" style={{ textAlign: 'left' }}>
            <div className="r"><span className="k">时间</span><span className="v">{dateStr}</span></div>
            <div className="r"><span className="k">地点</span><span className="v">{loc}</span></div>
            <div className="r"><span className="k">状态</span><span className="v">报名成功</span></div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <form className="event-reg-card event-glass" onSubmit={submit}>
      <div className="event-reg-head">
        <h3>报名参加</h3>
        <div className="price">免费 · 开放报名</div>
      </div>
      <div className="reg-meta">
        <div className="r"><span className="k">时间</span><span className="v">{dateStr}</span></div>
        <div className="r"><span className="k">地点</span><span className="v">{loc}</span></div>
        <div className="r"><span className="k">主办</span><span className="v">{org}</span></div>
      </div>
      <div className="fld">
        <label>你的称呼</label>
        <input className="input" required placeholder="如何称呼你？" value={form.name} onChange={(ev) => setForm({ ...form, name: ev.target.value })} />
      </div>
      <div className="fld">
        <label>邮箱 / 手机</label>
        <input className="input" required placeholder="用于接收活动通知" value={form.contact} onChange={(ev) => setForm({ ...form, contact: ev.target.value })} />
      </div>
      <div className="fld">
        <label>身份</label>
        <select className="input" value={form.role} onChange={(ev) => setForm({ ...form, role: ev.target.value })}>
          {roles.map((r) => <option key={r}>{r}</option>)}
        </select>
      </div>
      <button className="btn btn-full event-reg-disabled" type="button" disabled aria-disabled="true" style={{ marginTop: 6 }}>报名暂未开放</button>
    </form>
  );
}

function EventDetailPage({ routeParam }) {
  const db = useKataDB();
  const raw = routeParam || 'c0';
  const isEnt = raw[0] === 'e';
  const scope = isEnt ? 'e' : 'c';
  const idx = parseInt(raw.slice(1), 10) || 0;
  const e = db.getEvent(scope, idx);

  if (!e) {
    return (
      <div className="kc dview event-detail">
        <EvBack href="#community" label="返回" />
        <div className="event-empty event-glass"><p>没有找到这个活动。</p></div>
      </div>
    );
  }

  const org = isEnt ? e.company : e.org;
  const tag = isEnt ? e.type : e.tag;
  const loc = e.mode === '线上' ? '线上直播' : (isEnt ? `${e.mode} · ${e.city}` : `线下 · ${e.city}`);
  const dateStr = isEnt ? `${e.date} · 2026` : `${e.date} ${e.day} · ${e.time}`;
  const backHref = isEnt ? '#enterprise' : '#community';
  const backLabel = isEnt ? '返回企业活动' : '返回社区活动';

  return (
    <div className="kc dview event-detail">
      {/* 页面局部光晕：与全站 aurora 同色系，让内容区自然融进背景 */}
      <div className="event-page-glow" aria-hidden="true" />

      <EvBack href={backHref} label={backLabel} />

      {/* 开放式头区：标题直接落在背景上，不再包进厚白卡片 */}
      <header className="event-open-hero">
        <div className="event-meta">
          {tag && <span className="tbadge">{tag}</span>}
          {!isEnt && e.hot && <span className="hot-dot"><span className="pulse" />热门</span>}
          {e.mode && <span className="chip event-mode-chip">{e.mode}</span>}
          {org && <span className="chip">{org}</span>}
        </div>
        <h1>{e.title}</h1>

        <ul className="event-facts" aria-label="活动关键信息">
          <li className="event-fact">
            <span className="ef-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="5" width="18" height="16" rx="3" /><path d="M3 10h18M8 3v4M16 3v4" /></svg>
            </span>
            <div>
              <span className="k">时间</span>
              <span className="v">{dateStr}</span>
            </div>
          </li>
          <li className="event-fact">
            <span className="ef-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 21s7-5.4 7-11a7 7 0 1 0-14 0c0 5.6 7 11 7 11z" /><circle cx="12" cy="10" r="2.5" /></svg>
            </span>
            <div>
              <span className="k">地点</span>
              <span className="v">{loc}</span>
            </div>
          </li>
          <li className="event-fact">
            <span className="ef-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v2" /><circle cx="9.5" cy="7" r="3.5" /><path d="M20 8v6M17 11h6" /></svg>
            </span>
            <div>
              <span className="k">主办</span>
              <span className="v">{org || '咔嗒Lab'}</span>
            </div>
          </li>
        </ul>
      </header>

      <div className="event-layout">
        <div className="event-main">
          <article className="event-shell event-glass">
            <section className="event-intro">
              <h2>活动介绍</h2>
              {e.desc
                ? <p className="event-desc">{e.desc}</p>
                : <p className="event-desc event-desc-muted">暂无详细介绍。可直接报名，或通过原始报名页查看完整信息。</p>}

              {e.source_url && (
                <p className="event-source-line">
                  <a className="event-source-link" href={e.source_url} target="_blank" rel="noopener noreferrer">
                    查看原始报名页
                    <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M7 17L17 7M8 7h9v9" /></svg>
                  </a>
                </p>
              )}
            </section>

            <section className="event-agenda">
              <h2>活动日程</h2>
              {Array.isArray(e.agenda) && e.agenda.length > 0 ? (
                <ul className="agenda-list">
                  {e.agenda.map((it, i) => (
                    <li className="agenda-item" key={i}>
                      <span className="agenda-time">{it.time}</span>
                      <span className="agenda-title">{it.title}</span>
                    </li>
                  ))}
                </ul>
              ) : (
                <p className="event-desc event-desc-muted">日程安排待公布，敬请关注。</p>
              )}
            </section>

            <section className="event-guests">
              <h2>主要嘉宾</h2>
              {Array.isArray(e.guests) && e.guests.length > 0 ? (
                <ul className="guest-list">
                  {e.guests.map((g, i) => (
                    <li className="guest-item" key={i}>
                      <span className="guest-name">{g.name}</span>
                      {g.title && <span className="guest-title">{g.title}</span>}
                    </li>
                  ))}
                </ul>
              ) : (
                <p className="event-desc event-desc-muted">嘉宾阵容待公布，敬请关注。</p>
              )}
            </section>
          </article>
        </div>

        <aside className="event-side">
          <RegCard e={e} org={org} loc={loc} dateStr={dateStr} scope={scope} idx={idx} />
        </aside>
      </div>
    </div>
  );
}

(window.__KATA_PAGES = window.__KATA_PAGES || {}).event = {
  Comp: EventDetailPage,
  active: (p) => (p && p[0] === 'e') ? 'enterprise' : 'community',
};