<script setup lang="ts">
import { ref } from 'vue';
import { NFlex, NText, NCard, NButton, NIcon, NSpin } from 'naive-ui';
import { ChevronDownOutline, ChevronForwardOutline } from '@vicons/ionicons5';

const installExpanded = ref(true);
</script>

<template>
  <NFlex vertical :gap="24">
    <NText tag="h2" style="font-size: 20px; font-weight: 600; margin: 0">数据来源</NText>

    <!-- Google Drive Card -->
    <NCard :bordered="true" size="small" style="border-radius: 10px">
      <!-- 顶部：logo + 名称 + 副标题 + 配置按钮 -->
      <NFlex align="center" justify="space-between">
        <NFlex align="center" :gap="12">
          <!-- Google Drive logo -->
          <div
            style="
              width: 40px;
              height: 40px;
              border-radius: 8px;
              display: flex;
              align-items: center;
              justify-content: center;
              flex-shrink: 0;
            "
          >
            <svg
              viewBox="0 0 87.3 78"
              xmlns="http://www.w3.org/2000/svg"
              style="width: 36px; height: 32px"
            >
              <path
                d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z"
                fill="#0066da"
              />
              <path
                d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z"
                fill="#00ac47"
              />
              <path
                d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z"
                fill="#ea4335"
              />
              <path
                d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z"
                fill="#00832d"
              />
              <path
                d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z"
                fill="#2684fc"
              />
              <path
                d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z"
                fill="#ffba00"
              />
            </svg>
          </div>
          <NFlex vertical :gap="3">
            <NText style="font-size: 14px; font-weight: 600; line-height: 1.4">Google Drive</NText>
            <NText depth="3" style="font-size: 12px">langgenius/google_drive</NText>
          </NFlex>
        </NFlex>
        <NButton size="small" secondary>+ 配置</NButton>
      </NFlex>

      <!-- 已连接的工作区 sub-section -->
      <div style="margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--n-border-color)">
        <NText depth="3" style="font-size: 12px; display: block; margin-bottom: 10px"
          >已连接的工作区</NText
        >
        <NText depth="3" style="font-size: 13px">请配置凭据</NText>
      </div>
    </NCard>

    <!-- 安装数据源供应商 -->
    <div>
      <NFlex
        align="center"
        justify="space-between"
        style="cursor: pointer; user-select: none; padding: 4px 0"
        @click="installExpanded = !installExpanded"
      >
        <NFlex align="center" :gap="6">
          <NIcon
            :component="installExpanded ? ChevronDownOutline : ChevronForwardOutline"
            size="16"
            style="color: #6b7280"
          />
          <NText style="font-size: 14px; font-weight: 500">安装数据源供应商</NText>
        </NFlex>
        <a
          href="javascript:void(0)"
          style="font-size: 13px; color: #3b82f6; text-decoration: none"
          @click.stop
        >
          发现更多就在 Dify 市场 ↗
        </a>
      </NFlex>
      <div v-if="installExpanded" style="padding: 20px 0; text-align: center">
        <NSpin size="small" />
      </div>
    </div>
  </NFlex>
</template>
