'use client';

import { Election, HistoricalPerformance } from '@/lib/db/history';
import { useEffect, useState } from 'react';
import { HistoricalTrendsChart } from './HistoricalTrendsChart';
import { HistoryAllElectionsTable } from './HistoryAllElectionsTable';
import { HistoryHeader } from './HistoryHeader';
import { HistoryPartyResults } from './HistoryPartyResults';
import { HistorySummaryStats } from './HistorySummaryStats';
import { HistoryYearSelector } from './HistoryYearSelector';
import { VoteShareChart } from './VoteShareChart';

interface HistoryClientProps {
  elections: Election[];
  historicalPerformance: HistoricalPerformance;
}

export function HistoryClient({ elections, historicalPerformance }: HistoryClientProps) {
  const [selectedYear, setSelectedYear] = useState(2024);
  const [chartLoaded, setChartLoaded] = useState(false);

  const selectedElection = elections.find((e) => e.year === selectedYear) || elections[0];
  const prevElection = elections[elections.indexOf(selectedElection) + 1];

  // Load Chart.js
  useEffect(() => {
    const chartOnWindow =
      typeof window !== 'undefined' ? (window as Window & { Chart?: unknown }).Chart : undefined;
    if (!chartOnWindow) {
      const script = document.createElement('script');
      script.src = 'https://cdn.jsdelivr.net/npm/chart.js';
      script.onload = () => setChartLoaded(true);
      document.head.appendChild(script);
    } else {
      setChartLoaded(true);
    }
  }, []);

  return (
    <>
      <HistoryHeader />

      <div className="bg-amber-50 border-b border-amber-100 py-2 sm:py-3 md:py-4">
        <div className="max-w-7xl mx-auto px-3 sm:px-4 lg:px-8">
          <div className="flex items-center gap-2 sm:gap-3 text-amber-800">
            <span className="material-symbols-outlined text-amber-600 text-lg sm:text-xl">
              lightbulb
            </span>
            <span className="text-xs sm:text-sm font-medium">
              ব্যবহার করতে: বছর নির্বাচন করুন → ফলাফল দেখুন → নিচের তালিকা থেকে সকল নির্বাচন দেখুন
            </span>
          </div>
        </div>
      </div>

      <main className="max-w-7xl mx-auto px-3 sm:px-4 lg:px-8 py-4 sm:py-6 md:py-8">
        <HistoryYearSelector
          elections={elections}
          selectedYear={selectedYear}
          onYearSelect={setSelectedYear}
        />

        {/* Election Overview */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-3 sm:gap-4 md:gap-6 mb-6 sm:mb-8">
          <HistorySummaryStats selectedElection={selectedElection} selectedYear={selectedYear} />
          <VoteShareChart selectedElection={selectedElection} chartLoaded={chartLoaded} />
        </div>

        <HistoryPartyResults selectedElection={selectedElection} prevElection={prevElection} />

        <HistoricalTrendsChart
          historicalPerformance={historicalPerformance}
          chartLoaded={chartLoaded}
        />

        <HistoryAllElectionsTable elections={elections} onYearSelect={setSelectedYear} />
      </main>
    </>
  );
}