<script setup lang="ts">
import { ref } from 'vue'
import { useUiStore } from '../../stores/ui'
import { configApi } from '../../services/configApi'
import ConfirmModal from '../ui/ConfirmModal.vue'

const ui = useUiStore()
const ollamaStatus = ref<string | null>(null)
const claudeStatus = ref<string | null>(null)

// Confirmation
const showClaudeConfirm = ref(false)

async function testOllama() {
  ollamaStatus.value = 'testing'
  try {
    const { data } = await configApi.testOllama()
    ollamaStatus.value = data.status === 'ok' ? 'ok' : 'failed'
    if (data.status !== 'ok') ui.showToast('Ollama not available. Start Ollama and load qwen2.5:32b model.', 'error')
  } catch {
    ollamaStatus.value = 'failed'
  }
}

function requestTestClaude() {
  showClaudeConfirm.value = true
}

async function doTestClaude() {
  showClaudeConfirm.value = false
  claudeStatus.value = 'testing'
  try {
    const { data } = await configApi.testClaude()
    claudeStatus.value = data.status === 'ok' ? 'ok' : 'failed'
    if (data.status !== 'ok') ui.showToast(data.message || 'Claude API error', 'error')
  } catch {
    claudeStatus.value = 'failed'
  }
}
</script>

<template>
  <div>
    <h2 class="text-lg font-semibold mb-4">LLM Configuration</h2>
    <p class="text-dark-400 text-sm mb-6">V3Q.AI uses two LLMs: Claude API (cloud, metadata-only) and a local Qwen model (data-touching).</p>

    <div class="space-y-4">
      <!-- Ollama (local — no confirmation needed) -->
      <div class="p-4 bg-dark-900 rounded-lg">
        <div class="flex items-center justify-between mb-2">
          <h3 class="font-medium">Local LLM (Ollama + Qwen 2.5)</h3>
          <button @click="testOllama" class="btn-secondary text-xs">
            {{ ollamaStatus === 'testing' ? 'Testing...' : 'Test' }}
          </button>
        </div>
        <p class="text-dark-500 text-xs mb-2">Handles: data analysis, summarization, error analysis, plausibility checks</p>
        <p class="text-dark-500 text-xs mb-1">Runs on localhost only — no data leaves your server</p>
        <div v-if="ollamaStatus === 'ok'" class="text-green-400 text-sm">Connected</div>
        <div v-else-if="ollamaStatus === 'failed'" class="text-red-400 text-sm">Not available — ensure Ollama is running with qwen2.5:32b</div>
      </div>

      <!-- Claude (internet — requires confirmation) -->
      <div class="p-4 bg-dark-900 rounded-lg">
        <div class="flex items-center justify-between mb-2">
          <h3 class="font-medium">Claude API (Anthropic)</h3>
          <button @click="requestTestClaude" class="btn-secondary text-xs">
            {{ claudeStatus === 'testing' ? 'Testing...' : 'Test' }}
          </button>
        </div>
        <p class="text-dark-500 text-xs mb-2">Handles: SQL generation from metadata only (never sees actual data)</p>
        <p class="text-dark-500 text-xs">Set ANTHROPIC_API_KEY in your .env file</p>
        <div v-if="claudeStatus === 'ok'" class="text-green-400 text-sm mt-1">Connected</div>
        <div v-else-if="claudeStatus === 'failed'" class="text-red-400 text-sm mt-1">Failed — check API key</div>
      </div>
    </div>

    <!-- Claude test confirmation -->
    <ConfirmModal
      v-if="showClaudeConfirm"
      title="Send Test Message to Claude API"
      message="This will send a short test message to the Anthropic Claude API over the internet."
      detail="Message: &quot;Respond with exactly: V3Q.AI connection successful&quot;&#10;&#10;No database metadata, data, or schema information will be sent.&#10;This is only a connectivity test."
      variant="warning"
      confirm-label="Send Test"
      @confirm="doTestClaude"
      @cancel="showClaudeConfirm = false"
    />
  </div>
</template>
