<template>
  <Teleport to="body">
    <Transition name="digital-schedule-dialog">
      <div
        v-if="open"
        class="digital-schedule-overlay"
        @click.self="emit('close')"
      >
        <section class="digital-schedule-dialog panel" role="dialog" aria-modal="true">
          <header class="digital-schedule-head">
            <div>
              <span class="digital-schedule-kicker">定时设置</span>
              <h3>{{ targetName || '数字员工' }}</h3>
            </div>
            <button
              class="digital-schedule-close"
              type="button"
              :disabled="busy"
              aria-label="关闭定时设置"
              @click="emit('close')"
            >
              <i class="mdi mdi-close"></i>
            </button>
          </header>

          <div class="digital-schedule-body">
            <div class="digital-schedule-mode-grid">
              <button
                v-for="mode in scheduleModes"
                :key="mode.value"
                class="digital-schedule-mode"
                :class="{ active: modelValue.mode === mode.value }"
                type="button"
                :disabled="busy"
                @click="updateField('mode', mode.value)"
              >
                {{ mode.label }}
              </button>
            </div>

            <div class="digital-schedule-fields">
              <label v-if="modelValue.mode === 'daily' || modelValue.mode === 'weekly'">
                <span>执行时间</span>
                <input
                  :value="modelValue.time"
                  type="time"
                  :disabled="busy"
                  @input="updateField('time', $event.target.value)"
                >
              </label>

              <label v-if="modelValue.mode === 'weekly'">
                <span>执行日期</span>
                <select
                  :value="modelValue.weekday"
                  :disabled="busy"
                  @change="updateField('weekday', $event.target.value)"
                >
                  <option
                    v-for="weekday in weekdayOptions"
                    :key="weekday.value"
                    :value="weekday.value"
                  >
                    {{ weekday.label }}
                  </option>
                </select>
              </label>

              <label v-if="modelValue.mode === 'custom'" class="digital-schedule-cron-field">
                <span>Cron 表达式</span>
                <input
                  :value="modelValue.cron"
                  type="text"
                  :disabled="busy"
                  placeholder="例如：0 9 * * *"
                  @input="updateField('cron', $event.target.value)"
                >
              </label>
            </div>

            <p class="digital-schedule-preview">
              当前计划：{{ previewLabel }}
            </p>
            <p v-if="errorMessage" class="digital-schedule-error">
              {{ errorMessage }}
            </p>
          </div>

          <footer class="digital-schedule-actions">
            <button class="minor-action" type="button" :disabled="busy" @click="emit('close')">
              取消
            </button>
            <button class="minor-action success-action" type="button" :disabled="!canSave || busy" @click="emit('save')">
              {{ busy ? '保存中...' : '保存设置' }}
            </button>
          </footer>
        </section>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup>
import {
  DIGITAL_EMPLOYEE_SCHEDULE_MODES,
  DIGITAL_EMPLOYEE_WEEKDAY_OPTIONS
} from '../../views/scripts/digitalEmployeeScheduleModel.js'

defineOptions({
  name: 'DigitalEmployeeScheduleDialog'
})

const props = defineProps({
  open: { type: Boolean, default: false },
  modelValue: {
    type: Object,
    default: () => ({ mode: 'manual', time: '00:00', weekday: '1', cron: '' })
  },
  targetName: { type: String, default: '' },
  previewLabel: { type: String, default: '手动触发' },
  errorMessage: { type: String, default: '' },
  busy: { type: Boolean, default: false },
  canSave: { type: Boolean, default: false }
})

const emit = defineEmits(['update:modelValue', 'close', 'save'])

const scheduleModes = DIGITAL_EMPLOYEE_SCHEDULE_MODES
const weekdayOptions = DIGITAL_EMPLOYEE_WEEKDAY_OPTIONS

function updateField(field, value) {
  emit('update:modelValue', {
    ...props.modelValue,
    [field]: value
  })
}
</script>

<style scoped src="../../assets/styles/components/digital-employee-schedule-dialog.css"></style>
