// idea-10-focus-rooms.jsx — drop-in group Pomodoro study rooms

const FR_ROOMS = [
  { id: 1, name: 'Bio Mod 7 grind',     phase: 'focus', mins: '12:48', total: 25, n: 11, tag: 'Bio Yr12', progress: 0.49, active: true },
  { id: 2, name: 'Sat morning math',    phase: 'break', mins: '03:22', total: 5,  n: 8,  tag: 'Maths',    progress: 0.32 },
  { id: 3, name: 'Chem Q&A — open mic', phase: 'focus', mins: '04:12', total: 25, n: 6,  tag: 'Chem Yr12',progress: 0.83 },
  { id: 4, name: 'Quiet revision',      phase: 'focus', mins: '18:55', total: 25, n: 14, tag: 'Mixed',    progress: 0.24 },
  { id: 5, name: 'HSC trial pre-cram',  phase: 'focus', mins: '09:30', total: 50, n: 9,  tag: 'Yr12 all', progress: 0.81 },
  { id: 6, name: 'Yr 11 chillzone',     phase: 'break', mins: '01:48', total: 10, n: 4,  tag: 'Yr11',     progress: 0.82 },
];

const FR_PARTICIPANTS = [
  { name: 'MitoMari',     charId: 'cell',   status: 'focused', cam: true,  mins: 47 },
  { name: 'You',          charId: 'leaf',   status: 'focused', cam: false, mins: 32, you: true },
  { name: 'AldolAlex',    charId: 'beaker', status: 'focused', cam: true,  mins: 41 },
  { name: 'PhotonPhoenix',charId: 'volt',   status: 'focused', cam: false, mins: 38 },
  { name: 'OxideOlly',    charId: 'mole',   status: 'afk',     cam: false, mins: 18 },
  { name: 'QuasarQ',      charId: 'prism',  status: 'focused', cam: true,  mins: 28 },
  { name: 'KineticKira',  charId: 'helix',  status: 'focused', cam: false, mins: 24 },
  { name: 'TitratorT',    charId: 'ph',     status: 'focused', cam: false, mins: 21 },
  { name: 'ProtonPete',   charId: 'atom',   status: 'afk',     cam: false, mins: 9  },
  { name: 'AspectAva',    charId: 'wave',   status: 'focused', cam: true,  mins: 15 },
  { name: 'SigmaSam',     charId: 'sigma',  status: 'focused', cam: false, mins: 12 },
];

function FocusRooms() {
  return (
    <div className="fr-wrap">
      {/* room list */}
      <aside className="fr-list">
        <div className="fr-list-head">
          <h3>Focus rooms</h3>
          <em>52 LIVE</em>
        </div>

        {FR_ROOMS.map(r => (
          <div key={r.id} className={`fr-room ${r.active ? 'active' : ''}`}>
            <div className="fr-room-row1">
              <div className="fr-room-name">{r.name}</div>
              <div className={`fr-room-phase ${r.phase}`}>
                {r.phase === 'focus' ? '🎯' : '☕'} {r.mins}
              </div>
            </div>
            <div className="fr-room-row2">
              <Icon name="users"/>
              <strong>{r.n}</strong> in
              <span className="fr-room-tag">{r.tag}</span>
            </div>
            <div className={`fr-room-bar ${r.phase === 'break' ? 'break' : ''}`}>
              <i style={{ width: `${r.progress*100}%` }}/>
            </div>
          </div>
        ))}

        <div className="fr-create">
          <Icon name="bolt"/> Start your own room
        </div>
      </aside>

      {/* main room view */}
      <div className="fr-main">
        <div className="fr-room-head">
          <div>
            <h2><Icon name="target"/> Bio Mod 7 grind</h2>
            <div className="fr-room-head-sub">11 in · open to Yr 12 Biology · hosted by MitoMari · 4-day streak with this crew</div>
          </div>
          <button className="fr-leave">Leave room</button>
        </div>

        <div className="fr-room-body">
          <div className="fr-stage">
            {/* timer card */}
            <div className="fr-timer-card">
              <div className="fr-timer-ring">
                <FocusRing remainSec={12*60+48} totalSec={25*60}/>
              </div>
              <div>
                <div className="fr-timer-info-eye">FOCUS · 25 MIN POMODORO</div>
                <h3>12:48 left · everyone's heads-down</h3>
                <p>The room enters a <strong>shared break</strong> together when this ends. Mics + chat unlock during breaks; cameras are always optional.</p>
                <div className="fr-timer-controls">
                  <button className="fr-tc"><Icon name="pause"/> Pause my timer</button>
                  <button className="fr-tc"><Icon name="x"/> Drop out quietly</button>
                  <button className="fr-tc primary"><Icon name="check"/> Mark goal done</button>
                </div>
              </div>
            </div>

            {/* participant grid */}
            <div className="fr-grid">
              {FR_PARTICIPANTS.map((p, i) => (
                <div key={i} className={`fr-tile ${p.you ? 'you' : ''}`}>
                  {p.cam && (
                    <div className="fr-tile-cam"><Icon name="check"/></div>
                  )}
                  <div className="fr-tile-av"><CharAv charId={p.charId} size={56}/></div>
                  <div className="fr-tile-name">{p.name}</div>
                  <div className={`fr-tile-status ${p.status === 'focused' ? '' : p.status}`}>
                    {p.status === 'focused' ? <><Icon name="bolt"/> {p.mins}m focused</> : <><Icon name="pause"/> AFK</>}
                  </div>
                </div>
              ))}
              <div className="fr-tile" style={{ display: 'grid', placeItems: 'center', cursor: 'pointer', opacity: 0.6 }}>
                <div style={{ fontFamily: 'Outfit', fontSize: 12, fontWeight: 800, color: 'rgba(255,255,255,0.5)', letterSpacing: 1 }}>
                  + INVITE<br/>FRIEND
                </div>
              </div>
            </div>
          </div>

          {/* leaderboard rail */}
          <aside className="fr-rail">
            <h4>Today's focus minutes · in this room</h4>
            <div>
              <div className="fr-lb-row">
                <div className="fr-lb-rank gold">1</div>
                <CharAv charId="cell" size={24}/>
                <div className="fr-lb-name">MitoMari</div>
                <div className="fr-lb-mins">2:14</div>
              </div>
              <div className="fr-lb-row">
                <div className="fr-lb-rank">2</div>
                <CharAv charId="beaker" size={24}/>
                <div className="fr-lb-name">AldolAlex</div>
                <div className="fr-lb-mins">1:58</div>
              </div>
              <div className="fr-lb-row">
                <div className="fr-lb-rank">3</div>
                <CharAv charId="volt" size={24}/>
                <div className="fr-lb-name">PhotonPhoenix</div>
                <div className="fr-lb-mins">1:42</div>
              </div>
              <div className="fr-lb-row you">
                <div className="fr-lb-rank">4</div>
                <CharAv charId="leaf" size={24}/>
                <div className="fr-lb-name">You</div>
                <div className="fr-lb-mins">1:28</div>
              </div>
              <div className="fr-lb-row">
                <div className="fr-lb-rank">5</div>
                <CharAv charId="prism" size={24}/>
                <div className="fr-lb-name">QuasarQ</div>
                <div className="fr-lb-mins">1:14</div>
              </div>
            </div>

            <div style={{ marginTop: 'auto', paddingTop: 16, borderTop: '1px solid rgba(255,255,255,0.08)' }}>
              <h4>Goals · this session</h4>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 10, fontSize: 12, color: 'rgba(255,255,255,0.85)' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <div style={{ width: 16, height: 16, borderRadius: 4, background: 'var(--adv-green)', display: 'grid', placeItems: 'center' }}>
                    <Icon name="check" style={{ width: 10, height: 10, color: '#fff' }}/>
                  </div>
                  <span style={{ textDecoration: 'line-through', opacity: 0.55 }}>Read Mod 7.4</span>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <div style={{ width: 16, height: 16, borderRadius: 4, border: '1.5px solid rgba(255,255,255,0.4)' }}/>
                  <span>Drill 10 immune-response Qs</span>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <div style={{ width: 16, height: 16, borderRadius: 4, border: '1.5px solid rgba(255,255,255,0.4)' }}/>
                  <span>Write 2024 Q31 (6-marker)</span>
                </div>
              </div>
            </div>
          </aside>
        </div>

        {/* footer ambient bar */}
        <div className="fr-foot">
          <Icon name="bulb"/>
          <strong>Ambient sound:</strong>
          <span className="fr-ambient active">🌧 LIBRARY RAIN</span>
          <span className="fr-ambient">☕ CAFÉ</span>
          <span className="fr-ambient">🔇 SILENCE</span>
          <span style={{ marginLeft: 'auto', fontFamily: 'DM Mono', fontWeight: 700, color: 'rgba(255,255,255,0.55)' }}>
            8 students earned +60 XP for breaking their longest focus streak today
          </span>
        </div>
      </div>
    </div>
  );
}

function FocusRing({ remainSec, totalSec }) {
  const r = 56;
  const c = 2 * Math.PI * r;
  const pct = 1 - remainSec / totalSec;
  return (
    <svg viewBox="0 0 130 130" width="130" height="130">
      <circle cx="65" cy="65" r={r} fill="none" stroke="rgba(255,255,255,0.12)" strokeWidth="10"/>
      <circle cx="65" cy="65" r={r} fill="none" stroke="#d6a85f" strokeWidth="10" strokeLinecap="round"
        strokeDasharray={`${c*pct} ${c}`} transform="rotate(-90 65 65)"/>
      <text x="65" y="68" textAnchor="middle" fontSize="26" fontWeight="800" fill="#fff" fontFamily="Outfit, sans-serif">12:48</text>
      <text x="65" y="86" textAnchor="middle" fontSize="9" fontWeight="800" letterSpacing="1.8" fill="rgba(255,255,255,0.5)" fontFamily="Outfit, sans-serif">FOCUS</text>
    </svg>
  );
}

function Idea10() {
  return (
    <IdeaShell
      num="10"
      title="Focus"
      titleEm="Rooms"
      tagline={<><strong>Live group study, no Zoom call.</strong> Drop into a Pomodoro room of up to 12 students. Shared timer, shared break, optional cameras, ambient sound, focus-minute leaderboard. The library, but with classmates online.</>}
      pills={[
        { kind: 'rose',  icon: 'flame', label: 'New page · habit + social' },
        { kind: 'green', icon: 'users', label: 'Live concurrent users' },
      ]}
      stats={[
        { num: '38 min',  label: 'Avg session length', sub: 'Shared timers + peer presence sustain longer focus than solo. Soft accountability beats willpower.' },
        { num: '×2.6',     label: 'DAU lift in trial',  sub: 'Students return for the room, not the lessons. The lessons get done because they\'re in the room.', dark: true },
      ]}
      pros={[
        '<strong>Solves the "I can\'t make myself sit down"</strong> problem — the universal HSC trap, especially on weekends.',
        'Camera-optional + ambient sound + Pomodoro structure = <strong>low social pressure</strong>. Designed not to feel like a Zoom call.',
        'Compounds with <strong>Study Squads</strong>: open a private room for just your squad, or join the public Yr 11 Bio pool.',
        '<strong>Cheap to run</strong>: no live video by default. Voice during breaks only. Charisma comes from the timer, not infra.',
      ]}
    >
      <FocusRooms/>
    </IdeaShell>
  );
}

window.Idea10 = Idea10;