import * as scene from '../../../core/scene.js';
import * as bus from '../../../core/bus.js';
import * as audio from '../../../core/audio.js';
import { emoji } from '../../../core/theme.js';
import { t } from '../../../core/i18n.js';

const categories = [
  {
    name: 'Bullet', nameKey: 'time.bullet', iconSlot: 'lightning', iconFallback: '⚡', color: 'var(--amber)',
    controls: [
      { key: 'bullet_1_0', labelKey: 'time.1min', sub: '1+0' },
      { key: 'bullet_1_1', label: '1 | 1', sub: '1+1' },
      { key: 'bullet_2_1', label: '2 | 1', sub: '2+1' },
    ]
  },
  {
    name: 'Blitz', nameKey: 'time.blitz', iconSlot: 'fire', iconFallback: '🔥', color: 'var(--orange)',
    controls: [
      { key: 'blitz_3_0', labelKey: 'time.3min', sub: '3+0' },
      { key: 'blitz_3_2', label: '3 | 2', sub: '3+2' },
      { key: 'blitz_5_0', labelKey: 'time.5min', sub: '5+0' },
      { key: 'blitz_5_3', label: '5 | 3', sub: '5+3' },
      { key: 'blitz_5_5', label: '5 | 5', sub: '5+5' },
    ]
  },
  {
    name: 'Rapid', nameKey: 'time.rapid', iconSlot: 'runner', iconFallback: '🏃', color: 'var(--green)',
    controls: [
      { key: 'rapid_10_0', labelKey: 'time.10min', sub: '10+0' },
      { key: 'rapid_10_5', label: '10 | 5', sub: '10+5' },
      { key: 'rapid_15_10', label: '15 | 10', sub: '15+10' },
      { key: 'rapid_20_0', labelKey: 'time.20min', sub: '20+0' },
      { key: 'rapid_30_0', labelKey: 'time.30min', sub: '30+0' },
    ]
  },
  {
    name: 'Classical', nameKey: 'time.classical', iconSlot: 'crown', iconFallback: '♔', color: 'var(--purple)',
    controls: [
      { key: 'classical_45_45', label: '45 | 45', sub: '45+45' },
      { key: 'classical_60_0', labelKey: 'time.60min', sub: '60+0' },
      { key: 'classical_90_30', label: '90 | 30', sub: '90+30' },
    ]
  }
];

export function mountTimeSelect(el, params) {
  el.innerHTML = `
    <div class="tc-page" style="padding:16px;display:flex;flex-direction:column;gap:16px;height:100%;overflow-y:auto;">
      <div style="display:flex;align-items:center;gap:12px;">
        <button class="btn btn-secondary" id="back-btn" style="width:36px;height:36px;padding:0;border-radius:50%;">←</button>
        <h2 style="font-size:18px;font-weight:700;color:var(--text-primary);">${t('play.select_time')}</h2>
      </div>
      ${categories.map(cat => `
        <div class="tc-category">
          <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
            <span style="font-size:18px;">${emoji(cat.iconSlot, cat.iconFallback, 18)}</span>
            <span style="font-size:14px;font-weight:700;color:${cat.color};">${t(cat.nameKey)}</span>
            <span style="font-size:11px;color:var(--text-muted);font-family:var(--font-lat);">${cat.name}</span>
          </div>
          <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:8px;">
            ${cat.controls.map(tc => `
              <button class="time-btn" data-key="${tc.key}" style="display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:58px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:transform 0.1s,background 0.15s,border-color 0.15s;">
                <span style="font-size:14px;font-weight:700;color:var(--text-primary);font-family:var(--font-lat);">${tc.sub}</span>
                <span style="font-size:10px;color:var(--text-secondary);">${tc.labelKey ? t(tc.labelKey) : tc.label}</span>
              </button>
            `).join('')}
          </div>
        </div>
      `).join('')}
    </div>
    <style>
      .time-btn:active { transform:scale(0.93);background:var(--bg-hover); }
      .time-btn:hover { border-color:var(--border-hover); }
    </style>
  `;

  el.querySelector('#back-btn').addEventListener('click', () => {
    audio.play('click');
    scene.pop();
  });

  el.querySelectorAll('.time-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      audio.play('click');
      const timeControl = btn.dataset.key;
      const fullParams = { ...params, timeControl };

      if (params.mode === 'bot' || params.mode === 'local') {
        const gameScene = params.game === 'chess' ? 'chess-game' : params.game + '-game';
        scene.push(gameScene, fullParams);
      } else {
        scene.push('play-queue', fullParams);
      }
    });
  });
}
