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 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'
    });

    // 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-32 pb-12">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                {/* Header */}
                <div className="mb-8">
                    <h1 className="text-3xl font-serif font-bold text-brand-black mb-2">
                        Minha Agenda
                    </h1>
                    <p className="text-gray-600">
                        Gerencie seus eventos e compromissos fotográficos
                    </p>
                </div>

                <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    {/* Calendar Navigation */}
                    <div className="lg:col-span-1">
                        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                            <div className="flex items-center justify-between mb-6">
                                <button
                                    onClick={prevMonth}
                                    className="p-2 hover:bg-gray-100 rounded-full transition-colors"
                                >
                                    <ChevronLeft size={20} />
                                </button>
                                <h2 className="text-lg font-semibold capitalize">
                                    {currentMonthName}
                                </h2>
                                <button
                                    onClick={nextMonth}
                                    className="p-2 hover:bg-gray-100 rounded-full transition-colors"
                                >
                                    <ChevronRight size={20} />
                                </button>
                            </div>

                            <div className="space-y-4">
                                <div className="flex items-center justify-between text-sm">
                                    <span className="text-gray-600">Eventos este mês:</span>
                                    <span className="font-semibold text-brand-gold">{monthEvents.length}</span>
                                </div>
                                <div className="flex items-center justify-between text-sm">
                                    <span className="text-gray-600">Total de eventos:</span>
                                    <span className="font-semibold">{MOCK_EVENTS.length}</span>
                                </div>
                            </div>

                            <div className="mt-6 pt-6 border-t border-gray-200">
                                <h3 className="text-sm font-semibold mb-3">Legenda</h3>
                                <div className="space-y-2">
                                    <div className="flex items-center gap-2 text-sm">
                                        <div className="w-3 h-3 rounded-full bg-green-500"></div>
                                        <span>Confirmado</span>
                                    </div>
                                    <div className="flex items-center gap-2 text-sm">
                                        <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
                                        <span>Pendente</span>
                                    </div>
                                    <div className="flex items-center gap-2 text-sm">
                                        <div className="w-3 h-3 rounded-full bg-gray-500"></div>
                                        <span>Concluído</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* Events List */}
                    <div className="lg:col-span-2">
                        <div className="bg-white rounded-lg shadow-sm border border-gray-200">
                            <div className="p-6 border-b border-gray-200">
                                <h2 className="text-xl font-semibold">Próximos Eventos</h2>
                            </div>

                            <div className="divide-y divide-gray-200">
                                {sortedEvents.length === 0 ? (
                                    <div className="p-12 text-center text-gray-500">
                                        <Calendar size={48} className="mx-auto mb-4 text-gray-300" />
                                        <p>Nenhum evento agendado</p>
                                    </div>
                                ) : (
                                    sortedEvents.map((event) => (
                                        <div
                                            key={event.id}
                                            className="p-6 hover:bg-gray-50 transition-colors cursor-pointer"
                                            onClick={() => setSelectedEvent(event)}
                                        >
                                            <div className="flex items-start justify-between mb-3">
                                                <div className="flex-1">
                                                    <div className="flex items-center gap-2 mb-2">
                                                        <h3 className="text-lg font-semibold text-brand-black">
                                                            {event.title}
                                                        </h3>
                                                        <span className={`px-2 py-1 rounded-full text-xs font-medium ${getTypeColor(event.type)}`}>
                                                            {getTypeLabel(event.type)}
                                                        </span>
                                                    </div>
                                                    <div className="space-y-2">
                                                        <div className="flex items-center text-sm text-gray-600">
                                                            <Calendar size={16} className="mr-2 text-brand-gold" />
                                                            {formatDate(event.date)}
                                                        </div>
                                                        <div className="flex items-center text-sm text-gray-600">
                                                            <Clock size={16} className="mr-2 text-brand-gold" />
                                                            {event.time}
                                                        </div>
                                                        <div className="flex items-center text-sm text-gray-600">
                                                            <MapPin size={16} className="mr-2 text-brand-gold" />
                                                            {event.location}
                                                        </div>
                                                        <div className="flex items-center text-sm text-gray-600">
                                                            <User size={16} className="mr-2 text-brand-gold" />
                                                            {event.client}
                                                        </div>
                                                    </div>
                                                </div>
                                                <span className={`px-3 py-1 rounded-full text-xs font-medium ${getStatusColor(event.status)}`}>
                                                    {getStatusLabel(event.status)}
                                                </span>
                                            </div>
                                        </div>
                                    ))
                                )}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {/* Event Detail Modal */}
            {selectedEvent && (
                <div
                    className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4"
                    onClick={() => setSelectedEvent(null)}
                >
                    <div
                        className="bg-white rounded-lg max-w-2xl w-full p-8"
                        onClick={(e) => e.stopPropagation()}
                    >
                        <div className="flex items-start justify-between mb-6">
                            <div>
                                <h2 className="text-2xl font-serif font-bold text-brand-black mb-2">
                                    {selectedEvent.title}
                                </h2>
                                <div className="flex gap-2">
                                    <span className={`px-3 py-1 rounded-full text-xs font-medium ${getTypeColor(selectedEvent.type)}`}>
                                        {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>
                            <button
                                onClick={() => setSelectedEvent(null)}
                                className="text-gray-400 hover:text-gray-600"
                            >
                                ✕
                            </button>
                        </div>

                        <div className="space-y-4">
                            <div className="flex items-center text-gray-700">
                                <Calendar size={20} className="mr-3 text-brand-gold" />
                                <span className="font-medium">{formatDate(selectedEvent.date)}</span>
                            </div>
                            <div className="flex items-center text-gray-700">
                                <Clock size={20} className="mr-3 text-brand-gold" />
                                <span>{selectedEvent.time}</span>
                            </div>
                            <div className="flex items-center text-gray-700">
                                <MapPin size={20} className="mr-3 text-brand-gold" />
                                <span>{selectedEvent.location}</span>
                            </div>
                            <div className="flex items-center text-gray-700">
                                <User size={20} className="mr-3 text-brand-gold" />
                                <span>{selectedEvent.client}</span>
                            </div>
                        </div>

                        <div className="mt-8 pt-6 border-t border-gray-200 flex gap-3">
                            <button
                                onClick={() => setSelectedEvent(null)}
                                className="flex-1 px-6 py-3 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors font-medium"
                            >
                                Fechar
                            </button>
                            <button
                                className="flex-1 px-6 py-3 bg-brand-gold text-white rounded-md hover:bg-[#a5bd2e] transition-colors font-medium"
                            >
                                Ver Detalhes do Evento
                            </button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
};