<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { api } from '@/api'

const loading = ref(true)
const checkpoints = ref<any[]>([])
const routes = ref<any[]>([])
const logs = ref<any[]>([])
const activeTab = ref<'checkpoints' | 'routes' | 'logs'>('checkpoints')

onMounted(async () => {
  await loadData()
})

async function loadData() {
  loading.value = true
  try {
    const [cpRes, routesRes, logsRes] = await Promise.all([
      api.get<any>('/patrols/checkpoints'),
      api.get<any>('/patrols/routes'),
      api.get<any>('/patrols/logs')
    ])
    checkpoints.value = cpRes.data.checkpoints || []
    routes.value = routesRes.data.routes || []
    logs.value = logsRes.data.logs || []
  } catch (e) {
    console.error(e)
  }
  loading.value = false
}

function formatTime(ts: string): string {
  return new Date(ts).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })
}
</script>

<template>
  <div class="p-6">
    <div class="flex justify-between items-center mb-6">
      <div>
        <h1 class="text-2xl font-bold">📍 Wächterkontrolle</h1>
        <p class="text-gray-500">Checkpoints, Routen & Rundgänge</p>
      </div>
    </div>

    <!-- Tabs -->
    <div class="flex space-x-1 border-b mb-6">
      <button @click="activeTab = 'checkpoints'" 
              :class="['px-4 py-2 font-medium border-b-2 -mb-px', activeTab === 'checkpoints' ? 'border-blue-600 text-blue-600' : 'border-transparent']">
        Checkpoints ({{ checkpoints.length }})
      </button>
      <button @click="activeTab = 'routes'" 
              :class="['px-4 py-2 font-medium border-b-2 -mb-px', activeTab === 'routes' ? 'border-blue-600 text-blue-600' : 'border-transparent']">
        Routen ({{ routes.length }})
      </button>
      <button @click="activeTab = 'logs'" 
              :class="['px-4 py-2 font-medium border-b-2 -mb-px', activeTab === 'logs' ? 'border-blue-600 text-blue-600' : 'border-transparent']">
        Rundgänge
      </button>
    </div>

    <div v-if="loading" class="text-center py-12">Laden...</div>

    <!-- Checkpoints -->
    <div v-else-if="activeTab === 'checkpoints'">
      <div v-if="checkpoints.length === 0" class="bg-gray-50 rounded-lg p-12 text-center text-gray-500">
        <p class="text-4xl mb-4">📍</p>
        <p>Keine Checkpoints vorhanden</p>
        <p class="text-sm mt-2">Erstelle Checkpoints mit QR-Codes für Rundgänge</p>
      </div>
      <div v-else class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div v-for="cp in checkpoints" :key="cp.id" class="bg-white rounded-lg shadow p-4">
          <div class="flex justify-between items-start">
            <div>
              <h3 class="font-semibold">{{ cp.name }}</h3>
              <p class="text-sm text-gray-500">{{ cp.object_name }}</p>
              <p class="text-xs text-gray-400 mt-1">{{ cp.location_description }}</p>
            </div>
            <span class="text-2xl">{{ cp.checkpoint_type === 'nfc' ? '📶' : '📱' }}</span>
          </div>
          <div class="mt-3 p-2 bg-gray-100 rounded text-xs font-mono break-all">
            {{ cp.code }}
          </div>
        </div>
      </div>
    </div>

    <!-- Routes -->
    <div v-else-if="activeTab === 'routes'">
      <div v-if="routes.length === 0" class="bg-gray-50 rounded-lg p-12 text-center text-gray-500">
        <p class="text-4xl mb-4">🗺️</p>
        <p>Keine Routen definiert</p>
      </div>
      <div v-else class="space-y-4">
        <div v-for="route in routes" :key="route.id" class="bg-white rounded-lg shadow p-4">
          <div class="flex justify-between items-start">
            <div>
              <h3 class="font-semibold">{{ route.name }}</h3>
              <p class="text-sm text-gray-500">{{ route.object_name }}</p>
            </div>
            <span :class="['px-2 py-1 text-xs rounded', route.is_active ? 'bg-green-100 text-green-700' : 'bg-gray-100']">
              {{ route.is_active ? 'Aktiv' : 'Inaktiv' }}
            </span>
          </div>
          <div class="mt-3 flex gap-4 text-sm text-gray-600">
            <span>📍 {{ route.checkpoint_count || 0 }} Checkpoints</span>
            <span v-if="route.time_limit_minutes">⏱️ Max {{ route.time_limit_minutes }} Min</span>
            <span v-if="route.interval_minutes">🔄 Alle {{ route.interval_minutes }} Min</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Logs -->
    <div v-else-if="activeTab === 'logs'">
      <div v-if="logs.length === 0" class="bg-gray-50 rounded-lg p-12 text-center text-gray-500">
        <p class="text-4xl mb-4">📋</p>
        <p>Keine Rundgänge heute</p>
      </div>
      <div v-else class="bg-white rounded-lg shadow overflow-hidden">
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-50">
            <tr>
              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Zeit</th>
              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Mitarbeiter</th>
              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Checkpoint</th>
              <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Objekt</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-gray-200">
            <tr v-for="log in logs" :key="log.id" class="hover:bg-gray-50">
              <td class="px-4 py-3 text-sm">{{ formatTime(log.scanned_at) }}</td>
              <td class="px-4 py-3 text-sm">{{ log.first_name }} {{ log.last_name }}</td>
              <td class="px-4 py-3 text-sm">{{ log.checkpoint_name }}</td>
              <td class="px-4 py-3 text-sm text-gray-500">{{ log.object_name }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
