'use client';

import { Calendar } from '@admin/components/ui/calendar';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@admin/components/ui/card';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@admin/components/ui/select';
import { useState } from 'react';

const eventsByDate: Record<string, Array<{ title: string; time: string; color: string }>> = {
    '2023-11-07': [
        {
            title: 'Forward Infrastructure ',
            time: '11:00 - 11:25',
            color: 'bg-blue-100 border-l-4 border-blue-500',
        },
        {
            title: 'Taskco SaaS Dynamic ',
            time: '11:00 - 11:25',
            color: 'bg-green-100 border-l-4 border-green-500',
        },

        {
            title: 'Forward Infrastructure ',
            time: '11:00 - 11:25',
            color: 'bg-blue-100 border-l-4 border-blue-500',
        },
        {
            title: 'International Communications',
            time: '11:00 - 11:25',
            color: 'bg-green-100 border-l-4 border-green-500',
        },
        {
            title: 'Forward Infrastructure ',
            time: '11:00 - 11:25',
            color: 'bg-blue-100 border-l-4 border-blue-500',
        },
    ],
    '2023-11-10': [
        {
            title: 'Govt Holidays',
            time: 'All Day',
            color: 'bg-red-100 border-l-4 border-red-500',
        },
    ],
    '2023-11-15': [
        {
            title: 'Product Metrics ',
            time: '11:00 - 11:25',
            color: 'bg-green-100 border-l-4 border-green-500',
        },
        {
            title: 'Principal ',
            time: '11:00 - 11:25',
            color: 'bg-blue-100 border-l-4 border-blue-500',
        },
    ],
    '2023-11-20': [
        {
            title: 'Implementation ',
            time: '11:00 - 11:25',
            color: 'bg-blue-100 border-l-4 border-blue-500',
        },
    ],
};

export default function EventCalendar({ title, subTitle }: { title?: string; subTitle?: string }) {
    const [selectedDate, setSelectedDate] = useState<Date | undefined>(new Date(2023, 10, 7));

    const dateKey = selectedDate
        ? `${selectedDate.getFullYear()}-${String(selectedDate.getMonth() + 1).padStart(2, '0')}-${String(selectedDate.getDate()).padStart(2, '0')}`
        : '';
    const currentEvents = eventsByDate[dateKey] || [];

    return (
        <Card className="flex h-full w-full flex-col px-0">
            <CardHeader className="mb-4 border-b px-5 pb-4">
                <div className="flex items-start justify-between">
                    <div>
                        <CardTitle className="text-lg font-semibold">{title || 'Calendar'}</CardTitle>
                        <CardDescription className="text-text-gray">{subTitle || 'Upcoming events and deadlines'}</CardDescription>
                    </div>
                    <Select defaultValue="this-month">
                        <SelectTrigger className="w-[140px]">
                            <SelectValue placeholder="This Month" />
                        </SelectTrigger>
                        <SelectContent>
                            <SelectItem value="this-month">This Month</SelectItem>
                            <SelectItem value="next-month">Next Month</SelectItem>
                            <SelectItem value="this-year">This Year</SelectItem>
                        </SelectContent>
                    </Select>
                </div>
            </CardHeader>
            <CardContent className="flex-grow">
                <div className="h-full gap-3 lg:grid-cols-[1fr_280px] 2xl:grid">
                    <Calendar
                        mode="single"
                        selected={selectedDate}
                        onSelect={setSelectedDate}
                        defaultMonth={new Date(2023, 10, 1)}
                        className="w-full rounded-md border"
                    />

                    {/* Events List */}
                    <div className="mt-0 space-y-2 md:min-w-52 xl:mt-2 2xl:mt-0 2xl:w-full">
                        {currentEvents.length > 0 ? (
                            currentEvents.map((event, index) => (
                                <div key={index} className={`rounded-lg p-3 ${event.color}`}>
                                    <h4 className="text-sm font-medium text-black">{event.title}</h4>
                                    <p className="text-xs text-black">{event.time}</p>
                                </div>
                            ))
                        ) : (
                            <div className="rounded-lg border border-dashed p-6 text-center">
                                <p className="text-sm text-muted-foreground">No events for this date</p>
                            </div>
                        )}
                    </div>
                </div>
            </CardContent>
        </Card>
    );
}