'use client';

import React, { useState, useMemo } from 'react';
import {
  X,
  Scale,
  Award,
  CheckCircle2,
  AlertTriangle,
  Printer,
  Search,
  Filter,
  ShieldCheck,
  Building,
  MapPin,
  TrendingUp,
  FileText
} from 'lucide-react';
import { NIGERIAN_STATES, GEOPOLITICAL_ZONES } from '@/lib/electoralData';

interface Props {
  isOpen: boolean;
  onClose: () => void;
}

export const ConstitutionalSpreadModal: React.FC<Props> = ({ isOpen, onClose }) => {
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedZone, setSelectedZone] = useState<string>('ALL');

  // Compute 25% threshold for every state based on presidential data
  const stateSpreadData = useMemo(() => {
    return NIGERIAN_STATES.map((state) => {
      const isFCT = state.name.toLowerCase().includes('fct') || state.name.toLowerCase().includes('abuja');
      const adc = state.votes?.ADC || 0;
      const apc = state.votes?.APC || 0;
      const pdp = state.votes?.PDP || 0;
      const lp = state.votes?.LP || 0;
      const totalValid = adc + apc + pdp + lp;
      const adcPercent = totalValid > 0 ? Number(((adc / totalValid) * 100).toFixed(1)) : 0.0;
      const hasPassed = totalValid > 0 && adcPercent >= 25.0;

      return {
        id: state.id,
        name: state.name,
        zone: state.geopolitical_zone,
        total_lgas: state.total_lgas,
        registered_voters: state.registered_voters,
        total_valid_votes: totalValid,
        adc_votes: adc,
        adc_percentage: adcPercent,
        has_passed_25: hasPassed,
        is_fct: isFCT,
      };
    });
  }, []);

  const totalStatesPassed = stateSpreadData.filter((s) => s.has_passed_25 && !s.is_fct).length;
  const fctPassed = stateSpreadData.find((s) => s.is_fct)?.has_passed_25;
  const constitutionMet = totalStatesPassed >= 24 && fctPassed;

  const filteredStates = useMemo(() => {
    return stateSpreadData.filter((state) => {
      const matchesSearch =
        state.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
        state.zone.toLowerCase().includes(searchQuery.toLowerCase());
      const matchesZone = selectedZone === 'ALL' || state.zone === selectedZone;
      return matchesSearch && matchesZone;
    });
  }, [stateSpreadData, searchQuery, selectedZone]);

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-3 sm:p-4 bg-black/85 backdrop-blur-md animate-in fade-in overflow-y-auto">
      <div className="w-full max-w-4xl bg-slate-900 border border-purple-900/60 rounded-3xl shadow-2xl overflow-hidden flex flex-col my-auto max-h-[92vh]">
        {/* Header */}
        <div className="p-4 sm:p-5 bg-gradient-to-r from-purple-950 via-slate-900 to-amber-950/60 border-b border-purple-900/40 flex items-center justify-between">
          <div className="flex items-center space-x-3">
            <div className="w-10 h-10 rounded-full overflow-hidden border-2 border-amber-400 shadow-md bg-slate-800 shrink-0">
              <img src="/logo.png" alt="Atiku 2027" className="w-full h-full object-cover" />
            </div>
            <div>
              <div className="flex items-center gap-2 flex-wrap">
                <h3 className="text-sm sm:text-base font-black text-white tracking-wide flex items-center gap-1.5">
                  <Scale className="w-4 h-4 text-amber-400" />
                  <span>Section 134(2) 25% Constitutional Spread Matrix</span>
                </h3>
                <span className="text-[10px] px-2 py-0.5 rounded-full bg-emerald-500/20 text-emerald-300 border border-emerald-500/40 font-bold">
                  1999 Constitution Compliant
                </span>
              </div>
              <p className="text-xs text-slate-300 mt-0.5">
                Two-Thirds (24 of 36 States) + Federal Capital Territory (FCT) Audit Tracker
              </p>
            </div>
          </div>
          <button
            onClick={onClose}
            className="p-2 rounded-xl text-slate-400 hover:text-white hover:bg-slate-800 transition"
            title="Close"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Executive Compliance Summary Banner */}
        <div className="p-4 bg-slate-950 border-b border-slate-800 grid grid-cols-1 sm:grid-cols-3 gap-3">
          {/* Box 1: States Passed */}
          <div className="p-3.5 rounded-2xl bg-slate-900/90 border border-slate-800 flex items-center justify-between">
            <div>
              <span className="text-[10px] uppercase font-bold text-slate-400 tracking-wider block">
                Qualified States (25% Met)
              </span>
              <div className="text-2xl font-black text-white font-mono mt-0.5">
                {totalStatesPassed} <span className="text-sm font-normal text-slate-400">/ 36 States</span>
              </div>
              <span className={`text-[10px] font-semibold flex items-center gap-1 mt-0.5 ${
                totalStatesPassed >= 24 ? 'text-emerald-400' : 'text-slate-400'
              }`}>
                {totalStatesPassed >= 24 ? (
                  <>
                    <CheckCircle2 className="w-3 h-3 text-emerald-400" />
                    <span>Statutory 24 Threshold Exceeded</span>
                  </>
                ) : (
                  <>
                    <AlertTriangle className="w-3 h-3 text-amber-400" />
                    <span>{24 - totalStatesPassed} More States Required</span>
                  </>
                )}
              </span>
            </div>
            <div className="p-2 rounded-xl bg-emerald-500/10 text-emerald-400 border border-emerald-500/30">
              <Award className="w-6 h-6" />
            </div>
          </div>

          {/* Box 2: FCT Abuja Status */}
          <div className="p-3.5 rounded-2xl bg-slate-900/90 border border-purple-900/60 flex items-center justify-between">
            <div>
              <span className="text-[10px] uppercase font-bold text-purple-300 tracking-wider block">
                FCT Abuja 25% Requirement
              </span>
              <div className="text-2xl font-black text-amber-300 font-mono mt-0.5">
                {stateSpreadData.find((s) => s.is_fct)?.adc_percentage}%
              </div>
              <span className={`text-[10px] font-semibold flex items-center gap-1 mt-0.5 ${
                fctPassed ? 'text-emerald-400' : 'text-slate-400'
              }`}>
                {fctPassed ? (
                  <>
                    <ShieldCheck className="w-3 h-3 text-emerald-400" />
                    <span>FCT Section 134(2)(b) Secured</span>
                  </>
                ) : (
                  <>
                    <AlertTriangle className="w-3 h-3 text-amber-400" />
                    <span>Awaiting FCT Collation Returns</span>
                  </>
                )}
              </span>
            </div>
            <div className="p-2 rounded-xl bg-purple-500/10 text-amber-400 border border-purple-500/30">
              <Building className="w-6 h-6" />
            </div>
          </div>

          {/* Box 3: Overall Declaration Verdict */}
          <div className={`p-3.5 rounded-2xl border flex items-center justify-between ${
            constitutionMet
              ? 'bg-emerald-950/40 border-emerald-600/60 text-emerald-200'
              : 'bg-amber-950/40 border-amber-600/60 text-amber-200'
          }`}>
            <div>
              <span className="text-[10px] uppercase font-bold tracking-wider block">
                Constitutional Election Verdict
              </span>
              <div className="text-lg font-black font-mono mt-0.5">
                {constitutionMet ? 'QUALIFIED FOR DECLARATION' : 'AWAITING COLLATION'}
              </div>
              <span className="text-[10px] font-semibold mt-0.5 block opacity-90">
                {constitutionMet ? 'Both Plurality & Spread Cleared' : 'Zero Returns Logged • Standing By for EC8D Collation'}
              </span>
            </div>
            <button
              onClick={() => window.print()}
              className="p-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-white border border-slate-700 transition"
              title="Print Certificate"
            >
              <Printer className="w-5 h-5 text-amber-400" />
            </button>
          </div>
        </div>

        {/* Filter Bar */}
        <div className="p-3 bg-slate-900 border-b border-slate-800 flex items-center justify-between gap-3 flex-wrap text-xs">
          <div className="flex items-center gap-2 flex-1 min-w-[200px]">
            <Search className="w-4 h-4 text-slate-400" />
            <input
              type="text"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              placeholder="Search state name or geopolitical zone..."
              className="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-1.5 text-xs text-white focus:outline-none focus:border-amber-500"
            />
          </div>

          <div className="flex items-center gap-1 overflow-x-auto text-[11px] font-semibold">
            <button
              onClick={() => setSelectedZone('ALL')}
              className={`px-2.5 py-1 rounded-lg transition ${
                selectedZone === 'ALL'
                  ? 'bg-amber-500 text-slate-950 font-bold'
                  : 'bg-slate-950 text-slate-400 hover:text-white'
              }`}
            >
              All Zones (37)
            </button>
            {GEOPOLITICAL_ZONES.map((z) => (
              <button
                key={z.code}
                onClick={() => setSelectedZone(z.code)}
                className={`px-2.5 py-1 rounded-lg whitespace-nowrap transition ${
                  selectedZone === z.code
                    ? 'bg-amber-500 text-slate-950 font-bold'
                    : 'bg-slate-950 text-slate-400 hover:text-white'
                }`}
              >
                {z.name.replace(' Zone', '')}
              </button>
            ))}
          </div>
        </div>

        {/* State Spread Grid */}
        <div className="p-4 sm:p-5 overflow-y-auto flex-1 space-y-2">
          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
            {filteredStates.map((st) => (
              <div
                key={st.id}
                className={`p-3 rounded-2xl border transition relative overflow-hidden ${
                  st.has_passed_25
                    ? 'bg-slate-950/80 border-emerald-800/60 hover:border-emerald-500'
                    : 'bg-slate-950/80 border-amber-900/60 hover:border-amber-500'
                }`}
              >
                <div className="flex items-center justify-between mb-1.5">
                  <div className="flex items-center gap-1.5">
                    <span className="font-bold text-white text-xs">{st.name}</span>
                    {st.is_fct && (
                      <span className="text-[9px] px-1.5 py-0.2 rounded bg-purple-950 text-purple-300 border border-purple-700 font-bold">
                        FCT
                      </span>
                    )}
                  </div>
                  <span
                    className={`text-[9px] font-bold px-2 py-0.5 rounded-full border ${
                      st.has_passed_25
                        ? 'bg-emerald-950 text-emerald-300 border-emerald-600'
                        : st.total_valid_votes === 0
                        ? 'bg-slate-900 text-slate-400 border-slate-700'
                        : 'bg-amber-950 text-amber-300 border-amber-600'
                    }`}
                  >
                    {st.has_passed_25
                      ? 'QUALIFIED (≥25%)'
                      : st.total_valid_votes === 0
                      ? 'AWAITING RETURNS'
                      : 'PENDING (<25%)'}
                  </span>
                </div>

                <div className="flex items-baseline justify-between font-mono text-xs">
                  <span className="text-slate-400 text-[10px]">ADC Vote Share:</span>
                  <span
                    className={`font-black text-sm ${
                      st.has_passed_25 ? 'text-emerald-400' : 'text-amber-400'
                    }`}
                  >
                    {st.adc_percentage}%
                  </span>
                </div>

                {/* Progress bar toward 25% */}
                <div className="mt-1.5 w-full bg-slate-900 h-1.5 rounded-full overflow-hidden">
                  <div
                    className={`h-full transition-all ${
                      st.has_passed_25 ? 'bg-emerald-500' : 'bg-amber-500'
                    }`}
                    style={{ width: `${Math.min(100, (st.adc_percentage / 25) * 100)}%` }}
                  />
                </div>

                <div className="mt-1.5 flex justify-between text-[10px] text-slate-500 font-mono">
                  <span>{st.adc_votes.toLocaleString()} votes</span>
                  <span>{st.zone.replace('_', ' ')}</span>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Footer */}
        <div className="p-3 sm:p-4 bg-slate-950 border-t border-slate-800 flex items-center justify-between text-xs text-slate-400">
          <div className="flex items-center gap-1.5">
            <Scale className="w-4 h-4 text-amber-400" />
            <span className="text-[11px]">
              Electoral Act 2022 &bull; 1999 Constitution Section 134(2)(b) Admissibility
            </span>
          </div>
          <button
            onClick={onClose}
            className="px-4 py-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-white font-bold transition"
          >
            Close
          </button>
        </div>
      </div>
    </div>
  );
};