'use client';

import { useMemo } from 'react';
import type { Event, EventCategory } from '../utils/transformCampaigns';

export type FilterType = 'all' | EventCategory | 'highlights';

interface EventsPanelProps {
    events: Event[];
    activeFilter: FilterType;
    onFilterChange: (filter: FilterType) => void;
    onEventHover: (eventId: string | null) => void;
}

export default function EventsPanel({
    events,
    activeFilter,
    onFilterChange,
    onEventHover,
}: EventsPanelProps) {
    // Filter events based on active filter
    const filteredEvents = useMemo(() => {
        if (activeFilter === 'all') {
            return events;
        }
        if (activeFilter === 'highlights') {
            return events.filter(event => event.isHighlight === true);
        }
        return events.filter(event => event.category === activeFilter);
    }, [events, activeFilter]);

    // Calculate date range from events
    const dateRange = () => {
        if (events.length === 0) return 'No events';

        const timestamps = events.map(e => e.dateTimestamp);
        const minDate = new Date(Math.min(...timestamps));
        const maxDate = new Date(Math.max(...timestamps));

        const formatDate = (date: Date) => {
            return date.toLocaleDateString('en-US', {
                month: 'short',
                day: 'numeric',
                year: 'numeric',
            });
        };

        return `${formatDate(minDate)} – ${formatDate(maxDate)}`;
    };

    // Group filtered events by date
    const groupedEvents = filteredEvents.reduce(
        (groups, event) => {
            const date = event.date;
            if (!groups[date]) {
                groups[date] = [];
            }
            groups[date].push(event);
            return groups;
        },
        {} as Record<string, Event[]>
    );

    return (
        <div className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 flex flex-col h-[650px]" >
            {/* Header */}
            <div className="mb-6 flex-shrink-0">
                <h2 className="text-lg font-semibold text-gray-900 mb-1">
                    Events
                </h2>
            </div>

            {/* Filter Tabs */}
            <div className="flex flex-wrap gap-2 mb-6 flex-shrink-0">
                <button
                    onClick={() => onFilterChange('all')}
                    className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors flex items-center gap-1.5 ${
                        activeFilter === 'all'
                            ? 'bg-purple-100 text-purple-700'
                            : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                    }`}
                >
                    <span className="text-base">📊</span>
                    All
                </button>
                <button
                    onClick={() => onFilterChange('Releases')}
                    className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors flex items-center gap-1.5 ${
                        activeFilter === 'Releases'
                            ? 'bg-purple-100 text-purple-700'
                            : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                    }`}
                >
                    <span className="text-base">🎵</span>
                    Releases
                </button>
                <button
                    onClick={() => onFilterChange('Ads')}
                    className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors flex items-center gap-1.5 ${
                        activeFilter === 'Ads'
                            ? 'bg-purple-100 text-purple-700'
                            : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                    }`}
                >
                    <span className="text-base">📱</span>
                    Ads
                </button>
                <button
                    onClick={() => onFilterChange('Email')}
                    className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors flex items-center gap-1.5 ${
                        activeFilter === 'Email'
                            ? 'bg-purple-100 text-purple-700'
                            : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                    }`}
                >
                    <span className="text-base">📧</span>
                    Email
                </button>
                <button
                    onClick={() => onFilterChange('News')}
                    className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors flex items-center gap-1.5 ${
                        activeFilter === 'News'
                            ? 'bg-purple-100 text-purple-700'
                            : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                    }`}
                >
                    <span className="text-base">📰</span>
                    News
                </button>
                <button
                    onClick={() => onFilterChange('highlights')}
                    className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors flex items-center gap-1.5 ${
                        activeFilter === 'highlights'
                            ? 'bg-purple-100 text-purple-700'
                            : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                    }`}
                >
                    <span className="text-base">✨</span>
                    Key Highlights
                </button>

            </div>

            {/* Events List */}
            <div className="space-y-6 overflow-y-auto flex-1 min-h-0">
                {Object.entries(groupedEvents).map(([date, dateEvents]) => (
                    <div key={date}>
                        {/* Date Header */}
                        <div className="text-xs font-medium text-gray-500 mb-3">
                            {date}
                        </div>

                        {/* Events for this date */}
                        <div className="space-y-2">
                            {dateEvents.map(event => (
                                <div key={event.id} className="group">
                                    {/* Event Card */}
                                    <div
                                        className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer"
                                        onMouseEnter={() =>
                                            onEventHover(event.id)
                                        }
                                        onMouseLeave={() => onEventHover(null)}
                                    >
                                        <div
                                            className={`flex-shrink-0 w-10 h-10 rounded-lg ${event.iconBg} flex items-center justify-center text-xl`}
                                        >
                                            {event.icon}
                                        </div>

                                        <div className="flex-1 min-w-0">
                                            <div className="text-xs text-gray-500 mb-0.5">
                                                {event.type}
                                            </div>
                                            <div className="text-sm font-bold text-gray-900 mb-1">
                                                {event.title}
                                            </div>
                                            <div className="text-xs text-gray-600">
                                                {event.description}
                                            </div>
                                        </div>

                                        <button className="flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
                                            <svg
                                                className="w-5 h-5 text-gray-400"
                                                fill="currentColor"
                                                viewBox="0 0 20 20"
                                            >
                                                <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
                                            </svg>
                                        </button>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
}