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

const categories = [
  {
    name: 'Bullet', nameAr: 'رصاصة', icon: '⚡', color: '#FBBF24',
    controls: [
      { key: 'bullet_1_0', label: '1 دقيقة', 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', nameAr: 'خاطفة', icon: '🔥', color: '#F97316',
    controls: [
      { key: 'blitz_3_0', label: '3 دقائق', sub: '3+0' },
      { key: 'blitz_3_2', label: '3 | 2', sub: '3+2' },
      { key: 'blitz_5_0', label: '5 دقائق', 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', nameAr: 'سريعة', icon: '🏃', color: '#22C55E',
    controls: [
      { key: 'rapid_10_0', label: '10 دقائق', 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', label: '20 دقيقة', sub: '20+0' },
      { key: 'rapid_30_0', label: '30 دقيقة', sub: '30+0' },
    ]
  },
  {
    name: 'Classical', nameAr: 'كلاسيكية', icon: '♔', color: '#8B5CF6',
    controls: [
      { key: 'classical_45_45', label: '45 | 45', sub: '45+45' },
      { key: 'classical_60_0', label: '60 دقيقة', 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:#f8fafc;">${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;">${cat.icon}</span>
            <span style="font-size:14px;font-weight:700;color:${cat.color};">${cat.nameAr}</span>
            <span style="font-size:11px;color:#64748b;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:#1e1e3a;border:1px solid rgba(255,255,255,0.08);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:#f8fafc;font-family:var(--font-lat);">${tc.sub}</span>
                <span style="font-size:10px;color:#94a3b8;">${tc.label}</span>
              </button>
            `).join('')}
          </div>
        </div>
      `).join('')}
    </div>
    <style>
      .time-btn:active { transform:scale(0.93);background:#2a2a5a; }
      .time-btn:hover { border-color:rgba(255,255,255,0.2); }
    </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);
      }
    });
  });
}
