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

const status = ref<any>(null)

onMounted(async () => {
  const { data } = await configApi.getSetupStatus()
  status.value = data
})
</script>

<template>
  <div>
    <h2 class="text-lg font-semibold mb-4">System Check</h2>
    <p class="text-dark-400 text-sm mb-6">Verify everything is configured correctly before launching.</p>

    <div v-if="status" class="space-y-3">
      <div v-for="check in [
        { label: 'Database Connections', ok: status.has_connections, detail: `${status.connection_count} connections` },
        { label: 'Tables Registered', ok: status.has_tables, detail: `${status.table_count} tables` },
        { label: 'Claude API Key', ok: status.has_api_key, detail: status.has_api_key ? 'Configured' : 'Missing' },
        { label: 'Ollama (Local LLM)', ok: status.ollama_available, detail: status.ollama_available ? 'Running' : 'Not available' },
      ]" :key="check.label" class="flex items-center justify-between p-3 bg-dark-900 rounded">
        <div class="flex items-center gap-3">
          <div :class="['w-6 h-6 rounded-full flex items-center justify-center text-xs', check.ok ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400']">
            {{ check.ok ? '\u2713' : '\u2717' }}
          </div>
          <span>{{ check.label }}</span>
        </div>
        <span class="text-dark-500 text-sm">{{ check.detail }}</span>
      </div>
    </div>

    <div class="mt-6 p-4 bg-dark-900 rounded-lg">
      <p class="text-dark-400 text-sm">
        <strong>Note:</strong> You can always come back to configuration later via the Config tab.
        The system works best when all checks pass, but you can start with partial setup.
      </p>
    </div>
  </div>
</template>
