import { renderEmployees } from './employees.js';
import { renderCalendar } from './calendar.js';
import { renderDataTab } from './history.js';

const STORAGE_KEY = 'morning-planner-state';

// Shared mutable state — imported by all other modules
export const state = {
  employees: [],
  calendar: { holidays: [], companyClosures: [] },
  history: []
};

// Load persisted state from localStorage on startup
try {
  const saved = localStorage.getItem(STORAGE_KEY);
  if (saved) {
    const parsed = JSON.parse(saved);
    if (Array.isArray(parsed.employees)) state.employees = parsed.employees;
    if (parsed.calendar) state.calendar = parsed.calendar;
    if (Array.isArray(parsed.history)) state.history = parsed.history;
  }
} catch {
  // Corrupt storage — start fresh
}

// Call after any state mutation to persist automatically
export function saveState() {
  try {
    localStorage.setItem(STORAGE_KEY, JSON.stringify({
      employees: state.employees,
      calendar: state.calendar,
      history: state.history
    }));
  } catch {
    // Storage full or unavailable — silently ignore
  }
}

// Tab switching
document.querySelectorAll('.tab-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const tab = btn.dataset.tab;
    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
    document.querySelectorAll('.tab-content').forEach(s => s.classList.add('hidden'));
    btn.classList.add('active');
    document.getElementById('tab-' + tab).classList.remove('hidden');
    if (tab === 'planning') renderCalendar();
    if (tab === 'data') renderDataTab();
  });
});

renderEmployees();