import { Division, DivisionResult } from '@/lib/db/division';
import { toBn } from '@/lib/utils';
import { useEffect, useRef } from 'react';

interface DivisionAnalyticsProps {
  selectedDivisionData: Division;
  selectedDivisionResult: DivisionResult;
  chartLoaded: boolean;
}

export const DivisionAnalytics = ({
  selectedDivisionData,
  selectedDivisionResult,
  chartLoaded,
}: DivisionAnalyticsProps) => {
  const divisionChartRef = useRef<HTMLCanvasElement>(null);
  const demographicsChartRef = useRef<HTMLCanvasElement>(null);
  const divisionChartInstance = useRef<any>(null);
  const demographicsChartInstance = useRef<any>(null);

  useEffect(() => {
    const chartOnWindow =
      typeof window !== 'undefined' ? (window as Window & { Chart?: any }).Chart : undefined;

    if (!chartLoaded || !divisionChartRef.current || !chartOnWindow) return;

    if (divisionChartInstance.current) {
      divisionChartInstance.current.destroy();
    }

    const ctx = divisionChartRef.current.getContext('2d');
    if (!ctx) return;

    divisionChartInstance.current = new chartOnWindow(ctx, {
      type: 'bar',
      data: {
        labels: ['আওয়ামী লীগ', 'জাতীয় পার্টি', 'স্বতন্ত্র'],
        datasets: [
          {
            data: [
              selectedDivisionResult.AL,
              selectedDivisionResult.JP,
              selectedDivisionResult.IND,
            ],
            backgroundColor: ['#006A4E', '#DC2626', '#6B7280'],
            borderRadius: 8,
            barThickness: 40,
          },
        ],
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: { display: false },
          tooltip: {
            callbacks: {
              label: (ctx: any) => ` আসন: ${toBn(ctx.raw)}`,
            },
            titleFont: { family: "'Hind Siliguri', sans-serif" },
            bodyFont: { family: "'Hind Siliguri', sans-serif" },
          },
        },
        scales: {
          y: {
            beginAtZero: true,
            grid: { color: '#f3f4f6' },
            ticks: {
              font: { family: "'Hind Siliguri', sans-serif" },
              callback: (value: any) => toBn(value),
            },
          },
          x: {
            grid: { display: false },
            ticks: {
              font: { family: "'Hind Siliguri', sans-serif", size: 12 },
            },
          },
        },
      },
    });

    return () => {
      if (divisionChartInstance.current) {
        divisionChartInstance.current.destroy();
      }
    };
  }, [chartLoaded, selectedDivisionResult]);

  useEffect(() => {
    const chartOnWindow =
      typeof window !== 'undefined' ? (window as Window & { Chart?: any }).Chart : undefined;

    if (!chartLoaded || !demographicsChartRef.current || !chartOnWindow) return;

    if (demographicsChartInstance.current) {
      demographicsChartInstance.current.destroy();
    }

    const ctx = demographicsChartRef.current.getContext('2d');
    if (!ctx) return;

    // Simulate demographics (48-52% male)
    const malePct = 48 + Math.random() * 4;
    const femalePct = 100 - malePct;

    demographicsChartInstance.current = new chartOnWindow(ctx, {
      type: 'doughnut',
      data: {
        labels: ['পুরুষ ভোটার', 'মহিলা ভোটার'],
        datasets: [
          {
            data: [malePct.toFixed(1), femalePct.toFixed(1)],
            backgroundColor: ['#2563EB', '#DB2777'],
            borderWidth: 0,
            hoverOffset: 4,
          },
        ],
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            position: 'bottom',
            labels: {
              font: { family: "'Hind Siliguri', sans-serif" },
              usePointStyle: true,
            },
          },
          tooltip: {
            callbacks: {
              label: (ctx: any) => ` ${ctx.label}: ${toBn(ctx.raw)}%`,
            },
            titleFont: { family: "'Hind Siliguri', sans-serif" },
            bodyFont: { family: "'Hind Siliguri', sans-serif" },
          },
        },
      },
    });

    return () => {
      if (demographicsChartInstance.current) {
        demographicsChartInstance.current.destroy();
      }
    };
  }, [chartLoaded, selectedDivisionData]);

  return (
    <div className="grid grid-cols-1 lg:grid-cols-3 gap-3 sm:gap-4 md:gap-6 mb-6 sm:mb-8">
      {/* Division Info */}
      <div className="lg:col-span-1 bg-white rounded-xl sm:rounded-2xl shadow-sm border border-gray-200 p-3 sm:p-4 md:p-6">
        <h3 className="font-bold text-gray-800 mb-3 sm:mb-4 flex items-center gap-2">
          <span className="material-symbols-outlined text-purple-600">location_on</span>
          {selectedDivisionData.nameBn} বিভাগ
        </h3>
        <div className="space-y-3">
          <div className="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
            <span className="text-gray-600">জেলা</span>
            <span className="font-bold text-gray-800">
              {toBn(selectedDivisionData.districts)}টি
            </span>
          </div>
          <div className="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
            <span className="text-gray-600">সংসদীয় আসন</span>
            <span className="font-bold text-gray-800">{toBn(selectedDivisionData.seats)}টি</span>
          </div>
          <div className="p-3 bg-green-50 rounded-lg">
            <div className="flex justify-between items-center mb-1">
              <span className="text-gray-600">আওয়ামী লীগ</span>
              <span className="font-bold text-green-700">{toBn(selectedDivisionResult.AL)}</span>
            </div>
            <div className="w-full bg-gray-200 rounded-lg h-2">
              <div
                className="bg-green-600 h-2 rounded-lg"
                style={{
                  width: `${((selectedDivisionResult.AL / selectedDivisionData.seats) * 100).toFixed(1)}%`,
                }}
              ></div>
            </div>
          </div>
          <div className="p-3 bg-red-50 rounded-lg">
            <div className="flex justify-between items-center mb-1">
              <span className="text-gray-600">জাতীয় পার্টি</span>
              <span className="font-bold text-red-700">{toBn(selectedDivisionResult.JP)}</span>
            </div>
            <div className="w-full bg-gray-200 rounded-lg h-2">
              <div
                className="bg-red-600 h-2 rounded-lg"
                style={{
                  width: `${((selectedDivisionResult.JP / selectedDivisionData.seats) * 100).toFixed(1)}%`,
                }}
              ></div>
            </div>
          </div>
          <div className="p-3 bg-gray-100 rounded-lg">
            <div className="flex justify-between items-center mb-1">
              <span className="text-gray-600">স্বতন্ত্র</span>
              <span className="font-bold text-gray-700">{toBn(selectedDivisionResult.IND)}</span>
            </div>
            <div className="w-full bg-gray-200 rounded-lg h-2">
              <div
                className="bg-gray-600 h-2 rounded-lg"
                style={{
                  width: `${((selectedDivisionResult.IND / selectedDivisionData.seats) * 100).toFixed(1)}%`,
                }}
              ></div>
            </div>
          </div>
        </div>
      </div>

      {/* Party Distribution Chart */}
      <div className="lg:col-span-1 bg-white rounded-xl sm:rounded-2xl shadow-sm border border-gray-200 p-3 sm:p-4 md:p-6">
        <h3 className="font-bold text-gray-800 mb-3 sm:mb-4 flex items-center gap-2 text-sm sm:text-base">
          <span className="material-symbols-outlined text-blue-600">bar_chart</span>
          আসন বিন্যাস
        </h3>
        <div className="h-48 sm:h-56 md:h-64">
          <canvas ref={divisionChartRef}></canvas>
        </div>
      </div>

      {/* Demographics Chart */}
      <div className="lg:col-span-1 bg-white rounded-xl sm:rounded-2xl shadow-sm border border-gray-200 p-3 sm:p-4 md:p-6">
        <h3 className="font-bold text-gray-800 mb-3 sm:mb-4 flex items-center gap-2 text-sm sm:text-base">
          <span className="material-symbols-outlined text-green-600">pie_chart</span>
          ভোটার পরিসংখ্যান (পুরুষ ও মহিলা)
        </h3>
        <div className="h-48 sm:h-56 md:h-64 relative">
          <canvas ref={demographicsChartRef}></canvas>
        </div>
      </div>
    </div>
  );
};