<template>
  <AppLayout title="Configuration">
    <div class="space-y-6">
      <!-- Header -->
      <div class="flex items-center justify-between">
        <div>
          <h1 class="text-3xl font-bold tracking-tight">Configuration</h1>
          <p class="text-muted-foreground">
            Manage grading rules, division rules, and system settings
          </p>
        </div>
        <div class="flex gap-2">
          <Button variant="outline" @click="$inertia.visit(route('configuration.grading-rules'))">
            <Calculator class="mr-2 h-4 w-4" />
            Grading Rules
          </Button>
          <Button variant="outline" @click="$inertia.visit(route('configuration.division-rules'))">
            <BarChart3 class="mr-2 h-4 w-4" />
            Division Rules
          </Button>
        </div>
      </div>

      <!-- Statistics -->
      <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card>
          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle class="text-sm font-medium">Grading Rules</CardTitle>
            <Calculator class="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div class="text-2xl font-bold">{{ statistics.grading_rules }}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle class="text-sm font-medium">Division Rules</CardTitle>
            <BarChart3 class="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div class="text-2xl font-bold">{{ statistics.division_rules }}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle class="text-sm font-medium">Academic Years</CardTitle>
            <Calendar class="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div class="text-2xl font-bold">{{ statistics.academic_years }}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle class="text-sm font-medium">Active Rules</CardTitle>
            <CheckCircle class="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div class="text-2xl font-bold">{{ statistics.active_rules }}</div>
          </CardContent>
        </Card>
      </div>

      <!-- Filters -->
      <Card>
        <CardHeader>
          <CardTitle>Filters</CardTitle>
        </CardHeader>
        <CardContent>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="space-y-2">
              <Label for="search">Search</Label>
              <Input
                id="search"
                v-model="filters.search"
                placeholder="Search rules..."
                @input="debouncedSearch"
              />
            </div>
            <div class="space-y-2">
              <Label for="academic-year">Academic Year</Label>
              <Select v-model="filters.academic_year_id" @update:model-value="search">
                <SelectTrigger>
                  <SelectValue placeholder="All Academic Years" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Academic Years</SelectItem>
                  <SelectItem v-for="year in academicYears" :key="year.id" :value="year.id.toString()">
                    {{ year.name }}
                  </SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div class="flex items-end">
              <Button variant="outline" @click="clearFilters" class="w-full">
                Clear Filters
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>

      <!-- Configuration Sections -->
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Grading Rules -->
        <Card>
          <CardHeader class="flex flex-row items-center justify-between">
            <CardTitle>Grading Rules</CardTitle>
            <Button size="sm" @click="$inertia.visit(route('configuration.grading-rules'))">
              View All
            </Button>
          </CardHeader>
          <CardContent>
            <div class="space-y-3">
              <div v-for="rule in gradingRules.data.slice(0, 5)" :key="rule.id" class="flex items-center justify-between p-3 border rounded-lg">
                <div>
                  <div class="font-medium">{{ rule.grade }}</div>
                  <div class="text-sm text-muted-foreground">
                    {{ rule.min_score }}% - {{ rule.max_score }}%
                  </div>
                </div>
                <Badge :variant="rule.is_passing ? 'default' : 'secondary'">
                  {{ rule.is_passing ? 'Pass' : 'Fail' }}
                </Badge>
              </div>
              <div v-if="gradingRules.data.length === 0" class="text-center py-4 text-muted-foreground">
                No grading rules found
              </div>
            </div>
          </CardContent>
        </Card>

        <!-- Division Rules -->
        <Card>
          <CardHeader class="flex flex-row items-center justify-between">
            <CardTitle>Division Rules</CardTitle>
            <Button size="sm" @click="$inertia.visit(route('configuration.division-rules'))">
              View All
            </Button>
          </CardHeader>
          <CardContent>
            <div class="space-y-3">
              <div v-for="rule in divisionRules.data.slice(0, 5)" :key="rule.id" class="flex items-center justify-between p-3 border rounded-lg">
                <div>
                  <div class="font-medium">{{ rule.division }}</div>
                  <div class="text-sm text-muted-foreground">
                    {{ rule.min_percentage }}% - {{ rule.max_percentage }}%
                  </div>
                </div>
                <Badge variant="outline">
                  {{ rule.academic_year?.name || 'N/A' }}
                </Badge>
              </div>
              <div v-if="divisionRules.data.length === 0" class="text-center py-4 text-muted-foreground">
                No division rules found
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      <!-- Quick Actions -->
      <Card>
        <CardHeader>
          <CardTitle>Quick Actions</CardTitle>
        </CardHeader>
        <CardContent>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <Button variant="outline" class="h-20 flex-col gap-2" @click="$inertia.post(route('configuration.create-default-rules'))">
              <Settings class="h-6 w-6" />
              <span>Create Default Rules</span>
            </Button>
            <Button variant="outline" class="h-20 flex-col gap-2" @click="showCopyRulesDialog = true">
              <Copy class="h-6 w-6" />
              <span>Copy Rules</span>
            </Button>
            <Button variant="outline" class="h-20 flex-col gap-2" @click="showImportDialog = true">
              <Upload class="h-6 w-6" />
              <span>Import Rules</span>
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  </AppLayout>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { router } from '@inertiajs/vue3'
import { debounce } from 'lodash'
import AppLayout from '@/layouts/AppLayout.vue'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { 
  Calculator, 
  BarChart3, 
  Calendar, 
  CheckCircle, 
  Settings, 
  Copy, 
  Upload 
} from 'lucide-vue-next'

interface Props {
  gradingRules: {
    data: Array<{
      id: number
      grade: string
      min_score: number
      max_score: number
      is_passing: boolean
      academic_year?: {
        id: number
        name: string
      }
    }>
    total: number
  }
  divisionRules: {
    data: Array<{
      id: number
      division: string
      min_percentage: number
      max_percentage: number
      academic_year?: {
        id: number
        name: string
      }
    }>
    total: number
  }
  academicYears: Array<{
    id: number
    name: string
  }>
  statistics: {
    grading_rules: number
    division_rules: number
    academic_years: number
    active_rules: number
  }
  filters: {
    search?: string
    academic_year_id?: string
  }
}

const props = defineProps<Props>()

const filters = reactive({
  search: props.filters.search || '',
  academic_year_id: props.filters.academic_year_id || 'all'
})

const showCopyRulesDialog = ref(false)
const showImportDialog = ref(false)

const search = () => {
  router.get(route('configuration.index'), {
    search: filters.search || undefined,
    academic_year_id: filters.academic_year_id !== 'all' ? filters.academic_year_id : undefined,
  }, {
    preserveState: true,
    replace: true
  })
}

const debouncedSearch = debounce(search, 300)

const clearFilters = () => {
  filters.search = ''
  filters.academic_year_id = 'all'
  search()
}
</script>
