/**
 * main.js
 * ========
 * Application entry point.
 * Registers all components, initializes Quasar, and mounts the app.
 */

const { createApp, onMounted } = Vue;
const { useQuasar } = Quasar;

/* ---- Import components ---- */
import AppHeader        from './components/app-header/app-header.js';
import WorkspaceDrawer  from './components/workspace-drawer/workspace-drawer.js';
import FilterDrawer     from './components/filter-drawer/filter-drawer.js';
import AssignmentDrawer from './components/assignment-drawer/assignment-drawer.js';
import PlannerGrid      from './components/planner-grid/planner-grid.js';

/* ---- Import services (for lifecycle) ---- */
import { loadDataFromDatabase } from './services/data-service.js';

/* ---- Root App ---- */
const app = createApp({
  components: {
    AppHeader,
    WorkspaceDrawer,
    FilterDrawer,
    AssignmentDrawer,
    PlannerGrid
  },
  setup() {
    const $q = useQuasar();

    onMounted(() => {
      loadDataFromDatabase($q);
    });
  },
  template: `
    <q-layout view="hHh Lpr fFf">
      <app-header></app-header>
      <workspace-drawer></workspace-drawer>
      <filter-drawer></filter-drawer>
      <assignment-drawer></assignment-drawer>
      <q-page-container>
        <planner-grid></planner-grid>
      </q-page-container>
    </q-layout>
  `
});

app.use(Quasar, { config: { brand: { primary: '#334155' } } });
app.mount('#q-app');