import { Button } from '@admin/components/ui/button';
import { Card, CardContent, CardHeader } from '@admin/components/ui/card';
import { Checkbox } from '@admin/components/ui/checkbox';
import { Label } from '@admin/components/ui/label';
import { ChevronLeft, ChevronRight, Filter, Plus } from 'lucide-react';
import { useEffect, useState } from 'react';

interface CalendarSidebarProps {
    currentDate: Date;
    setCurrentDate: (date: Date) => void;
    selectedDate: Date;
    setSelectedDate: (date: Date) => void;
    onAddEvent: () => void;
    selectedStatus: string;
    setSelectedStatus: (status: string) => void;
    meetings: any[];
    view: 'today' | 'week' | 'month';
    setView: (view: 'today' | 'week' | 'month') => void;
}

// Status filter options
const statusFilters = [
    { id: 'all', label: 'All', color: 'bg-gray-500', description: 'Show all events' },
    { id: 'reminders', label: 'Reminders', color: 'bg-green-500', description: 'Events linked to reminders' },
    { id: 'task', label: 'Task', color: 'bg-purple-500', description: 'Events linked to tasks' },
    { id: 'contact', label: 'Contact', color: 'bg-red-500', description: 'Events linked to contacts' },
];

const miniDaysOfWeek = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];

export default function CalendarSidebar({
    currentDate,
    setCurrentDate,
    selectedDate,
    setSelectedDate,
    onAddEvent,
    selectedStatus,
    setSelectedStatus,
    meetings,
    view,
    setView,
}: CalendarSidebarProps) {
    // Get meetings for a specific date
    const getEventsForDate = (date: Date) => {
        const dateString = date.toISOString().split('T')[0];
        return meetings.filter((meeting) => {
            try {
                // Support both meeting_date_time and start_date_time fields
                const dateTimeField = meeting.meeting_date_time || meeting.start_date_time;
                if (!dateTimeField) return false;

                const meetingDate = new Date(dateTimeField);
                if (isNaN(meetingDate.getTime())) return false; // Invalid date

                return meetingDate.toISOString().split('T')[0] === dateString;
            } catch (error) {
                console.error('Error parsing meeting date:', error);
                return false;
            }
        });
    };

    // Generate mini calendar data
    const generateMiniCalendarData = () => {
        const year = currentDate.getFullYear();
        const month = currentDate.getMonth();
        const firstDay = new Date(year, month, 1);
        const lastDay = new Date(year, month + 1, 0);
        const daysInMonth = lastDay.getDate();

        const days = [];

        // Add previous month's trailing days
        const firstDayOfWeek = firstDay.getDay();
        const prevMonthLastDay = new Date(year, month, 0).getDate();
        for (let i = firstDayOfWeek - 1; i >= 0; i--) {
            days.push({
                date: new Date(year, month - 1, prevMonthLastDay - i),
                dayOfMonth: prevMonthLastDay - i,
                isCurrentMonth: false,
                meetings: [],
            });
        }

        // Add current month's days
        for (let i = 1; i <= daysInMonth; i++) {
            const date = new Date(year, month, i);
            days.push({
                date,
                dayOfMonth: i,
                isCurrentMonth: true,
                meetings: getEventsForDate(date),
            });
        }

        // Add next month's leading days
        const totalCells = 42; // 6 weeks
        const remainingDays = totalCells - days.length;
        for (let i = 1; i <= remainingDays; i++) {
            days.push({
                date: new Date(year, month + 1, i),
                dayOfMonth: i,
                isCurrentMonth: false,
                meetings: [],
            });
        }

        return days;
    };

    const [miniCalendarData, setMiniCalendarData] = useState(generateMiniCalendarData());

    useEffect(() => {
        setMiniCalendarData(generateMiniCalendarData());
    }, [currentDate, meetings]);

    // Handle date selection from mini calendar
    const handleMiniCalendarDateClick = (date: Date) => {
        setCurrentDate(date);
        setSelectedDate(date);

        // If in today view, switch to month view for better visibility
        if (view === 'today') {
            setView('month');
        }
    };

    // Check if a date is the selected date
    const isSelectedDate = (date: Date) => {
        return date.toDateString() === selectedDate.toDateString();
    };

    return (
        <div className="sticky top-0 h-full space-y-6 overflow-y-auto lg:w-80">
            {/* Add Event Button */}
            <Button className="w-full bg-success" onClick={onAddEvent}>
                <Plus className="mr-2 h-4 w-4" />
                Add Event
            </Button>

            {/* Mini Calendar */}
            <Card className="p-2">
                <CardHeader className="px-2 pb-3">
                    <div className="flex items-center justify-between">
                        <h3 className="font-semibold">{currentDate.toLocaleDateString('en-US', { month: 'long', year: 'numeric' })}</h3>
                        <div className="flex space-x-1">
                            <div
                                onClick={() => {
                                    const prevMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1);
                                    setCurrentDate(prevMonth);
                                }}
                                className="mr-5 cursor-pointer"
                            >
                                <ChevronLeft className="h-4 w-4" />
                            </div>
                            <div
                                className="cursor-pointer"
                                onClick={() => {
                                    const nextMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1);
                                    setCurrentDate(nextMonth);
                                }}
                            >
                                <ChevronRight className="h-4 w-4" />
                            </div>
                        </div>
                    </div>
                </CardHeader>
                <CardContent className="px-0">
                    {/* Days of week header */}
                    <div className="mb-2 grid grid-cols-7 gap-1">
                        {miniDaysOfWeek.map((day) => (
                            <div key={day} className="py-1 text-center text-xs font-medium text-gray-500">
                                {day}
                            </div>
                        ))}
                    </div>

                    {/* Calendar grid */}
                    <div className="grid grid-cols-7 gap-1">
                        {miniCalendarData.map((day, index) => (
                            <button
                                key={index}
                                onClick={() => handleMiniCalendarDateClick(day.date)}
                                className={`flex h-8 items-center justify-center rounded text-sm transition-colors ${
                                    !day.isCurrentMonth
                                        ? 'cursor-not-allowed text-gray-300'
                                        : isSelectedDate(day.date)
                                          ? 'bg-success font-semibold text-white'
                                          : day.date.toDateString() === new Date().toDateString()
                                            ? 'bg-amber-100 font-semibold text-amber-800'
                                            : 'cursor-pointer text-gray-700 hover:bg-gray-100'
                                } ${day.meetings.length > 0 ? 'font-semibold' : ''}`}
                                disabled={!day.isCurrentMonth}
                            >
                                {day.dayOfMonth}
                            </button>
                        ))}
                    </div>
                </CardContent>
            </Card>

            {/* Status Filters */}
            <Card>
                <CardHeader className="px-0 pb-3">
                    <div className="flex items-center justify-between">
                        <h3 className="flex items-center font-semibold">
                            <Filter className="mr-2 h-4 w-4" />
                            Status
                        </h3>
                    </div>
                </CardHeader>
                <CardContent className="space-y-3 px-0">
                    {statusFilters.map((status) => (
                        <div key={status.id} className="flex items-center space-x-2">
                            <Checkbox id={status.id} checked={selectedStatus === status.id} onCheckedChange={() => setSelectedStatus(status.id)} />
                            <Label htmlFor={status.id} className="flex cursor-pointer items-center space-x-2">
                                <div className="flex flex-col">
                                    <span className="font-medium">{status.label}</span>
                                    <span className="text-xs text-gray-500">{status.description}</span>
                                </div>
                            </Label>
                        </div>
                    ))}
                </CardContent>
            </Card>
        </div>
    );
}