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

                <div className="space-y-6 fade-in">
                    {/* Calendar Card */}
                    <div className="bg-white rounded-xl border border-gray-200 shadow-lg overflow-hidden">
                        {/* Header */}
                        <div className="bg-gradient-to-r from-brand-black to-brand-black/90 px-6 py-5">
                            <div className="flex items-center justify-between">
                                <button
                                    onClick={prevMonth}
                                    className="p-2 hover:bg-white/10 rounded-lg transition-all"
                                >
                                    <ChevronLeft className="w-5 h-5 text-white" />
                                </button>
                                <h2 className="text-2xl font-serif font-bold text-white capitalize">
                                    {currentMonthName}
                                </h2>
                                <button
                                    onClick={nextMonth}
                                    className="p-2 hover:bg-white/10 rounded-lg transition-all"
                                >
                                    <ChevronRight className="w-5 h-5 text-white" />
                                </button>
                            </div>
                        </div>

                        {/* Calendar Grid */}
                        <div className="p-4">
                            {/* Week Days */}
                            <div className="grid grid-cols-7 gap-2 mb-2">
                                {['D', 'S', 'T', 'Q', 'Q', 'S', 'S'].map((day, idx) => (
                                    <div key={idx} className="text-center">
                                        <span className="text-xs font-semibold text-gray-400">
                                            {day}
                                        </span>
                                    </div>
                                ))}
                            </div>

                            {/* Days */}
                            <div className="grid grid-cols-7 gap-2">
                                {calendarDays.map((day, index) => {
                                    if (!day) {
                                        return <div key={`empty-${index}`} />;
                                    }
                                    
                                    const dayEvents = getEventsForDate(day);
                                    const today = isToday(day);
                                    
                                    return (
                                        <div
                                            key={index}
                                            className={`relative w-10 h-10 rounded-lg border-2 flex items-center justify-center cursor-pointer transition-all hover:scale-105 ${
                                                today
                                                    ? 'border-brand-gold bg-brand-gold text-white shadow-md font-bold'
                                                    : dayEvents.length > 0
                                                    ? 'border-brand-black/20 bg-brand-black text-white hover:border-brand-gold'
                                                    : 'border-gray-200 text-gray-700 hover:border-gray-300 hover:bg-gray-50'
                                            }`}
                                        >
                                            <span className={`text-sm ${today ? 'font-bold' : 'font-medium'}`}>
                                                {day.getDate()}
                                            </span>
                                            {dayEvents.length > 0 && !today && (
                                                <div className="absolute bottom-0.5 flex gap-0.5">
                                                    {dayEvents.slice(0, 3).map((_, i) => (
                                                        <div key={i} className="w-0.5 h-0.5 rounded-full bg-brand-gold" />
                                                    ))}
                                                </div>
                                            )}
                                        </div>
                                    );
                                })}
                            </div>
                        </div>

                        {/* Stats Footer */}
                        <div className="border-t border-gray-200 bg-gray-50 px-6 py-4">
                            <div className="grid grid-cols-3 gap-4">
                                <div className="text-center">
                                    <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">Total</p>
                                    <p className="text-2xl font-bold text-gray-900">{monthEvents.length}</p>
                                </div>
                                <div className="text-center border-x border-gray-200">
                                    <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">Confirmados</p>
                                    <p className="text-2xl font-bold text-green-600">
                                        {monthEvents.filter(e => e.status === 'confirmed').length}
                                    </p>
                                </div>
                                <div className="text-center">
                                    <p className="text-xs text-gray-500 uppercase tracking-wide mb-1">Pendentes</p>
                                    <p className="text-2xl font-bold text-yellow-600">
                                        {monthEvents.filter(e => e.status === 'pending').length}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* Search Bar */}
                    <div className="bg-gray-50 p-3 rounded-lg border border-gray-100">
                        <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-10 pr-4 py-2 border border-gray-200 rounded-sm focus:outline-none focus:border-brand-gold text-sm bg-white"
                            />
                        </div>
                    </div>

                    {/* Events List - Table Format */}
                    <div className="bg-white rounded-lg border border-gray-200 overflow-hidden shadow-sm">
                        <div className="overflow-x-auto">
                            <table className="w-full">
                                <thead className="bg-gray-50 border-b border-gray-200">
                                    <tr>
                                        <th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                                            Evento
                                        </th>
                                        <th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                                            Data
                                        </th>
                                        <th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                                            Horário
                                        </th>
                                        <th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                                            Local
                                        </th>
                                        <th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                                            Cliente
                                        </th>
                                        <th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                                            Status
                                        </th>
                                    </tr>
                                </thead>
                                <tbody className="divide-y divide-gray-100">
                                    {monthEvents.map((event) => (
                                        <tr 
                                            key={event.id}
                                            className="hover:bg-gray-50 cursor-pointer transition-colors"
                                        >
                                            <td className="px-4 py-3">
                                                <div className="flex items-center gap-2">
                                                    <div 
                                                        className={`w-1 h-8 rounded-full ${getTypeColor(event.type)}`}
                                                    />
                                                    <span className="font-medium text-gray-900 text-sm">{event.title}</span>
                                                </div>
                                            </td>
                                            <td className="px-4 py-3">
                                                <div className="flex items-center text-sm text-gray-700">
                                                    <CalendarIcon size={14} className="mr-1.5 text-brand-gold flex-shrink-0" />
                                                    {new Date(event.date + 'T00:00:00').toLocaleDateString('pt-BR')}
                                                </div>
                                            </td>
                                            <td className="px-4 py-3">
                                                <div className="flex items-center text-sm text-gray-700">
                                                    <Clock size={14} className="mr-1.5 text-gray-400 flex-shrink-0" />
                                                    {event.time}
                                                </div>
                                            </td>
                                            <td className="px-4 py-3">
                                                <div className="flex items-center text-sm text-gray-700">
                                                    <MapPin size={14} className="mr-1.5 text-brand-gold flex-shrink-0" />
                                                    <span className="truncate max-w-[200px]">{event.location}</span>
                                                </div>
                                            </td>
                                            <td className="px-4 py-3">
                                                <div className="flex items-center text-sm text-gray-700">
                                                    <User size={14} className="mr-1.5 text-gray-400 flex-shrink-0" />
                                                    {event.client}
                                                </div>
                                            </td>
                                            <td className="px-4 py-3">
                                                <span className={`inline-flex items-center px-2 py-1 rounded text-xs font-semibold border ${getStatusColor(event.status)}`}>
                                                    {getStatusLabel(event.status)}
                                                </span>
                                            </td>
                                        </tr>
                                    ))}
                                </tbody>
                            </table>
                        </div>
                        
                        {monthEvents.length === 0 && (
                            <div className="text-center py-12 text-gray-500">
                                <p>Nenhum evento encontrado neste mês.</p>
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </div>
    );
};