<template>
  <AppLayout>
    <template #header>
      <h2 class="font-semibold text-xl text-gray-800 leading-tight">
        Admin Dashboard
      </h2>
    </template>

    <div class="py-12">
      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <!-- Current Academic Year -->
        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg mb-6" v-if="props.current_academic_year">
          <div class="p-6 bg-white border-b border-gray-200">
            <div class="flex items-center justify-between">
              <div>
                <h3 class="text-lg font-medium text-gray-900">Current Academic Year</h3>
                <p class="text-sm text-gray-600">{{ props.current_academic_year.name }}</p>
                <p class="text-xs text-gray-500">
                  {{ formatDate(props.current_academic_year.start_date) }} - {{ formatDate(props.current_academic_year.end_date) }}
                </p>
              </div>
              <div class="text-right">
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                  Active
                </span>
              </div>
            </div>
          </div>
        </div>

        <!-- Statistics Cards -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
          <!-- Academic Statistics -->
          <StatCard
            title="Academic Years"
            :value="props.academic_stats.academic_years.total"
            :subtitle="`${props.academic_stats.academic_years.active} active`"
            icon="📚"
            color="blue"
          />
          <StatCard
            title="Classrooms"
            :value="props.academic_stats.classrooms.total"
            :subtitle="`${props.academic_stats.classrooms.active} active`"
            icon="🏫"
            color="green"
          />
          <StatCard
            title="Subjects"
            :value="props.academic_stats.subjects.total"
            :subtitle="`${props.academic_stats.subjects.with_teachers} with teachers`"
            icon="📖"
            color="purple"
          />
          <StatCard
            title="Exam Types"
            :value="props.academic_stats.exam_types.total"
            :subtitle="`${props.academic_stats.exam_types.active} active`"
            icon="📝"
            color="orange"
          />
        </div>

        <!-- User Statistics -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
          <StatCard
            title="Students"
            :value="props.user_stats.students.total"
            :subtitle="`${props.user_stats.students.enrolled} enrolled`"
            icon="👨‍🎓"
            color="indigo"
          />
          <StatCard
            title="Teachers"
            :value="props.user_stats.teachers.total"
            :subtitle="`${props.user_stats.teachers.assigned} assigned`"
            icon="👨‍🏫"
            color="pink"
          />
          <StatCard
            title="Guardians"
            :value="props.user_stats.guardians.total"
            :subtitle="`${props.user_stats.guardians.with_students} with students`"
            icon="👨‍👩‍👧‍👦"
            color="yellow"
          />
          <StatCard
            title="Total Users"
            :value="props.user_stats.users.total"
            :subtitle="`${props.user_stats.users.admins} admins`"
            icon="👥"
            color="gray"
          />
        </div>

        <!-- Enrollment & Results Overview -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
          <!-- Enrollment Statistics -->
          <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
            <div class="p-6">
              <h3 class="text-lg font-medium text-gray-900 mb-4">Enrollment Overview</h3>
              <div v-if="props.enrollment_stats.total_capacity">
                <div class="space-y-4">
                  <div class="flex justify-between items-center">
                    <span class="text-sm text-gray-600">Total Capacity</span>
                    <span class="font-medium">{{ props.enrollment_stats.total_capacity }}</span>
                  </div>
                  <div class="flex justify-between items-center">
                    <span class="text-sm text-gray-600">Total Enrolled</span>
                    <span class="font-medium">{{ props.enrollment_stats.total_enrolled }}</span>
                  </div>
                  <div class="flex justify-between items-center">
                    <span class="text-sm text-gray-600">Utilization Rate</span>
                    <span class="font-medium">{{ props.enrollment_stats.utilization_rate }}%</span>
                  </div>
                  <div class="flex justify-between items-center">
                    <span class="text-sm text-gray-600">Full Classrooms</span>
                    <span class="font-medium">{{ props.enrollment_stats.classrooms_full }}</span>
                  </div>

                  <!-- Progress Bar -->
                  <div class="mt-4">
                    <div class="flex justify-between text-sm text-gray-600 mb-1">
                      <span>Enrollment Progress</span>
                      <span>{{ props.enrollment_stats.utilization_rate }}%</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2">
                      <div
                        class="bg-blue-600 h-2 rounded-full"
                        :style="`width: ${props.enrollment_stats.utilization_rate}%`"
                      ></div>
                    </div>
                  </div>
                </div>
              </div>
              <div v-else class="text-gray-500 text-center py-4">
                No enrollment data available
              </div>
            </div>
          </div>

          <!-- Results Statistics -->
          <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
            <div class="p-6">
              <h3 class="text-lg font-medium text-gray-900 mb-4">Results Overview</h3>
              <div v-if="props.results_stats.total_results">
                <div class="space-y-4">
                  <div class="flex justify-between items-center">
                    <span class="text-sm text-gray-600">Total Results</span>
                    <span class="font-medium">{{ props.results_stats.total_results }}</span>
                  </div>
                  <div class="flex justify-between items-center">
                    <span class="text-sm text-gray-600">Passed Results</span>
                    <span class="font-medium text-green-600">{{ props.results_stats.passed_results }}</span>
                  </div>
                  <div class="flex justify-between items-center">
                    <span class="text-sm text-gray-600">Pass Rate</span>
                    <span class="font-medium" :class="props.results_stats.pass_rate >= 70 ? 'text-green-600' : 'text-red-600'">
                      {{ props.results_stats.pass_rate }}%
                    </span>
                  </div>
                  <div class="flex justify-between items-center">
                    <span class="text-sm text-gray-600">Average Marks</span>
                    <span class="font-medium">{{ Math.round(props.results_stats.average_marks) }}</span>
                  </div>

                  <!-- Pass Rate Progress Bar -->
                  <div class="mt-4">
                    <div class="flex justify-between text-sm text-gray-600 mb-1">
                      <span>Pass Rate</span>
                      <span>{{ props.results_stats.pass_rate }}%</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2">
                      <div
                        class="h-2 rounded-full"
                        :class="props.results_stats.pass_rate >= 70 ? 'bg-green-600' : 'bg-red-600'"
                        :style="`width: ${props.results_stats.pass_rate}%`"
                      ></div>
                    </div>
                  </div>
                </div>
              </div>
              <div v-else class="text-gray-500 text-center py-4">
                No results data available
              </div>
            </div>
          </div>
        </div>

        <!-- Recent Activities -->
        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
          <div class="p-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Recent Activities (Last 7 Days)</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
              <div class="text-center p-4 bg-blue-50 rounded-lg">
                <div class="text-2xl font-bold text-blue-600">{{ props.recent_activities.new_students }}</div>
                <div class="text-sm text-gray-600">New Students</div>
              </div>
              <div class="text-center p-4 bg-green-50 rounded-lg">
                <div class="text-2xl font-bold text-green-600">{{ props.recent_activities.new_enrollments }}</div>
                <div class="text-sm text-gray-600">New Enrollments</div>
              </div>
              <div class="text-center p-4 bg-purple-50 rounded-lg">
                <div class="text-2xl font-bold text-purple-600">{{ props.recent_activities.new_results }}</div>
                <div class="text-sm text-gray-600">New Results</div>
              </div>
              <div class="text-center p-4 bg-orange-50 rounded-lg">
                <div class="text-2xl font-bold text-orange-600">{{ props.recent_activities.new_teachers }}</div>
                <div class="text-sm text-gray-600">New Teachers</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </AppLayout>
</template>

<script setup lang="ts">
import { Link } from '@inertiajs/vue3'
import AppLayout from '@/layouts/AppLayout.vue'
import StatCard from '@/Components/StatCard.vue'

const props = defineProps({
  current_academic_year: {
    type: Object,
    default: () => null
  },
  academic_stats: {
    type: Object,
    default: () => ({
      academic_years: { total: 0, active: 0 },
      classrooms: { total: 0, active: 0 },
      subjects: { total: 0, with_teachers: 0 },
      exam_types: { total: 0, active: 0 }
    })
  },
  user_stats: {
    type: Object,
    default: () => ({
      students: { total: 0, enrolled: 0 },
      teachers: { total: 0, assigned: 0 },
      guardians: { total: 0, with_students: 0 },
      users: { total: 0, admins: 0 }
    })
  },
  enrollment_stats: {
    type: Object,
    default: () => ({
      total: 0,
      active: 0,
      current_year: 0,
      pending: 0,
      total_capacity: 0,
      total_enrolled: 0,
      utilization_rate: 0,
      classrooms_full: 0
    })
  },
  results_stats: {
    type: Object,
    default: () => ({
      total: 0,
      current_year: 0,
      graded: 0,
      pending: 0,
      total_results: 0,
      passed_results: 0,
      pass_rate: 0,
      average_marks: 0
    })
  },
  config_stats: {
    type: Object,
    default: () => ({
      grading_rules: 0,
      division_rules: 0,
      current_year_grading: 0,
      current_year_division: 0
    })
  },
  recent_activities: {
    type: Object,
    default: () => ({
      new_students: 0,
      new_enrollments: 0,
      new_results: 0,
      new_teachers: 0
    })
  },
})

const formatDate = (dateString) => {
  return new Date(dateString).toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'short',
    day: 'numeric'
  })
}
</script>
