'use client';

import { useMemo, useState } from 'react';
import EventsPanel, { type FilterType } from './components/EventsPanel';
import Header from './components/Header';
import StreamsChart from './components/StreamsChart';
import { useData } from './data/DataContext';
import {
    combineAndSortEvents,
    transformAdCampaignsToEvents,
    transformCurrentEventsToEvents,
    transformEmailCampaignsToEvents,
    transformReleasesToEvents,
} from './utils/transformCampaigns';

// Helper function to calculate cutoff timestamp based on selected period
const getTimeRangeCutoff = (period: string): number => {
    const now = new Date();
    switch (period) {
        case '28 Days':
            now.setDate(now.getDate() - 28);
            break;
        case '6 Months':
            now.setMonth(now.getMonth() - 6);
            break;
        case '1 Year':
        default:
            now.setFullYear(now.getFullYear() - 1);
    }
    return now.getTime();
};

// Helper function to parse date from MM/DD/YY format to timestamp
const parseDateToTimestamp = (dateStr: string): number => {
    const [month, day, year] = dateStr.split('/').map(num => parseInt(num, 10));
    // Year is 2-digit, so convert to 4-digit (assuming 20XX)
    const fullYear = 2000 + year;
    return new Date(fullYear, month - 1, day).getTime();
};

export default function Home() {
    const {
        adCampaigns,
        emailCampaigns,
        currentEvents,
        releases,
        streamsAllMarkets,
        physicalSales,
        isLoading,
        error,
    } = useData();

    // Time range state for filtering
    const [timeRange, setTimeRange] = useState<
        '1 Year' | '6 Months' | '28 Days'
    >('1 Year');

    // Chart mode state for switching between streams and physical sales
    const [chartMode, setChartMode] = useState<'streams' | 'physical'>(
        'streams'
    );

    // Physical sales metric state for switching between dollars and units
    const [physicalMetric, setPhysicalMetric] = useState<'dollars' | 'units'>(
        'dollars'
    );

    // Category filter state
    const [categoryFilter, setCategoryFilter] = useState<FilterType>('all');

    // Hover state for event highlighting
    const [hoveredEventId, setHoveredEventId] = useState<string | null>(null);

    // Hover state for chart marker highlighting
    const [hoveredDateTimestamp, setHoveredDateTimestamp] = useState<
        number | null
    >(null);

    // Transform ad campaigns, email campaigns, current events, and releases to events
    const adEvents = transformAdCampaignsToEvents(adCampaigns);
    const emailEvents = transformEmailCampaignsToEvents(emailCampaigns);
    const newsEvents = transformCurrentEventsToEvents(currentEvents);
    const releaseEvents = transformReleasesToEvents(releases);

    // Combine all events and sort by date
    const allEvents = combineAndSortEvents(
        adEvents,
        emailEvents,
        newsEvents,
        releaseEvents
    );

    // Filter events and streaming data based on selected time range and category
    const {
        filteredEvents,
        filteredStreams,
        filteredPhysicalSales,
        chartEvents,
    } = useMemo(() => {
        const cutoffTimestamp = getTimeRangeCutoff(timeRange);

        // First filter by time range
        let timeFilteredEvents = allEvents.filter(
            event => event.dateTimestamp >= cutoffTimestamp
        );

        // Then filter by category or highlights
        if (categoryFilter !== 'all') {
            if (categoryFilter === 'highlights') {
                // Filter by isHighlight field
                timeFilteredEvents = timeFilteredEvents.filter(
                    event => event.isHighlight === true
                );
            } else {
                // Filter by category
                timeFilteredEvents = timeFilteredEvents.filter(
                    event => event.category === categoryFilter
                );
            }
        }

        // Filter events for chart based on hover state from EventsPanel
        let chartEvents = timeFilteredEvents;
        if (hoveredEventId !== null) {
            chartEvents = timeFilteredEvents.filter(
                event => event.id === hoveredEventId
            );
        }

        // Filter events for EventsPanel based on hover state from chart
        let panelEvents = timeFilteredEvents;
        if (hoveredDateTimestamp !== null) {
            panelEvents = timeFilteredEvents.filter(
                event => event.dateTimestamp === hoveredDateTimestamp
            );
        }

        const filteredStreams = streamsAllMarkets.filter(
            stream => parseDateToTimestamp(stream.date) >= cutoffTimestamp
        );

        // Filter physical sales data by time range (ISO date format: YYYY-MM-DD)
        const filteredPhysicalSales = (physicalSales || []).filter(sale => {
            const saleTimestamp = new Date(sale.date).getTime();
            return saleTimestamp >= cutoffTimestamp;
        });

        return {
            filteredEvents: panelEvents,
            filteredStreams,
            filteredPhysicalSales,
            chartEvents,
        };
    }, [
        allEvents,
        streamsAllMarkets,
        physicalSales,
        timeRange,
        categoryFilter,
        hoveredEventId,
        hoveredDateTimestamp,
    ]);

    // Handle loading state
    if (isLoading) {
        return (
            <div className="min-h-screen bg-white">
                <Header />
                <main className="max-w-screen-2xl mx-auto px-6 py-6">
                    <div className="flex items-center justify-center h-64">
                        <div className="text-gray-500">
                            Loading artist data...
                        </div>
                    </div>
                </main>
            </div>
        );
    }

    // Handle error state
    if (error) {
        return (
            <div className="min-h-screen bg-white">
                <Header />
                <main className="max-w-screen-2xl mx-auto px-6 py-6">
                    <div className="flex items-center justify-center h-64">
                        <div className="text-red-500">Error: {error}</div>
                    </div>
                </main>
            </div>
        );
    }

    return (
        <div className="bg-gray-50">
            <Header />

            <main className="max-w-screen-2xl mx-auto px-6">
                <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    {/* Chart Section - Takes 2 columns */}
                    <div className="lg:col-span-2">
                        <StreamsChart
                            events={chartEvents}
                            streamsData={filteredStreams}
                            physicalSalesData={filteredPhysicalSales}
                            chartMode={chartMode}
                            physicalMetric={physicalMetric}
                            hasPhysicalSales={
                                physicalSales !== null &&
                                physicalSales !== undefined &&
                                physicalSales.length > 0
                            }
                            timeRange={timeRange}
                            onTimeRangeChange={setTimeRange}
                            onChartModeChange={setChartMode}
                            onPhysicalMetricChange={setPhysicalMetric}
                            onMarkerHover={setHoveredDateTimestamp}
                        />
                    </div>

                    {/* Events Panel - Takes 1 column */}
                    <div className="lg:col-span-1">
                        <EventsPanel
                            events={filteredEvents}
                            activeFilter={categoryFilter}
                            onFilterChange={setCategoryFilter}
                            onEventHover={setHoveredEventId}
                        />
                    </div>
                </div>
            </main>
        </div>
    );
}