/* page-event-detail.jsx — 三级页：活动详情 + 报名 (社区 / 企业通用) */

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 = useKadaDB();
  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="panel reg-card nm-rise">
        <div className="done-card">
          <span className="check nm-rise"><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">{(db.getEvent(scope, idx) || {}).regs.length} 人</span></div>
          </div>
        </div>
      </div>
    );
  }
  return (
    <form className="panel reg-card nm-rise" onSubmit={submit}>
      <h3>报名参加</h3>
      <div className="price">免费 · 名额有限</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-accent btn-full" type="submit" style={{ marginTop: 6 }}>提交报名 <Arrow /></button>
    </form>
  );
}

function EventDetailPage({ routeParam }) {
  const db = useKadaDB();
  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"><EvBack href="#community" label="返回" /><div className="panel nm-rise"><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 ? '返回企业活动' : '返回社区活动';

  const agenda = [
    { t: '签到', c: '入场签到 · 自由交流', s: '提前 30 分钟开放' },
    { t: '主题分享', c: `${e.title}`, s: '核心议题与实战拆解' },
    { t: '动手环节', c: '现场实操 / Demo 演示', s: '带上你的笔记本' },
    { t: 'QA & 社交', c: '自由问答 · 结识同行', s: '现场抽奖与周边' },
  ];
  const times = isEnt ? ['13:30', '14:00', '15:30', '16:40'] : [e.time, addMin(e.time, 30), addMin(e.time, 110), addMin(e.time, 160)];

  return (
    <div className="kc dview">
      <EvBack href={backHref} label={backLabel} />
      <div className="dcols">
        <div className="dmain">
          <div className="dhead">
            <div className="meta-row">
              <span className="tbadge nm-sink-sm">{tag}</span>
              {!isEnt && e.hot && <span className="hot-dot"><span className="pulse" />热门</span>}
              <span className="chip">{org}</span>
            </div>
            <h1>{e.title}</h1>
            <div className="facts">
              <div className="dfact"><span className="k">Date</span><span className="v">{dateStr}</span></div>
              <div className="dfact"><span className="k">Location</span><span className="v"><span className="pin" />{loc}</span></div>
              <div className="dfact"><span className="k">Host</span><span className="v">{org}</span></div>
            </div>
          </div>

          <div className="panel nm-rise">
            <h2 className="with-rule">活动介绍</h2>
            {e.desc ? <p style={{ whiteSpace: 'pre-wrap' }}>{e.desc}</p> : <p>这是一场聚焦「{e.title}」的{tag}。我们邀请一线从业者分享真实项目中的经验与踩坑，从方法到落地完整拆解，帮助你把前沿能力快速用到自己的工作中。</p>}
            <p>无论你是开发者、研究者还是产品同学，都能在这里找到可借鉴的思路，并与同行直接交流。名额有限，建议尽早报名。</p>
          </div>

          <div className="panel nm-rise">
            <h2 className="with-rule">日程安排</h2>
            <div className="agenda">
              {agenda.map((a, i) => (
                <div className="agenda-row" key={i}>
                  <span className="t">{times[i]}</span>
                  <span className="c">{a.c}<span>{a.s}</span></span>
                </div>
              ))}
            </div>
          </div>

          <div className="panel nm-rise">
            <h2 className="with-rule">分享嘉宾</h2>
            <div className="people">
              <div className="person"><Avatar name={org} hue={222} size={40} /><div><div className="nm">{org} 讲师</div><div className="ro">主讲 · 行业实践者</div></div></div>
              <div className="person"><Avatar name="K" hue={250} size={40} /><div><div className="nm">咔嗒Lab 主理人</div><div className="ro">主持 · 社区运营</div></div></div>
            </div>
          </div>
        </div>

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

function addMin(hhmm, add) {
  const [h, m] = (hhmm || '14:00').split(':').map(Number);
  const tot = h * 60 + m + add;
  const nh = Math.floor(tot / 60) % 24, nm = tot % 60;
  return String(nh).padStart(2, '0') + ':' + String(nm).padStart(2, '0');
}

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