<script setup lang="ts">
import { ref } from 'vue';
import {
  NFlex,
  NText,
  NCard,
  NButton,
  NInput,
  NIcon,
  NAvatar,
  NCollapse,
  NCollapseItem,
  NDivider,
} from 'naive-ui';
import { SearchOutline, SettingsOutline } from '@vicons/ionicons5';
import { useVbenForm, useVbenModal } from '@vben/common-ui';
import { ModelCertificateFrom } from './schema';

const searchText = ref('');

const [Modal, modalApi] = useVbenModal({
  title: '编辑模型凭据',
});
const manageModels = (id: string) => {
  modalApi.open();
};

const [Form, formApi] = useVbenForm({
  showDefaultActions: false,
  ...ModelCertificateFrom,
});
</script>

<template>
  <NFlex vertical :gap="24">
    <!-- 页面标题 + 搜索 -->
    <NFlex align="center" justify="space-between">
      <NText tag="h2" style="font-size: 20px; font-weight: 600; margin: 0">模型供应商</NText>
      <NInput
        v-model:value="searchText"
        placeholder="搜索"
        size="small"
        style="width: 200px"
        clearable
        round
      >
        <template #prefix>
          <NIcon :component="SearchOutline" />
        </template>
      </NInput>
    </NFlex>

    <!-- 模型列表 -->
    <div>
      <NFlex align="center" justify="space-between" style="margin-bottom: 12px">
        <NText style="font-size: 14px; font-weight: 500">模型列表</NText>
        <NButton text size="small" type="primary">
          <template #icon>
            <NIcon :component="SettingsOutline" />
          </template>
          默认模型设置
        </NButton>
      </NFlex>

      <!-- Ollama Card (已配置) -->
      <NFlex>
        <NCard :bordered="true" size="small" style="border-radius: 10px">
          <NFlex justify="space-between" align="center">
            <NFlex align="center" :gap="12">
              <!-- Ollama Logo -->
              <NAvatar
                style="width: 40px; height: 40px"
                size="small"
                src="https://unpkg.com/@vbenjs/static-source@0.1.7/source/avatar-v1.webp"
              />
              <NText style="font-size: 14px; font-weight: 600; line-height: 1">Ollama</NText>
            </NFlex>
            <NFlex :gap="8">
              <NButton size="small" secondary @click="manageModels('ollama')">管理凭据</NButton>
            </NFlex>
          </NFlex>
          <NDivider />
          <NCollapse>
            <NCollapseItem>
              <template #header>
                <n-text type="primary"> 已连接的模型 </n-text>
              </template>
            </NCollapseItem>
          </NCollapse>
        </NCard>
      </NFlex>
    </div>
  </NFlex>
  <Modal>
    <Form />
  </Modal>
</template>

<style scoped>
.n-divider:not(.n-divider--vertical) {
  margin-top: 12px;
  margin-bottom: 12px;
}
</style>
