'use client';

import { useEffect, useRef, useState } from 'react';
import { Party } from '../../dashboard.type';

export const ParliamentMap = ({ parties }: { parties: Party[] }) => {
  const parliamentMapRef = useRef<HTMLDivElement>(null);
  const [centerCount, setCenterCount] = useState('৩০০');
  const [centerLabel, setCenterLabel] = useState('মোট আসন');
  const [centerColor, setCenterColor] = useState('');

  useEffect(() => {
    if (!parliamentMapRef.current) return;

    const container = parliamentMapRef.current;
    const totalSeats = 300;
    const cols = 25;
    const rows = 12;

    const partyPool: Party[] = [];
    parties.forEach((p) => {
      for (let i = 0; i < p.count; i++) {
        partyPool.push(p);
      }
    });

    container.innerHTML = '';

    for (let i = 0; i < totalSeats; i++) {
      const party = partyPool[i];
      if (!party) break;

      const r = Math.floor(i / cols);
      const c = i % cols;

      const dot = document.createElement('div');
      dot.className = `absolute w-2 h-2 rounded-[2px] transition-all duration-300 cursor-pointer party-dot-${party.id}`;
      dot.style.backgroundColor = party.color;
      dot.style.boxShadow = '0 1px 1px rgba(0,0,0,0.05)';

      const x = (c / (cols - 1)) * 100;
      const y = (r / (rows - 1)) * 100;

      dot.style.left = `${x}%`;
      dot.style.top = `${y}%`;
      dot.style.transform = 'translate(-50%, -50%)';

      dot.addEventListener('mouseenter', () => {
        setCenterCount(party.seats);
        setCenterColor(party.color);
        setCenterLabel(party.name);
        document.querySelectorAll(`.party-dot-${party.id}`).forEach((d) => {
          (d as HTMLElement).style.transform = 'translate(-50%, -50%) scale(1.6)';
          (d as HTMLElement).style.zIndex = '50';
        });
      });

      dot.addEventListener('mouseleave', () => {
        setCenterCount('৩০০');
        setCenterColor('');
        setCenterLabel('মোট আসন');
        document.querySelectorAll(`.party-dot-${party.id}`).forEach((d) => {
          (d as HTMLElement).style.transform = 'translate(-50%, -50%) scale(1)';
          (d as HTMLElement).style.zIndex = '';
        });
      });

      container.appendChild(dot);
    }
  }, [parties]);

  return (
    <div className="flex flex-col items-center">
      <div className="relative w-full max-w-[400px] aspect-25/12 overflow-visible">
        <div ref={parliamentMapRef} className="absolute inset-0"></div>

        <div className="absolute bottom-0 left-1/2 -translate-x-1/2 text-center pointer-events-none pb-2">
          <div className="h-px w-32 bg-linear-to-r from-transparent via-blue-200 to-transparent mb-4 mx-auto opacity-50"></div>
          <p
            className="text-5xl font-black text-blue-900 leading-none transition-all duration-300"
            style={{ color: centerColor || undefined }}
          >
            {centerCount}
          </p>
          <p
            className="text-xs text-gray-400 font-bold uppercase tracking-[0.2em] mt-2 transition-all duration-300"
            style={{ color: centerColor || undefined }}
          >
            {centerLabel}
          </p>
        </div>
      </div>

      {/* Interactive Legend */}
      <div className="mt-8 grid grid-cols-2 md:grid-cols-3 gap-x-8 gap-y-3 text-sm font-bold text-center">
        {parties.map((party) => (
          <div key={party.id} className="flex items-center gap-2.5 text-gray-700">
            <span
              className="w-4 h-4 rounded shadow-sm"
              style={{ backgroundColor: party.color }}
            ></span>
            {party.name} ({party.seats})
          </div>
        ))}
        <div className="flex items-center gap-2.5 text-gray-700">
          <span className="w-4 h-4 rounded bg-black shadow-sm"></span>
          স্থগিত (০)
        </div>
      </div>
    </div>
  );
};