<script setup lang="ts">
const props = defineProps({
  task: { type: Object as PropType<any>, default: null },
  registeredFunctions: { type: Array as PropType<string[]>, default: () => [] },
})

const emit = defineEmits(["close"])

const isEdit = computed(() => !!props.task)

const form = reactive({
  name: props.task?.name ?? "",
  cronExpression: props.task?.cronExpression ?? "0 9 * * *",
  type: (props.task?.type ?? "function") as "function" | "http",
  functionName: props.task?.functionName ?? "",
  functionPayload: props.task?.functionPayload ?? "",
  httpMethod: props.task?.httpMethod ?? "GET",
  httpUrl: props.task?.httpUrl ?? "",
  httpHeaders: props.task?.httpHeaders ?? "",
  httpBody: props.task?.httpBody ?? "",
  catchUp: props.task?.catchUp === 1,
  enabled: props.task ? props.task.enabled === 1 : true,
  maxRetries: props.task?.maxRetries ?? 0,
  retryDelaySeconds: props.task?.retryDelaySeconds ?? 60,
  timeoutSeconds: props.task?.timeoutSeconds ?? 300,
})

const saving = ref(false)
const error = ref("")
const showAdvanced = ref(false)

const typeItems = [
  { label: "函数", value: "function" },
  { label: "HTTP 请求", value: "http" },
]

const httpMethodItems = [
  { label: "GET", value: "GET" },
  { label: "POST", value: "POST" },
  { label: "PUT", value: "PUT" },
  { label: "DELETE", value: "DELETE" },
]

const functionItems = computed(() =>
  props.registeredFunctions.map((f: string) => ({ label: f, value: f }))
)

const cronPresets = [
  { label: "每分钟", value: "* * * * *" },
  { label: "每5分钟", value: "*/5 * * * *" },
  { label: "每小时", value: "0 * * * *" },
  { label: "每天上午9点", value: "0 9 * * *" },
  { label: "每天午夜", value: "0 0 * * *" },
  { label: "每周一上午9点", value: "0 9 * * 1" },
]

async function save() {
  saving.value = true
  error.value = ""

  const body = {
    ...form,
    catchUp: form.catchUp ? 1 : 0,
    enabled: form.enabled ? 1 : 0,
  }

  try {
    if (isEdit.value) {
      await $fetch(`/api/scheduler/tasks/${props.task.id}`, {
        method: "PUT",
        body,
      })
    } else {
      await $fetch("/api/scheduler/tasks", {
        method: "POST",
        body,
      })
    }
    emit("close")
  } catch (err: any) {
    error.value = err?.data?.message ?? err?.message ?? "保存失败"
  } finally {
    saving.value = false
  }
}

function onOverlayClick(e: MouseEvent) {
  if ((e.target as HTMLElement).dataset.overlay === "true") {
    emit("close")
  }
}
</script>

<template>
  <div
    data-overlay="true"
    class="modal-overlay"
    @click="onOverlayClick"
  >
    <div class="modal-container">
      <!-- Header -->
      <div class="modal-header">
        <h2 class="modal-title">{{ isEdit ? '编辑' : '创建' }}任务</h2>
        <button
          class="modal-close-btn"
          @click="emit('close')"
        >
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

      <!-- Body -->
      <div class="modal-body">
        <div v-if="error" class="error-alert">
          {{ error }}
        </div>

        <div class="form-group">
          <label class="form-label">名称 *</label>
          <input
            v-model="form.name"
            type="text"
            placeholder="任务名称"
            class="form-input"
          />
        </div>

        <div class="form-group">
          <label class="form-label">类型 *</label>
          <select
            v-model="form.type"
            class="form-select"
          >
            <option v-for="item in typeItems" :key="item.value" :value="item.value">
              {{ item.label }}
            </option>
          </select>
        </div>

        <div class="form-group">
          <label class="form-label">Cron 表达式 *</label>
          <input
            v-model="form.cronExpression"
            type="text"
            placeholder="0 9 * * *"
            class="form-input form-input-mono"
          />
          <div class="cron-presets">
            <button
              v-for="preset in cronPresets"
              :key="preset.value"
              type="button"
              class="cron-preset-btn"
              @click="form.cronExpression = preset.value"
            >
              {{ preset.label }}
            </button>
          </div>
        </div>

        <!-- Function fields -->
        <template v-if="form.type === 'function'">
          <div class="form-group">
            <label class="form-label">函数 *</label>
            <select
              v-model="form.functionName"
              class="form-select"
            >
              <option value="" disabled>选择函数</option>
              <option v-for="item in functionItems" :key="item.value" :value="item.value">
                {{ item.label }}
              </option>
            </select>
          </div>
          <div class="form-group">
            <label class="form-label">Payload (JSON)</label>
            <input
              v-model="form.functionPayload"
              type="text"
              placeholder='{"key": "value"}'
              class="form-input form-input-mono"
            />
          </div>
        </template>

        <!-- HTTP fields -->
        <template v-if="form.type === 'http'">
          <div class="form-row">
            <div class="form-group form-group-sm">
              <label class="form-label">方法</label>
              <select
                v-model="form.httpMethod"
                class="form-select"
              >
                <option v-for="item in httpMethodItems" :key="item.value" :value="item.value">
                  {{ item.label }}
                </option>
              </select>
            </div>
            <div class="form-group form-group-grow">
              <label class="form-label">URL *</label>
              <input
                v-model="form.httpUrl"
                type="text"
                placeholder="https://example.com/api"
                class="form-input"
              />
            </div>
          </div>
          <div class="form-group">
            <label class="form-label">请求头 (JSON)</label>
            <input
              v-model="form.httpHeaders"
              type="text"
              placeholder='{"Authorization": "Bearer ..."}'
              class="form-input form-input-mono"
            />
          </div>
          <div class="form-group">
            <label class="form-label">请求体</label>
            <textarea
              v-model="form.httpBody"
              rows="3"
              class="form-textarea form-input-mono"
            ></textarea>
          </div>
        </template>

        <!-- Advanced settings -->
        <div class="advanced-section">
          <button
            type="button"
            class="advanced-toggle"
            @click="showAdvanced = !showAdvanced"
          >
            <span>高级设置</span>
            <svg
              :class="['w-4 h-4 transition-transform', showAdvanced ? 'rotate-180' : '']"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
            </svg>
          </button>
          <div v-if="showAdvanced" class="advanced-content">
            <div class="checkbox-group">
              <label class="checkbox-label">
                <input
                  v-model="form.catchUp"
                  type="checkbox"
                  class="form-checkbox"
                />
                <span>服务重启后补录错过的执行</span>
              </label>
              <label class="checkbox-label">
                <input
                  v-model="form.enabled"
                  type="checkbox"
                  class="form-checkbox"
                />
                <span>启用</span>
              </label>
            </div>
            <div class="form-row form-row-3">
              <div class="form-group form-group-sm">
                <label class="form-label form-label-sm">最大重试次数</label>
                <input
                  v-model.number="form.maxRetries"
                  type="number"
                  min="0"
                  class="form-input"
                />
              </div>
              <div class="form-group form-group-sm">
                <label class="form-label form-label-sm">重试延迟 (秒)</label>
                <input
                  v-model.number="form.retryDelaySeconds"
                  type="number"
                  min="1"
                  class="form-input"
                />
              </div>
              <div class="form-group form-group-sm">
                <label class="form-label form-label-sm">超时时间 (秒)</label>
                <input
                  v-model.number="form.timeoutSeconds"
                  type="number"
                  min="1"
                  class="form-input"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Footer -->
      <div class="modal-footer">
        <button
          class="btn-secondary"
          @click="emit('close')"
        >
          取消
        </button>
        <button
          :disabled="saving"
          class="btn-primary"
          @click="save"
        >
          {{ saving ? '保存中...' : (isEdit ? '更新' : '创建') }}
        </button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
  background: rgba(20, 20, 19, 0.4);
}

.modal-container {
  background: var(--color-canvas);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(20, 20, 19, 0.2);
  width: 100%;
  max-width: 520px;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-hairline);
}

.modal-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-ink);
  margin: 0;
}

.modal-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: var(--color-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.modal-close-btn:hover {
  background: var(--color-surface-soft);
  color: var(--color-ink);
}

.modal-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid var(--color-hairline);
  background: var(--color-surface-soft);
  border-radius: 0 0 12px 12px;
}

.error-alert {
  padding: 12px 16px;
  background: rgba(198, 69, 69, 0.08);
  color: var(--color-error);
  border-radius: 8px;
  font-size: 14px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group-grow {
  flex: 1;
}

.form-group-sm {
  width: 100px;
}

.form-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-body-strong);
}

.form-label-sm {
  font-size: 12px;
  color: var(--color-muted);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--color-ink);
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: 8px;
  transition: all 0.15s ease;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(204, 120, 92, 0.15);
}

.form-input-mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
}

.form-select {
  cursor: pointer;
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
}

.form-row {
  display: flex;
  gap: 12px;
}

.form-row-3 {
  gap: 12px;
}

.form-row-3 .form-group {
  flex: 1;
}

.cron-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.cron-preset-btn {
  padding: 4px 10px;
  font-size: 12px;
  color: var(--color-muted);
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.cron-preset-btn:hover {
  background: var(--color-surface-soft);
  color: var(--color-ink);
}

.advanced-section {
  border: 1px solid var(--color-hairline);
  border-radius: 8px;
  overflow: hidden;
}

.advanced-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-body-strong);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.advanced-toggle:hover {
  background: var(--color-surface-soft);
}

.advanced-toggle svg {
  color: var(--color-muted);
}

.advanced-content {
  padding: 16px;
  border-top: 1px solid var(--color-hairline);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-body);
  cursor: pointer;
}

.form-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.btn-secondary {
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-body-strong);
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-secondary:hover {
  background: var(--color-surface-soft);
  border-color: var(--color-hairline-soft);
}

.btn-primary {
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-on-primary);
  background: var(--color-primary);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-primary:hover {
  background: var(--color-primary-active);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>