"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 AddStudentDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  onAdd: (student: Omit<Student, "id">) => void
}

interface Class {
  id: number
  name: string
}

export function AddStudentDialog({ open, onOpenChange, onAdd }: AddStudentDialogProps) {
  const [formData, setFormData] = useState({
    nom: "",
    classe: "",
    option: "",
    mtr: "",
    nni: "",
    téléphone: "",
    genre: "M" as "M" | "F",
  })
  const [classes, setClasses] = useState<Class[]>([])

  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()
    onAdd(formData)
    setFormData({
      nom: "",
      classe: "",
      option: "",
      mtr: "",
      nni: "",
      téléphone: "",
      genre: "M",
    })
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-2xl bg-card">
        <DialogHeader>
          <DialogTitle>Ajouter un nouvel étudiant</DialogTitle>
          <DialogDescription>Entrez les informations de l'étudiant ci-dessous</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="nom">Nom complet *</Label>
              <Input
                id="nom"
                value={formData.nom}
                onChange={(e) => setFormData({ ...formData, nom: e.target.value })}
                required
                className="bg-background"
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="genre">Genre *</Label>
              <Select
                value={formData.genre}
                onValueChange={(value: "M" | "F") => setFormData({ ...formData, genre: value })}
              >
                <SelectTrigger id="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="classe">Classe *</Label>
              <Select value={formData.classe} onValueChange={(value) => setFormData({ ...formData, classe: value })}>
                <SelectTrigger id="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="option">Option *</Label>
              <Select value={formData.option} onValueChange={(value) => setFormData({ ...formData, option: value })}>
                <SelectTrigger id="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="mtr">MTR *</Label>
              <Input
                id="mtr"
                value={formData.mtr}
                onChange={(e) => setFormData({ ...formData, mtr: e.target.value })}
                required
                className="bg-background"
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="nni">NNI *</Label>
              <Input
                id="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="number">Numéro de téléphone</Label>
              <Input
                id="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">Ajouter l'étudiant</Button>
          </div>
        </form>
      </DialogContent>
    </Dialog>
  )
}