<template>
  <AppLayout title="Guardian Details">
    <div class="space-y-6">
      <!-- Header -->
      <div class="flex items-center justify-between">
        <div>
          <h1 class="text-3xl font-bold tracking-tight">
            {{ guardian.first_name }} {{ guardian.last_name }}
          </h1>
          <p class="text-muted-foreground">
            Guardian
          </p>
        </div>
        <div class="flex space-x-3">
          <Button variant="outline" as-child>
            <Link :href="route('guardians.edit', guardian.id)">
              <Edit class="mr-2 h-4 w-4" />
              Edit Guardian
            </Link>
          </Button>
          <Button variant="outline" as-child>
            <Link :href="route('guardians.index')">
              <ArrowLeft class="mr-2 h-4 w-4" />
              Back to Guardians
            </Link>
          </Button>
        </div>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Guardian Information -->
        <Card>
          <CardHeader>
            <CardTitle>Personal Information</CardTitle>
          </CardHeader>
          <CardContent class="space-y-4">
            <div class="grid grid-cols-1 gap-4">
              <div>
                <Label class="text-sm font-medium text-muted-foreground">Full Name</Label>
                <p class="text-sm">{{ guardian.first_name }} {{ guardian.last_name }}</p>
              </div>
              <div>
                <Label class="text-sm font-medium text-muted-foreground">Email</Label>
                <p class="text-sm">{{ guardian.user?.email || 'Not provided' }}</p>
              </div>
              <div>
                <Label class="text-sm font-medium text-muted-foreground">Phone</Label>
                <p class="text-sm">{{ guardian.phone || 'Not provided' }}</p>
              </div>
              <div>
                <Label class="text-sm font-medium text-muted-foreground">Occupation</Label>
                <p class="text-sm">{{ guardian.occupation || 'Not provided' }}</p>
              </div>
              <div>
                <Label class="text-sm font-medium text-muted-foreground">Address</Label>
                <p class="text-sm">{{ guardian.address || 'Not provided' }}</p>
              </div>
              <div>
                <Label class="text-sm font-medium text-muted-foreground">Status</Label>
                <Badge :variant="guardian.is_active ? 'default' : 'secondary'">
                  {{ guardian.is_active ? 'Active' : 'Inactive' }}
                </Badge>
              </div>
            </div>
          </CardContent>
        </Card>

        <!-- Students -->
        <Card v-if="guardian.students?.length">
          <CardHeader>
            <CardTitle>Students</CardTitle>
          </CardHeader>
          <CardContent>
            <div class="space-y-3">
              <div v-for="student in guardian.students" :key="student.id"
                   class="p-3 border rounded-lg">
                <p class="font-medium">{{ student.user?.first_name }} {{ student.user?.last_name }}</p>
                <p class="text-sm text-muted-foreground">{{ student.student_id }}</p>
                <p class="text-sm text-muted-foreground">{{ student.pivot?.relationship || 'Guardian' }}</p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  </AppLayout>
</template>

<script setup lang="ts">
import { Link } from '@inertiajs/vue3'
import AppLayout from '@/layouts/AppLayout.vue'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Label } from '@/components/ui/label'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Edit, ArrowLeft } from 'lucide-vue-next'

const props = defineProps<{
  guardian: any
}>()
</script>
