<template>
  <div v-show="open" class="ai-overlay">
    <section
      ref="modalRef"
      class="ai-modal"
      role="dialog"
      aria-modal="true"
      aria-label="AI模型智能助手"
      :style="style"
    >
      <header ref="headerRef" class="ai-modal-header" @pointerdown="onHeaderPointerDown">
        <div class="ai-modal-title">AI模型智能助手</div>
        <button class="ai-close" type="button" aria-label="关闭" @click="$emit('close')">×</button>
      </header>

      <div class="ai-modal-body">
        <div v-show="screen === 'form'" class="ai-screen">
          <div class="ai-field">
            <div class="ai-label">选择模型</div>
            <div class="ai-select-wrap">
              <select class="input ai-select" aria-label="选择模型" v-model="model">
                <option value="bridge">桥梁专业</option>
                <option value="road">道路专业</option>
                <option value="tunnel">隧道专业</option>
              </select>
            </div>
          </div>

          <div class="ai-field">
            <div class="ai-label">查询类型</div>
            <div class="ai-tabs" role="tablist" aria-label="查询类型">
              <button
                v-for="t in qtypes"
                :key="t.key"
                class="ai-tab"
                type="button"
                role="tab"
                :aria-selected="qtype === t.key"
                :class="{ 'is-on': qtype === t.key }"
                @click="qtype = t.key"
              >
                {{ t.label }}
              </button>
            </div>
          </div>

          <div class="ai-search">
            <div class="ai-searchbox">
              <svg class="ai-search-icon" viewBox="0 0 24 24" aria-hidden="true"
                >path d="M10.5 3.5a7 7 0 1 1 0 14 7 7 0 0 1 0-14Zm0 2a5 5 0 1 0 0 10 5 5 0 0 0 0-10Zm8.7 12.3 1.9 1.9a1 1 0 0 1-1.4 1.4l-1.9-1.9a1 1 0 0 1 1.4-1.4Z" />
              </svg>
              <input
                ref="inputRef"
                v-model="query"
                class="ai-search-input"
                placeholder="例如：Z2-7桩基的混凝土工程量是多少？"
                autocomplete="off"
                @keydown.enter.prevent="submit"
                @keydown.esc.prevent="$emit('close')"
              />
            </div>
            <button class="ai-mic" type="button" title="语音输入" aria-label="语音输入" @click="$emit('toast', '语音输入：占位')"
            >
              <svg viewBox="0 0 24 24" aria-hidden="true"
                >path d="M12 14.2c1.6 0 2.8-1.3 2.8-2.8V6.2C14.8 4.6 13.6 3.4 12 3.4S9.2 4.6 9.2 6.2v5.2c0 1.5 1.2 2.8 2.8 2.8Zm6-2.8c0-.6.4-1 1-1s1 .4 1 1c0 3.7-2.8 6.7-6.4 7.1v2h1.8c.6 0 1 .4 1 1s-.4 1-1 1H8.6c-.6 0-1-.4-1-1s.4-1 1-1h1.8v-2C6.8 18.1 4 15.1 4 11.4c0-.6.4-1 1-1s1 .4 1 1c0 3.3 2.7 6 6 6s6-2.7 6-6Z" />
              </svg>
            </button>
            <button class="ai-inline-search" type="button" aria-label="搜索" title="搜索" @click="submit"
            >
              <svg viewBox="0 0 24 24" aria-hidden="true"
                >path d="M10.5 3.5a7 7 0 1 1 0 14 7 7 0 0 1 0-14Zm0 2a5 5 0 1 0 0 10 5 5 0 0 0 0-10Zm8.7 12.3 1.9 1.9a1 1 0 0 1-1.4 1.4l-1.9-1.9a1 1 0 0 1 1.4-1.4Z" />
              </svg>
            </button>
          </div>

          <div class="ai-history">
            <div class="ai-history-head">
              <svg class="ai-history-icon" viewBox="0 0 24 24" aria-hidden="true"
                >path d="M12 4a8 8 0 1 1-7.7 10h2.2a6 6 0 1 0 .3-3.3l1.5 1.5H3V6.5l1.7 1.7A8 8 0 0 1 12 4Zm-.2 4.1c.6 0 1 .4 1 1v3.4l2.4 1.4c.5.3.7.9.4 1.4-.3.5-.9.7-1.4.4l-2.9-1.7a1 1 0 0 1-.5-.9V9.1c0-.6.4-1 1-1Z" />
              </svg>
              <div class="ai-label">历史搜索</div>
            </div>
            <div class="ai-chips">
              <button v-for="h in history" :key="h" class="ai-chip" type="button" @click="applyHistory(h)">{{ h }}</button>
            </div>
          </div>

          <div class="ai-desc">
            <div class="ai-label">功能说明</div>
            <ul class="ai-desc-list">
              <li>支持选择专业模型进行精准查询</li>
              <li>可查询构件工程量、材料属性等信息</li>
              <li>支持挂接外部文档和施工方案</li>
              <li>基于模型查询挂接文档中的知识内容</li>
              <li>自然语言理解，智能定位模型构件</li>
            </ul>
          </div>
        </div>

        <div v-show="screen === 'result'" class="ai-screen">
          <div class="ai-result-head">
            <div class="ai-result-title">搜索结果</div>
            <button class="btn btn-ghost btn-sm" type="button" @click="screen = 'form'">返回</button>
          </div>
          <div class="ai-result-summary">{{ resultSummary }}</div>
          <div class="ai-result-card">
            <div v-for="row in resultRows" :key="row.key" class="ai-kv">
              <span>{{ row.key }}</span>
              <div v-html="row.value"></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { nextTick, ref, watch } from "vue";
import { useDraggableModal } from "../../composables/useDraggableModal.js";

const props = defineProps({
  open: Boolean,
});

const emit = defineEmits(["close", "toast"]);

const qtypes = [
  { key: "general", label: "常规查询" },
  { key: "quantity", label: "工程量查询" },
  { key: "props", label: "构件属性" },
  { key: "knowledge", label: "工程知识" },
];

const history = ["Z2-7桩基", "Z1左墩柱", "桥面"];

const model = ref("bridge");
const qtype = ref("quantity");
const query = ref("");
const screen = ref("form");
const resultSummary = ref("");
const resultRows = ref([]);
const inputRef = ref(null);

const { modalRef, headerRef, style, onHeaderPointerDown } = useDraggableModal({ x: 190, y: 140 });

watch(
  () => props.open,
  (val) => {
    if (val) {
      screen.value = "form";
      nextTick(() => inputRef.value?.focus?.());
    }
  }
);

const modelLabels = { bridge: "桥梁专业", road: "道路专业", tunnel: "隧道专业" };
const qtypeLabels = { general: "常规查询", quantity: "工程量查询", props: "构件属性", knowledge: "工程知识" };

function renderResults() {
  const now = new Date();
  const time = `${String(now.getHours()).padStart(2, "0")}:${String(now.getMinutes()).padStart(2, "0")}`;
  resultSummary.value = `模型：${modelLabels[model.value]} · 类型：${qtypeLabels[qtype.value]} · 时间：${time}`;
  resultRows.value = [
    { key: "你的问题", value: query.value },
    { key: "解析结果", value: "已理解自然语言意图（占位），可进一步解析楼层/构件类型/专业范围。" },
    {
      key: "可执行动作",
      value: ["• 定位构件 / 显隐构件（占位）", "• 视角切换（占位）", "• 进度填报 / 工程量问询（占位）"].join("<br/>"),
    },
  ];
}

function submit() {
  const q = String(query.value || "").trim();
  if (!q) {
    emit("toast", "请输入查询内容");
    return;
  }
  renderResults();
  screen.value = "result";
}

function applyHistory(h) {
  query.value = h;
  submit();
}
</script>

<style scoped>
.ai-overlay {
  position: absolute;
  inset: 0;
  z-index: 90;
  pointer-events: none;
}

.ai-modal {
  pointer-events: auto;
  position: fixed;
  left: 190px;
  top: 140px;
  width: min(820px, calc(100vw - 60px));
  max-height: min(820px, calc(100vh - 60px));
  transform: scale(1);
  transform-origin: left top;
  border-radius: 18px;
  border: 1px solid transparent;
  background:
    radial-gradient(260px 160px at 18% 0%, rgba(83, 214, 206, 0.14), transparent 62%) padding-box,
    linear-gradient(180deg, rgba(18, 26, 31, 0.94), rgba(14, 20, 25, 0.86)) padding-box,
    linear-gradient(135deg, rgba(83, 214, 206, 0.42), rgba(83, 214, 206, 0.14), rgba(0, 0, 0, 0)) border-box;
  box-shadow:
    0 32px 96px rgba(0, 0, 0, 0.48),
    0 0 28px rgba(83, 214, 206, 0.12),
    0 0 0 1px rgba(83, 214, 206, 0.12) inset,
    0 0 0 2px rgba(0, 0, 0, 0.1) inset;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  backdrop-filter: blur(18px);
}

.ai-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(520px 120px at 18% 0%, rgba(83, 214, 206, 0.14), transparent 70%),
    linear-gradient(180deg, rgba(18, 26, 31, 0.96), rgba(14, 20, 25, 0.86));
  user-select: none;
  cursor: grab;
}

.ai-modal-header:active {
  cursor: grabbing;
}

.ai-modal-title {
  font-size: 22px;
  font-weight: 950;
  letter-spacing: 0.6px;
  background: linear-gradient(90deg, rgba(43, 191, 178, 0.98), rgba(85, 224, 212, 0.92));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 24px rgba(83, 214, 206, 0.12);
}

.ai-close {
  appearance: none;
  border: 0;
  background: transparent;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 28px;
  line-height: 1;
  font-weight: 900;
  cursor: pointer;
}

.ai-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
}

.ai-modal-body {
  padding: 20px;
  overflow: auto;
}

.ai-field {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.ai-label {
  font-weight: 900;
  color: rgba(255, 255, 255, 0.66);
}

.ai-select {
  width: 100%;
  height: 52px;
  font-size: 16px;
  font-weight: 700;
  padding: 0 56px 0 12px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.86);
}

.ai-select-wrap {
  position: relative;
}

.ai-select-wrap::after {
  content: "▾";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.08);
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 900;
  pointer-events: none;
}

.ai-tabs {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.ai-tab {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.72);
  border-radius: 12px;
  padding: 12px 16px;
  min-width: 112px;
  font-weight: 900;
  cursor: pointer;
}

.ai-tab:hover {
  border-color: rgba(83, 214, 206, 0.24);
  box-shadow: 0 0 0 3px rgba(83, 214, 206, 0.1);
}

.ai-tab.is-on {
  color: rgba(255, 255, 255, 0.94);
  border-color: rgba(83, 214, 206, 0.26);
  background: linear-gradient(180deg, rgba(43, 191, 178, 0.92), rgba(43, 191, 178, 0.72));
}

.ai-search {
  display: grid;
  grid-template-columns: 1fr 56px 56px;
  gap: 14px;
  align-items: stretch;
  margin: 10px 0 14px;
}

.ai-searchbox {
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  padding: 0 16px 0 48px;
}

.ai-search-icon {
  position: absolute;
  left: 16px;
  width: 22px;
  height: 22px;
  fill: rgba(255, 255, 255, 0.5);
}

.ai-search-input {
  border: 0;
  outline: none;
  width: 100%;
  height: 56px;
  background: transparent;
  font-size: 16px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.86);
}

.ai-search-input::placeholder {
  color: rgba(255, 255, 255, 0.38);
}

.ai-mic,
.ai-inline-search {
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 18px;
  border: 0;
  background: linear-gradient(180deg, rgba(43, 191, 178, 0.92), rgba(43, 191, 178, 0.78));
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.ai-mic svg,
.ai-inline-search svg {
  width: 24px;
  height: 24px;
  fill: rgba(255, 255, 255, 0.92);
}

.ai-history {
  margin: 6px 0 14px;
}

.ai-history-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.ai-history-icon {
  width: 20px;
  height: 20px;
  fill: rgba(255, 255, 255, 0.5);
}

.ai-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ai-chip {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.14);
  color: rgba(255, 255, 255, 0.82);
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 900;
  cursor: pointer;
}

.ai-chip:hover {
  border-color: rgba(83, 214, 206, 0.22);
  box-shadow: 0 0 0 3px rgba(83, 214, 206, 0.1);
}

.ai-desc {
  margin-top: 16px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.16);
}

.ai-desc-list {
  margin: 10px 0 0;
  padding-left: 18px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 800;
  line-height: 1.55;
}

.ai-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.ai-result-title {
  font-size: 18px;
  font-weight: 950;
  color: rgba(255, 255, 255, 0.9);
}

.ai-result-summary {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 800;
  margin-bottom: 12px;
}

.ai-result-card {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  padding: 14px;
  display: grid;
  gap: 10px;
}

.ai-kv {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px;
  color: rgba(255, 255, 255, 0.86);
  font-weight: 850;
}

.ai-kv span {
  color: rgba(255, 255, 255, 0.62);
  font-weight: 900;
}

.btn {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.86);
  border-radius: 12px;
  padding: 8px 10px;
  cursor: pointer;
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.08);
}

.btn-sm {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 980px) {
  .ai-modal {
    left: 60px;
    top: 90px;
  }
}
</style>
