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

export function mountSettings(el) {
  const lang = store.get('language') || 'ar';
  const audioOn = store.get('audioEnabled');

  el.innerHTML = `
    <div style="padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-4);">
      <div style="display:flex;align-items:center;gap:var(--s-3);">
        <button class="btn btn-secondary" id="back-btn" style="width:36px;height:36px;padding:0;">←</button>
        <h2 style="font-size:18px;font-weight:700;">${t('profile.settings')}</h2>
      </div>

      <div class="card" style="display:flex;flex-direction:column;gap:var(--s-4);">
        <div style="display:flex;justify-content:space-between;align-items:center;">
          <span>الصوت</span>
          <button class="btn btn-secondary" id="toggle-audio" style="min-height:36px;padding:var(--s-1) var(--s-3);">${audioOn ? '🔊 مفعل' : '🔇 معطل'}</button>
        </div>
        <div style="display:flex;justify-content:space-between;align-items:center;">
          <span>اللغة</span>
          <button class="btn btn-secondary" id="toggle-lang" style="min-height:36px;padding:var(--s-1) var(--s-3);">${lang === 'ar' ? 'العربية' : 'English'}</button>
        </div>
      </div>
    </div>
  `;

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

  el.querySelector('#toggle-audio').addEventListener('click', () => {
    const current = store.get('audioEnabled');
    store.set('audioEnabled', !current);
    audio.play('click');
    mountSettings(el);
  });

  el.querySelector('#toggle-lang').addEventListener('click', () => {
    const current = store.get('language') || 'ar';
    const next = current === 'ar' ? 'en' : 'ar';
    setLang(next);
    audio.play('click');
    mountSettings(el);
  });
}
