// Shared mobile primitives — colors, tokens, bottom nav, status chip,
// mini tile row. These match the desktop design language but tuned for
// ~393px wide screens.

const M = {
  // tuned for mobile — slightly more saturated / higher contrast
  bg:      '#f5f5f0',
  bg2:     '#edeee8',
  paper:   '#ffffff',
  ink:     '#1f1f1a',
  inkSoft: '#6a6a62',
  line:    '#e4e3da',
  accent:  '#E8707F',
  success: '#3a9e5c',
  warn:    '#c79a1b',
  danger:  '#E85A6D',
};

window.M = M;

// Bottom tab bar — iOS-style but with Kelimely typography hints
window.BottomNav = function BottomNav({ route, setRoute }) {
  const tabs = [
    { id: 'home',    label: 'Oyunlar', icon: homeIcon },
    { id: 'duello',  label: 'Düello',  icon: duelloIcon },
    { id: 'profile', label: 'Profil',  icon: profileIcon },
  ];
  return (
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0, zIndex: 40,
      paddingBottom: 34,
      background: 'rgba(255,255,255,0.88)',
      backdropFilter: 'blur(20px) saturate(180%)',
      WebkitBackdropFilter: 'blur(20px) saturate(180%)',
      borderTop: `0.5px solid ${M.line}`,
    }}>
      <div style={{
        display: 'flex', justifyContent: 'space-around',
        padding: '8px 12px 4px',
      }}>
        {tabs.map(t => {
          const active = route.name === t.id;
          return (
            <button key={t.id}
              onClick={() => setRoute({ name: t.id })}
              style={{
                background: 'transparent', border: 'none', padding: '6px 10px',
                display: 'flex', flexDirection: 'column', alignItems: 'center',
                gap: 2, cursor: 'pointer',
                color: active ? M.accent : M.inkSoft,
                fontFamily: 'inherit',
              }}>
              {t.icon(active)}
              <span style={{
                fontSize: 10, fontWeight: 700,
                letterSpacing: 0.3,
              }}>{t.label}</span>
            </button>
          );
        })}
      </div>
    </div>
  );
};

function homeIcon(active) {
  return active ? (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><rect x="3" y="3" width="8" height="8" rx="2"/><rect x="13" y="3" width="8" height="8" rx="2"/><rect x="3" y="13" width="8" height="8" rx="2"/><rect x="13" y="13" width="8" height="8" rx="2"/></svg>
  ) : (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="3" width="8" height="8" rx="2"/><rect x="13" y="3" width="8" height="8" rx="2"/><rect x="3" y="13" width="8" height="8" rx="2"/><rect x="13" y="13" width="8" height="8" rx="2"/></svg>
  );
}
function duelloIcon(active) {
  return active ? (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><circle cx="8" cy="9" r="3.5"/><circle cx="16" cy="9" r="3.5"/><path d="M2 20v-1a4 4 0 0 1 4-4h5a4 4 0 0 1 4 4v1zm13-5h1a4 4 0 0 1 4 4v1h-5"/></svg>
  ) : (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><circle cx="8" cy="9" r="3.5"/><circle cx="16" cy="9" r="3.5"/><path d="M2 20v-1a4 4 0 0 1 4-4h5a4 4 0 0 1 4 4v1"/><path d="M15 15h1a4 4 0 0 1 4 4v1"/></svg>
  );
}
function profileIcon(active) {
  return active ? (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="8" r="4"/><path d="M4 21v-1a8 8 0 0 1 16 0v1z"/></svg>
  ) : (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><circle cx="12" cy="8" r="4"/><path d="M4 21v-1a8 8 0 0 1 16 0v1"/></svg>
  );
}

// Sticky top bar used on every screen
window.TopBar = function TopBar({ title, leading, trailing, onBack, big = false, dark = false }) {
  const fg = dark ? '#fff' : M.ink;
  return (
    <div style={{
      position: 'sticky', top: 0, zIndex: 30,
      background: dark ? 'rgba(12,13,18,0.85)' : 'rgba(245,245,240,0.9)',
      backdropFilter: 'blur(16px) saturate(180%)',
      WebkitBackdropFilter: 'blur(16px) saturate(180%)',
    }}>
      <div style={{
        height: 44, display: 'flex', alignItems: 'center',
        padding: '0 12px',
      }}>
        {onBack ? (
          <button onClick={onBack} style={{
            width: 36, height: 36, borderRadius: 999,
            background: dark ? 'rgba(255,255,255,0.1)' : 'rgba(255,255,255,0.8)',
            border: dark ? '0.5px solid rgba(255,255,255,0.12)' : `0.5px solid ${M.line}`,
            display: 'grid', placeItems: 'center', cursor: 'pointer',
            color: fg,
          }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
          </button>
        ) : leading || <div style={{ width: 36 }} />}
        <div style={{
          flex: 1, textAlign: 'center',
          fontSize: big ? 17 : 15, fontWeight: 700, color: fg,
        }}>{!big && title}</div>
        {trailing || <div style={{ width: 36 }} />}
      </div>
      {big && title && (
        <h1 style={{
          margin: 0, padding: '4px 20px 14px',
          fontFamily: 'Fraunces, Georgia, serif',
          fontSize: 32, fontWeight: 600, letterSpacing: -1,
          color: fg,
        }}>{title}</h1>
      )}
    </div>
  );
};

// Compact game row — used in lists
window.MobileGameRow = function MobileGameRow({ game, onTap, rightSlot }) {
  const done = STATE.today.done.includes(game.id);
  const inProg = STATE.today.inProgress.includes(game.id);
  const streak = STATE.streaks[game.id];
  return (
    <button onClick={onTap} style={{
      width: '100%', background: 'transparent', border: 'none',
      padding: '10px 16px', cursor: 'pointer',
      display: 'flex', alignItems: 'center', gap: 12,
      textAlign: 'left', fontFamily: 'inherit',
    }}>
      <div style={{
        width: 44, height: 44, borderRadius: 10,
        background: game.accent,
        display: 'grid', placeItems: 'center', flexShrink: 0,
        position: 'relative',
      }}>
        <img src={`icons/${game.id}.svg`} alt="" width="38" height="38" style={{ objectFit: 'contain' }} />
        {(done || inProg) && (
          <span style={{
            position: 'absolute', bottom: -2, right: -2,
            width: 14, height: 14, borderRadius: 999,
            background: done ? M.success : M.warn,
            border: `2px solid ${M.bg}`,
            fontSize: 8, color: '#fff', fontWeight: 900,
            display: 'grid', placeItems: 'center',
          }}>{done ? '✓' : '●'}</span>
        )}
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 6,
        }}>
          <span style={{
            fontWeight: 700, fontSize: 15, color: M.ink,
          }}>{game.name}</span>
          {game.multiplayer && (
            <span style={{
              fontSize: 8, fontWeight: 800, letterSpacing: 0.5,
              padding: '1px 5px', borderRadius: 3,
              background: M.danger, color: '#fff',
              textTransform: 'uppercase',
            }}>2P</span>
          )}
        </div>
        <div style={{
          fontSize: 12, color: M.inkSoft, marginTop: 1,
          overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
          maxWidth: 240,
        }}>{game.desc}</div>
      </div>
      {rightSlot || (
        streak ? (
          <div style={{
            display: 'flex', alignItems: 'center', gap: 3,
            color: M.accent, fontSize: 12, fontWeight: 800,
          }}>
            <svg width="12" height="12" 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}
          </div>
        ) : (
          <svg width="8" height="14" viewBox="0 0 8 14"><path d="M1 1l6 6-6 6" stroke="rgba(0,0,0,0.2)" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
        )
      )}
    </button>
  );
};

// Section header
window.MSection = function MSection({ title, right, children, first }) {
  return (
    <section style={{ marginTop: first ? 4 : 24 }}>
      <header style={{
        padding: '0 20px 8px',
        display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
      }}>
        <h2 style={{
          margin: 0,
          fontFamily: 'Fraunces, Georgia, serif',
          fontSize: 20, fontWeight: 600, color: M.ink, letterSpacing: -0.4,
        }}>{title}</h2>
        {right && <span style={{
          fontSize: 12, color: M.inkSoft, fontWeight: 600,
        }}>{right}</span>}
      </header>
      {children}
    </section>
  );
};

// Card wrapper
window.MCard = function MCard({ children, style = {}, onTap }) {
  const Comp = onTap ? 'button' : 'div';
  return (
    <Comp onClick={onTap} style={{
      background: M.paper,
      border: `1px solid ${M.line}`,
      borderRadius: 16,
      padding: 14,
      width: '100%',
      fontFamily: 'inherit',
      textAlign: 'left',
      cursor: onTap ? 'pointer' : 'default',
      ...style,
    }}>{children}</Comp>
  );
};