"use client"

import { useState, useEffect } from "react"
import { AuthGuard } from "@/components/auth-guard"
import { DashboardLayout } from "@/components/dashboard-layout"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Calendar } from "@/components/ui/calendar"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { FileDown, CalendarIcon, FileText, CircleX } from "lucide-react"
import { format } from "date-fns"
import { fr } from "date-fns/locale"
import { cn } from "@/lib/utils"
import { getAuthToken } from "@/lib/auth"
import { Alert, AlertDescription } from "@/components/ui/alert"

interface AttendanceReport {
  student_id: number
  mtr: string
  nom: string
  classe: string
  option: string
  total_absences: number
  total_hours: number
  dates: string
  attendance_records?: AttendanceDetail[]
}

interface AttendanceDetail {
  date: string
  justification: string | null
  hours_absent: number | null
}

interface Class {
  id: number
  name: string
}

export default function ReportsPage() {
  const [reportType, setReportType] = useState("student")
  const [selectedClasse, setSelectedClasse] = useState("")
  const [selectedOption, setSelectedOption] = useState("")
  const [dateFrom, setDateFrom] = useState<Date>()
  const [dateTo, setDateTo] = useState<Date>()
  const [reportData, setReportData] = useState<AttendanceReport[]>([])
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [classes, setClasses] = useState<Class[]>([])

  const options = ["Arabe", "bilingue","Français"]

  useEffect(() => {
    const fetchClasses = async () => {
      try {
        const token = getAuthToken()
        if (!token) {
          throw new Error("Aucun jeton d'authentification trouvé")
        }
        const response = await fetch("/api/classes", {
          headers: { Authorization: `Bearer ${token}` },
        })
        if (response.ok) {
          const data = await response.json()
          setClasses(data)
        } else {
          throw new Error(`Échec de la récupération des classes : ${response.statusText}`)
        }
      } catch (err: any) {
        setError("Échec de la récupération des classes")
        // console.error(err)
      }
    }
    fetchClasses()
  }, [])

  const handleGenerateReport = async () => {
    setLoading(true)
    setError(null)
    setReportData([])

    try {
      const token = getAuthToken()
      if (!token) {
        throw new Error("Aucun jeton d'authentification trouvé")
      }

      const params = new URLSearchParams()
      if (selectedClasse && selectedClasse !== "all") {
        params.append("class", selectedClasse)
      }
      if (selectedOption && selectedOption !== "all") {
        params.append("option", selectedOption)
      }
      if (dateFrom) {
        params.append("startDate", format(dateFrom, "yyyy-MM-dd") + " 00:00:00")
      }
      if (dateTo) {
        params.append("endDate", format(dateTo, "yyyy-MM-dd") + " 23:59:59")
      }

      const response = await fetch(`/api/reports/absences?${params.toString()}`, {
        headers: {
          Authorization: `Bearer ${token}`,
          "Content-Type": "application/json",
        },
      })

      if (!response.ok) {
        const errorData = await response.json()
        throw new Error(errorData.error || `Échec de la récupération du rapport : ${response.statusText}`)
      }

      let data: AttendanceReport[] = await response.json()

      // Fetch detailed absence records for each student
      data = await Promise.all(
        data.map(async (student) => {
          const detailParams = new URLSearchParams()
          if (dateFrom) {
            detailParams.append("startDate", format(dateFrom, "yyyy-MM-dd") + " 00:00:00")
          }
          if (dateTo) {
            detailParams.append("endDate", format(dateTo, "yyyy-MM-dd") + " 23:59:59")
          }

          const detailResponse = await fetch(
            `/api/reports/absences/${student.student_id}?${detailParams.toString()}`,
            {
              headers: {
                Authorization: `Bearer ${token}`,
                "Content-Type": "application/json",
              },
            }
          )

          if (detailResponse.ok) {
            const details: AttendanceDetail[] = await detailResponse.json()
            return { ...student, attendance_records: details }
          }
          return { ...student, attendance_records: [] }
        })
      )

      setReportData(data)
    } catch (err: any) {
      setError(`Échec de la génération du rapport`)
      // console.error(err)
    } finally {
      setLoading(false)
    }
  }

  const handleDownloadExcel = async () => {
    setError(null)
    try {
      const token = getAuthToken()
      if (!token) {
        throw new Error("Aucun jeton d'authentification trouvé")
      }

      const params = new URLSearchParams()
      if (selectedClasse && selectedClasse !== "all") {
        params.append("class", selectedClasse)
      }
      if (selectedOption && selectedOption !== "all") {
        params.append("option", selectedOption)
      }
      if (dateFrom) {
        params.append("startDate", format(dateFrom, "yyyy-MM-dd") + " 00:00:00")
      }
      if (dateTo) {
        params.append("endDate", format(dateTo, "yyyy-MM-dd") + " 23:59:59")
      }

      const response = await fetch(`/api/reports/excel?${params.toString()}`, {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      })

      if (!response.ok) {
        const errorData = await response.json()
        throw new Error(errorData.error || `Échec du téléchargement du fichier Excel : ${response.statusText}`)
      }

      const blob = await response.blob()
      const url = window.URL.createObjectURL(blob)
      const a = document.createElement("a")
      a.href = url
      a.download = "rapport-absences.xlsx"
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
      window.URL.revokeObjectURL(url)
    } catch (err: any) {
      setError(`Échec du téléchargement du fichier Excel`)
      // console.error(err)
    }
  }

  return (
    <AuthGuard allowedRoles={["admin"]}>
      <DashboardLayout>
        <div className="space-y-6">
          <div className="hidden md:block">
            <h1 className="text-3xl font-semibold tracking-tight">Rapports</h1>
            <p className="text-muted-foreground">Générer des rapports d'absence</p>
          </div>

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

          <Card className="border-border">
            <CardHeader>
              <CardTitle>Configuration du Rapport</CardTitle>
              <CardDescription>Sélectionnez les paramètres pour votre rapport d'absence</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid gap-4 md:grid-cols-1">
                <div className="grid gap-4 md:grid-cols-3">
                <div className="space-y-2">
                  <Label htmlFor="report-type">Type de Rapport</Label>
                  <Select value={reportType} onValueChange={setReportType}>
                    <SelectTrigger id="report-type" className="bg-background">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="student">Par Étudiant</SelectItem>
                      <SelectItem value="class">Par Classe</SelectItem>
                      <SelectItem value="date">Par Plage de Dates</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

                <div className="space-y-2">
                  <Label htmlFor="classe">Classe</Label>
                  <Select value={selectedClasse} onValueChange={setSelectedClasse}>
                    <SelectTrigger id="classe" className="bg-background">
                      <SelectValue placeholder="Sélectionner une classe" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">Toutes les Classes</SelectItem>
                      {classes.map((cls) => (
                        <SelectItem key={cls.id} value={cls.name}>
                          {cls.name}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

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

                <div className="grid gap-4 md:grid-cols-2">
                <div className="space-y-2">
                  <Label>Date de Début</Label>
                  <Popover>
                    <PopoverTrigger asChild>
                      <Button
                        variant="outline"
                        className={cn(
                          "w-full justify-start text-left font-normal bg-background",
                          !dateFrom && "text-muted-foreground"
                        )}
                      >
                        <CalendarIcon className="mr-2 h-4 w-4" />
                        {dateFrom ? format(dateFrom, "PPP", { locale: fr }) : <span>Choisir une date</span>}
                      </Button>
                    </PopoverTrigger>
                    <PopoverContent className="w-auto p-0" align="start">
                      <Calendar mode="single" selected={dateFrom} onSelect={setDateFrom} initialFocus locale={fr} />
                    </PopoverContent>
                  </Popover>
                </div>

                <div className="space-y-2">
                  <Label>Date de Fin</Label>
                  <Popover>
                    <PopoverTrigger asChild>
                      <Button
                        variant="outline"
                        className={cn(
                          "w-full justify-start text-left font-normal bg-background",
                          !dateTo && "text-muted-foreground"
                        )}
                      >
                        <CalendarIcon className="mr-2 h-4 w-4" />
                        {dateTo ? format(dateTo, "PPP", { locale: fr }) : <span>Choisir une date</span>}
                      </Button>
                    </PopoverTrigger>
                    <PopoverContent className="w-auto p-0" align="start">
                      <Calendar mode="single" selected={dateTo} onSelect={setDateTo} initialFocus locale={fr} />
                    </PopoverContent>
                  </Popover>
                </div>
                </div>
              </div>

              <Button onClick={handleGenerateReport} disabled={loading} className="w-full md:w-auto">
                {loading ? "Génération en cours..." : "Générer le Rapport"}
              </Button>
            </CardContent>
          </Card>

          {reportData.length > 0 && (
            <>
              <div className="flex items-center justify-between">
                <div>
                  <h2 className="text-xl font-semibold">Résultats du Rapport</h2>
                  <p className="text-sm text-muted-foreground">{reportData.length} étudiants avec absences</p>
                </div>
                <Button onClick={handleDownloadExcel} className="gap-2">
                  <FileDown className="h-4 w-4" />
                  Télécharger Excel
                </Button>
              </div>

              <div className="space-y-4">
                {reportData.map((student) => {
                  // assuming 6 hours = 1 day
                  const dayHours = 6;
                  const totalDays = Math.floor(student.total_hours / dayHours); // full days
                  const remainingHours = student.total_hours % dayHours;       // leftover hours
                  return (
                    <Card key={student.student_id} className="border-border">
                      <CardHeader>
                        <div className="flex items-start justify-between">
                          <div>
                            <CardTitle className="text-lg">{student.nom} ({student.mtr})</CardTitle>
                            <CardDescription>
                              {student.classe} - {student.option}
                            </CardDescription>
                          </div>
                          <div className="text-right">
                            <div className="text-2xl font-bold text-red-500">
                              {totalDays > 0 ? totalDays + (totalDays > 1 ? " jours" : " jour") : ""}
                              {totalDays > 0 && remainingHours > 0 ? " " : ""}
                              {remainingHours > 0 ? remainingHours + (remainingHours > 1 ? " heures" : " heure") : (totalDays === 0 ? "0 heure" : "")}
                            </div>
                            <p className="text-xs text-muted-foreground">{student.total_absences} absences</p>
                          </div>
                        </div>
                      </CardHeader>
                      <CardContent>
                        <div className="rounded-lg border border-border">
                          <Table>
                            <TableHeader>
                              <TableRow>
                                <TableHead>Date</TableHead>
                                <TableHead>Heures</TableHead>
                                <TableHead>Justification</TableHead>
                              </TableRow>
                            </TableHeader>
                            <TableBody>
                              {student.attendance_records?.length ? (
                                student.attendance_records.map((record, i) => (
                                  <TableRow key={`${student.student_id}-${i}`}>
                                    <TableCell>{format(new Date(record.date), "yyyy-MM-dd HH:mm", { locale: fr })}</TableCell>
                                    <TableCell>{record.hours_absent ?? 0}h</TableCell>
                                    <TableCell>
                                      {record.justification || (
                                        <span className="text-muted-foreground italic">Aucune justification</span>
                                      )}
                                    </TableCell>
                                  </TableRow>
                                ))
                              ) : (
                                <TableRow>
                                  <TableCell colSpan={3} className="text-center text-muted-foreground">
                                    Aucun détail d'absence disponible
                                  </TableCell>
                                </TableRow>
                              )}
                            </TableBody>
                          </Table>
                        </div>
                      </CardContent>
                    </Card>
                  )
                })}
              </div>
            </>
          )}

          {reportData.length === 0 && !loading && (
            <Card className="border-border">
              <CardContent className="flex flex-col items-center justify-center py-12">
                <FileText className="h-12 w-12 text-muted-foreground mb-4" />
                <p className="text-muted-foreground">Configurez et générez un rapport pour voir les résultats</p>
              </CardContent>
            </Card>
          )}
        </div>
      </DashboardLayout>
    </AuthGuard>
  )
}