"use client";
import { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Calendar, Plus, Pencil, Trash2, CalendarDays } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { Textarea } from "@/components/ui/textarea";
import { format } from "date-fns";
import { Calendar as CalendarComponent } from "@/components/ui/calendar";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { cn } from "@/lib/utils";
interface Event {
id: string;
title: string;
description: string;
startDate: Date;
endDate: Date;
type: 'tournament' | 'maintenance' | 'special';
status: 'upcoming' | 'ongoing' | 'completed';
}
export default function EventsPage() {
const [events, setEvents] = useState<Event[]>([
{
id: "1",
title: "CS2 Tournament Finals",
description: "Grand finals of the CS2 Championship",
startDate: new Date(2024, 3, 15, 14, 0),
endDate: new Date(2024, 3, 15, 20, 0),
type: "tournament",
status: "upcoming"
},
{
id: "2",
title: "System Maintenance",
description: "Regular system updates and maintenance",
startDate: new Date(2024, 3, 10, 2, 0),
endDate: new Date(2024, 3, 10, 6, 0),
type: "maintenance",
status: "completed"
},
{
id: "3",
title: "Special Game Night",
description: "Community gaming event with prizes",
startDate: new Date(2024, 3, 20, 18, 0),
endDate: new Date(2024, 3, 20, 23, 0),
type: "special",
status: "upcoming"
}
]);
const [date, setDate] = useState<Date>();
const [isAddEventOpen, setIsAddEventOpen] = useState(false);
const getStatusColor = (status: string) => {
switch (status) {
case 'upcoming':
return 'bg-purple-500/10 text-purple-600';
case 'ongoing':
return 'bg-pink-500/10 text-pink-600';
case 'completed':
return 'bg-blue-500/10 text-blue-600';
default:
return '';
}
};
const getTypeColor = (type: string) => {
switch (type) {
case 'tournament':
return 'text-purple-600';
case 'maintenance':
return 'text-pink-600';
case 'special':
return 'text-blue-600';
default:
return '';
}
};
return (
<div className="min-h-screen bg-gradient-to-b from-violet-50 via-white to-sky-50">
<div className="max-w-[1400px] mx-auto space-y-8 p-8">
<div className="flex items-center justify-between">
<div>
<h1 className="text-4xl font-bold tracking-tight bg-gradient-to-r from-purple-600 via-pink-500 to-blue-500 bg-clip-text text-transparent">
Event Management
</h1>
<p className="mt-2 text-gray-600">
Schedule and manage events across your displays
</p>
</div>
<Dialog open={isAddEventOpen} onOpenChange={setIsAddEventOpen}>
<DialogTrigger asChild>
<Button className="bg-purple-600 hover:bg-purple-700 text-white rounded-xl flex items-center gap-2">
<Plus className="h-5 w-5" />
Add Event
</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-[500px] rounded-2xl">
<DialogHeader>
<DialogTitle>Add New Event</DialogTitle>
</DialogHeader>
<div className="space-y-4 py-4">
<div className="space-y-2">
<Label>Event Title</Label>
<Input className="rounded-xl border-gray-200 focus:ring-purple-500" placeholder="Enter event title" />
</div>
<div className="space-y-2">
<Label>Description</Label>
<Textarea
className="rounded-xl border-gray-200 focus:ring-purple-500 min-h-[100px]"
placeholder="Enter event description"
/>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<Label>Start Date</Label>
<Popover>
<PopoverTrigger asChild>
<Button
className="w-full justify-start rounded-xl bg-purple-600 hover:bg-purple-700 text-white"
>
<CalendarDays className="mr-2 h-4 w-4" />
{date ? format(date, "PPP") : <span>Pick a date</span>}
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0 rounded-xl" align="start">
<CalendarComponent
mode="single"
selected={date}
onSelect={setDate}
className="rounded-lg"
/>
</PopoverContent>
</Popover>
</div>
<div className="space-y-2">
<Label>End Date</Label>
<Popover>
<PopoverTrigger asChild>
<Button
className="w-full justify-start rounded-xl bg-purple-600 hover:bg-purple-700 text-white"
>
<CalendarDays className="mr-2 h-4 w-4" />
{date ? format(date, "PPP") : <span>Pick a date</span>}
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0 rounded-xl" align="start">
<CalendarComponent
mode="single"
selected={date}
onSelect={setDate}
className="rounded-lg"
/>
</PopoverContent>
</Popover>
</div>
</div>
<div className="pt-4 flex justify-end gap-2">
<Button
variant="outline"
className="rounded-xl"
onClick={() => setIsAddEventOpen(false)}
>
Cancel
</Button>
<Button className="bg-purple-600 hover:bg-purple-700 text-white rounded-xl">
Create Event
</Button>
</div>
</div>
</DialogContent>
</Dialog>
</div>
<div className="grid grid-cols-12 gap-6">
<div className="col-span-12 lg:col-span-8">
<Card className="rounded-2xl border-2 border-purple-100/50 hover:border-purple-200 transition-all duration-300 bg-white/70 backdrop-blur-sm">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Calendar className="h-5 w-5 text-purple-500" />
Upcoming Events
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
{events.map((event) => (
<Card
key={event.id}
className="rounded-xl border border-gray-100 hover:border-purple-200 transition-all duration-300"
>
<CardContent className="p-4">
<div className="flex items-start justify-between">
<div className="space-y-1">
<div className="flex items-center gap-2">
<h3 className="text-lg font-semibold">{event.title}</h3>
<Badge className={getStatusColor(event.status)}>
{event.status}
</Badge>
</div>
<p className="text-sm text-gray-500">{event.description}</p>
<div className="flex items-center gap-2 text-sm">
<CalendarDays className={`h-4 w-4 ${getTypeColor(event.type)}`} />
<span className="text-gray-600">
{format(event.startDate, "PPP")} - {format(event.endDate, "PPP")}
</span>
</div>
</div>
<div className="flex gap-2">
<Button
variant="outline"
size="sm"
className="rounded-lg border-purple-200 hover:bg-purple-50 hover:text-purple-600"
>
<Pencil className="h-4 w-4" />
</Button>
<Button
variant="outline"
size="sm"
className="rounded-lg border-red-200 hover:bg-red-50 hover:text-red-600"
>
<Trash2 className="h-4 w-4" />
</Button>
</div>
</div>
</CardContent>
</Card>
))}
</CardContent>
</Card>
</div>
<div className="col-span-12 lg:col-span-4 space-y-6">
<Card className="rounded-2xl border-2 border-pink-100/50 hover:border-pink-200 transition-all duration-300 bg-white/70 backdrop-blur-sm">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<CalendarDays className="h-5 w-5 text-pink-500" />
Calendar
</CardTitle>
</CardHeader>
<CardContent>
<CalendarComponent
mode="single"
selected={date}
onSelect={setDate}
className="rounded-lg"
/>
</CardContent>
</Card>
<Card className="rounded-2xl border-2 border-blue-100/50 hover:border-blue-200 transition-all duration-300 bg-white/70 backdrop-blur-sm">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Calendar className="h-5 w-5 text-blue-500" />
Event Stats
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div className="grid grid-cols-2 gap-4">
<div className="bg-purple-50/50 p-4 rounded-xl border border-purple-100">
<p className="text-sm text-gray-500">Upcoming</p>
<p className="text-2xl font-semibold text-purple-600">12</p>
</div>
<div className="bg-pink-50/50 p-4 rounded-xl border border-pink-100">
<p className="text-sm text-gray-500">This Month</p>
<p className="text-2xl font-semibold text-pink-600">24</p>
</div>
<div className="bg-blue-50/50 p-4 rounded-xl border border-blue-100">
<p className="text-sm text-gray-500">Active</p>
<p className="text-2xl font-semibold text-blue-600">3</p>
</div>
<div className="bg-purple-50/50 p-4 rounded-xl border border-purple-100">
<p className="text-sm text-gray-500">Completed</p>
<p className="text-2xl font-semibold text-purple-600">156</p>
</div>
</div>
</CardContent>
</Card>
</div>
</div>
</div>
</div>
);
}