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

const ui = useUiStore()
const auditStats = ref<any>(null)
const logs = ref<any[]>([])
const testingOllama = ref(false)
const testingClaude = ref(false)
const showClaudeConfirm = ref(false)

onMounted(async () => {
  try {
    const [statsRes, logsRes] = await Promise.all([
      configApi.getAuditStats(),
      configApi.getLogs('WARNING', 20),
    ])
    auditStats.value = statsRes.data
    logs.value = logsRes.data.logs || []
  } catch { /* ignore */ }
})

async function testOllama() {
  testingOllama.value = true
  try {
    const { data } = await configApi.testOllama()
    ui.showToast(data.status === 'ok' ? `Ollama OK: ${data.response}` : 'Ollama unavailable', data.status === 'ok' ? 'success' : 'error')
  } catch {
    ui.showToast('Ollama test failed', 'error')
  } finally {
    testingOllama.value = false
  }
}

function requestTestClaude() {
  showClaudeConfirm.value = true
}

async function doTestClaude() {
  showClaudeConfirm.value = false
  testingClaude.value = true
  try {
    const { data } = await configApi.testClaude()
    ui.showToast(data.status === 'ok' ? 'Claude API connected' : data.message, data.status === 'ok' ? 'success' : 'error')
  } catch {
    ui.showToast('Claude test failed', 'error')
  } finally {
    testingClaude.value = false
  }
}
</script>

<template>
  <div class="max-w-4xl space-y-6">
    <!-- LLM Status -->
    <div class="card">
      <h3 class="font-semibold mb-3">LLM Connectivity</h3>
      <div class="flex gap-3">
        <button @click="testOllama" :disabled="testingOllama" class="btn-secondary text-sm">
          {{ testingOllama ? 'Testing...' : 'Test Ollama (Local)' }}
        </button>
        <button @click="requestTestClaude" :disabled="testingClaude" class="btn-secondary text-sm">
          {{ testingClaude ? 'Testing...' : 'Test Claude API' }}
        </button>
      </div>
    </div>

    <!-- Audit Stats -->
    <div v-if="auditStats" class="card">
      <h3 class="font-semibold mb-3">Security Audit</h3>
      <div class="grid grid-cols-3 gap-4 text-center">
        <div>
          <div class="text-2xl font-bold text-primary-400">{{ auditStats.total_events }}</div>
          <div class="text-xs text-dark-500">Total Events</div>
        </div>
        <div>
          <div class="text-2xl font-bold text-dark-300">{{ auditStats.outbound_calls }}</div>
          <div class="text-xs text-dark-500">API Calls</div>
        </div>
        <div>
          <div :class="['text-2xl font-bold', auditStats.blocked_events > 0 ? 'text-red-400' : 'text-green-400']">{{ auditStats.blocked_events }}</div>
          <div class="text-xs text-dark-500">Blocked (Data Leak)</div>
        </div>
      </div>
    </div>

    <!-- Recent Logs -->
    <div class="card">
      <div class="flex items-center justify-between mb-3">
        <h3 class="font-semibold">Recent Warnings & Errors</h3>
        <span class="text-xs text-dark-500">Feed to Claude Code: curl /api/setup/logs/export</span>
      </div>
      <div v-if="logs.length" class="space-y-2 max-h-96 overflow-y-auto">
        <div v-for="(log, i) in logs" :key="i" class="text-xs font-mono p-2 bg-dark-900 rounded border border-dark-700">
          <span :class="log.level === 'ERROR' ? 'text-red-400' : 'text-yellow-400'">[{{ log.level }}]</span>
          <span class="text-dark-500 ml-1">{{ log.timestamp }}</span>
          <div class="text-dark-300 mt-1">{{ log.message }}</div>
          <div v-if="log.exception" class="text-red-400 mt-1">{{ log.exception.type }}: {{ log.exception.message }}</div>
        </div>
      </div>
      <p v-else class="text-dark-500 text-sm">No warnings or errors logged.</p>
    </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.&#10;&#10;The request goes through the Security Gateway and is logged to the audit trail."
      variant="warning"
      confirm-label="Send Test"
      @confirm="doTestClaude"
      @cancel="showClaudeConfirm = false"
    />
  </div>
</template>
