/**
 * assignment-drawer.js
 * =====================
 * Right overlay drawer: agent profile, shift assignment buttons,
 * save / cancel actions.
 */

import {
  rightDrawer,
  editMode,
  selectedAgent,
  selectedDate,
  pendingShift,
  formatDateForId
} from '../../services/planner-state.js';

import {
  SHIFTS,
  getAssignment,
  assignments,
  saveAssignment as doSave
} from '../../services/data-service.js';

export default {
  name: 'AssignmentDrawer',
  setup() {
    const currentAssignmentLabel = Vue.computed(() => {
      if (pendingShift.value) return pendingShift.value.label;
      if (!selectedAgent.value || !selectedDate.value) return null;
      const a = getAssignment(selectedAgent.value.id, selectedDate.value);
      return a ? a.label : null;
    });

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

    const saveAssignment = () => {
      doSave(selectedAgent, selectedDate, pendingShift, rightDrawer);
    };

    return {
      rightDrawer,
      editMode,
      selectedAgent,
      selectedDate,
      pendingShift,
      formatDateForId,
      shifts: SHIFTS,
      currentAssignmentLabel,
      setPendingShift,
      saveAssignment
    };
  },
  template: `
    <q-drawer v-model="rightDrawer" side="right" bordered :width="380" overlay>
      <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">
            {{ editMode === 'assignment' ? 'Edit Assignment' : 'Agent Details' }}
          </q-toolbar-title>
          <q-btn flat round dense icon="close" color="grey-5" @click="rightDrawer = false"></q-btn>
        </q-toolbar>

        <q-scroll-area class="col q-pa-lg">
          <div v-if="selectedAgent" class="row items-center q-mb-xl">
            <q-avatar size="64px"><img :src="selectedAgent.avatar"></q-avatar>
            <div class="q-ml-md">
              <div class="text-h6 text-weight-bold">{{ selectedAgent.name }}</div>
              <div class="text-caption text-grey-7">{{ selectedAgent.dept }} &bull; {{ selectedAgent.role }}</div>
              <div class="text-caption text-grey-7 text-weight-bold q-mt-xs">
                {{ selectedAgent.hubName }}
              </div>
            </div>
          </div>

          <template v-if="editMode === 'assignment' && selectedDate">
            <div class="q-mb-lg">
              <div class="text-overline text-grey-5">Shift Date</div>
              <div class="text-subtitle1 text-weight-bold text-grey-9">
                {{ selectedDate.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' }) }}
              </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-overline text-grey-5 q-mb-xs">Cell Identifier</div>
            <div class="text-caption text-grey-5 font-mono break-all">
              #cell-{{selectedAgent.id}}-{{formatDateForId(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="rightDrawer = false"></q-btn>
          <q-btn unelevated rounded color="grey-9" label="Save Assignment" class="col" @click="saveAssignment"></q-btn>
        </div>
      </div>
    </q-drawer>
  `
};