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

export async function mountDaily(el) {
  el.innerHTML = `
    <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:var(--s-6);padding:var(--s-6);">
      <div style="font-size:48px;animation:float 3s ease-in-out infinite;">🎁</div>
      <div style="font-size:22px;font-weight:700;">${t('daily.claim')}</div>
      <div style="color:var(--text-secondary);font-size:14px;" id="streak-info"></div>
      <button class="btn btn-primary" id="claim-btn" style="font-size:18px;padding:var(--s-4) var(--s-8);">${t('daily.claim')}</button>
      <div id="claim-result" style="text-align:center;min-height:40px;"></div>
    </div>
  `;

  const btn = el.querySelector('#claim-btn');
  btn.addEventListener('click', async () => {
    btn.disabled = true;
    try {
      const data = await net.post('daily-reward.php', { action: 'claim' });
      if (data.error) {
        el.querySelector('#claim-result').innerHTML = `<span style="color:var(--text-secondary);">${data.error}</span>`;
        btn.disabled = false;
        return;
      }
      audio.play('coin', 'reward');
      audio.playSequence(['coin', 'coin', 'levelUp'], 150);
      el.querySelector('#claim-result').innerHTML = `
        <span style="color:var(--gold);font-size:18px;font-weight:700;">+${data.coins || 100} 🪙</span>
      `;
      bus.emit('coins:earned', { amount: data.coins || 100 });
      const player = store.get('player');
      if (player) store.set('player', { ...player, coins: (player.coins || 0) + (data.coins || 100) });
    } catch (e) {
      el.querySelector('#claim-result').innerHTML = `<span style="color:var(--error);">${t('common.error')}</span>`;
      btn.disabled = false;
    }
  });
}
