const { createApp, ref, computed } = Vue;

const app = createApp({
    setup() {
        const leftDrawerOpen = ref(false);
        const search = ref('');
        const selectedCell = ref(null);

        // Mock Data
        const currentMonthYear = ref('February 2026');

        const agents = ref([
            { id: 1, name: 'Alice Smith', role: 'Senior', avatar: 'https://i.pravatar.cc/150?u=1' },
            { id: 2, name: 'Bob Jones', role: 'Junior', avatar: 'https://i.pravatar.cc/150?u=2' },
            { id: 3, name: 'Charlie Day', role: 'Senior', avatar: 'https://i.pravatar.cc/150?u=3' },
            { id: 4, name: 'David Lee', role: 'Expert', avatar: 'https://i.pravatar.cc/150?u=4' },
            { id: 5, name: 'Eve White', role: 'Trainee', avatar: 'https://i.pravatar.cc/150?u=5' }
        ]);

        const dateRange = computed(() => {
            // Generate next 14 days
            const dates = [];
            const today = new Date();
            for (let i = 0; i < 14; i++) {
                const date = new Date(today);
                date.setDate(today.getDate() + i);
                dates.push({
                    date: date,
                    dayName: date.toLocaleDateString('en-US', { weekday: 'short' }),
                    dayNum: date.toLocaleDateString('en-US', { day: 'numeric' }),
                    isWeekend: date.getDay() === 0 || date.getDay() === 6,
                    exNetTarget: i % 3 === 0 ? 'High' : 'Normal' // Mock target
                });
            }
            return dates;
        });

        const toggleLeftDrawer = () => {
            leftDrawerOpen.value = !leftDrawerOpen.value;
        };

        const handleCellSelection = (cellData) => {
            selectedCell.value = cellData;
            leftDrawerOpen.value = true;
        };

        const updateCellData = (newData) => {
            console.log('Update cell data:', newData);
            // Logic to update grid data would go here
            if (selectedCell.value) {
                // Ideally find the cell in a reactive store and update it
            }
        };

        return {
            leftDrawerOpen,
            toggleLeftDrawer,
            search,
            currentMonthYear,
            agents,
            dateRange,
            selectedCell,
            handleCellSelection,
            updateCellData
        };
    }
});

// Configure Quasar
app.use(Quasar, {
    config: {
        brand: {
            primary: '#3b82f6',
            secondary: '#64748b',
            accent: '#8b5cf6',
        }
    }
});

// Components will be registered in their respective files or here if inline
// Note: Since we are loading script files sequentially, we need to make sure 
// GridComponent and Sidebar are defined before mounting if they are used in the template.
// However, component registration usually happens after import. 
// In UMD, we can define global variables for components.

app.component('grid-component', window.GridComponent);
app.component('sidebar-component', window.Sidebar);

app.mount('#q-app');