// Tweaks panel — runtime settings
const { useState: useTS } = React;

const TABLE_THEMES = {
  violet:  { felt: '#1a0f3a', felt2: '#2a1559', name: 'Violet' },
  crimson: { felt: '#2a0a1a', felt2: '#4a0e2b', name: 'Crimson' },
  teal:    { felt: '#0a2a2a', felt2: '#0e4a4a', name: 'Teal' },
  obsidian:{ felt: '#0a0a14', felt2: '#18182a', name: 'Obsidian' },
  emerald: { felt: '#0a2a18', felt2: '#0e4a2a', name: 'Emerald' }
};

function TweaksPanel({ settings, onChange, onClose, onSwitchAI }) {
  function set(k, v) { onChange({ ...settings, [k]: v }); }
  return (
    <div className="tweaks-panel">
      <h3>
        Tweaks
        <span className="close" onClick={onClose}>✕</span>
      </h3>
      <div className="group">
        <div className="group-title">Table theme</div>
        <div className="swatch-row">
          {Object.entries(TABLE_THEMES).map(([k, t]) => (
            <div key={k}
              className={`swatch ${settings.tableTheme === k ? 'active' : ''}`}
              style={{ background: `linear-gradient(135deg, ${t.felt2}, ${t.felt})` }}
              onClick={() => set('tableTheme', k)}
              title={t.name}
            />
          ))}
        </div>
      </div>

      <div className="group">
        <div className="group-title">Card face</div>
        <div className="segmented">
          <button className={settings.cardFace === 'funky' ? 'active' : ''} onClick={() => set('cardFace', 'funky')}>🤡 Funky</button>
          <button className={settings.cardFace === 'classic' ? 'active' : ''} onClick={() => set('cardFace', 'classic')}>♠ Classic</button>
        </div>
      </div>

      <div className="group">
        <div className="group-title">Card back</div>
        <div className="backpick-row">
          {['back-neon', 'back-grid', 'back-laurel'].map(d => (
            <div key={d} className={`backpick ${settings.cardBack === d ? 'active' : ''}`} onClick={() => set('cardBack', d)}>
              <CardBack design={d} style={{ width: 48, height: 68 }} />
            </div>
          ))}
        </div>
      </div>

      <div className="group">
        <div className="group-title">Card size</div>
        <div className="segmented">
          {['compact','default','loose'].map(s => (
            <button key={s} className={settings.density === s ? 'active' : ''} onClick={() => set('density', s)}>{s}</button>
          ))}
        </div>
      </div>

      <div className="group">
        <div className="group-title">AI</div>
        <div style={{ fontSize: 11, color: 'var(--ink-lo)', marginBottom: 6, fontFamily: '"JetBrains Mono"', textTransform: 'uppercase', letterSpacing: '.15em' }}>Difficulty</div>
        <div className="segmented glow">
          {['easy','medium','hard'].map(d => (
            <button key={d} className={settings.difficulty === d ? 'active' : ''} onClick={() => set('difficulty', d)}>{d}</button>
          ))}
        </div>
        <div style={{ fontSize: 11, color: 'var(--ink-lo)', margin: '10px 0 6px', fontFamily: '"JetBrains Mono"', textTransform: 'uppercase', letterSpacing: '.15em' }}>Opponent</div>
        <div className="row">
          {Object.entries(window.RomeAI.PERSONALITIES).map(([k, p]) => (
            <button key={k}
              className={`btn ${settings.personality === k ? 'primary' : 'ghost'}`}
              style={{ padding: '6px 10px', fontSize: 11 }}
              onClick={() => onSwitchAI && onSwitchAI(k)}>
              {p.name}
            </button>
          ))}
        </div>
      </div>

      <div className="group">
        <div className="group-title">Sound</div>
        <div className="rule-toggle">
          <div className="lbl">SFX<small>Clicks, flips, victory.</small></div>
          <div className={`switch ${settings.sound ? 'on' : ''}`} onClick={() => set('sound', !settings.sound)} />
        </div>
        <div className="rule-toggle">
          <div className="lbl">Trash talk<small>Let the AI yap at you.</small></div>
          <div className={`switch ${settings.trashTalk ? 'on' : ''}`} onClick={() => set('trashTalk', !settings.trashTalk)} />
        </div>
      </div>

      <div className="group">
        <div className="group-title">Rules</div>
        <div className="rule-toggle">
          <div className="lbl">Initial meld ≥ 40<small>Opening must total 40+ points.</small></div>
          <div className={`switch ${settings.requireOpen40 ? 'on' : ''}`} onClick={() => set('requireOpen40', !settings.requireOpen40)} />
        </div>
        <div className="rule-toggle">
          <div className="lbl">Lay off on opponent melds<small>Extend their runs & sets.</small></div>
          <div className={`switch ${settings.layoffOpponent ? 'on' : ''}`} onClick={() => set('layoffOpponent', !settings.layoffOpponent)} />
        </div>
      </div>

      <div className="group" style={{ borderBottom: 'none', opacity: .7 }}>
        <div style={{ fontSize: 10, fontFamily: '"JetBrains Mono"', color: 'var(--ink-lo)', textTransform: 'uppercase', letterSpacing: '.15em' }}>
          Changes apply immediately. Rule changes apply next hand.
        </div>
      </div>
    </div>
  );
}

window.TweaksPanel = TweaksPanel;
window.TABLE_THEMES = TABLE_THEMES;