import { computed } from 'https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js';
import { usePlannerState } from '../../services/planner-state-service.js';
import { SHIFTS } from '../../services/data-constants.js';

export default {
  name: 'PlannerEditDrawer',
  props: {
    modelValue: Boolean,
    mode: String,
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const { state, methods } = usePlannerState();

    const currentAssignmentLabel = computed(() => {
      if (state.pendingShift) return state.pendingShift.label;
      if (!state.selectedAgent || !state.selectedDate) return null;
      const a = methods.getAssignment(state.selectedAgent.id, state.selectedDate);
      return a ? a.label : null;
    });

    const saveAssignment = () => {
      methods.saveAssignment();
      emit('update:modelValue', false);
    };

    const setPendingShift = (shift) => {
      state.pendingShift = shift;
    };

    return {
      state,
      shifts: SHIFTS,
      currentAssignmentLabel,
      saveAssignment,
      setPendingShift,
      formatDateForId: methods.formatDateForId,
      closeDrawer: () => emit('update:modelValue', false),
    };
  },
  template: `
    <q-drawer :model-value="modelValue" @update:model-value="$emit('update:modelValue', $event)" side="right" bordered :width="380" overlay elevated>
      <div class="column full-height bg-white">
        <q-toolbar class="bg-white border-b q-px-md" style="height: 64px"><q-toolbar-title class="text-subtitle1 text-weight-bold">{{ mode === 'assignment' ? 'Edit Assignment' : 'Agent Details' }}</q-toolbar-title><q-btn flat round dense icon="close" color="grey-5" @click="closeDrawer"></q-btn></q-toolbar>
        <q-scroll-area class="col q-pa-lg">
          <div v-if="state.selectedAgent" class="row items-center q-mb-xl"><q-avatar size="64px" class="shadow-1"><img :src="state.selectedAgent.avatar"></q-avatar><div class="q-ml-md"><div class="text-h6 text-weight-bold">{{ state.selectedAgent.name }}</div><div class="text-caption text-grey-7">{{ state.selectedAgent.dept }} • {{ state.selectedAgent.role }}</div><div class="text-caption text-indigo-8 text-weight-bold q-mt-xs"><q-icon name="public" size="xs" class="q-mr-xs"></q-icon> {{ state.selectedAgent.hubName }}</div></div></div>
          <template v-if="mode === 'assignment' && state.selectedDate"><div class="q-mb-lg q-pa-md bg-blue-grey-1 rounded-borders border"><div class="row items-center justify-between no-wrap"><div><div class="text-overline text-blue-grey-4">Shift Date</div><div class="text-subtitle1 text-weight-bold text-blue-grey-9">{{ state.selectedDate.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' }) }}</div></div><q-icon name="event" color="blue-grey-2" size="sm"></q-icon></div></div><div class="text-weight-bold q-mb-md">Standard Shifts</div><div class="row q-col-gutter-sm q-mb-xl"><div v-for="s in shifts" :key="s.id" class="col-6"><q-btn :color="s.color" :unelevated="currentAssignmentLabel === s.label" :outline="currentAssignmentLabel !== s.label" rounded dense no-caps :label="s.label" class="full-width q-py-sm" @click="setPendingShift(s)"></q-btn></div><div class="col-12"><q-btn outline rounded dense color="red-4" label="Clear Assignment" class="full-width q-mt-sm" icon="delete_outline" @click="setPendingShift(null)"></q-btn></div></div><div class="text-weight-bold q-mb-sm text-grey-7">Cell Identifier</div><div class="bg-grey-1 q-pa-sm rounded-borders border text-[10px] text-grey-6 font-mono break-all">#cell-{{state.selectedAgent.id}}-{{formatDateForId(state.selectedDate)}}</div></template>
        </q-scroll-area>
        <div class="q-pa-lg border-t row q-gutter-md bg-grey-1"><q-btn flat rounded label="Cancel" class="col" @click="closeDrawer"></q-btn><q-btn unelevated rounded color="indigo-10" label="Save Assignment" class="col" @click="saveAssignment"></q-btn></div>
      </div>
    </q-drawer>`
};