<script setup lang="ts">
import { ref } from "vue"
import { useI18n } from "@/utils/i18n"
import Search from "@/components/Search.vue"
import SiteButton from "@/components/SiteButton.vue"
import McpSettings from "@/components/n8n/McpSettings.vue"
import type config from "@/assets/config.json"

const logoUrl = chrome.runtime.getURL("/logo.svg")
const { t } = useI18n()

const showMcpSettings = ref(false)

defineProps<{
  recentItems: typeof config.data.popularSites
  popularItems: typeof config.data.popularSites
}>()
const emit = defineEmits({
  go: (url: string) => true,
  removeRecentItem: (url: string) => true,
})
</script>

<template>
  <div class="flex flex-col p-6 w-full max-w-md mx-auto">
    <div class="flex flex-col items-center gap-2 mx-auto mt-16 relative">
      <img :src="logoUrl" class="size-16" />
      <span class="text-2xl font-bold my-2">Anything Copilot</span>
      <!-- n8n MCP Settings toggle -->
      <button
        @click="showMcpSettings = !showMcpSettings"
        :class="[
          'absolute -right-10 top-2 p-1.5 rounded-lg transition-all',
          showMcpSettings
            ? 'bg-red-500/20 text-red-400'
            : 'hover:bg-white/10 text-white/40 hover:text-white/70',
        ]"
        title="n8n MCP Settings"
      >
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/>
          <circle cx="12" cy="12" r="3"/>
        </svg>
      </button>
    </div>

    <!-- MCP Settings Panel (slide toggle) -->
    <transition name="slide">
      <div v-if="showMcpSettings" class="my-6 rounded-xl border border-white/5 bg-black/20 overflow-hidden">
        <McpSettings />
      </div>
    </transition>

    <div class="my-12" v-if="!showMcpSettings">
      <Search @go="(url) => emit('go', url)" />
    </div>

    <div class="flex flex-wrap gap-x-3 gap-y-4 justify-center" v-if="!showMcpSettings">
      <SiteButton
        v-for="item of recentItems.slice(0, 12)"
        :key="item.url"
        :icon="item.icon"
        :title="item.title"
        :url="item.url"
        badge="remove"
        @click="emit('go', item.url)"
        @remove="emit('removeRecentItem', item.url)"
      />
    </div>

    <!-- <div class="text-center my-3">Popular</div> -->
    <div class="w-full my-6 border-b border-background-soft h-0" v-if="!showMcpSettings"></div>
    <div class="flex flex-wrap gap-x-3 gap-y-4 justify-center" v-if="!showMcpSettings">
      <SiteButton
        v-for="item of popularItems"
        :icon="item.icon"
        :title="item.title"
        :url="item.url"
        @click="emit('go', item.url)"
      />
    </div>
  </div>
</template>

<style scoped>
.slide-enter-active,
.slide-leave-active {
  transition: all 0.25s ease;
}
.slide-enter-from,
.slide-leave-to {
  opacity: 0;
  max-height: 0;
  transform: translateY(-8px);
}
.slide-enter-to,
.slide-leave-from {
  opacity: 1;
  max-height: 800px;
  transform: translateY(0);
}
</style>

