import React, { useState } from 'react';
import { Calendar, Clock, MapPin, User, ChevronLeft, ChevronRight } 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 [selectedDate, setSelectedDate] = useState<Date | null>(null);

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

    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-blue-100 text-blue-800';
            case 'casamento':
                return 'bg-pink-100 text-pink-800';
            case 'evento':
                return 'bg-purple-100 text-purple-800';
        }
    };

    const getTypeLabel = (type: Event['type']) => {
        switch (type) {
            case 'formatura':
                return 'Formatura';
            case 'casamento':
                return 'Casamento';
            case 'evento':
                return 'Evento';
        }
    };

    const formatDate = (dateString: string) => {
        const date = new Date(dateString + 'T00:00:00');
        return date.toLocaleDateString('pt-BR', {
            day: '2-digit',
            month: 'long',
            year: 'numeric'
        });
    };

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

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

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

    // Generate calendar days
    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 firstDayOfWeek = firstDay.getDay();
        const daysInMonth = lastDay.getDate();
        
        const days: (Date | null)[] = [];
        
        // Add empty cells for days before month starts
        for (let i = 0; i < firstDayOfWeek; 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.getDate() === date.getDate() &&
                   eventDate.getMonth() === date.getMonth() &&
                   eventDate.getFullYear() === date.getFullYear();
        });
    };

    const isToday = (date: Date) => {
        const today = new Date();
        return date.getDate() === today.getDate() &&
               date.getMonth() === today.getMonth() &&
               date.getFullYear() === today.getFullYear();
    };

    const calendarDays = generateCalendarDays();

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

    // Sort events by date
    const sortedEvents = [...MOCK_EVENTS].sort((a, b) =>
        new Date(a.date).getTime() - new Date(b.date).getTime()
    );

    return (
        <div className="min-h-screen bg-gray-50 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-6 sm:mb-8">
                    <h1 className="text-2xl sm:text-3xl font-serif font-bold text-brand-black mb-1 sm:mb-2">
                        Minha Agenda
                    </h1>
                    <p className="text-sm sm:text-base text-gray-600">
                        Gerencie seus eventos e compromissos fotográficos
                    </p>
                </div>

                <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6">
                    {/* Full Calendar Grid */}
                    <div className="lg:col-span-2">
                        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-3 sm:p-4">
                            <div className="flex items-center justify-between mb-3 sm:mb-4">
                                <button
                                    onClick={prevMonth}
                                    className="p-1 sm:p-1.5 hover:bg-gray-100 rounded-full transition-colors"
                                >
                                    <ChevronLeft className="w-4 h-4 sm:w-5 sm:h-5" />
                                </button>
                                <h2 className="text-base sm:text-lg font-bold capitalize" style={{ color: '#B9CF33' }}>
                                    {currentMonthName}
                                </h2>
                                <button
                                    onClick={nextMonth}
                                    className="p-1 sm:p-1.5 hover:bg-gray-100 rounded-full transition-colors"
                                >
                                    <ChevronRight className="w-4 h-4 sm:w-5 sm:h-5" />
                                </button>
                            </div>

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

                                {/* Calendar Days */}
                                <div className="grid grid-cols-7 gap-0.5 sm:gap-1">
                                    {calendarDays.map((date, index) => {
                                        if (!date) {
                                            return (
                                                <div
                                                    key={`empty-${index}`}
                                                    className="h-10 sm:h-12 bg-gray-50 rounded"
                                                />
                                            );
                                        }

                                        const dayEvents = getEventsForDate(date);
                                        const hasEvents = dayEvents.length > 0;
                                        const today = isToday(date);

                                        return (
                                            <button
                                                key={index}
                                                onClick={() => setSelectedDate(date)}
                                                className={`
                                                    h-10 sm:h-12 rounded p-0.5 sm:p-1 transition-all duration-200
                                                    ${today ? 'bg-[#B9CF33] text-white font-bold' : 'hover:bg-gray-100 active:bg-gray-200'}
                                                    ${hasEvents && !today ? 'bg-blue-50 border border-[#B9CF33] sm:border-2' : 'bg-white border border-gray-200'}
                                                    relative group
                                                `}
                                            >
                                                <div className="flex flex-col items-center justify-center h-full">
                                                    <span className={`text-[10px] sm:text-xs ${today ? 'text-white' : 'text-gray-700'}`}>
                                                        {date.getDate()}
                                                    </span>
                                                    {hasEvents && (
                                                        <div className="flex gap-0.5 mt-0.5">
                                                            {dayEvents.slice(0, 3).map((event, i) => (
                                                                <div
                                                                    key={i}
                                                                    className={`w-0.5 h-0.5 sm:w-1 sm:h-1 rounded-full ${
                                                                        event.status === 'confirmed' ? 'bg-green-500' :
                                                                        event.status === 'pending' ? 'bg-yellow-500' :
                                                                        'bg-gray-400'
                                                                    }`}
                                                                />
                                                            ))}
                                                        </div>
                                                    )}
                                                </div>
                                                
                                                {/* Tooltip on hover - hide on mobile */}
                                                {hasEvents && (
                                                    <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden sm:group-hover:block z-10">
                                                        <div className="bg-gray-900 text-white text-xs rounded py-1 px-2 whitespace-nowrap">
                                                            {dayEvents.length} evento{dayEvents.length > 1 ? 's' : ''}
                                                        </div>
                                                    </div>
                                                )}
                                            </button>
                                        );
                                    })}
                                </div>
                            </div>

                            <div className="mt-3 sm:mt-4 pt-3 sm:pt-4 border-t border-gray-200">
                                <div className="grid grid-cols-2 gap-2 text-xs">
                                    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
                                        <span className="text-gray-600 text-[10px] sm:text-xs">Eventos este mês:</span>
                                        <span className="font-bold text-sm sm:text-base" style={{ color: '#B9CF33' }}>{monthEvents.length}</span>
                                    </div>
                                    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
                                        <span className="text-gray-600 text-[10px] sm:text-xs">Total:</span>
                                        <span className="font-semibold text-sm sm:text-base">{MOCK_EVENTS.length}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* Legend and Info Sidebar */}
                    <div className="lg:col-span-1">
                        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-3 sm:p-4 lg:sticky lg:top-24">
                            <h3 className="text-sm font-bold mb-2 sm:mb-3" style={{ color: '#492E61' }}>Legenda</h3>
                            <div className="grid grid-cols-2 sm:grid-cols-1 gap-2 mb-3 sm:mb-4">
                                <div className="flex items-center gap-2 text-xs">
                                    <div className="w-3 h-3 rounded-full bg-green-500 flex-shrink-0"></div>
                                    <span>Confirmado</span>
                                </div>
                                <div className="flex items-center gap-2 text-xs">
                                    <div className="w-3 h-3 rounded-full bg-yellow-500 flex-shrink-0"></div>
                                    <span>Pendente</span>
                                </div>
                                <div className="flex items-center gap-2 text-xs">
                                    <div className="w-3 h-3 rounded-full bg-gray-500 flex-shrink-0"></div>
                                    <span>Concluído</span>
                                </div>
                                <div className="flex items-center gap-2 text-xs">
                                    <div className="w-3 h-3 rounded flex-shrink-0" style={{ backgroundColor: '#B9CF33' }}></div>
                                    <span>Hoje</span>
                                </div>
                                <div className="flex items-center gap-2 text-xs col-span-2 sm:col-span-1">
                                    <div className="w-3 h-3 rounded bg-blue-50 border-2 flex-shrink-0" style={{ borderColor: '#B9CF33' }}></div>
                                    <span>Com eventos</span>
                                </div>
                            </div>

                            {selectedDate && (
                                <div className="pt-3 sm:pt-4 border-t border-gray-200">
                                    <h3 className="text-xs font-bold mb-2" style={{ color: '#492E61' }}>
                                        {selectedDate.toLocaleDateString('pt-BR', { 
                                            day: '2-digit', 
                                            month: 'long',
                                            year: 'numeric'
                                        })}
                                    </h3>
                                    {getEventsForDate(selectedDate).length > 0 ? (
                                        <div className="space-y-2">
                                            {getEventsForDate(selectedDate).map(event => (
                                                <div
                                                    key={event.id}
                                                    className="p-2 bg-gray-50 rounded cursor-pointer hover:bg-gray-100 active:bg-gray-200 transition-colors"
                                                    onClick={() => setSelectedEvent(event)}
                                                >
                                                    <div className="font-medium text-xs text-gray-900 mb-1 line-clamp-1">
                                                        {event.title}
                                                    </div>
                                                    <div className="text-xs text-gray-600 flex items-center">
                                                        <Clock size={10} className="inline mr-1 flex-shrink-0" />
                                                        {event.time}
                                                    </div>
                                                </div>
                                            ))}
                                        </div>
                                    ) : (
                                        <p className="text-xs text-gray-500">Nenhum evento neste dia</p>
                                    )}
                                </div>
                            )}
                        </div>
                    </div>

                    {/* Events List */}
                    <div className="lg:col-span-3 mt-4 sm:mt-6">
                        <div className="bg-white rounded-lg shadow-sm border border-gray-200">
                            <div className="p-4 sm:p-6 border-b border-gray-200">
                                <h2 className="text-lg sm:text-xl font-bold" style={{ color: '#492E61' }}>Próximos Eventos</h2>
                            </div>

                            <div className="divide-y divide-gray-200">
                                {sortedEvents.length === 0 ? (
                                    <div className="p-8 sm:p-12 text-center text-gray-500">
                                        <Calendar className="w-10 h-10 sm:w-12 sm:h-12 mx-auto mb-3 sm:mb-4 text-gray-300" />
                                        <p className="text-sm sm:text-base">Nenhum evento agendado</p>
                                    </div>
                                ) : (
                                    sortedEvents.map((event) => (
                                        <div
                                            key={event.id}
                                            className="p-4 sm:p-6 hover:bg-gray-50 active:bg-gray-100 transition-colors cursor-pointer"
                                            onClick={() => setSelectedEvent(event)}
                                        >
                                            <div className="flex items-start justify-between mb-2 sm:mb-3 gap-3 sm:gap-4">
                                                <div className="flex-1 min-w-0">
                                                    <div className="flex items-start sm:items-center gap-2 mb-2 flex-col sm:flex-row">
                                                        <h3 className="text-base sm:text-lg font-semibold text-brand-black line-clamp-2">
                                                            {event.title}
                                                        </h3>
                                                        <span className={`px-2 py-1 rounded-full text-xs font-medium ${getTypeColor(event.type)} whitespace-nowrap`}>
                                                            {getTypeLabel(event.type)}
                                                        </span>
                                                    </div>
                                                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-1.5 sm:gap-2">
                                                        <div className="flex items-center text-xs sm:text-sm text-gray-600">
                                                            <Calendar className="w-3 h-3 sm:w-4 sm:h-4 mr-1.5 sm:mr-2 flex-shrink-0" style={{ color: '#B9CF33' }} />
                                                            <span className="truncate">{formatDate(event.date)}</span>
                                                        </div>
                                                        <div className="flex items-center text-xs sm:text-sm text-gray-600">
                                                            <Clock className="w-3 h-3 sm:w-4 sm:h-4 mr-1.5 sm:mr-2 flex-shrink-0" style={{ color: '#B9CF33' }} />
                                                            <span>{event.time}</span>
                                                        </div>
                                                        <div className="flex items-center text-xs sm:text-sm text-gray-600">
                                                            <MapPin className="w-3 h-3 sm:w-4 sm:h-4 mr-1.5 sm:mr-2 flex-shrink-0" style={{ color: '#B9CF33' }} />
                                                            <span className="truncate">{event.location}</span>
                                                        </div>
                                                        <div className="flex items-center text-xs sm:text-sm text-gray-600">
                                                            <User className="w-3 h-3 sm:w-4 sm:h-4 mr-1.5 sm:mr-2 flex-shrink-0" style={{ color: '#B9CF33' }} />
                                                            <span className="truncate">{event.client}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <span className={`px-2 sm:px-3 py-1 rounded-full text-[10px] sm:text-xs font-medium whitespace-nowrap ${getStatusColor(event.status)} flex-shrink-0`}>
                                                    {getStatusLabel(event.status)}
                                                </span>
                                            </div>
                                        </div>
                                    ))
                                )}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {/* Event Detail Modal - Improved & Centered */}
            {selectedEvent && (
                <div
                    className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4 animate-fadeIn"
                    onClick={() => setSelectedEvent(null)}
                >
                    <div
                        className="bg-white rounded-2xl max-w-lg w-full shadow-2xl transform transition-all duration-300 animate-slideUp overflow-hidden"
                        onClick={(e) => e.stopPropagation()}
                    >
                        {/* Header with gradient */}
                        <div className="relative p-6 pb-8 bg-gradient-to-br from-[#B9CF33] to-[#a5bd2e]">
                            <button
                                onClick={() => setSelectedEvent(null)}
                                className="absolute top-4 right-4 w-8 h-8 flex items-center justify-center rounded-full bg-white/20 hover:bg-white/30 text-white transition-colors"
                            >
                                ✕
                            </button>
                            
                            <div className="text-white">
                                <h2 className="text-xl sm:text-2xl font-bold mb-3 pr-8">
                                    {selectedEvent.title}
                                </h2>
                                <div className="flex flex-wrap gap-2">
                                    <span className="px-3 py-1 rounded-full text-xs font-medium bg-white/90 text-gray-800">
                                        {getTypeLabel(selectedEvent.type)}
                                    </span>
                                    <span className={`px-3 py-1 rounded-full text-xs font-medium ${getStatusColor(selectedEvent.status)}`}>
                                        {getStatusLabel(selectedEvent.status)}
                                    </span>
                                </div>
                            </div>
                        </div>

                        {/* Content */}
                        <div className="p-6 space-y-4">
                            {/* Date */}
                            <div className="flex items-center gap-4 p-4 bg-gray-50 rounded-xl hover:bg-gray-100 transition-colors group">
                                <div className="w-12 h-12 rounded-xl bg-[#B9CF33]/10 flex items-center justify-center group-hover:scale-110 transition-transform">
                                    <Calendar className="w-6 h-6" style={{ color: '#B9CF33' }} />
                                </div>
                                <div className="flex-1">
                                    <p className="text-xs text-gray-500 mb-0.5">Data</p>
                                    <p className="font-semibold text-gray-900">{formatDate(selectedEvent.date)}</p>
                                </div>
                            </div>

                            {/* Time */}
                            <div className="flex items-center gap-4 p-4 bg-gray-50 rounded-xl hover:bg-gray-100 transition-colors group">
                                <div className="w-12 h-12 rounded-xl bg-[#B9CF33]/10 flex items-center justify-center group-hover:scale-110 transition-transform">
                                    <Clock className="w-6 h-6" style={{ color: '#B9CF33' }} />
                                </div>
                                <div className="flex-1">
                                    <p className="text-xs text-gray-500 mb-0.5">Horário</p>
                                    <p className="font-semibold text-gray-900">{selectedEvent.time}</p>
                                </div>
                            </div>

                            {/* Location */}
                            <div className="flex items-center gap-4 p-4 bg-gray-50 rounded-xl hover:bg-gray-100 transition-colors group">
                                <div className="w-12 h-12 rounded-xl bg-[#B9CF33]/10 flex items-center justify-center group-hover:scale-110 transition-transform">
                                    <MapPin className="w-6 h-6" style={{ color: '#B9CF33' }} />
                                </div>
                                <div className="flex-1">
                                    <p className="text-xs text-gray-500 mb-0.5">Local</p>
                                    <p className="font-semibold text-gray-900">{selectedEvent.location}</p>
                                </div>
                            </div>

                            {/* Client */}
                            <div className="flex items-center gap-4 p-4 bg-gray-50 rounded-xl hover:bg-gray-100 transition-colors group">
                                <div className="w-12 h-12 rounded-xl bg-[#B9CF33]/10 flex items-center justify-center group-hover:scale-110 transition-transform">
                                    <User className="w-6 h-6" style={{ color: '#B9CF33' }} />
                                </div>
                                <div className="flex-1">
                                    <p className="text-xs text-gray-500 mb-0.5">Cliente</p>
                                    <p className="font-semibold text-gray-900">{selectedEvent.client}</p>
                                </div>
                            </div>
                        </div>

                        {/* Actions */}
                        <div className="p-6 pt-4 bg-gray-50 flex flex-col sm:flex-row gap-3">
                            <button
                                onClick={() => setSelectedEvent(null)}
                                className="flex-1 px-6 py-3 bg-white border-2 border-gray-200 text-gray-700 rounded-xl hover:bg-gray-50 hover:border-gray-300 active:scale-95 transition-all font-medium"
                            >
                                Fechar
                            </button>
                            <button
                                className="flex-1 px-6 py-3 text-white rounded-xl transition-all font-medium shadow-lg hover:shadow-xl active:scale-95"
                                style={{ backgroundColor: '#B9CF33' }}
                                onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#a5bd2e'}
                                onMouseLeave={(e) => e.currentTarget.style.backgroundColor = '#B9CF33'}
                            >
                                Ver Detalhes
                            </button>
                        </div>
                    </div>
                </div>
            )}

            <style>{`
                @keyframes fadeIn {
                    from { opacity: 0; }
                    to { opacity: 1; }
                }
                
                @keyframes slideUp {
                    from {
                        opacity: 0;
                        transform: translateY(20px) scale(0.95);
                    }
                    to {
                        opacity: 1;
                        transform: translateY(0) scale(1);
                    }
                }
                
                .animate-fadeIn {
                    animation: fadeIn 0.2s ease-out;
                }
                
                .animate-slideUp {
                    animation: slideUp 0.3s ease-out;
                }
            `}</style>
        </div>
    );
};
