'use client';

import { Candidate } from '@/type/candidate.type';
import { useEffect, useMemo, useState } from 'react';
import { DemographicsCard } from './DemographicsCard';
import { HeadToHeadComparison } from './HeadToHeadComparison';
import { HistoricalTimeline } from './HistoricalTimeline';
import { KeyIssues } from './KeyIssues';
import { LiveResultsCard } from './LiveResultsCard';
import { PartyDominance } from './PartyDominance';
import { SeatDetailsBanner } from './SeatDetailsBanner';
import { SeatOverview } from './SeatOverview';
import { ShareSection } from './ShareSection';
import { TurnoutTrendChart } from './TurnoutTrendChart';

interface CandidateResult extends Candidate {
  rawShare: number;
  votes: number;
  percent: string;
}

interface SeatDetailsClientProps {
  seatId: string;
}

export default function SeatDetailsClient({ seatId }: SeatDetailsClientProps) {
  const [seatCandidates, setSeatCandidates] = useState<Candidate[]>([]);
  const [totalVoters, setTotalVoters] = useState(0);
  const [totalCenters, setTotalCenters] = useState(0);
  const [district, setDistrict] = useState('');

  // Decode the seat ID to handle URL encoding
  const decodedSeatId = decodeURIComponent(seatId);

  useEffect(() => {
    // Generate mock candidates
    const mockCandidates: Candidate[] = [
      {
        id: 1,
        name_bn: 'প্রার্থী ক (নৌকা)',
        party: {
          id: 1,
          name_bn: 'বাংলাদেশ আওয়ামী লীগ',
          name_en: 'Bangladesh Awami League',
          symbol: 'images/symbols/dhaner-shish.svg',
        } as any,
        photo_file: 'https://i.pravatar.cc/150?u=1',
        educational_qualification: 'স্নাতকোত্তর',
        tax_return_info: {
          total_visible_income: '52000000',
        } as any,
        criminal_cases: [],
      } as unknown as Candidate,
      {
        id: 2,
        name_bn: 'প্রার্থী খ (ধানের শীষ)',
        party: {
          id: 2,
          name_bn: 'বাংলাদেশ জাতীয়তাবাদী দল',
          name_en: 'BNP',
          symbol: '/images/symbols/dhaner-shish.svg',
        } as any,
        photo_file: 'https://i.pravatar.cc/150?u=2',
        educational_qualification: 'পিএইচডি',
        tax_return_info: {
          total_visible_income: '21000000',
        } as any,
        criminal_cases: [],
      } as unknown as Candidate,
      {
        id: 3,
        name_bn: 'প্রার্থী গ (লাঙ্গল)',
        party: {
          id: 3,
          name_bn: 'জাতীয় পার্টি',
          name_en: 'Jatiya Party',
          symbol: '/images/symbols/langol.svg',
        } as any,
        photo_file: 'https://i.pravatar.cc/150?u=3',
        educational_qualification: 'স্নাতক',
        tax_return_info: {
          total_visible_income: '15000000',
        } as any,
        criminal_cases: [],
      } as unknown as Candidate,
      {
        id: 4,
        name_bn: 'প্রার্থী ঘ (হাতপাখা)',
        party: {
          id: 4,
          name_bn: 'ইসলামী আন্দোলন',
          name_en: 'Islami Andolan',
          symbol: '/images/symbols/eagul.svg',
        } as any,
        photo_file: 'https://i.pravatar.cc/150?u=4',
        educational_qualification: 'কামিল',
        tax_return_info: {
          total_visible_income: '5000000',
        } as any,
        criminal_cases: [],
      } as unknown as Candidate,
      {
        id: 5,
        name_bn: 'প্রার্থী ঙ (মশাল)',
        party: {
          id: 5,
          name_bn: 'গণসংহতি আন্দোলন',
          name_en: 'Gonosanghati Andolon',
          symbol: '/images/symbols/mashal.svg',
        } as any,
        photo_file: 'https://i.pravatar.cc/150?u=5',
        educational_qualification: 'স্নাতকোত্তর',
        tax_return_info: {
          total_visible_income: '8000000',
        } as any,
        criminal_cases: [],
      } as unknown as Candidate,
      {
        id: 6,
        name_bn: 'প্রার্থী চ (মাছ)',
        party: {
          id: 6,
          name_bn: 'বাংলাদেশ লেবার পার্টি',
          name_en: 'Labour Party',
          symbol: '/images/symbols/machh.svg',
        } as any,
        photo_file: 'https://i.pravatar.cc/150?u=6',
        educational_qualification: 'স্নাতক',
        tax_return_info: {
          total_visible_income: '3000000',
        } as any,
        criminal_cases: [],
      } as unknown as Candidate,
    ];

    setSeatCandidates(mockCandidates);

    // Determine district from seat ID
    const districtName = decodedSeatId.includes('-') ? decodedSeatId.split('-')[0] : 'অজানা জেলা';
    setDistrict(districtName);

    // Generate stats
    const voters = Math.floor(Math.random() * (500000 - 250000) + 250000);
    setTotalVoters(voters);
    setTotalCenters(Math.floor(voters / 2500));
  }, [decodedSeatId]);

  // Calculate live results
  const liveResults = useMemo(() => {
    const remainingVotes = Math.floor(totalVoters * 0.75);
    const results: CandidateResult[] = seatCandidates.map((c) => {
      const share = Math.random();
      return { ...c, rawShare: share, votes: 0, percent: '0' };
    });

    const totalShare = results.reduce((sum, c) => sum + c.rawShare, 0);
    results.forEach((c) => {
      c.votes = Math.floor((c.rawShare / totalShare) * remainingVotes);
      c.percent = ((c.votes / remainingVotes) * 100).toFixed(1);
    });

    results.sort((a, b) => b.votes - a.votes);
    return results;
  }, [seatCandidates, totalVoters]);

  // Historical data
  const historyData = [
    { year: 2018, turnout: 80, winner: 'আওয়ামী লীগ', margin: 45000 },
    { year: 2014, turnout: 40, winner: 'আওয়ামী লীগ', margin: 0 },
    { year: 2008, turnout: 87, winner: 'আওয়ামী লীগ', margin: 22000 },
    { year: 2001, turnout: 75, winner: 'বিএনপি', margin: 15000 },
    { year: 1996, turnout: 78, winner: 'জাতীয় পার্টি', margin: 5000 },
  ];

  const turnoutPercent = (Math.random() * (85 - 45) + 45).toFixed(1);

  return (
    <>
      <SeatDetailsBanner
        seatId={decodedSeatId}
        district={district}
        totalVoters={totalVoters}
        totalCenters={totalCenters}
        turnoutPercent={turnoutPercent}
      />

      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
          {/* Left Column (Main Info) - Span 8 */}
          <div className="lg:col-span-8 space-y-8">
            <LiveResultsCard results={liveResults} totalCenters={totalCenters} />
            <HeadToHeadComparison candidates={seatCandidates} />

            {/* Seat Overview & Issues */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <SeatOverview seatId={decodedSeatId} district={district} />
              <KeyIssues />
            </div>

            <HistoricalTimeline historyData={historyData} />
          </div>

          {/* Right Column (Sidebar) - Span 4 */}
          <div className="lg:col-span-4 space-y-8">
            <TurnoutTrendChart />
            <DemographicsCard totalVoters={totalVoters} />
            <PartyDominance />
            <ShareSection />
          </div>
        </div>
      </main>
    </>
  );
}