<template>
  <div class="assistant-fabs-layer">
    <button class="ai-fab" type="button" aria-haspopup="dialog" title="AI模型智能助手" @click="toggleAi"
    >
      <span class="sr-only">AI模型智能助手</span>
      <svg class="ai-fab-icon" viewBox="0 0 64 64" aria-hidden="true"
      >
        <defs>
          <linearGradient id="aiFabGradGlobal" x1="0" y1="0" x2="1" y2="1"
            >
              <stop offset="0" stop-color="#156cff" />
              <stop offset="1" stop-color="#2cc8ff" />
            </linearGradient>
        </defs>
        <path d="M32 8c1 0 1.8.8 1.8 1.8v4.1h6.5c7.4 0 13.4 6 13.4 13.4V40c0 7.4-6 13.4-13.4 13.4H23.7C16.3 53.4 10.3 47.4 10.3 40V27.3c0-7.4 6-13.4 13.4-13.4h6.5V9.8C30.2 8.8 31 8 32 8Zm8.3 13.6H23.7c-3.2 0-5.7 2.6-5.7 5.7V40c0 3.2 2.6 5.7 5.7 5.7h16.6c3.2 0 5.7-2.6 5.7-5.7V27.3c0-3.2-2.6-5.7-5.7-5.7Z" fill="url(#aiFabGradGlobal)" opacity="0.95" />
        <path d="M19.7 31.1h24.6c1.2 0 2.1 1 2.1 2.1v6.9c0 1.2-1 2.1-2.1 2.1H19.7c-1.2 0-2.1-1-2.1-2.1v-6.9c0-1.2 1-2.1 2.1-2.1Z" fill="rgba(255,255,255,0.88)" />
        <path d="M25.4 35.7a3.2 3.2 0 1 0 0 6.4 3.2 3.2 0 0 0 0-6.4Z" fill="#0b1b3a" opacity="0.85" />
        <path d="M38.6 35.7a3.2 3.2 0 1 0 0 6.4 3.2 3.2 0 0 0 0-6.4Z" fill="#0b1b3a" opacity="0.85" />
        <path d="M23.8 26.8h16.4" stroke="rgba(255,255,255,0.78)" stroke-width="3.2" stroke-linecap="round" />
        <path d="M20 17.8c2.8-2.8 6.7-4.6 12-4.6s9.2 1.8 12 4.6" stroke="rgba(44,200,255,0.78)" stroke-width="2.8" stroke-linecap="round" fill="none" opacity="0.8" />
        <path d="M32 6.2v5.8" stroke="rgba(44,200,255,0.78)" stroke-width="2.8" stroke-linecap="round" />
        <circle cx="32" cy="5.2" r="2.2" fill="rgba(44,200,255,0.92)" />
      </svg>
    </button>

    <button class="issue-fab" type="button" aria-haspopup="dialog" title="设计问题智能管理" @click="toggleIssue"
    >
      <span class="sr-only">设计问题智能管理</span>
      <svg class="issue-fab-icon" viewBox="0 0 64 64" aria-hidden="true"
      >
        <defs>
          <linearGradient id="issueFabGradGlobal" x1="0" y1="0" x2="1" y2="1"
            >
              <stop offset="0" stop-color="#ffcc4a" />
              <stop offset="1" stop-color="#8a5bff" />
            </linearGradient>
        </defs>
        <path d="M32 8c12.9 0 23.4 10.5 23.4 23.4S44.9 54.8 32 54.8 8.6 44.3 8.6 31.4 19.1 8 32 8Z" fill="url(#issueFabGradGlobal)" opacity="0.96" />
        <path d="M32 18.6c-5.2 0-9.4 3-9.4 8.1 0 .9.7 1.6 1.6 1.6.9 0 1.6-.7 1.6-1.6 0-3.1 2.6-4.9 6.2-4.9 3.3 0 5.7 1.6 5.7 4.2 0 2.1-1.3 3.3-3.4 4.6l-1.1.7c-2.8 1.8-4.6 3.7-4.6 7.1v.2c0 .9.7 1.6 1.6 1.6.9 0 1.6-.7 1.6-1.6v-.1c0-2.2 1.1-3.2 3.4-4.7l1.1-.7c2.8-1.8 5-3.8 5-7.4 0-4.6-4.1-7.7-8.9-7.7Z" fill="rgba(255,255,255,0.92)" />
        <circle cx="32" cy="45.2" r="2.6" fill="rgba(255,255,255,0.92)" />
        <path d="M44.9 20.6c2.6 2.4 4.2 5.8 4.2 9.7 0 7.4-6 13.4-13.4 13.4" fill="none" stroke="rgba(255,255,255,0.55)" stroke-width="3" stroke-linecap="round" />
      </svg>
    </button>

    <AiAssistantModal :open="aiOpen" @close="aiOpen = false" @toast="showToast" />
    <IssueManagerModal :open="issueOpen" @close="issueOpen = false" @toast="showToast" />

    <div class="toast" v-show="toastOpen">{{ toastText }}</div>
  </div>
</template>

<script setup>
import { onBeforeUnmount, onMounted, ref } from "vue";
import AiAssistantModal from "../assistant/AiAssistantModal.vue";
import IssueManagerModal from "../assistant/IssueManagerModal.vue";

const aiOpen = ref(false);
const issueOpen = ref(false);
const toastOpen = ref(false);
const toastText = ref("");
let toastTimer = null;

function toggleAi() {
  aiOpen.value = !aiOpen.value;
  if (aiOpen.value) issueOpen.value = false;
}

function toggleIssue() {
  issueOpen.value = !issueOpen.value;
  if (issueOpen.value) aiOpen.value = false;
}

function showToast(text) {
  toastText.value = String(text || "");
  toastOpen.value = !!toastText.value;
  if (toastTimer) clearTimeout(toastTimer);
  toastTimer = setTimeout(() => {
    toastOpen.value = false;
  }, 1400);
}

function onKeydown(e) {
  if (e.key !== "Escape") return;
  aiOpen.value = false;
  issueOpen.value = false;
}

onMounted(() => {
  window.addEventListener("keydown", onKeydown);
});

onBeforeUnmount(() => {
  if (toastTimer) clearTimeout(toastTimer);
  window.removeEventListener("keydown", onKeydown);
});
</script>

<style scoped>
.assistant-fabs-layer {
  position: absolute;
  inset: 0;
  z-index: 140;
  pointer-events: none;
}

.assistant-fabs-layer :is(button, .toast) {
  pointer-events: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ai-fab,
.issue-fab {
  position: absolute;
  top: 38px;
  width: 54px;
  height: 54px;
  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 22px 60px rgba(0, 0, 0, 0.35),
    0 0 26px rgba(83, 214, 206, 0.1),
    0 0 0 1px rgba(83, 214, 206, 0.14) inset,
    0 0 0 2px rgba(0, 0, 0, 0.06) inset;
  display: grid;
  place-items: center;
  cursor: pointer;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.ai-fab { left: 28px; }
.issue-fab { left: 88px; }

.ai-fab-icon,
.issue-fab-icon {
  width: 38px;
  height: 38px;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.22));
}

.ai-fab:hover,
.issue-fab:hover {
  transform: translateY(-1px);
  box-shadow:
    0 26px 70px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(255, 255, 255, 0.07) inset;
}

.ai-fab:active,
.issue-fab:active { transform: translateY(0); }

.toast {
  position: absolute;
  left: 50%;
  top: 74px;
  transform: translateX(-50%);
  z-index: 150;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(18, 26, 31, 0.94);
  color: rgba(255, 255, 255, 0.86);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.32);
}
</style>
