// ==================== РЫНОК ПРЕДЛОЖЕНИЙ ====================
import { state } from '../core/state.js';
import { playSound } from '../audio/sound-engine.js';

let marketPanel, marketClose, marketContent;

export function initMarket() {
  marketPanel = document.getElementById('marketPanel');
  marketClose = document.getElementById('marketClose');
  marketContent = document.getElementById('marketContent');
  
  if (!marketPanel) return;
  
  if (marketClose) marketClose.addEventListener('click', () => closeMarket());
  document.addEventListener('toggleMarket', () => toggleMarket());
}

export function toggleMarket() {
  if (!marketPanel) return;
  if (marketPanel.style.display === 'none' || !marketPanel.style.display) {
    openMarket();
  } else {
    closeMarket();
  }
}

export function closeMarket() {
  if (marketPanel) marketPanel.style.display = 'none';
}

function openMarket() {
  if (marketPanel) {
    marketPanel.style.display = 'block';
    renderMarket();
  }
}

function renderMarket() {
  if (!marketContent) return;
  if (!state.socket) {
    marketContent.innerHTML = '<p style="color:#aaa;">Подключение к серверу...</p>';
    return;
  }

  state.socket.emit('market_list', {}, (orders) => {
    if (!orders || !orders.length) {
      marketContent.innerHTML = '<p style="color:#aaa;text-align:center;">Предложений пока нет</p><div style="margin-top:12px;"><button id="createOrderBtn" style="width:100%;padding:10px;background:#4a8c4a;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:14px;">+ Выставить предмет</button></div>';
      const btn = document.getElementById('createOrderBtn');
      if (btn) btn.addEventListener('click', showCreateOrder);
      return;
    }

    let html = '<div style="margin-bottom:8px;"><button id="createOrderBtn" style="padding:8px 14px;background:#4a8c4a;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:13px;">+ Выставить предмет</button></div>';
    html += orders.map(o => '<div style="display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.1);"><div><span style="color:#ffd700;">' + (o.offer_item||'') + '</span> x' + (o.offer_qty||1) + ' <span style="color:#888;"> ⇄ </span><span style="color:#7ecfff;">' + (o.want_item||'') + '</span> x' + (o.want_qty||1) + '</div><div style="font-size:11px;color:#888;">' + (o.seller || 'Аноним') + '</div></div>').join('');
    marketContent.innerHTML = html;
    const btn = document.getElementById('createOrderBtn');
    if (btn) btn.addEventListener('click', showCreateOrder);
  });
}

function showCreateOrder() {
  if (!marketContent) return;
  const invKeys = Object.keys(state.inv || {});
  const invOpts = invKeys.filter(k => (state.inv[k]||0) > 0).map(k => '<option value="'+k+'">'+k+' (x'+state.inv[k]+')</option>').join('');

  marketContent.innerHTML = '<div style="padding:8px;"><h3 style="margin:0 0 10px;font-size:14px;">Выставить предмет</h3><label style="font-size:12px;color:#aaa;">Отдаю:</label><select id="offerItem" style="width:100%;margin-bottom:8px;padding:6px;background:#222;color:#fff;border:1px solid #555;border-radius:4px;">'+invOpts+'</select><label style="font-size:12px;color:#aaa;">Хочу:</label><input id="wantItem" placeholder="Название предмета" style="width:100%;margin-bottom:8px;padding:6px;background:#222;color:#fff;border:1px solid #555;border-radius:4px;" /><div style="display:flex;gap:8px;"><button id="submitOrder" style="flex:1;padding:8px;background:#4a8c4a;color:#fff;border:none;border-radius:6px;cursor:pointer;">Выставить</button><button id="cancelOrder" style="flex:1;padding:8px;background:#555;color:#fff;border:none;border-radius:6px;cursor:pointer;">Отмена</button></div></div>';

  const cancelBtn = document.getElementById('cancelOrder');
  if (cancelBtn) cancelBtn.addEventListener('click', () => renderMarket());
  const submitBtn = document.getElementById('submitOrder');
  if (submitBtn) submitBtn.addEventListener('click', () => {
    const offerItem = document.getElementById('offerItem');
    const wantItem = document.getElementById('wantItem');
    if (!offerItem || !wantItem) return;
    const offer = offerItem.value;
    const want = wantItem.value.trim();
    if (!offer || !want) { alert('Выберите предмет и укажите что хотите получить'); return; }
    if (state.socket) {
      state.socket.emit('market_create', { offer_item: offer, offer_qty: 1, want_item: want, want_qty: 1 });
      playSound('click');
      setTimeout(renderMarket, 500);
    }
  });
}