import React, { useState } from 'react';
import { Calendar as CalendarIcon, Clock, MapPin, User, ChevronLeft, ChevronRight, Plus, Filter, Search } from 'lucide-react';

interface Event {
    id: string;
    title: string;
    date: string;
    time: string;
    location: string;
    client: string;
    status: 'confirmed' | 'pending' | 'completed';
    type: 'formatura' | 'casamento' | 'evento';
}

const MOCK_EVENTS: Event[] = [
    {
        id: '1',
        title: 'Formatura Medicina UFPR',
        date: '2025-12-15',
        time: '19:00',
        location: 'Teatro Guaíra, Curitiba',
        client: 'Ana Paula Silva',
        status: 'confirmed',
        type: 'formatura'
    },
    {
        id: '2',
        title: 'Casamento Maria & João',
        date: '2025-12-20',
        time: '16:00',
        location: 'Fazenda Vista Alegre',
        client: 'Maria Santos',
        status: 'confirmed',
        type: 'casamento'
    },
    {
        id: '3',
        title: 'Formatura Direito PUC',
        date: '2025-12-22',
        time: '20:00',
        location: 'Centro de Convenções',
        client: 'Carlos Eduardo',
        status: 'pending',
        type: 'formatura'
    },
    {
        id: '4',
        title: 'Formatura Engenharia UTFPR',
        date: '2025-12-28',
        time: '18:30',
        location: 'Espaço Nobre Eventos',
        client: 'Roberto Mendes',
        status: 'confirmed',
        type: 'formatura'
    },
    {
        id: '5',
        title: 'Evento Corporativo Tech Summit',
        date: '2026-01-10',
        time: '09:00',
        location: 'Hotel Bourbon',
        client: 'TechCorp Ltda',
        status: 'pending',
        type: 'evento'
    },
    {
        id: '6',
        title: 'Formatura Odontologia',
        date: '2026-01-15',
        time: '19:30',
        location: 'Clube Curitibano',
        client: 'Juliana Costa',
        status: 'confirmed',
        type: 'formatura'
    }
];

export const CalendarPage: React.FC = () => {
    const [selectedMonth, setSelectedMonth] = useState(new Date());
    const [selectedEvent, setSelectedEvent] = useState<Event | null>(null);
    const [viewMode, setViewMode] = useState<'month' | 'week'>('month');

    const getStatusColor = (status: Event['status']) => {
        switch (status) {
            case 'confirmed': return 'bg-green-100 text-green-700 border-green-200';
            case 'pending': return 'bg-yellow-100 text-yellow-700 border-yellow-200';
            case 'completed': return 'bg-gray-100 text-gray-700 border-gray-200';
        }
    };

    const getStatusLabel = (status: Event['status']) => {
        switch (status) {
            case 'confirmed': return 'Confirmado';
            case 'pending': return 'Pendente';
            case 'completed': return 'Concluído';
        }
    };

    const getTypeColor = (type: Event['type']) => {
        switch (type) {
            case 'formatura': return 'bg-[#492E61] text-white';
            case 'casamento': return 'bg-pink-500 text-white';
            case 'evento': return 'bg-blue-500 text-white';
        }
    };

    const nextMonth = () => {
        setSelectedMonth(new Date(selectedMonth.getFullYear(), selectedMonth.getMonth() + 1));
    };

    const prevMonth = () => {
        setSelectedMonth(new Date(selectedMonth.getFullYear(), selectedMonth.getMonth() - 1));
    };

    const generateCalendarDays = () => {
        const year = selectedMonth.getFullYear();
        const month = selectedMonth.getMonth();
        const firstDay = new Date(year, month, 1);
        const lastDay = new Date(year, month + 1, 0);
        const daysInMonth = lastDay.getDate();
        const startingDayOfWeek = firstDay.getDay();

        const days: (Date | null)[] = [];

        // Add empty cells for days before the first day of the month
        for (let i = 0; i < startingDayOfWeek; i++) {
            days.push(null);
        }

        // Add all days of the month
        for (let day = 1; day <= daysInMonth; day++) {
            days.push(new Date(year, month, day));
        }

        return days;
    };

    const getEventsForDate = (date: Date) => {
        return MOCK_EVENTS.filter(event => {
            const eventDate = new Date(event.date + 'T00:00:00');
            return eventDate.toDateString() === date.toDateString();
        });
    };

    const isToday = (date: Date) => {
        const today = new Date();
        return date.toDateString() === today.toDateString();
    };

    const currentMonthName = selectedMonth.toLocaleDateString('pt-BR', { month: 'long', year: 'numeric' });
    const calendarDays = generateCalendarDays();

    const monthEvents = MOCK_EVENTS.filter(event => {
        const eventDate = new Date(event.date + 'T00:00:00');
        return eventDate.getMonth() === selectedMonth.getMonth() &&
            eventDate.getFullYear() === selectedMonth.getFullYear();
    });

    return (
        <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 pt-20 sm:pt-24 md:pt-32 pb-8 sm:pb-12">
            <div className="max-w-7xl mx-auto px-3 sm:px-4 md:px-6 lg:px-8">
                {/* Header */}
                <div className="mb-4 sm:mb-6 md:mb-8 flex flex-col gap-3 sm:gap-4">
                    <div>
                        <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#B8D033] mb-1 sm:mb-2">
                            Minha Agenda
                        </h1>
                        <p className="text-xs sm:text-sm md:text-base text-gray-600">
                            Gerencie seus eventos e compromissos fotográficos
                        </p>
                    </div>
                    <div className="flex gap-2">
                    </div>
                </div>

                <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6">
                    {/* Calendar Section */}
                    <div className="lg:col-span-2 space-y-4 sm:space-y-6">
                        {/* Calendar Card */}
                        <div className="bg-white rounded-2xl shadow-xl border border-gray-200 overflow-hidden">
                            {/* Calendar Header */}
                            <div className="bg-gradient-to-r from-[#492E61] to-[#5a3a7a] p-4 sm:p-6">
                                <div className="flex items-center justify-between mb-3 sm:mb-4">
                                    <button
                                        onClick={prevMonth}
                                        className="p-1.5 sm:p-2 hover:bg-white/20 rounded-lg transition-colors"
                                    >
                                        <ChevronLeft className="w-5 h-5 sm:w-6 sm:h-6 text-white" />
                                    </button>
                                    <h2 className="text-lg sm:text-xl md:text-2xl font-bold text-white capitalize">
                                        {currentMonthName}
                                    </h2>
                                    <button
                                        onClick={nextMonth}
                                        className="p-1.5 sm:p-2 hover:bg-white/20 rounded-lg transition-colors"
                                    >
                                        <ChevronRight className="w-5 h-5 sm:w-6 sm:h-6 text-white" />
                                    </button>
                                </div>

                                {/* Stats */}
                                <div className="grid grid-cols-3 gap-2 sm:gap-4">
                                    <div className="bg-white/10 backdrop-blur-sm rounded-lg p-2 sm:p-3 text-center">
                                        <p className="text-white/80 text-[10px] sm:text-xs mb-0.5 sm:mb-1">Total</p>
                                        <p className="text-xl sm:text-2xl font-bold text-white">{monthEvents.length}</p>
                                    </div>
                                    <div className="bg-white/10 backdrop-blur-sm rounded-lg p-2 sm:p-3 text-center">
                                        <p className="text-white/80 text-[10px] sm:text-xs mb-0.5 sm:mb-1">Confirmados</p>
                                        <p className="text-xl sm:text-2xl font-bold text-green-300">
                                            {monthEvents.filter(e => e.status === 'confirmed').length}
                                        </p>
                                    </div>
                                    <div className="bg-white/10 backdrop-blur-sm rounded-lg p-2 sm:p-3 text-center">
                                        <p className="text-white/80 text-[10px] sm:text-xs mb-0.5 sm:mb-1">Pendentes</p>
                                        <p className="text-xl sm:text-2xl font-bold text-yellow-300">
                                            {monthEvents.filter(e => e.status === 'pending').length}
                                        </p>
                                    </div>
                                </div>
                            </div>

                            {/* Calendar Grid */}
                            <div className="p-3 sm:p-4 md:p-6">
                                {/* Week Days Header */}
                                <div className="grid grid-cols-7 gap-1 sm:gap-2 mb-1 sm:mb-2">
                                    {['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'].map((day) => (
                                        <div
                                            key={day}
                                            className="text-center text-[10px] sm:text-xs md:text-sm font-bold text-gray-600 py-1 sm:py-2"
                                        >
                                            {day}
                                        </div>
                                    ))}
                                </div>

                                {/* Calendar Days */}
                                <div className="grid grid-cols-7 gap-1 sm:gap-2">
                                    {calendarDays.map((day, index) => {
                                        if (!day) {
                                            return <div key={`empty-${index}`} className="aspect-square" />;
                                        }

                                        const dayEvents = getEventsForDate(day);
                                        const today = isToday(day);

                                        return (
                                            <div
                                                key={index}
                                                className={`aspect-square rounded-lg sm:rounded-xl border-2 p-1 sm:p-2 transition-all cursor-pointer hover:shadow-lg ${today
                                                        ? 'border-[#492E61] bg-[#492E61]/5'
                                                        : dayEvents.length > 0
                                                            ? 'border-[#B9CF32] bg-[#B9CF32]/5 hover:bg-[#B9CF32]/10'
                                                            : 'border-gray-200 hover:border-gray-300 hover:bg-gray-50'
                                                    }`}
                                            >
                                                <div className="h-full flex flex-col">
                                                    <span
                                                        className={`text-xs sm:text-sm font-semibold mb-0.5 sm:mb-1 ${today
                                                                ? 'text-[#492E61]'
                                                                : dayEvents.length > 0
                                                                    ? 'text-gray-900'
                                                                    : 'text-gray-600'
                                                            }`}
                                                    >
                                                        {day.getDate()}
                                                    </span>
                                                    {dayEvents.length > 0 && (
                                                        <div className="flex-1 flex flex-col gap-0.5 sm:gap-1">
                                                            {dayEvents.slice(0, 1).map((event) => (
                                                                <div
                                                                    key={event.id}
                                                                    className={`text-[6px] sm:text-[8px] px-0.5 sm:px-1 py-0.5 rounded ${getTypeColor(event.type)} truncate leading-tight`}
                                                                >
                                                                    {event.title}
                                                                </div>
                                                            ))}
                                                            {dayEvents.length > 1 && (
                                                                <span className="text-[6px] sm:text-[8px] text-gray-500 font-medium">
                                                                    +{dayEvents.length - 1}
                                                                </span>
                                                            )}
                                                        </div>
                                                    )}
                                                </div>
                                            </div>
                                        );
                                    })}
                                </div>
                            </div>
                        </div>

                        {/* Legend */}
                        <div className="bg-white rounded-2xl shadow-lg border border-gray-200 p-4 sm:p-6">
                            <h3 className="text-base sm:text-lg font-bold text-gray-900 mb-3 sm:mb-4">Legenda</h3>
                            <div className="grid grid-cols-2 sm:grid-cols-3 gap-3 sm:gap-4">
                                <div className="flex items-center gap-2">
                                    <div className="w-3 h-3 sm:w-4 sm:h-4 rounded bg-green-500"></div>
                                    <span className="text-xs sm:text-sm text-gray-700">Confirmado</span>
                                </div>
                                <div className="flex items-center gap-2">
                                    <div className="w-3 h-3 sm:w-4 sm:h-4 rounded bg-yellow-500"></div>
                                    <span className="text-xs sm:text-sm text-gray-700">Pendente</span>
                                </div>
                                <div className="flex items-center gap-2">
                                    <div className="w-3 h-3 sm:w-4 sm:h-4 rounded bg-gray-400"></div>
                                    <span className="text-xs sm:text-sm text-gray-700">Concluído</span>
                                </div>
                                <div className="flex items-center gap-2">
                                    <div className="w-3 h-3 sm:w-4 sm:h-4 rounded bg-[#492E61]"></div>
                                    <span className="text-xs sm:text-sm text-gray-700">Formatura</span>
                                </div>
                                <div className="flex items-center gap-2">
                                    <div className="w-3 h-3 sm:w-4 sm:h-4 rounded bg-pink-500"></div>
                                    <span className="text-xs sm:text-sm text-gray-700">Casamento</span>
                                </div>
                                <div className="flex items-center gap-2">
                                    <div className="w-3 h-3 sm:w-4 sm:h-4 rounded bg-blue-500"></div>
                                    <span className="text-xs sm:text-sm text-gray-700">Evento</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* Events List Sidebar */}
                    <div className="space-y-4 sm:space-y-6">
                        {/* Search */}
                        <div className="bg-white rounded-2xl shadow-lg border border-gray-200 p-3 sm:p-4">
                            <div className="relative">
                                <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={18} />
                                <input
                                    type="text"
                                    placeholder="Buscar eventos..."
                                    className="w-full pl-9 sm:pl-10 pr-3 sm:pr-4 py-2 sm:py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#492E61] focus:border-transparent text-sm"
                                />
                            </div>
                        </div>

                        {/* Upcoming Events */}
                        <div className="bg-white rounded-2xl shadow-lg border border-gray-200 p-4 sm:p-6">
                            <h3 className="text-base sm:text-lg font-bold text-gray-900 mb-3 sm:mb-4 flex items-center gap-2">
                                <CalendarIcon size={18} className="sm:w-5 sm:h-5 text-[#492E61]" />
                                Próximos Eventos
                            </h3>
                            <div className="space-y-2 sm:space-y-3 max-h-[400px] sm:max-h-[600px] overflow-y-auto">
                                {MOCK_EVENTS.slice(0, 5).map((event) => (
                                    <div
                                        key={event.id}
                                        className="p-3 sm:p-4 border-l-4 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors cursor-pointer"
                                        style={{ borderLeftColor: event.type === 'formatura' ? '#492E61' : event.type === 'casamento' ? '#ec4899' : '#3b82f6' }}
                                    >
                                        <div className="flex items-start justify-between mb-2 gap-2">
                                            <h4 className="font-semibold text-gray-900 text-xs sm:text-sm flex-1">{event.title}</h4>
                                            <span className={`text-[10px] sm:text-xs px-1.5 sm:px-2 py-0.5 sm:py-1 rounded-full border whitespace-nowrap ${getStatusColor(event.status)}`}>
                                                {getStatusLabel(event.status)}
                                            </span>
                                        </div>
                                        <div className="space-y-1">
                                            <div className="flex items-center gap-1.5 sm:gap-2 text-[10px] sm:text-xs text-gray-600">
                                                <Clock size={12} className="sm:w-3.5 sm:h-3.5 flex-shrink-0" />
                                                <span>{new Date(event.date).toLocaleDateString('pt-BR')} às {event.time}</span>
                                            </div>
                                            <div className="flex items-center gap-1.5 sm:gap-2 text-[10px] sm:text-xs text-gray-600">
                                                <MapPin size={12} className="sm:w-3.5 sm:h-3.5 flex-shrink-0" />
                                                <span className="truncate">{event.location}</span>
                                            </div>
                                            <div className="flex items-center gap-1.5 sm:gap-2 text-[10px] sm:text-xs text-gray-600">
                                                <User size={12} className="sm:w-3.5 sm:h-3.5 flex-shrink-0" />
                                                <span>{event.client}</span>
                                            </div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};