"use client"

import type React from "react"
import { useState, useEffect } from "react"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { getAuthToken } from "@/lib/auth"
import type { Student } from "@/lib/types"

interface EditStudentDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  student: Student
  onEdit: (student: Student) => void
}

interface Class {
  id: number
  name: string
}

export function EditStudentDialog({ open, onOpenChange, student, onEdit }: EditStudentDialogProps) {
  const [formData, setFormData] = useState(student)
  const [classes, setClasses] = useState<Class[]>([])

  useEffect(() => {
    setFormData(student)
  }, [student])

  useEffect(() => {
    const fetchClasses = async () => {
      try {
        const token = getAuthToken()
        if (!token) {
          console.error("No auth token found")
          return
        }
        const response = await fetch("/api/classes", {
          headers: { Authorization: `Bearer ${token}` },
        })
        if (response.ok) {
          const data = await response.json()
          setClasses(data)
        } else {
          console.error("Failed to fetch classes:", response.status)
        }
      } catch (error) {
        console.error("Error fetching classes:", error)
      }
    }
    fetchClasses()
  }, [])

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    onEdit(formData)
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-2xl bg-card">
        <DialogHeader>
          <DialogTitle>Modifier l'étudiant</DialogTitle>
          <DialogDescription>Mettre à jour les informations de l'étudiant</DialogDescription>
        </DialogHeader>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="grid gap-4 md:grid-cols-2">
            <div className="space-y-2">
              <Label htmlFor="edit-nom">Nom complet *</Label>
              <Input
                id="edit-nom"
                value={formData.nom}
                onChange={(e) => setFormData({ ...formData, nom: e.target.value })}
                required
                className="bg-background"
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="edit-genre">Genre *</Label>
              <Select
                value={formData.genre}
                onValueChange={(value: "M" | "F") => setFormData({ ...formData, genre: value })}
              >
                <SelectTrigger id="edit-genre" className="bg-background">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="M">Masculin</SelectItem>
                  <SelectItem value="F">Féminin</SelectItem>
                </SelectContent>
              </Select>
            </div>

            <div className="space-y-2">
              <Label htmlFor="edit-classe">Classe *</Label>
              <Select value={formData.classe} onValueChange={(value) => setFormData({ ...formData, classe: value })}>
                <SelectTrigger id="edit-classe" className="bg-background">
                  <SelectValue placeholder="Sélectionner une classe" />
                </SelectTrigger>
                <SelectContent>
                  {classes.map((cls) => (
                    <SelectItem key={cls.id} value={cls.name}>
                      {cls.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            <div className="space-y-2">
              <Label htmlFor="edit-option">Option *</Label>
              <Select value={formData.option} onValueChange={(value) => setFormData({ ...formData, option: value })}>
                <SelectTrigger id="edit-option" className="bg-background">
                  <SelectValue placeholder="Sélectionner une option" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="Arabe">Arabe</SelectItem>
                  <SelectItem value="bilingue">Bilingue</SelectItem>
                  <SelectItem value="Français">Français</SelectItem>
                </SelectContent>
              </Select>
            </div>

            <div className="space-y-2">
              <Label htmlFor="edit-mtr">MTR *</Label>
              <Input
                id="edit-mtr"
                value={formData.mtr}
                onChange={(e) => setFormData({ ...formData, mtr: e.target.value })}
                required
                className="bg-background"
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="edit-nni">NNI *</Label>
              <Input
                id="edit-nni"
                value={formData.nni}
                onChange={(e) => setFormData({ ...formData, nni: e.target.value })}
                required
                className="bg-background"
              />
            </div>

            <div className="space-y-2 md:col-span-2">
              <Label htmlFor="edit-number">Numéro de téléphone</Label>
              <Input
                id="edit-number"
                value={formData.téléphone}
                onChange={(e) => setFormData({ ...formData, téléphone: e.target.value })}
                className="bg-background"
              />
            </div>
          </div>

          <div className="flex justify-end gap-2">
            <Button type="button" variant="outline" onClick={() => onOpenChange(false)} className="bg-transparent">
              Annuler
            </Button>
            <Button type="submit">Enregistrer les modifications</Button>
          </div>
        </form>
      </DialogContent>
    </Dialog>
  )
}