window.GridComponent = {
    props: ['dateRange', 'agents'],
    emits: ['select-cell'],
    template: `
        <div class="planner-grid-container">
            <table class="grid-table">
                <thead>
                    <!-- ExNet / Target Header Row -->
                    <tr>
                        <th class="grid-header-cell col-sticky-left bg-white" style="z-index: 31;">
                            <div class="text-caption text-grey-6">Targets</div>
                        </th>
                        <th v-for="day in dateRange" :key="'target-'+day.dayNum" 
                            class="grid-header-cell header-exnet text-center">
                            {{ day.exNetTarget }}
                        </th>
                    </tr>
                    
                    <!-- Date Header Row -->
                    <tr>
                        <th class="grid-header-cell col-sticky-left">
                            <div class="row items-center justify-between">
                                <span>Agent</span>
                                <q-icon name="filter_list" class="cursor-pointer text-grey-5" size="xs"></q-icon>
                            </div>
                        </th>
                        <th v-for="day in dateRange" :key="'date-'+day.dayNum" 
                            class="grid-header-cell text-center"
                            :class="{'bg-blue-1': day.isWeekend}">
                            <div class="column items-center">
                                <span class="text-xs text-uppercase text-grey-6">{{ day.dayName }}</span>
                                <span class="text-h6 text-primary" style="line-height: 1.1;">{{ day.dayNum }}</span>
                            </div>
                            <!-- Mock Traffic Light -->
                            <div class="row justify-center q-mt-xs">
                                <div class="status-indicator status-green" v-if="!day.isWeekend"></div>
                                <div class="status-indicator status-yellow" v-else></div>
                            </div>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="agent in agents" :key="agent.id">
                        <!-- Sticky Agent Cell -->
                        <td class="grid-cell col-sticky-left">
                            <div class="row items-center no-wrap">
                                <q-avatar size="28px" class="q-mr-sm">
                                    <img :src="agent.avatar">
                                </q-avatar>
                                <div class="column" style="overflow: hidden;">
                                    <div class="text-weight-medium text-no-wrap ellipsis" style="width: 140px;">{{ agent.name }}</div>
                                    <div class="text-caption text-grey-5 text-no-wrap ellipsis">{{ agent.role }}</div>
                                </div>
                            </div>
                        </td>
                        
                        <!-- Shift Cells -->
                        <td v-for="day in dateRange" :key="agent.id + '-' + day.dayNum" 
                            class="grid-cell text-center cursor-pointer"
                            @click="$emit('select-cell', { agent, day })">
                            
                            <!-- Mock Shift Data -->
                            <div v-if="Math.random() > 0.7" class="bg-blue-1 text-blue-9 text-caption q-pa-xs rounded-borders" style="font-size: 10px;">
                                08:00 - 16:00
                            </div>
                            <div v-else-if="Math.random() > 0.8" class="text-grey-4 text-center">
                                <q-icon name="add" size="xs"></q-icon>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    `
};