// DIRECTION C — "Seri" (Streak-first / returning-player layout)
// Top band is a huge streak card + a horizontal "today's slate" row that
// shows unfinished dailies. Below that, games are grouped in compact rows
// with progress rings, times-to-solve, and per-game streaks.

const { useState: useStateC } = React;

function SeriTopBand({ T }) {
  const done = STATE.today.done;
  const progress = STATE.today.inProgress;
  const todoSet = new Set(['kelimely', 'petek', 'baglac', 'ipucu', 'caprazla']);
  const slate = [...todoSet].map(id => GAMES.find(g => g.id === id));
  const doneCount = slate.filter(g => done.includes(g.id)).length;

  return (
    <section style={{
      display: 'grid',
      gridTemplateColumns: '1fr 2fr',
      gap: 16,
      marginBottom: 22,
    }}>
      {/* Huge streak card */}
      <div style={{
        background: T.ink, color: T.paper,
        borderRadius: 20, padding: 24,
        position: 'relative', overflow: 'hidden',
        display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
        minHeight: 260,
      }}>
        {/* Flame art */}
        <svg viewBox="0 0 240 240" width="280" height="280" style={{
          position: 'absolute', right: -40, bottom: -50,
          opacity: 0.08,
        }}>
          <path d="M120 20c15 35 55 55 55 105a55 55 0 0 1-110 0c0-20 10-35 20-45 0 20 10 30 20 30 0-30-10-50 15-90z"
            fill="currentColor" />
        </svg>

        <div>
          <div style={{
            fontSize: 11, letterSpacing: 1.5, textTransform: 'uppercase',
            opacity: 0.65, fontWeight: 700,
          }}>Günlük Seri · {STATE.user.name}</div>
          <div style={{
            fontFamily: 'Fraunces, Georgia, serif',
            fontSize: 92, fontWeight: 700, letterSpacing: -4,
            lineHeight: 1, marginTop: 8,
          }}>{STATE.user.streak}</div>
          <div style={{
            fontSize: 14, opacity: 0.75, marginTop: -2,
          }}>gün üst üste</div>
        </div>

        {/* Next-7-days preview */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 5,
          marginTop: 16,
        }}>
          {['Pt','Sa','Ça','Pe','Cu','Ct','Pz'].map((d, i) => {
            const active = i <= 5; // fri is today
            const today = i === 5;
            return (
              <div key={i} style={{
                textAlign: 'center', padding: '6px 0',
                borderRadius: 6,
                background: today ? '#E8707F' : active ? 'rgba(255,255,255,0.12)' : 'transparent',
                border: !active && !today ? `1px dashed rgba(255,255,255,0.12)` : 'none',
                fontSize: 10, fontWeight: 700,
                color: today ? '#fff' : active ? 'rgba(255,255,255,0.9)' : 'rgba(255,255,255,0.35)',
              }}>
                <div style={{ letterSpacing: 0.5 }}>{d}</div>
                <div style={{ fontSize: 11, fontWeight: 800, marginTop: 2 }}>
                  {active ? '✓' : '·'}
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Today's slate */}
      <div style={{
        background: T.paper, border: `1px solid ${T.line}`,
        borderRadius: 20, padding: '20px 22px',
        display: 'flex', flexDirection: 'column', minHeight: 260,
      }}>
        <div style={{
          display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
          marginBottom: 12,
        }}>
          <div>
            <div style={{
              fontSize: 11, letterSpacing: 1.5, textTransform: 'uppercase',
              color: T.inkSoft, fontWeight: 700,
            }}>Günlük Set</div>
            <h2 style={{
              margin: '4px 0 0',
              fontFamily: 'Fraunces, Georgia, serif',
              fontSize: 28, color: T.ink, letterSpacing: -0.8, fontWeight: 600,
            }}>
              Bugün kaldığın yerden devam
            </h2>
          </div>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 8,
            padding: '8px 14px', borderRadius: 999,
            background: T.bg2, color: T.ink,
            fontWeight: 700, fontSize: 13,
          }}>
            <span style={{
              width: 8, height: 8, borderRadius: 999,
              background: '#3a9e5c',
            }} />
            {doneCount} / {slate.length} tamam
          </div>
        </div>

        {/* Slate grid */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: `repeat(${slate.length}, 1fr)`,
          gap: 10,
          flex: 1,
        }}>
          {slate.map(g => {
            const isDone = done.includes(g.id);
            const isProg = progress.includes(g.id);
            return (
              <a key={g.id} href="#" onClick={e => e.preventDefault()} style={{
                display: 'flex', flexDirection: 'column',
                padding: 12, borderRadius: 14,
                background: isDone ? '#3a9e5c' : isProg ? T.paper : T.paper,
                color: isDone ? '#fff' : T.ink,
                border: isDone ? 'none' : isProg
                  ? `1.5px solid #c79a1b`
                  : `1px solid ${T.line}`,
                textDecoration: 'none',
                position: 'relative',
                transition: 'transform 150ms ease',
              }}
              onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-2px)'}
              onMouseLeave={e => e.currentTarget.style.transform = 'none'}>
                <div style={{
                  width: 36, height: 36, borderRadius: 8,
                  background: isDone ? 'rgba(255,255,255,0.2)' : g.accent,
                  marginBottom: 8,
                  display: 'grid', placeItems: 'center',
                }}>
                  <img src={`icons/${g.id}.svg`} alt="" width="32" height="32"
                    style={{ objectFit: 'contain',
                      filter: isDone ? 'brightness(0) invert(1)' : 'none' }} />
                </div>
                <div style={{ fontWeight: 800, fontSize: 14, lineHeight: 1.1 }}>
                  {g.name}
                </div>
                <div style={{
                  fontSize: 10, fontWeight: 700, marginTop: 3,
                  letterSpacing: 0.5, textTransform: 'uppercase',
                  color: isDone ? 'rgba(255,255,255,0.85)'
                       : isProg ? '#c79a1b'
                       : T.inkSoft,
                }}>
                  {isDone ? `✓ ${fmtTime(STATE.times[g.id] ?? 300)}`
                   : isProg ? 'Devam et →'
                   : 'Başla'}
                </div>
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function ProgressRing({ pct, color, size = 34, label }) {
  const r = (size - 4) / 2;
  const c = 2 * Math.PI * r;
  return (
    <div style={{ position: 'relative', width: size, height: size }}>
      <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>
        <circle cx={size/2} cy={size/2} r={r} fill="none"
          stroke="rgba(0,0,0,0.08)" strokeWidth="2.5" />
        <circle cx={size/2} cy={size/2} r={r} fill="none"
          stroke={color} strokeWidth="2.5" strokeLinecap="round"
          strokeDasharray={c} strokeDashoffset={c - c * pct}
          style={{ transition: 'stroke-dashoffset 400ms ease' }} />
      </svg>
      <div style={{
        position: 'absolute', inset: 0,
        display: 'grid', placeItems: 'center',
        fontSize: 10, fontWeight: 800, color,
      }}>{label}</div>
    </div>
  );
}

function SeriGameRow({ game, T }) {
  const [hover, setHover] = useStateC(false);
  const streak = STATE.streaks[game.id];
  const done = STATE.today.done.includes(game.id);
  const inProg = STATE.today.inProgress.includes(game.id);
  const playing = STATE.playing[game.id] ?? Math.floor(Math.random() * 200) + 30;

  const status = done ? 'done' : inProg ? 'prog' : 'idle';
  const statusDot = { done: '#3a9e5c', prog: '#c79a1b', idle: T.inkSoft }[status];

  return (
    <a href="#" onClick={e => e.preventDefault()}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        display: 'grid',
        gridTemplateColumns: '44px 1fr auto auto auto',
        alignItems: 'center', gap: 14,
        padding: '12px 16px',
        background: hover ? T.bg2 : 'transparent',
        borderRadius: 12, textDecoration: 'none', color: T.ink,
        transition: 'background 150ms ease',
      }}>
      <div style={{
        width: 44, height: 44, borderRadius: 10,
        background: game.accent,
        display: 'grid', placeItems: 'center',
        position: 'relative',
      }}>
        <img src={`icons/${game.id}.svg`} alt="" width="38" height="38"
          style={{ objectFit: 'contain' }} />
        <span style={{
          position: 'absolute', bottom: -3, right: -3,
          width: 12, height: 12, borderRadius: 999,
          background: statusDot, border: `2px solid ${T.bg}`,
        }} />
      </div>
      <div style={{ minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{
            fontWeight: 700, fontSize: 15, color: T.ink,
          }}>{game.name}</span>
          {game.multiplayer && <MpChipC />}
        </div>
        <div style={{
          fontSize: 12, color: T.inkSoft, marginTop: 1,
          overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
        }}>{game.desc}</div>
      </div>
      {/* streak */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 4,
        color: streak ? '#E8707F' : T.inkSoft,
        fontSize: 12, fontWeight: 700,
        minWidth: 40, justifyContent: 'flex-end',
      }}>
        {streak ? (
          <>
            <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M12 3c2 4 5 5 5 9a5 5 0 0 1-10 0c0-2 1-3 2-4 0 2 1 3 2 3 0-3-1-5 1-8z"/></svg>
            {streak}
          </>
        ) : <span style={{ opacity: 0.4 }}>—</span>}
      </div>
      {/* playing */}
      <div style={{
        color: T.inkSoft, fontSize: 12, fontVariantNumeric: 'tabular-nums',
        minWidth: 72, textAlign: 'right',
      }}>
        {fmtCount(playing)} oynuyor
      </div>
      {/* progress indicator */}
      <div style={{ width: 80, display: 'flex', justifyContent: 'flex-end' }}>
        {done ? (
          <span style={{
            padding: '5px 12px', borderRadius: 999,
            background: '#3a9e5c', color: '#fff',
            fontSize: 11, fontWeight: 800, letterSpacing: 0.5,
          }}>{fmtTime(STATE.times[game.id] ?? 300)}</span>
        ) : inProg ? (
          <ProgressRing pct={0.4} color="#c79a1b" label="40" />
        ) : (
          <span style={{
            padding: '5px 12px', borderRadius: 999,
            background: hover ? game.accent : T.bg2,
            color: hover ? '#fff' : T.ink,
            fontSize: 11, fontWeight: 800, letterSpacing: 0.5,
            transition: 'all 150ms',
          }}>Oyna →</span>
        )}
      </div>
    </a>
  );
}

function MpChipC() {
  return (
    <span style={{
      fontSize: 9, fontWeight: 800, letterSpacing: 0.5,
      padding: '2px 6px', borderRadius: 4,
      background: '#E85A6D', color: '#fff',
      textTransform: 'uppercase',
    }}>2 Kişilik</span>
  );
}

function SeriCategoryBlock({ cat, T }) {
  const meta = CATEGORIES[cat];
  const games = GAMES.filter(g => g.cat === cat);
  if (!games.length) return null;
  return (
    <section style={{
      marginTop: 24,
      background: T.paper,
      border: `1px solid ${T.line}`,
      borderRadius: 16,
      overflow: 'hidden',
    }}>
      <header style={{
        padding: '14px 18px',
        borderBottom: `1px solid ${T.line}`,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
          <h2 style={{
            margin: 0,
            fontFamily: 'Fraunces, Georgia, serif',
            fontSize: 18, fontWeight: 600, color: T.ink,
            letterSpacing: -0.3,
          }}>{meta.label}</h2>
          <span style={{
            fontSize: 11, color: T.inkSoft, fontStyle: 'italic',
          }}>{meta.hint}</span>
        </div>
        <span style={{
          fontSize: 10, letterSpacing: 1, textTransform: 'uppercase',
          fontWeight: 700, color: T.inkSoft,
        }}>
          {games.length} oyun
        </span>
      </header>
      <div style={{ padding: 6 }}>
        {games.map(g => <SeriGameRow key={g.id} game={g} T={T} />)}
      </div>
    </section>
  );
}

window.SeriHome = function SeriHome({ theme }) {
  const T = THEMES[theme];
  return (
    <div style={{
      maxWidth: 1100, margin: '0 auto',
      padding: '28px 24px 80px',
    }}>
      <SeriTopBand T={T} />
      {['wordGuess','gridSearch','transformation','grouping','arrangement','deduction','geography'].map(c =>
        <SeriCategoryBlock key={c} cat={c} T={T} />)}
    </div>
  );
};