'use client';

import {
  filterCandidatesByConstituency,
  filterCandidatesByDistrict,
} from '@/helper/candidate.helper';
import { Candidate } from '@/type/candidate.type';
import { Constituency, District } from '@/type/localtion.type';
import { useMemo, useState } from 'react';
import { toast } from 'sonner';
import ComparisionHeader from './ComparisionHeader';
import ComparisonFilter from './ComparisonFilter';
import ComparisonHow from './ComparisonHow';
import ComparisonListView from './ComparisonListView';
import ComparisonStickyBottom from './ComparisonStickyBottom';
import ComparisonAnalytics from './analytics/ComparisonAnalytics';

export function ComparisonClient({
  candidates,
  districts,
  constituencies,
}: {
  candidates: Candidate[];
  districts: District[];
  constituencies: Constituency[];
}) {
  const [selectedDistrict, setSelectedDistrict] = useState('');
  const [selectedConstituency, setSelectedConstituency] = useState('');
  const [filteredCandidates, setFilteredCandidates] = useState<Candidate[]>(candidates);
  const [selectedCandidates, setSelectedCandidates] = useState<number[]>([]);
  const [showAnalytics, setShowAnalytics] = useState(false);
  const [visibleCount, setVisibleCount] = useState<number>(10);

  const handleDistrictChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const district = e.target.value;
    setSelectedDistrict(district);
    setSelectedConstituency('');

    if (district) {
      const filtered = filterCandidatesByDistrict(candidates, district);
      setFilteredCandidates(filtered);
    } else {
      setFilteredCandidates(candidates);
    }
    setVisibleCount(10);

    setSelectedCandidates([]);
    setShowAnalytics(false);
  };

  // Handle constituency change
  const handleConstituencyChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const constituency = e.target.value;
    setSelectedConstituency(constituency);

    let filtered = candidates;
    if (selectedDistrict) {
      filtered = filterCandidatesByDistrict(candidates, selectedDistrict);
    }
    if (constituency) {
      filtered = filterCandidatesByConstituency(filtered, constituency);
    }
    setFilteredCandidates(filtered);
    setVisibleCount(10); // Reset visible count on filter change

    // Reset selection
    setSelectedCandidates([]);
    setShowAnalytics(false);
  };

  // Toggle candidate selection
  const toggleCandidateSelection = (id: number) => {
    setSelectedCandidates((prev) => {
      if (prev.includes(id)) {
        return prev.filter((cId) => cId != id);
      } else {
        if (prev.length >= 3) {
          toast.warning('আপনি সর্বোচ্চ ৩ জন প্রার্থী তুলনা করতে পারবেন।');
          return prev;
        }
        return [...prev, id];
      }
    });
  };

  // Show comparison
  const handleShowComparison = () => {
    if (selectedCandidates.length < 2) {
      alert('তুলনার জন্য অন্তত ২ জন প্রার্থী নির্বাচন করুন।');
      return;
    }
    setShowAnalytics(true);
    setTimeout(() => {
      document.getElementById('analytics-view')?.scrollIntoView({ behavior: 'smooth' });
    }, 100);
  };

  const selectedData = useMemo(
    () => candidates.filter((c) => selectedCandidates.includes(c.id)),
    [candidates, selectedCandidates],
  );

  return (
    <>
      <ComparisionHeader />

      <main className="max-w-7xl mx-auto px-3 sm:px-4 lg:px-8 py-4 md:py-10">
        {/* Instruction Block */}
        {!showAnalytics && <ComparisonHow />}

        {/* Filters Section */}
        {!showAnalytics && (
          <ComparisonFilter
            districts={districts}
            constituencies={constituencies}
            selectedDistrict={selectedDistrict}
            selectedConstituency={selectedConstituency}
            handleDistrictChange={handleDistrictChange}
            handleConstituencyChange={handleConstituencyChange}
          />
        )}

        <div className="relative min-h-[600px]">
          {/* List View */}
          {!showAnalytics && (
            <ComparisonListView
              filteredCandidates={filteredCandidates}
              visibleCount={visibleCount}
              setVisibleCount={setVisibleCount}
              selectedCandidates={selectedCandidates}
              toggleCandidateSelection={toggleCandidateSelection}
            />
          )}
          {/* Analytics View */}
          {showAnalytics && (
            <ComparisonAnalytics
              showAnalytics={showAnalytics}
              selectedData={selectedData}
              selectedCandidates={selectedCandidates}
            />
          )}
        </div>
      </main>

      {/* Floating Action Bar */}
      <ComparisonStickyBottom
        selectedCandidates={selectedCandidates}
        showAnalytics={showAnalytics}
        handleShowComparison={handleShowComparison}
        setShowAnalytics={setShowAnalytics}
        setSelectedCandidates={setSelectedCandidates}
      />
    </>
  );
}