// Dedicated signup page — shown when user clicks RESERVE from event detail.
// Shows a compact event summary at top, then the full form (reuses EventSignupSection).

function SignupPage({ event, t, user, onBack, onSubmit, onOpenAuth, onViewConfirmation }) {
  const spotsLeft = event.capacity > 0 ? event.capacity - event.signed : Infinity;
  const isFull = event.capacity > 0 && spotsLeft <= 0;
  const dateObj = new Date(event.date + 'T00:00:00');
  const dayStr = dateObj.toLocaleDateString('en-US', { weekday: 'long' }).toUpperCase();
  const dateStr = dateObj.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).toUpperCase();
  const timeRange = event.endTime ? `${event.time}–${event.endTime}` : event.time;

  const existingReg = React.useMemo(() => {
    if (!user?.email) return null;
    const regs = window.Auth.getRegistrationsForUser(user.email);
    return regs.find(r => r.eventId === event.id && r.status === 'confirmed') || null;
  }, [user, event.id]);

  // If they're already registered, skip this page and jump straight to their
  // confirmation. Prevents a half-rendered LOCKED IN state inside the signup
  // flow when the user returns to an event they've already signed up for.
  React.useEffect(() => {
    if (existingReg && onViewConfirmation) {
      onViewConfirmation(existingReg);
    }
  }, [existingReg]);

  return (
    <div style={{ background: t.bg, color: t.fg, minHeight: '100vh' }}>
      {/* Back bar */}
      <div style={{ padding: '18px 24px', borderBottom: `1px solid ${t.line}` }}>
        <button onClick={onBack} style={{
          background: 'transparent', border: 'none', color: t.dim,
          fontFamily: 'Barlow, sans-serif', fontWeight: 300, fontSize: 11,
          letterSpacing: '0.2em', cursor: 'pointer', padding: 0,
        }}>◀ BACK TO EVENT</button>
      </div>

      {/* Event summary header */}
      <section style={{
        padding: '32px 24px', borderBottom: `1px solid ${t.line}`,
        background: t.cellBg,
      }}>
        <div style={{ maxWidth: 640, margin: '0 auto' }}>
          <div style={{
            fontFamily: 'Barlow, sans-serif', fontWeight: 400, fontSize: 11,
            color: t.brass, letterSpacing: '0.35em', marginBottom: 10,
          }}>// SIGNING UP FOR</div>
          <h1 style={{
            fontFamily: 'Bebas Neue, sans-serif', fontWeight: 400,
            fontSize: 'clamp(28px, 5vw, 44px)', lineHeight: 1,
            color: t.fg, margin: '0 0 14px', letterSpacing: '0.02em',
          }}>{event.title}</h1>
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))',
            gap: 1, background: t.line, border: `1px solid ${t.lineStrong}`,
          }}>
            <SummaryCell label="DATE" value={dayStr} sub={dateStr} t={t} />
            <SummaryCell label="TIME" value={timeRange} t={t} />
            <SummaryCell label="LOCATION" value={event.location.split(',')[0]} t={t} />
          </div>
        </div>
      </section>

      {/* Form */}
      <window.EventSignupSection event={event} t={t} user={user}
        onSubmit={onSubmit} onOpenAuth={onOpenAuth}
        existingReg={existingReg}
        onViewConfirmation={() => onViewConfirmation && onViewConfirmation(existingReg)}
        isFull={isFull} spotsLeft={spotsLeft} />
    </div>
  );
}

function SummaryCell({ label, value, sub, t }) {
  return (
    <div style={{ background: t.bg, padding: '12px 14px' }}>
      <div style={{
        fontFamily: 'Barlow, sans-serif', fontWeight: 400, fontSize: 9,
        color: t.dim, letterSpacing: '0.3em', marginBottom: 4,
      }}>{label}</div>
      <div style={{
        fontFamily: 'Oswald, sans-serif', fontWeight: 700, fontSize: 14,
        color: t.fg, letterSpacing: '0.05em', lineHeight: 1.1,
      }}>{value}</div>
      {sub && (
        <div style={{
          fontFamily: 'Barlow, sans-serif', fontWeight: 300, fontSize: 10,
          color: t.dim, letterSpacing: '0.1em', marginTop: 3,
        }}>{sub}</div>
      )}
    </div>
  );
}

window.SignupPage = SignupPage;