let currentPage = 'page-home';
let currentView = 'grid';

function showPage(pageId) {
  document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
  document.getElementById(pageId).classList.add('active');
  currentPage = pageId;

  // Update nav
  const navMap = {
    'page-home': 0,
    'page-outfit': 1,
    'page-add': 2,
    'page-closet': 3,
    'page-profile': 4,
    'page-detail': -1,
    'page-calendar': -1
  };
  const idx = navMap[pageId];
  if (idx >= 0) {
    document.querySelectorAll('.nav-item').forEach((n, i) => {
      n.classList.toggle('active', i === idx);
    });
  }
}

function navTo(el, pageId) {
  document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
  el.classList.add('active');
  showPage(pageId);
}

function setView(view) {
  currentView = view;
  const grid = document.getElementById('closet-grid');
  const list = document.getElementById('closet-list');
  const gridBtn = document.getElementById('grid-view-btn');
  const listBtn = document.getElementById('list-view-btn');

  if (view === 'grid') {
    grid.style.display = 'grid';
    list.classList.add('hidden');
    gridBtn.classList.add('active');
    listBtn.classList.remove('active');
  } else {
    grid.style.display = 'none';
    list.classList.remove('hidden');
    gridBtn.classList.remove('active');
    listBtn.classList.add('active');
  }
}

function filterCloset(btn, cat) {
  document.querySelectorAll('.filter-bar:first-of-type .filter-btn').forEach(b => b.classList.remove('active'));
  btn.classList.add('active');

  const cards = document.querySelectorAll('.clothing-card');
  cards.forEach(card => {
    if (cat === 'all' || card.dataset.cat === cat) {
      card.style.display = '';
    } else {
      card.style.display = 'none';
    }
  });
}

function selectColor(el) {
  document.querySelectorAll('.color-dot').forEach(d => d.classList.remove('active'));
  el.classList.add('active');
}

function simulateUpload() {
  const placeholder = document.getElementById('upload-placeholder');
  const preview = document.getElementById('upload-preview');
  if (placeholder && preview) {
    placeholder.style.display = 'none';
    preview.classList.remove('hidden');
  }
}

function resetUpload() {
  const placeholder = document.getElementById('upload-placeholder');
  const preview = document.getElementById('upload-preview');
  if (placeholder && preview) {
    placeholder.style.display = '';
    preview.classList.add('hidden');
  }
}

function showToast(msg) {
  const toast = document.getElementById('toast');
  toast.textContent = msg;
  toast.classList.remove('hidden');
  setTimeout(() => toast.classList.add('hidden'), 1500);
}

function confirmDelete() {
  document.getElementById('delete-modal').classList.remove('hidden');
}

function hideModal() {
  document.getElementById('delete-modal').classList.add('hidden');
}

function refreshOutfit() {
  showToast('已刷新推荐搭配');
}

// Tag toggle
document.addEventListener('click', function(e) {
  if (e.target.classList.contains('selectable-tag')) {
    e.target.classList.toggle('active');
  }
  if (e.target.classList.contains('filter-btn') && !e.target.closest('.filter-bar:first-of-type') && !e.target.closest('.filter-group')) {
    const group = e.target.closest('.filter-btns');
    if (group) {
      group.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
      e.target.classList.add('active');
    }
  }
});