<template>
  <header class="editor-top-toolbar">
    <div class="editor-top-toolbar__actions">

      <!-- 裝置切換 -->
      <div class="editor-top-toolbar__group">
        <button
          v-for="dev in deviceOptions"
          :key="dev.value"
          class="editor-top-toolbar__icon-btn"
          :class="{ 'is-active': deviceMode === dev.value }"
          :title="dev.label"
          @click="$emit('set-device-mode', dev.value)"
        >
          <component :is="dev.icon" />
        </button>
      </div>

      <!-- 結構操作 -->
      <div class="editor-top-toolbar__group">
        <button
          class="editor-top-toolbar__text-btn"
          :disabled="!selectedSelector"
          :title="selectedHidden ? '顯示區塊' : '隱藏區塊'"
          @click="$emit('toggle-visibility')"
        >
          <EyeOffIcon v-if="!selectedHidden" />
          <EyeIcon v-else />
          <span>{{ selectedHidden ? "顯示" : "隱藏" }}</span>
        </button>

        <div class="editor-top-toolbar__insert-row">
          <el-select
            :model-value="insertBlockType"
            class="editor-top-toolbar__insert-type"
            placeholder="插入類型"
            @change="$emit('update:insert-block-type', $event)"
          >
            <el-option
              v-for="option in insertBlockTypeOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
          <button
            class="editor-top-toolbar__text-btn"
            :disabled="!selectedSelector"
            title="前面插入"
            @click="$emit('insert-before')"
          >
            <InsertBeforeIcon />
            <span>前插</span>
          </button>
          <button
            class="editor-top-toolbar__text-btn"
            :disabled="!selectedSelector"
            title="後面插入"
            @click="$emit('insert-after')"
          >
            <InsertAfterIcon />
            <span>後插</span>
          </button>
        </div>

        <button
          class="editor-top-toolbar__text-btn"
          :disabled="!selectedSelector"
          title="複製區塊"
          @click="$emit('duplicate')"
        >
          <CopyIcon />
          <span>複製</span>
        </button>

        <button
          class="editor-top-toolbar__text-btn editor-top-toolbar__text-btn--danger"
          :disabled="!selectedSelector"
          title="刪除區塊"
          @click="$emit('delete')"
        >
          <TrashIcon />
          <span>刪除</span>
        </button>
      </div>

      <!-- 歷史 -->
      <div class="editor-top-toolbar__group">
        <button
          class="editor-top-toolbar__icon-btn"
          :disabled="!canUndo"
          title="上一步（Ctrl+Z）"
          @click="$emit('undo')"
        >
          <UndoIcon />
        </button>
        <button
          class="editor-top-toolbar__icon-btn"
          :disabled="!canRedo"
          title="下一步（Ctrl+Y）"
          @click="$emit('redo')"
        >
          <RedoIcon />
        </button>
      </div>
    </div>

    <div class="editor-top-toolbar__secondary">
      <button class="editor-top-toolbar__text-btn editor-top-toolbar__text-btn--ghost" title="載入示範頁" @click="$emit('load-demo')">
        示範
      </button>
      <button class="editor-top-toolbar__text-btn editor-top-toolbar__text-btn--ghost" title="返回" @click="$emit('back')">
        <BackIcon />
        <span>返回</span>
      </button>
    </div>
  </header>
</template>

<script setup>
import { defineComponent, h } from "vue"

defineProps({
  deviceMode: { type: String, default: "desktop" },
  selectedSelector: { type: String, default: "" },
  selectedHidden: { type: Boolean, default: false },
  insertBlockType: { type: String, default: "content-card" },
  insertBlockTypeOptions: { type: Array, default: () => [] },
  canUndo: { type: Boolean, default: false },
  canRedo: { type: Boolean, default: false },
})

defineEmits([
  "set-device-mode",
  "toggle-visibility",
  "update:insert-block-type",
  "insert-before",
  "insert-after",
  "duplicate",
  "delete",
  "undo",
  "redo",
  "back",
  "load-demo",
])

function svgIcon(pathD, vb) {
  return defineComponent({
    render() {
      return h("svg", { width: 18, height: 18, viewBox: vb || "0 0 20 20", fill: "none", "aria-hidden": "true" },
        [h("path", { d: pathD, fill: "currentColor" })]
      )
    }
  })
}

const DesktopIcon = svgIcon("M3 4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v9H3V4Zm1 11h12l1 2H3l1-2Zm3-1h6v1H7v-1Z")
const TabletIcon = svgIcon("M5 3a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H5Zm5 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z")
const MobileIcon = svgIcon("M7 2a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H7Zm3 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z")
const UndoIcon = defineComponent({ render() { return h("svg", { width: 18, height: 18, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true" }, [h("path", { d: "M5 7H13a4 4 0 0 1 0 8H9", stroke: "currentColor", "stroke-width": "1.6", "stroke-linecap": "round" }), h("path", { d: "M7 4 4 7l3 3", stroke: "currentColor", "stroke-width": "1.6", "stroke-linecap": "round", "stroke-linejoin": "round" })]) } })
const RedoIcon = defineComponent({ render() { return h("svg", { width: 18, height: 18, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true" }, [h("path", { d: "M15 7H7a4 4 0 0 0 0 8h4", stroke: "currentColor", "stroke-width": "1.6", "stroke-linecap": "round" }), h("path", { d: "M13 4l3 3-3 3", stroke: "currentColor", "stroke-width": "1.6", "stroke-linecap": "round", "stroke-linejoin": "round" })]) } })
const EyeIcon = svgIcon("M3 10s2.5-5 7-5 7 5 7 5-2.5 5-7 5-7-5-7-5Zm7 2a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z")
const EyeOffIcon = defineComponent({ render() { return h("svg", { width: 18, height: 18, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true" }, [h("path", { d: "M3 10s2.5-5 7-5 7 5 7 5-2.5 5-7 5-7-5-7-5Z", stroke: "currentColor", "stroke-width": "1.6" }), h("line", { x1: "4", y1: "4", x2: "16", y2: "16", stroke: "currentColor", "stroke-width": "1.6", "stroke-linecap": "round" })]) } })
const CopyIcon = svgIcon("M7 4h7a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2ZM4 7H3a1 1 0 0 0-1 1v8a2 2 0 0 0 2 2h9a1 1 0 0 0 1-1v-1")
const TrashIcon = defineComponent({ render() { return h("svg", { width: 18, height: 18, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true" }, [h("path", { d: "M5 7h10l-1 10H6L5 7ZM3 7h14M8 7V4h4v3", stroke: "currentColor", "stroke-width": "1.6", "stroke-linecap": "round", "stroke-linejoin": "round" })]) } })
const InsertBeforeIcon = defineComponent({ render() { return h("svg", { width: 18, height: 18, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true" }, [h("rect", { x: "3", y: "3", width: "14", height: "5", rx: "1.5", stroke: "currentColor", "stroke-width": "1.5" }), h("path", { d: "M10 11v6M7 14l3-3 3 3", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })]) } })
const InsertAfterIcon = defineComponent({ render() { return h("svg", { width: 18, height: 18, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true" }, [h("rect", { x: "3", y: "12", width: "14", height: "5", rx: "1.5", stroke: "currentColor", "stroke-width": "1.5" }), h("path", { d: "M10 9V3M7 6l3 3 3-3", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })]) } })
const BackIcon = svgIcon("M10 4 4 10l6 6M4 10h12")

const deviceOptions = [
  { value: "desktop", label: "桌機", icon: DesktopIcon },
  { value: "tablet", label: "平板", icon: TabletIcon },
  { value: "mobile", label: "手機", icon: MobileIcon },
]
</script>

<style scoped>
.editor-top-toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  backdrop-filter: blur(18px);
  background: rgba(250, 251, 253, 0.96);
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.editor-top-toolbar__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  flex: 1;
}

.editor-top-toolbar__secondary {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

/* 分組容器 */
.editor-top-toolbar__group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

/* 插入列 — 把 select 和兩個按鈕放一排 */
.editor-top-toolbar__insert-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* icon-only 按鈕（裝置切換、undo/redo） */
.editor-top-toolbar__icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
}

.editor-top-toolbar__icon-btn:hover:not(:disabled) {
  background: #f0f5ff;
  color: #1d4ed8;
}

.editor-top-toolbar__icon-btn.is-active {
  background: #e8f0ff;
  color: #1d4ed8;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.14);
}

.editor-top-toolbar__icon-btn:disabled {
  opacity: 0.38;
  cursor: default;
}

/* text + icon 按鈕 */
.editor-top-toolbar__text-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 11px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 9px;
  background: #fff;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.editor-top-toolbar__text-btn:hover:not(:disabled) {
  background: #f0f5ff;
  border-color: rgba(59, 130, 246, 0.28);
  color: #1d4ed8;
}

.editor-top-toolbar__text-btn:disabled {
  opacity: 0.38;
  cursor: default;
  background: #f8fafc;
}

/* 危險按鈕 — 刪除 */
.editor-top-toolbar__text-btn--danger:hover:not(:disabled) {
  background: #fff5f5;
  border-color: rgba(239, 68, 68, 0.32);
  color: #dc2626;
}

/* 次要按鈕 — 返回/示範 */
.editor-top-toolbar__text-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: #64748b;
}

.editor-top-toolbar__text-btn--ghost:hover:not(:disabled) {
  background: #f1f5f9;
  border-color: rgba(148, 163, 184, 0.24);
  color: #334155;
}

/* insert type select */
.editor-top-toolbar__insert-type {
  width: 116px;
}

.editor-top-toolbar :deep(.el-select__wrapper),
.editor-top-toolbar :deep(.el-input__wrapper) {
  height: 34px;
  min-height: 34px;
  border-radius: 9px;
  box-shadow: none;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: #fff;
  font-size: 13px;
}

@media (max-width: 1200px) {
  .editor-top-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .editor-top-toolbar__actions {
    width: 100%;
  }
}
</style>
