"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { AuthGuard } from "@/components/auth-guard"
import { ObserverLayout } from "@/components/observer-layout"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Input } from "@/components/ui/input"
import { Checkbox } from "@/components/ui/checkbox"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { CheckCircle2, CircleX } from "lucide-react"
import { getAuthToken } from "@/lib/auth"
import { Badge } from "@/components/ui/badge"

interface Student {
  id: number
  nom: string
  mtr: string
  classe: string
  option: string
}

interface AttendanceSubmission {
  studentId: number
  status: "present" | "absent"
  hours_absent?: number
}

interface Class {
  id: number
  name: string
}

export default function AttendancePage() {
  const [selectedClasse, setSelectedClasse] = useState("")
  const [selectedOption, setSelectedOption] = useState("")
  const [selectedHour, setSelectedHour] = useState("")
  const [students, setStudents] = useState<Student[]>([])
  const [attendance, setAttendance] = useState<Record<number, boolean>>({})
  const [loading, setLoading] = useState(false)
  const [success, setSuccess] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [classes, setClasses] = useState<Class[]>([])
  const router = useRouter()

  // Date par défaut (aujourd'hui)
  const date = new Date().toISOString().split("T")[0]
  const options = ["Arabe", "bilingue", "Français"]

  // Heures (créneaux)
  const hours = Array.from({ length: 3 }, (_, i) => {
    const start = (i * 2) + 8
    return { value: `${start}:00:00`, label: `${start}h - ${start + 2}h` }
  })

  // Récupérer toutes les classes
  useEffect(() => {
    const fetchClasses = async () => {
      try {
        const token = getAuthToken()
        const response = await fetch("/api/classes", {
          headers: { Authorization: `Bearer ${token}` },
        })
        if (!response.ok) throw new Error("Échec du chargement des classes")
        const data = await response.json()
        setClasses(data)
      } catch {
        setError("Échec du chargement des classes")
      }
    }
    fetchClasses()
  }, [])

  // Vérifier si la présence existe déjà
  const checkClassStatus = async (classe: string, hour: string) => {
    try {
      const token = getAuthToken()
      const response = await fetch("/api/attendance/class-status", {
        headers: { Authorization: `Bearer ${token}` },
      })
      if (!response.ok) throw new Error("Échec de la récupération du statut de la classe")
      const data = await response.json()

      const classInfo = data.find((item: any) => item.class === classe)
      if (!classInfo) return false

      const slotName =
        hour === "8:00:00" || hour === "08:00:00"
          ? "08:00-10:00"
          : hour === "10:00:00"
          ? "10:00-12:00"
          : "12:00-14:00"

      const slot = classInfo.status.find((s: any) => s.name === slotName)
      return slot?.checked === "Oui"
    } catch {
      return false
    }
  }

  // Récupérer les étudiants
  const fetchStudents = async () => {
    if (!selectedClasse || !selectedOption || !selectedHour) {
      setError("Veuillez sélectionner une classe, une option et une heure")
      return
    }

    // Vérifier si la présence existe déjà
    const alreadyRecorded = await checkClassStatus(selectedClasse, selectedHour)
    if (alreadyRecorded) {
      setError("Vous ne pouvez pas sélectionner une classe qui a déjà une présence enregistrée pour l'heure sélectionnée.")
      return
    }

    try {
      setLoading(true)
      const token = getAuthToken()
      const response = await fetch(
        `/api/students/filter?classe=${encodeURIComponent(selectedClasse)}&option=${encodeURIComponent(selectedOption)}`,
        { headers: { Authorization: `Bearer ${token}` } }
      )

      if (!response.ok) throw new Error("Échec du chargement des étudiants")

      const data: Student[] = await response.json()
      setStudents(data)

      // Initialiser tous les étudiants comme présents
      const initial: Record<number, boolean> = {}
      data.forEach((s) => (initial[s.id] = true))
      setAttendance(initial)
      setError(null)
    } catch (err: any) {
      setError(err.message || "Échec du chargement des étudiants")
    } finally {
      setLoading(false)
    }
  }

  // Recharger les étudiants lors du changement des filtres
  useEffect(() => {
    if (selectedClasse && selectedOption && selectedHour) {
      fetchStudents()
    }
  }, [selectedClasse, selectedOption, selectedHour])

  const handleToggleAttendance = (id: number) => {
    setAttendance((prev) => ({ ...prev, [id]: !prev[id] }))
  }

  // Soumettre la présence
  const handleSubmit = async () => {
    setLoading(true)
    setSuccess(false)
    setError(null)

    // Revérifier avant soumission
    const alreadyRecorded = await checkClassStatus(selectedClasse, selectedHour)
    if (alreadyRecorded) {
      setError("La présence pour cette classe et cette heure a déjà été enregistrée. Veuillez choisir un autre créneau.")
      setLoading(false)
      return
    }

    try {
      const token = getAuthToken()
      if (!token) {
        setError("Vous devez être connecté pour soumettre la présence")
        router.push("/login")
        return
      }

      const fullDateTime = `${date} ${selectedHour}`
      const attendanceData: AttendanceSubmission[] = students.map((student) => ({
        studentId: student.id,
        status: attendance[student.id] ? "present" : "absent",
        ...(attendance[student.id] ? {} : { hours_absent: 2 }),
      }))

      const response = await fetch("/api/attendance", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        },
        body: JSON.stringify({
          date: fullDateTime,
          class: selectedClasse,
          option: selectedOption,
          attendance: attendanceData,
        }),
      })

      if (!response.ok) throw new Error("Échec de la soumission de la présence")

      setSuccess(true)
      setTimeout(() => {
        setSelectedClasse("")
        setSelectedOption("")
        setSelectedHour("")
        setStudents([])
        setAttendance({})
        setSuccess(false)
      }, 3000)
    } catch (err: any) {
      setError(err.message || "Échec de la soumission de la présence")
    } finally {
      setLoading(false)
    }
  }

  const presentCount = Object.values(attendance).filter((v) => v).length
  const absentCount = students.length - presentCount

  return (
    <AuthGuard allowedRoles={["observer"]}>
      <ObserverLayout>
        <div className="space-y-6">
          <div>
            <h1 className="text-3xl font-semibold tracking-tight">Soumettre la Présence</h1>
            <p className="text-muted-foreground">Enregistrer la présence des étudiants d'aujourd'hui</p>
          </div>

          {success && (
            <Alert variant="success">
              <CheckCircle2 size={16} />
              <AlertDescription>Présence soumise avec succès !</AlertDescription>
            </Alert>
          )}

          {error && (
            <Alert variant="destructive">
              <CircleX size={16} />
              <AlertDescription>{error}</AlertDescription>
            </Alert>
          )}

          <Card>
            <CardHeader>
              <CardTitle>Sélectionner Classe & Option</CardTitle>
              <CardDescription>Choisir la classe, l'option et l'heure avant de charger les étudiants</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid gap-4 md:grid-cols-3">
                <div>
                  <Label htmlFor="classe">Classe</Label>
                  <Select value={selectedClasse} onValueChange={setSelectedClasse}>
                    <SelectTrigger id="classe" className="bg-background">
                      <SelectValue placeholder="Sélectionner classe" />
                    </SelectTrigger>
                    <SelectContent>
                      {classes.map((cls) => (
                        <SelectItem key={cls.id} value={cls.name}>
                          {cls.name}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

                <div>
                  <Label htmlFor="option">Option</Label>
                  <Select value={selectedOption} onValueChange={setSelectedOption}>
                    <SelectTrigger id="option" className="bg-background">
                      <SelectValue placeholder="Sélectionner option" />
                    </SelectTrigger>
                    <SelectContent>
                      {options.map((option) => (
                        <SelectItem key={option} value={option}>
                          {option}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

                <div>
                  <Label htmlFor="hour">Heure</Label>
                  <Select value={selectedHour} onValueChange={setSelectedHour}>
                    <SelectTrigger id="hour" className="bg-background">
                      <SelectValue placeholder="Sélectionner heure" />
                    </SelectTrigger>
                    <SelectContent>
                      {hours.map((hour) => (
                        <SelectItem key={hour.value} value={hour.value}>
                          {hour.label}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>

              <Button
                onClick={fetchStudents}
                disabled={loading || !selectedClasse || !selectedOption || !selectedHour}
              >
                {loading ? "Chargement..." : "Charger les Étudiants"}
              </Button>
            </CardContent>
          </Card>

          {students.length > 0 && (
            <>
              <Card>
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <div>
                      <CardTitle>Liste des Étudiants</CardTitle>
                      <CardDescription>
                        {selectedClasse} - {selectedOption} ({students.length} étudiants)
                      </CardDescription>
                    </div>
                    <div className="flex gap-4 text-sm">
                      <div className="flex items-center gap-2">
                        <div className="h-3 w-3 rounded-full bg-green-500" />
                        <span>Présents : {presentCount}</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <div className="h-3 w-3 rounded-full bg-red-500" />
                        <span>Absents : {absentCount}</span>
                      </div>
                    </div>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {students.map((student) => (
                      <div
                        key={student.id}
                        className="flex flex-col sm:flex-row items-start sm:items-center justify-between rounded-lg border p-4 hover:bg-accent"
                      >
                        <div className="flex items-center gap-4">
                          <Checkbox
                            id={`student-${student.id}`}
                            checked={attendance[student.id]}
                            onCheckedChange={() => handleToggleAttendance(student.id)}
                          />
                          <Label htmlFor={`student-${student.id}`} className="cursor-pointer">
                            <div className="font-medium flex items-center gap-2">
                              {student.nom}
                              <Badge variant="default">{student.mtr}</Badge>
                            </div>
                          </Label>
                        </div>
                        <span
                          className={`rounded-full px-3 py-1 text-xs font-medium ${
                            attendance[student.id]
                              ? "bg-green-500/10 text-green-500"
                              : "bg-red-500/10 text-red-500"
                          }`}
                        >
                          {attendance[student.id] ? "Présent" : "Absent"}
                        </span>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>

              <div className="flex justify-end gap-2">
                <Button
                  variant="outline"
                  onClick={() => {
                    setStudents([])
                    setSelectedClasse("")
                    setSelectedOption("")
                    setSelectedHour("")
                    setAttendance({})
                  }}
                >
                  Annuler
                </Button>
                <Button onClick={handleSubmit} disabled={loading}>
                  {loading ? "Soumission..." : "Soumettre la Présence"}
                </Button>
              </div>
            </>
          )}
        </div>
      </ObserverLayout>
    </AuthGuard>
  )
}