"use client"

import type React from "react"

import { useState } from "react"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from
"@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from
"@/components/ui/table"
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from
"@/components/ui/select"
import { Calendar } from "@/components/ui/calendar"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { CalendarIcon, Search, Plus, Edit, Trash2, Clock, CalendarPlus2Icon as
CalendarIcon2 } from "lucide-react"
import { format } from "date-fns"

// Sample data
const schedules = [
{
id: 1,
exam: "Kiểm tra 15 phút Toán 10",
class: "10A1",
date: "15/04/2025",
time: "07:30 - 07:45",
room: "A101",
supervisor: "Nguyễn Thị Minh",
},
{
id: 2,
exam: "Kiểm tra 1 tiết Lý 11",
class: "11A2",
date: "14/04/2025",
time: "09:30 - 10:15",
room: "A102",
supervisor: "Trần Văn Hùng",
},
{
id: 3,
exam: "Thi học kỳ Hóa 12",
class: "12A3",
date: "20/04/2025",
time: "07:30 - 09:00",
room: "A103",
supervisor: "Lê Thị Hoa",
},
{
 id: 4,
exam: "Kiểm tra 45 phút Sinh 10",
class: "10A2",
date: "12/04/2025",
time: "10:30 - 11:15",
room: "A104",
supervisor: "Phạm Văn Tuấn",
},
{
id: 5,
exam: "Thi học kỳ Văn 11",
class: "11A1",
date: "25/04/2025",
time: "07:30 - 09:00",
room: "A105",
supervisor: "Hoàng Thị Lan",
},
{
id: 6,
exam: "Kiểm tra 15 phút Anh 12",
class: "12A2",
date: "18/04/2025",
time: "14:30 - 14:45",
room: "A106",
supervisor: "Ngô Văn Minh",
},
]

export default function ExamSchedule() {

const [searchTerm, setSearchTerm] = useState("")
const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false)
const [date, setDate] = useState<Date | undefined>(new Date())

const filteredSchedules = schedules.filter(

(schedule) =>
schedule.exam.toLowerCase().includes(searchTerm.toLowerCase()) ||
schedule.class.toLowerCase().includes(searchTerm.toLowerCase()) ||
schedule.room.toLowerCase().includes(searchTerm.toLowerCase()) ||
schedule.supervisor.toLowerCase().includes(searchTerm.toLowerCase()),
)

const handleCreateSchedule = (e: React.FormEvent) => {

e.preventDefault()
// In a real application, you would save the schedule data
setIsCreateDialogOpen(false)
}

return (
<div className="space-y-6">
<Card>
<CardHeader>
<div className="flex items-center justify-between">
<div>
<CardTitle>Lịch thi</CardTitle>
<CardDescription>Quản lý lịch thi cho các lớp</CardDescription>
</div>
<Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
<DialogTrigger asChild>
<Button className="flex items-center gap-1">
 <Plus className="h-4 w-4" />
Thêm lịch thi
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Thêm lịch thi mới</DialogTitle>
<DialogDescription>Điền thông tin để tạo lịch thi
mới</DialogDescription>
</DialogHeader>
<form onSubmit={handleCreateSchedule} className="space-y-4">
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<Label htmlFor="exam">Đề thi</Label>
<Select>
<SelectTrigger>
<SelectValue placeholder="Chọn đề thi" />
</SelectTrigger>
<SelectContent>
<SelectItem value="exam1">Kiểm tra 15 phút Toán
10</SelectItem>
<SelectItem value="exam2">Kiểm tra 1 tiết Lý
11</SelectItem>
<SelectItem value="exam3">Thi học kỳ Hóa 12</SelectItem>
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label htmlFor="class">Lớp</Label>
<Select>
<SelectTrigger>
<SelectValue placeholder="Chọn lớp" />
</SelectTrigger>
<SelectContent>
<SelectItem value="10a1">10A1</SelectItem>
<SelectItem value="10a2">10A2</SelectItem>
<SelectItem value="11a1">11A1</SelectItem>
<SelectItem value="11a2">11A2</SelectItem>
<SelectItem value="12a1">12A1</SelectItem>
<SelectItem value="12a2">12A2</SelectItem>
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label htmlFor="date">Ngày thi</Label>
<Popover>
<PopoverTrigger asChild>
<Button variant="outline" className="w-full justify-start
text-left font-normal">
<CalendarIcon className="mr-2 h-4 w-4" />
{date ? format(date, "dd/MM/yyyy") : <span>Chọn
ngày</span>}
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0">
<Calendar mode="single" selected={date}
onSelect={setDate} initialFocus />
</PopoverContent>
</Popover>
 </div>
<div className="space-y-2">
<Label htmlFor="time">Thời gian</Label>
<div className="flex gap-2">
<Input id="time-start" type="time" className="flex-1" />
<span className="flex items-center">-</span>
<Input id="time-end" type="time" className="flex-1" />
</div>
</div>
<div className="space-y-2">
<Label htmlFor="room">Phòng thi</Label>
<Input id="room" placeholder="Nhập phòng thi" />
</div>
<div className="space-y-2">
<Label htmlFor="supervisor">Giám thị</Label>
<Input id="supervisor" placeholder="Nhập tên giám thị" />
</div>
</div>
<DialogFooter>
<Button type="submit">Thêm lịch thi</Button>
</DialogFooter>
</form>
</DialogContent>
</Dialog>
</div>
</CardHeader>
<CardContent>
<div className="flex justify-between items-center mb-4">
<div className="flex items-center gap-2">
<Button variant="outline" className="flex items-center gap-1">
<CalendarIcon2 className="h-4 w-4" />
Xem theo lịch
</Button>
<Button variant="outline" className="flex items-center gap-1">
<Clock className="h-4 w-4" />
Hôm nay
</Button>
</div>
<div className="relative w-64">
<Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-
foreground" />
<Input
placeholder="Tìm kiếm lịch thi..."
className="pl-8"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
</div>
</div>

<Table>
<TableHeader>
<TableRow>
<TableHead>Đề thi</TableHead>
<TableHead>Lớp</TableHead>
<TableHead>Ngày thi</TableHead>
<TableHead>Thời gian</TableHead>
<TableHead>Phòng thi</TableHead>
<TableHead>Giám thị</TableHead>
 <TableHead className="text-right">Thao tác</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{filteredSchedules.map((schedule) => (
<TableRow key={schedule.id}>
<TableCell className="font-medium">{schedule.exam}</TableCell>
<TableCell>{schedule.class}</TableCell>
<TableCell>{schedule.date}</TableCell>
<TableCell>{schedule.time}</TableCell>
<TableCell>{schedule.room}</TableCell>
<TableCell>{schedule.supervisor}</TableCell>
<TableCell className="text-right">
<div className="flex justify-end gap-2">
<Button variant="outline" size="icon">
<Edit className="h-4 w-4" />
</Button>
<Button variant="outline" size="icon" className="text-red-500
hover:text-red-600">
<Trash2 className="h-4 w-4" />
</Button>
</div>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</CardContent>
</Card>
</div>
)
}