// Playable Eklemce + Live Düello pair, for use inside Mozaik home.
// Extracted/adapted from featured_options.jsx OptionLivePlayable.
// Theme-aware: accepts T so it matches light/dark on the homepage.

const { useState: useStateMF } = React;

window.MozaikFeaturedPair = function MozaikFeaturedPair({ T }) {
  const duello = GAMES.find(g => g.id === 'duello');
  const eklemce = GAMES.find(g => g.id === 'eklemce');
  const [blocks, setBlocks] = useStateMF([
    { t: 'KE', picked: false }, { t: 'Lİ', picked: false },
    { t: 'ME', picked: false }, { t: 'CİK', picked: false },
    { t: 'YA', picked: false }, { t: 'ZI', picked: false },
  ]);
  const assembled = blocks.filter(b => b.picked).map(b => b.t).join('');
  const toggle = i => setBlocks(bs => bs.map((b, j) => j === i ? { ...b, picked: !b.picked } : b));
  const reset = () => setBlocks(bs => bs.map(b => ({ ...b, picked: false })));

  return (
    <section style={{ marginBottom: 22 }}>
      <div style={{
        display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
        marginBottom: 10, borderTop: `2px solid ${T.ink}`, paddingTop: 10,
      }}>
        <h3 style={{
          margin: 0,
          fontFamily: 'Fraunces, Georgia, serif',
          fontSize: 22, fontWeight: 700, color: T.ink, letterSpacing: -0.5,
        }}>Öne Çıkanlar</h3>
        <span style={{ fontSize: 11, color: T.inkSoft, fontStyle: 'italic' }}>
          Öne çıkardığımız özel oyunlar
        </span>
      </div>

      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14,
      }}>
        {/* Playable Eklemce */}
        <div style={{
          background: T.paper, border: `1px solid ${T.line}`, borderRadius: 18,
          padding: 20, position: 'relative', overflow: 'hidden',
          minHeight: 240, display: 'flex', flexDirection: 'column',
        }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14,
          }}>
            <div style={{
              width: 44, height: 44, borderRadius: 10, background: eklemce.accent,
              display: 'grid', placeItems: 'center', flexShrink: 0,
            }}>
              <img src={`icons/${eklemce.id}.svg`} alt="" width="34" height="34"
                style={{ objectFit: 'contain' }} />
            </div>
            <div>
              <div style={{
                fontSize: 10, fontWeight: 800, letterSpacing: 1.5,
                textTransform: 'uppercase', color: eklemce.accent,
              }}>Şimdi dene</div>
              <div style={{
                fontFamily: 'Fraunces, Georgia, serif',
                fontSize: 22, fontWeight: 700, color: T.ink, letterSpacing: -0.3,
                lineHeight: 1, marginTop: 2,
              }}>{eklemce.name}</div>
            </div>
          </div>

          <div style={{
            background: T.bg2, borderRadius: 10, padding: '12px 10px',
            marginBottom: 12,
          }}>
            <div style={{
              fontSize: 10, color: T.inkSoft, letterSpacing: 0.5,
              textTransform: 'uppercase', fontWeight: 700,
              marginBottom: 6, textAlign: 'center',
            }}>Oluşturduğun kelime</div>
            <div style={{
              background: T.paper, borderRadius: 6, padding: 12,
              fontFamily: 'ui-monospace, monospace',
              fontSize: 20, fontWeight: 800, color: T.ink,
              letterSpacing: 2, textAlign: 'center',
              minHeight: 28, border: `1px dashed ${T.line}`,
            }}>
              {assembled || <span style={{ opacity: 0.3 }}>—</span>}
            </div>
          </div>

          <div style={{
            display: 'flex', gap: 4, flexWrap: 'wrap', justifyContent: 'center',
            flex: 1, alignItems: 'center',
          }}>
            {blocks.map((b, i) => (
              <button key={i} onClick={() => toggle(i)} style={{
                padding: '10px 14px', borderRadius: 6,
                background: b.picked ? eklemce.accent : T.paper,
                color: b.picked ? '#fff' : T.ink,
                border: `1.5px solid ${b.picked ? eklemce.accent : T.line}`,
                fontFamily: 'inherit',
                fontWeight: 900, fontSize: 14, cursor: 'pointer',
                letterSpacing: 1, transition: 'all 120ms',
              }}>{b.t}</button>
            ))}
          </div>

          <div style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            marginTop: 12, fontSize: 11, color: T.inkSoft,
          }}>
            <button onClick={reset} style={{
              background: 'transparent', border: 'none',
              color: T.inkSoft, cursor: 'pointer', fontFamily: 'inherit',
              fontSize: 11, padding: 0,
            }}>↺ Sıfırla</button>
            <a href="#" onClick={e => e.preventDefault()} style={{
              color: eklemce.accent, fontWeight: 700, textDecoration: 'none',
            }}>Tam oyuna geç →</a>
          </div>
        </div>

        {/* Live Düello */}
        <div style={{
          background: '#151821', color: '#fff',
          borderRadius: 18, padding: 20, position: 'relative', overflow: 'hidden',
          minHeight: 240,
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
        }}>
          <div style={{
            position: 'absolute', inset: 0,
            background: 'radial-gradient(ellipse at 80% 40%, rgba(232,90,109,0.28), transparent 50%)',
            pointerEvents: 'none',
          }} />

          <div style={{ position: 'relative', zIndex: 1 }}>
            <div style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              marginBottom: 12,
            }}>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 6,
                fontSize: 10, fontWeight: 800, letterSpacing: 1.5,
                textTransform: 'uppercase',
              }}>
                <span style={{
                  width: 7, height: 7, borderRadius: 999, background: '#ff3b5c',
                  boxShadow: '0 0 0 4px rgba(255,59,92,0.3)',
                }} />
                Canlı · Çok Oyunculu
              </div>
              <span style={{
                fontSize: 9, fontWeight: 800, letterSpacing: 0.5,
                padding: '3px 7px', borderRadius: 4,
                background: '#E85A6D', textTransform: 'uppercase',
              }}>2 Kişilik</span>
            </div>

            <h3 style={{
              margin: 0, fontSize: 30, letterSpacing: -0.8,
              fontFamily: 'Fraunces, Georgia, serif', fontWeight: 700,
            }}>{duello.name}</h3>
            <p style={{
              margin: '4px 0 0', fontSize: 12, opacity: 0.75,
              maxWidth: 320,
            }}>{duello.desc}</p>
          </div>

          <div style={{
            position: 'relative', zIndex: 1,
            display: 'flex', gap: 10, alignItems: 'center',
            margin: '14px 0',
          }}>
            <MiniDuelloBoardMF avatar="A" color="#6B9CF5" rows={[
              ['k','a','l','e','m'],['t','a','r','l','a'],
            ]} states={[
              ['a','c','a','a','p'],['p','c','a','a','a'],
            ]} />
            <div style={{
              fontSize: 20, fontWeight: 900, opacity: 0.3,
            }}>VS</div>
            <MiniDuelloBoardMF avatar="M" color="#E85A6D" rows={[
              ['k','i','t','a','p'],[' ',' ',' ',' ',' '],
            ]} states={[
              ['a','c','c','p','a'],['e','e','e','e','e'],
            ]} />
          </div>

          <div style={{
            position: 'relative', zIndex: 1,
            display: 'flex', gap: 8, alignItems: 'center',
          }}>
            <button style={{
              flex: 1, padding: '11px', borderRadius: 10,
              background: '#E85A6D', color: '#fff', border: 'none',
              fontWeight: 800, fontSize: 13, cursor: 'pointer',
              fontFamily: 'inherit',
            }}>Hemen Oda Kur</button>
            <button style={{
              padding: '11px 14px', borderRadius: 10,
              background: 'rgba(255,255,255,0.1)', color: '#fff',
              border: '1px solid rgba(255,255,255,0.15)',
              fontWeight: 700, fontSize: 13, cursor: 'pointer',
              fontFamily: 'inherit',
            }}>Kod Gir</button>
          </div>
          <div style={{
            position: 'relative', zIndex: 1,
            fontSize: 10, color: 'rgba(255,255,255,0.55)', marginTop: 8,
            textAlign: 'center',
          }}>
            Şu an <strong style={{ color: '#fff' }}>233</strong> oyuncu oynuyor · Ortalama bekleme 4sn
          </div>
        </div>
      </div>
    </section>
  );
};

function MiniDuelloBoardMF({ avatar, color, rows, states }) {
  return (
    <div style={{
      flex: 1, background: 'rgba(255,255,255,0.06)',
      borderRadius: 8, padding: 8,
      display: 'flex', flexDirection: 'column', gap: 6,
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 6,
        fontSize: 10, opacity: 0.8,
      }}>
        <div style={{
          width: 16, height: 16, borderRadius: 999,
          background: color, color: '#fff',
          display: 'grid', placeItems: 'center',
          fontSize: 9, fontWeight: 800,
        }}>{avatar}</div>
        <span>Oyuncu {avatar}</span>
      </div>
      <div style={{
        display: 'flex', flexDirection: 'column', gap: 2, alignItems: 'center',
      }}>
        {rows.map((r, i) => <TileRow key={i} letters={r} states={states[i]} size={16} gap={2} />)}
      </div>
    </div>
  );
}