<script setup lang="ts">
interface LlmProvider {
  id: number
  name: string
  slug: string
  baseUrl: string | null
  parseMode: string
  apiKeySet: boolean
  status: string
  description: string | null
  createdAt: string
  updatedAt: string
}

interface LlmModel {
  id: number
  providerId: number
  name: string
  modelId: string
  type: string
  enabled: number
  description: string | null
  maxTokens: number | null
  supportsTools: number
  createdAt: string
  updatedAt: string
}

const searchQuery = ref('')
const currentPage = ref(1)
const pageSize = ref(20)

const { data, refresh, pending } = await useHttpFetch('/api/llm/providers', {
  query: computed(() => ({
    page: currentPage.value,
    pageSize: pageSize.value,
    search: searchQuery.value || undefined,
  })),
  watch: [currentPage, pageSize, searchQuery],
})

const providerList = computed<LlmProvider[]>(() => (data.value as any)?.list ?? [])
const totalProviders = computed(() => (data.value as any)?.total ?? 0)
const totalPages = computed(() => (data.value as any)?.totalPages ?? 1)

const showProviderDrawer = ref(false)
const editingProvider = ref<LlmProvider | null>(null)
const providerForm = ref({
  name: '',
  slug: '',
  baseUrl: '',
  parseMode: 'openai-compatible' as string,
  apiKey: '',
  status: 'active' as string,
  description: '',
})
const providerLoading = ref(false)
const providerError = ref('')

const showModelDrawer = ref(false)
const editingModel = ref<LlmModel | null>(null)
const currentProviderId = ref<number | null>(null)
const modelForm = ref({
  name: '',
  modelId: '',
  type: 'text' as string,
  enabled: 1,
  description: '',
  maxTokens: null as number | null,
  supportsTools: 1,
})
const modelLoading = ref(false)
const modelError = ref('')
const availableModels = ref<{ id: string; name: string }[]>([])
const availableModelsLoading = ref(false)
const modelIdInputMode = ref<'select' | 'input'>('select')

watch(() => modelForm.value.modelId, (newVal) => {
  if (!editingModel.value && modelIdInputMode.value === 'select' && newVal) {
    const selected = availableModels.value.find(m => m.id === newVal)
    if (selected && !modelForm.value.name) {
      modelForm.value.name = selected.name
    }
  }
})

const showDeleteDialog = ref(false)
const deleteTarget = ref<{ type: 'provider' | 'model'; id: number; name: string } | null>(null)
const deleteLoading = ref(false)

const expandedProviderId = ref<number | null>(null)
const providerModels = ref<Map<number, LlmModel[]>>(new Map())
const modelsLoading = ref(false)

function showToast(message: string, type: 'success' | 'error' = 'success') {
  if (import.meta.client) {
    const event = new CustomEvent('toast', { detail: { message, type } })
    window.dispatchEvent(event)
  }
}

function openCreateProvider() {
  editingProvider.value = null
  providerForm.value = { name: '', slug: '', baseUrl: '', parseMode: 'openai-compatible', apiKey: '', status: 'active', description: '' }
  providerError.value = ''
  showProviderDrawer.value = true
}

function openEditProvider(p: LlmProvider) {
  editingProvider.value = p
  providerForm.value = {
    name: p.name,
    slug: p.slug,
    baseUrl: p.baseUrl || '',
    parseMode: p.parseMode,
    apiKey: '',
    status: p.status,
    description: p.description || '',
  }
  providerError.value = ''
  showProviderDrawer.value = true
}

function closeProviderDrawer() {
  showProviderDrawer.value = false
  editingProvider.value = null
}

async function handleProviderSave() {
  providerError.value = ''
  if (!providerForm.value.name || !providerForm.value.slug) {
    providerError.value = '供应商名称和标识不能为空'
    return
  }
  providerLoading.value = true
  try {
    if (editingProvider.value) {
      await $fetch(`/api/llm/providers/${editingProvider.value.id}` as string, {
        method: 'PUT' as const,
        body: {
          ...providerForm.value,
          apiKey: providerForm.value.apiKey || '__unchanged__',
        },
      })
      showToast('供应商更新成功')
    } else {
      await $fetch('/api/llm/providers', {
        method: 'POST',
        body: providerForm.value,
      })
      showToast('供应商创建成功')
    }
    closeProviderDrawer()
    await refresh()
  } catch (err: any) {
    providerError.value = err?.data?.statusMessage || '操作失败'
  } finally {
    providerLoading.value = false
  }
}

async function toggleProviderStatus(p: LlmProvider) {
  const newStatus = p.status === 'active' ? 'disabled' : 'active'
  try {
    await $fetch(`/api/llm/providers/${p.id}` as string, {
      method: 'PUT' as const,
      body: { status: newStatus },
    })
    showToast(`供应商已${newStatus === 'active' ? '启用' : '禁用'}`)
    await refresh()
  } catch (err: any) {
    showToast(err?.data?.statusMessage || '操作失败', 'error')
  }
}

async function loadModels(providerId: number) {
  if (expandedProviderId.value === providerId) {
    expandedProviderId.value = null
    return
  }
  expandedProviderId.value = providerId
  modelsLoading.value = true
  try {
    const res = await $fetch(`/api/llm/models/${providerId}`)
    providerModels.value.set(providerId, (res as any)?.data ?? [])
  } catch {
    providerModels.value.set(providerId, [])
  } finally {
    modelsLoading.value = false
  }
}

async function fetchAvailableModels(providerId: number) {
  availableModelsLoading.value = true
  availableModels.value = []
  try {
    const res = await $fetch(`/api/llm/providers/${providerId}/models`)
    const models = (res as any)?.data ?? []
    if (models.length > 0) {
      availableModels.value = models
      modelIdInputMode.value = 'select'
    } else {
      modelIdInputMode.value = 'input'
    }
  } catch {
    modelIdInputMode.value = 'input'
  } finally {
    availableModelsLoading.value = false
  }
}

function openCreateModel(providerId: number) {
  currentProviderId.value = providerId
  editingModel.value = null
  modelForm.value = { name: '', modelId: '', type: 'text', enabled: 1, description: '', maxTokens: null, supportsTools: 1 }
  modelError.value = ''
  showModelDrawer.value = true
  fetchAvailableModels(providerId)
}

function openEditModel(m: LlmModel) {
  currentProviderId.value = m.providerId
  editingModel.value = m
  modelForm.value = {
    name: m.name,
    modelId: m.modelId,
    type: m.type,
    enabled: m.enabled,
    description: m.description || '',
    maxTokens: m.maxTokens,
    supportsTools: m.supportsTools ?? 1,
  }
  modelError.value = ''
  showModelDrawer.value = true
}

function closeModelDrawer() {
  showModelDrawer.value = false
  editingModel.value = null
  currentProviderId.value = null
}

async function handleModelSave() {
  modelError.value = ''
  if (!modelForm.value.name || !modelForm.value.modelId) {
    modelError.value = '模型名称和模型ID不能为空'
    return
  }
  modelLoading.value = true
  try {
    if (editingModel.value) {
      await $fetch(`/api/llm/models/detail/${editingModel.value.id}` as string, {
        method: 'PUT' as const,
        body: modelForm.value,
      })
      showToast('模型更新成功')
    } else {
      await $fetch(`/api/llm/models/${currentProviderId.value}` as string, {
        method: 'POST' as const,
        body: modelForm.value,
      })
      showToast('模型创建成功')
    }
    closeModelDrawer()
    if (expandedProviderId.value) {
      await loadModels(expandedProviderId.value)
    }
  } catch (err: any) {
    modelError.value = err?.data?.statusMessage || '操作失败'
  } finally {
    modelLoading.value = false
  }
}

async function toggleModelEnabled(m: LlmModel) {
  const newEnabled = m.enabled ? 0 : 1
  try {
    await $fetch(`/api/llm/models/detail/${m.id}` as string, {
      method: 'PUT' as const,
      body: { enabled: newEnabled },
    })
    showToast(`模型已${newEnabled ? '启用' : '禁用'}`)
    if (expandedProviderId.value) {
      await loadModels(expandedProviderId.value)
    }
  } catch (err: any) {
    showToast(err?.data?.statusMessage || '操作失败', 'error')
  }
}

function confirmDelete(type: 'provider' | 'model', id: number, name: string) {
  deleteTarget.value = { type, id, name }
  showDeleteDialog.value = true
}

async function handleDelete() {
  if (!deleteTarget.value) return
  deleteLoading.value = true
  try {
    if (deleteTarget.value.type === 'provider') {
      await $fetch(`/api/llm/providers/${deleteTarget.value.id}` as string, { method: 'DELETE' as const })
      if (expandedProviderId.value === deleteTarget.value.id) {
        expandedProviderId.value = null
      }
      await refresh()
    } else {
      await $fetch(`/api/llm/models/detail/${deleteTarget.value.id}` as string, { method: 'DELETE' as const })
      if (expandedProviderId.value) {
        await loadModels(expandedProviderId.value)
      }
    }
    showToast('删除成功')
    showDeleteDialog.value = false
  } catch (err: any) {
    showToast(err?.data?.statusMessage || '删除失败', 'error')
  } finally {
    deleteLoading.value = false
  }
}

function goToPage(page: number) {
  if (page < 1 || page > totalPages.value) return
  currentPage.value = page
}

function formatDate(date: string) {
  if (!date) return '-'
  return new Intl.DateTimeFormat('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
  }).format(new Date(date))
}

function parseModeLabel(mode: string) {
  const map: Record<string, string> = { 'openai': 'OpenAI 原生', 'openai-compatible': 'OpenAI 兼容' }
  return map[mode] ?? mode
}

function modelTypeLabel(type: string) {
  const map: Record<string, string> = { text: '文本', vision: '视觉', multimodal: '多模态' }
  return map[type] ?? type
}

function modelTypeClass(type: string) {
  const map: Record<string, string> = { text: 'type-text', vision: 'type-vision', multimodal: 'type-multimodal' }
  return map[type] ?? 'type-text'
}

function statusClass(status: string) {
  return status === 'active' ? 'status-active' : 'status-disabled'
}

function statusLabel(status: string) {
  return status === 'active' ? '启用' : '禁用'
}

const currentModels = computed(() => {
  if (!expandedProviderId.value) return []
  return providerModels.value.get(expandedProviderId.value) ?? []
})
</script>

<template>
  <div class="llm-config-page">
    <header class="page-header">
      <div class="header-left">
        <h1 class="page-title">大模型配置</h1>
        <div class="stats-grid">
          <div class="stat-card">
            <div class="stat-value">{{ totalProviders }}</div>
            <div class="stat-label">供应商总数</div>
          </div>
        </div>
      </div>
    </header>

    <div class="filter-bar">
      <div class="filter-left">
        <div class="search-box">
          <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
            <circle cx="11" cy="11" r="8" />
            <path d="M21 21l-4.35-4.35" stroke-linecap="round" />
          </svg>
          <input
            v-model="searchQuery"
            type="text"
            placeholder="搜索供应商名称"
            class="search-input"
            @keyup.enter="currentPage = 1"
          />
        </div>
      </div>
      <button class="btn-primary" @click="openCreateProvider">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <line x1="12" y1="5" x2="12" y2="19" stroke-linecap="round" />
          <line x1="5" y1="12" x2="19" y2="12" stroke-linecap="round" />
        </svg>
        新增供应商
      </button>
    </div>

    <div class="provider-list">
      <div v-if="pending" class="empty-state">加载中...</div>
      <div v-else-if="providerList.length === 0" class="empty-state">暂无供应商，点击上方按钮添加</div>

      <div
        v-for="p in providerList"
        :key="p.id"
        class="provider-card"
        :class="{ expanded: expandedProviderId === p.id }"
      >
        <div class="provider-header" @click="loadModels(p.id)">
          <div class="provider-info">
            <div class="provider-name-row">
              <span class="provider-name">{{ p.name }}</span>
              <span :class="['status-badge', statusClass(p.status)]">{{ statusLabel(p.status) }}</span>
              <span class="parse-mode-badge">{{ parseModeLabel(p.parseMode) }}</span>
            </div>
            <div class="provider-meta">
              <span class="meta-item">
                <Icon name="lucide:hash" />
                {{ p.slug }}
              </span>
              <span v-if="p.baseUrl" class="meta-item">
                <Icon name="lucide:link" />
                {{ p.baseUrl }}
              </span>
              <span class="meta-item">
                <Icon name="lucide:key" />
                {{ p.apiKeySet ? '已配置' : '未配置' }}
              </span>
            </div>
          </div>
          <div class="provider-actions" @click.stop>
            <button class="action-btn" @click="toggleProviderStatus(p)">
              {{ p.status === 'active' ? '禁用' : '启用' }}
            </button>
            <button class="action-btn" @click="openEditProvider(p)">编辑</button>
            <button class="action-btn action-btn-danger" @click="confirmDelete('provider', p.id, p.name)">删除</button>
            <button class="expand-btn" :class="{ rotated: expandedProviderId === p.id }" @click="loadModels(p.id)">
              <Icon name="lucide:chevron-down" />
            </button>
          </div>
        </div>

        <Transition name="expand">
          <div v-if="expandedProviderId === p.id" class="models-section">
            <div class="models-header">
              <span class="models-title">模型列表</span>
              <button class="btn-sm-primary" @click="openCreateModel(p.id)">
                <Icon name="lucide:plus" />
                添加模型
              </button>
            </div>

            <div v-if="modelsLoading" class="empty-state">加载中...</div>
            <div v-else-if="currentModels.length === 0" class="empty-state-sm">暂无模型</div>

            <div v-else class="models-grid">
              <div v-for="m in currentModels" :key="m.id" class="model-card">
                <div class="model-header">
                  <span class="model-name">{{ m.name }}</span>
                  <span :class="['model-type-badge', modelTypeClass(m.type)]">{{ modelTypeLabel(m.type) }}</span>
                </div>
                <div class="model-meta">
                  <span class="meta-item">
                    <Icon name="lucide:cpu" />
                    {{ m.modelId }}
                  </span>
                  <span v-if="m.maxTokens" class="meta-item">
                    <Icon name="lucide:arrow-up-right" />
                    {{ m.maxTokens.toLocaleString() }} tokens
                  </span>
                </div>
                <div class="model-actions">
                  <button
                    class="action-btn-sm"
                    :class="m.enabled ? 'action-btn-disable' : 'action-btn-enable'"
                    @click="toggleModelEnabled(m)"
                  >
                    {{ m.enabled ? '禁用' : '启用' }}
                  </button>
                  <button class="action-btn-sm" @click="openEditModel(m)">编辑</button>
                  <button class="action-btn-sm action-btn-danger" @click="confirmDelete('model', m.id, m.name)">删除</button>
                </div>
              </div>
            </div>
          </div>
        </Transition>
      </div>
    </div>

    <div v-if="totalPages > 1" class="pagination">
      <div class="page-info">共 {{ totalProviders }} 条，第 {{ currentPage }}/{{ totalPages }} 页</div>
      <div class="page-buttons">
        <button class="page-btn" :disabled="currentPage === 1" @click="goToPage(currentPage - 1)">上一页</button>
        <button class="page-btn" :disabled="currentPage === totalPages" @click="goToPage(currentPage + 1)">下一页</button>
      </div>
    </div>

    <Teleport to="body">
      <Transition name="slide-right">
        <div v-if="showProviderDrawer" class="drawer-overlay" @click.self="closeProviderDrawer">
          <div class="drawer-panel">
            <div class="drawer-header">
              <h3 class="drawer-title">{{ editingProvider ? '编辑供应商' : '新增供应商' }}</h3>
              <button class="drawer-close" @click="closeProviderDrawer">
                <Icon name="lucide:x" />
              </button>
            </div>
            <form class="drawer-body" @submit.prevent="handleProviderSave">
              <div v-if="providerError" class="form-error">{{ providerError }}</div>

              <div class="form-group">
                <label class="form-label">供应商名称 <span class="required">*</span></label>
                <input v-model="providerForm.name" type="text" class="form-input" placeholder="如：OpenAI" />
              </div>

              <div class="form-group">
                <label class="form-label">标识 (slug) <span class="required">*</span></label>
                <input v-model="providerForm.slug" type="text" class="form-input" placeholder="如：openai，仅英文小写" />
              </div>

              <div class="form-group">
                <label class="form-label">Base URL</label>
                <input v-model="providerForm.baseUrl" type="text" class="form-input" placeholder="如：https://api.openai.com/v1" />
              </div>

              <div class="form-group">
                <label class="form-label">解析方式</label>
                <select v-model="providerForm.parseMode" class="form-select">
                  <option value="openai-compatible">OpenAI 兼容</option>
                  <option value="openai">OpenAI 原生</option>
                </select>
              </div>

              <div class="form-group">
                <label class="form-label">API Key {{ editingProvider ? '（留空则不修改）' : '' }}</label>
                <input v-model="providerForm.apiKey" type="password" class="form-input" placeholder="sk-..." />
              </div>

              <div class="form-group">
                <label class="form-label">状态</label>
                <select v-model="providerForm.status" class="form-select">
                  <option value="active">启用</option>
                  <option value="disabled">禁用</option>
                </select>
              </div>

              <div class="form-group">
                <label class="form-label">描述</label>
                <textarea v-model="providerForm.description" class="form-textarea" rows="3" placeholder="供应商描述（选填）"></textarea>
              </div>

              <div class="drawer-footer">
                <button type="button" class="btn-secondary" @click="closeProviderDrawer">取消</button>
                <button type="submit" class="btn-primary" :disabled="providerLoading">
                  {{ providerLoading ? '保存中...' : '保存' }}
                </button>
              </div>
            </form>
          </div>
        </div>
      </Transition>
    </Teleport>

    <Teleport to="body">
      <Transition name="slide-right">
        <div v-if="showModelDrawer" class="drawer-overlay" @click.self="closeModelDrawer">
          <div class="drawer-panel">
            <div class="drawer-header">
              <h3 class="drawer-title">{{ editingModel ? '编辑模型' : '新增模型' }}</h3>
              <button class="drawer-close" @click="closeModelDrawer">
                <Icon name="lucide:x" />
              </button>
            </div>
            <form class="drawer-body" @submit.prevent="handleModelSave">
              <div v-if="modelError" class="form-error">{{ modelError }}</div>

              <div class="form-group">
                <label class="form-label">模型名称 <span class="required">*</span></label>
                <input v-model="modelForm.name" type="text" class="form-input" placeholder="如：GPT-4o" />
              </div>

              <div class="form-group">
                <label class="form-label">模型 ID <span class="required">*</span></label>
                <div v-if="editingModel" class="form-input-static">{{ modelForm.modelId }}</div>
                <template v-else>
                  <div v-if="availableModelsLoading" class="form-hint">正在获取可用模型列表...</div>
                  <div v-else-if="modelIdInputMode === 'select' && availableModels.length > 0" class="model-id-combo">
                    <select v-model="modelForm.modelId" class="form-select">
                      <option value="" disabled>请选择模型</option>
                      <option v-for="m in availableModels" :key="m.id" :value="m.id">{{ m.name }}</option>
                    </select>
                    <button type="button" class="toggle-input-btn" @click="modelIdInputMode = 'input'">手动输入</button>
                  </div>
                  <div v-else class="model-id-combo">
                    <input v-model="modelForm.modelId" type="text" class="form-input" placeholder="如：gpt-4o" />
                    <button v-if="availableModels.length > 0" type="button" class="toggle-input-btn" @click="modelIdInputMode = 'select'">从列表选择</button>
                  </div>
                </template>
              </div>

              <div class="form-group">
                <label class="form-label">模型类型</label>
                <select v-model="modelForm.type" class="form-select">
                  <option value="text">文本</option>
                  <option value="vision">视觉</option>
                  <option value="multimodal">多模态</option>
                </select>
              </div>

              <div class="form-group">
                <label class="form-label">最大 Tokens</label>
                <input v-model.number="modelForm.maxTokens" type="number" class="form-input" placeholder="如：128000" />
              </div>

              <div class="form-group">
                <label class="form-label">支持工具调用</label>
                <select v-model.number="modelForm.supportsTools" class="form-select">
                  <option :value="1">支持</option>
                  <option :value="0">不支持</option>
                </select>
                <small class="form-hint">不支持工具调用的模型（如 VL 多模态模型）将不传 tools 参数</small>
              </div>

              <div class="form-group">
                <label class="form-label">描述</label>
                <textarea v-model="modelForm.description" class="form-textarea" rows="3" placeholder="模型描述（选填）"></textarea>
              </div>

              <div class="drawer-footer">
                <button type="button" class="btn-secondary" @click="closeModelDrawer">取消</button>
                <button type="submit" class="btn-primary" :disabled="modelLoading">
                  {{ modelLoading ? '保存中...' : '保存' }}
                </button>
              </div>
            </form>
          </div>
        </div>
      </Transition>
    </Teleport>

    <Teleport to="body">
      <div v-if="showDeleteDialog" class="modal-overlay" @click.self="showDeleteDialog = false">
        <div class="confirm-dialog">
          <div class="confirm-header">
            <h3 class="confirm-title">确认删除</h3>
          </div>
          <div class="confirm-body">
            <p>确定删除「{{ deleteTarget?.name }}」？{{ deleteTarget?.type === 'provider' ? '该供应商下的所有模型也将被删除。' : '' }}此操作不可撤销。</p>
          </div>
          <div class="confirm-footer">
            <button class="btn-secondary" @click="showDeleteDialog = false">取消</button>
            <button class="btn-error" :disabled="deleteLoading" @click="handleDelete">
              {{ deleteLoading ? '删除中...' : '确认删除' }}
            </button>
          </div>
        </div>
      </div>
    </Teleport>
  </div>
</template>

<style scoped>
.llm-config-page {
  padding: 40px;
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 32px;
}

.header-left {
  flex: 1;
}

.page-title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  color: var(--color-ink);
  letter-spacing: -0.3px;
  margin: 0 0 20px 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 600px;
}

.stat-card {
  background: var(--color-surface-card);
  border-radius: 12px;
  padding: 16px 20px;
}

.stat-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  color: var(--color-ink);
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 13px;
  color: var(--color-muted);
  font-weight: 500;
}

.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.filter-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--color-muted);
  pointer-events: none;
}

.search-input {
  padding: 8px 12px 8px 36px;
  background: var(--color-surface-card);
  border: 1px solid var(--color-hairline);
  border-radius: 8px;
  font-size: 13px;
  color: var(--color-ink);
  width: 240px;
  transition: all 0.15s ease;
}

.search-input::placeholder {
  color: var(--color-muted);
}

.search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(204, 120, 92, 0.15);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-primary:hover {
  background: var(--color-primary-active);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary svg {
  width: 14px;
  height: 14px;
}

.provider-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--color-muted);
  font-size: 14px;
}

.empty-state-sm {
  text-align: center;
  padding: 24px 20px;
  color: var(--color-muted);
  font-size: 13px;
}

.provider-card {
  background: var(--color-surface-card);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.15s ease;
}

.provider-card:hover {
  box-shadow: 0 1px 3px rgba(20, 20, 19, 0.08);
}

.provider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  cursor: pointer;
}

.provider-info {
  flex: 1;
  min-width: 0;
}

.provider-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.provider-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-ink);
}

.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 500;
}

.status-active {
  background: rgba(93, 184, 166, 0.15);
  color: var(--color-accent-teal);
}

.status-disabled {
  background: var(--color-hairline);
  color: var(--color-muted);
}

.parse-mode-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 500;
  background: rgba(204, 120, 92, 0.15);
  color: var(--color-primary);
}

.provider-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--color-muted);
}

.meta-item :deep(svg) {
  width: 13px;
  height: 13px;
}

.provider-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.action-btn {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-muted);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.action-btn:hover {
  background: var(--color-hairline);
  color: var(--color-ink);
}

.action-btn-danger:hover {
  background: rgba(198, 69, 69, 0.1);
  color: var(--color-error);
}

.expand-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: var(--color-muted);
  transition: all 0.2s ease;
}

.expand-btn :deep(svg) {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.expand-btn.rotated :deep(svg) {
  transform: rotate(180deg);
}

.expand-btn:hover {
  background: var(--color-hairline);
}

.models-section {
  padding: 0 20px 16px;
  border-top: 1px solid var(--color-hairline);
}

.models-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
}

.models-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.btn-sm-primary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-sm-primary:hover {
  background: var(--color-primary-active);
}

.btn-sm-primary :deep(svg) {
  width: 13px;
  height: 13px;
}

.models-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.model-card {
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: 8px;
  padding: 14px 16px;
}

.model-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.model-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-ink);
}

.model-type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 500;
}

.type-text {
  background: rgba(93, 184, 166, 0.15);
  color: var(--color-accent-teal);
}

.type-vision {
  background: rgba(232, 165, 90, 0.15);
  color: var(--color-accent-amber);
}

.type-multimodal {
  background: rgba(204, 120, 92, 0.15);
  color: var(--color-primary);
}

.model-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.model-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.action-btn-sm {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-muted);
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.action-btn-sm:hover {
  background: var(--color-hairline);
  color: var(--color-ink);
}

.action-btn-sm.action-btn-danger:hover {
  background: rgba(198, 69, 69, 0.1);
  color: var(--color-error);
}

.action-btn-enable {
  color: var(--color-accent-teal);
}

.action-btn-enable:hover {
  background: rgba(93, 184, 166, 0.1);
}

.action-btn-disable {
  color: var(--color-muted);
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  margin-top: 12px;
}

.page-info {
  font-size: 13px;
  color: var(--color-muted);
}

.page-buttons {
  display: flex;
  gap: 8px;
}

.page-btn {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-ink);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-hairline);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.page-btn:hover:not(:disabled) {
  background: var(--color-hairline);
}

.page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 200;
}

.drawer-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 480px;
  max-width: 100%;
  background: var(--color-canvas);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-hairline);
}

.drawer-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-ink);
  margin: 0;
}

.drawer-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: var(--color-muted);
  transition: all 0.15s ease;
}

.drawer-close:hover {
  background: var(--color-surface-soft);
  color: var(--color-ink);
}

.drawer-close :deep(svg) {
  width: 18px;
  height: 18px;
}

.drawer-body {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

.drawer-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid var(--color-hairline);
  margin-top: auto;
}

.form-error {
  padding: 10px 14px;
  background: rgba(198, 69, 69, 0.1);
  border: 1px solid rgba(198, 69, 69, 0.2);
  border-radius: 6px;
  color: var(--color-error);
  font-size: 13px;
  margin-bottom: 16px;
}

.form-group {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-body-strong);
  margin-bottom: 6px;
}

.required {
  color: var(--color-error);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 10px 14px;
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: 8px;
  font-size: 14px;
  color: var(--color-ink);
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.form-textarea {
  resize: vertical;
  font-family: inherit;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(204, 120, 92, 0.15);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-muted);
}

.form-input-static {
  padding: 10px 14px;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-hairline);
  border-radius: 8px;
  font-size: 14px;
  color: var(--color-muted);
}

.form-hint {
  font-size: 13px;
  color: var(--color-muted);
  padding: 8px 0;
}

.model-id-combo {
  display: flex;
  gap: 8px;
  align-items: center;
}

.model-id-combo .form-select,
.model-id-combo .form-input {
  flex: 1;
  min-width: 0;
}

.toggle-input-btn {
  flex-shrink: 0;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-primary);
  background: rgba(204, 120, 92, 0.1);
  border: 1px solid rgba(204, 120, 92, 0.2);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.toggle-input-btn:hover {
  background: rgba(204, 120, 92, 0.2);
}

.btn-secondary {
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-body-strong);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-hairline);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-secondary:hover {
  background: var(--color-hairline);
}

.btn-error {
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  color: white;
  background: var(--color-error);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-error:hover {
  background: #b33d3d;
}

.btn-error:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
}

.confirm-dialog {
  background: var(--color-canvas);
  border-radius: 12px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.confirm-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-hairline);
}

.confirm-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-ink);
  margin: 0;
}

.confirm-body {
  padding: 24px;
}

.confirm-body p {
  margin: 0;
  font-size: 14px;
  color: var(--color-body-strong);
  line-height: 1.5;
}

.confirm-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 16px 24px;
  border-top: 1px solid var(--color-hairline);
}

.expand-enter-active,
.expand-leave-active {
  transition: all 0.2s ease;
  overflow: hidden;
}

.expand-enter-from,
.expand-leave-to {
  opacity: 0;
  max-height: 0;
}

.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 0.3s ease;
}

.slide-right-enter-from,
.slide-right-leave-to {
  opacity: 0;
}

@media (max-width: 768px) {
  .llm-config-page {
    padding: 24px;
  }

  .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .search-input {
    width: 100%;
  }

  .drawer-panel {
    width: 100%;
  }

  .models-grid {
    grid-template-columns: 1fr;
  }

  .provider-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .provider-actions {
    width: 100%;
    justify-content: flex-end;
  }
}
</style>
