'use client';

import React, { useState } from 'react';
import { Users, CheckCircle2, TrendingUp, AlertCircle, Lock } from 'lucide-react';
import { getStatutoryRegisteredVotersForPu } from '@/lib/electoralData';

interface Props {
  puCode: string;
  registeredVoters?: number;
  onNext: (data: any) => void;
}

export type TurnoutLevel = 'HIGH' | 'MEDIUM' | 'LOW';

export const Step3OngoingVoting: React.FC<Props> = ({ puCode, registeredVoters, onNext }) => {
  const [selectedTurnout, setSelectedTurnout] = useState<TurnoutLevel>('HIGH');
  const registeredTotal = registeredVoters || getStatutoryRegisteredVotersForPu(puCode);
  const [isSubmitted, setIsSubmitted] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitted(true);
    onNext({
      turnoutLevel: selectedTurnout,
      registeredTotal,
      timestamp: new Date().toISOString(),
    });
  };

  return (
    <div className="bg-white text-slate-900 border border-emerald-900/20 rounded-2xl p-5 shadow-xl font-sans">
      <div className="border-b border-emerald-100 pb-3 mb-4">
        <span className="text-[10px] font-bold text-emerald-800 bg-emerald-100 px-2 py-0.5 rounded-full uppercase tracking-wider">
          3. Ongoing Voting Turnout (10:30 AM - 12:30 PM)
        </span>
        <h2 className="text-lg font-black text-emerald-950 mt-1">Polling Unit Voter Turnout</h2>
        <p className="text-xs text-slate-500">Tick the observed voter turnout level for PU {puCode}.</p>
      </div>

      <form onSubmit={handleSubmit} className="space-y-4">
        {/* Total Registered Voters Information Badge */}
        <div className="bg-emerald-50 border border-emerald-200 rounded-2xl p-4 flex items-center justify-between">
          <div className="flex items-center space-x-3">
            <div className="p-2.5 bg-emerald-600 text-white rounded-xl shadow">
              <Users className="w-5 h-5" />
            </div>
            <div>
              <span className="text-xs font-bold text-emerald-900 flex items-center gap-1.5">
                Total Registered Voters
                <span className="inline-flex items-center gap-1 text-[9px] font-black bg-emerald-200/80 text-emerald-900 px-1.5 py-0.5 rounded-full border border-emerald-300">
                  <Lock className="w-2.5 h-2.5" /> Unchangeable Statutory Register
                </span>
              </span>
              <span className="text-[11px] text-slate-500 font-medium">Certified INEC Baseline for Turnout Analysis</span>
            </div>
          </div>
          <div className="text-2xl font-black text-[#065F46] font-mono">
            {registeredTotal.toLocaleString()}
          </div>
        </div>

        {/* Simple 3-Option Selector Cards (HIGH, MEDIUM/MIDDLE, LOW) */}
        <div>
          <label className="block text-xs font-bold text-slate-700 mb-2 uppercase tracking-wider">
            Select Turnout Rate:
          </label>
          <div className="space-y-3">
            {/* HIGH Option */}
            <button
              type="button"
              onClick={() => setSelectedTurnout('HIGH')}
              className={`w-full p-4 rounded-2xl border-2 transition-all flex items-center justify-between text-left ${
                selectedTurnout === 'HIGH'
                  ? 'bg-emerald-50 border-emerald-600 shadow-md ring-1 ring-emerald-500'
                  : 'bg-slate-50 border-slate-200 hover:border-emerald-300'
              }`}
            >
              <div className="flex items-center space-x-3">
                <div
                  className={`w-10 h-10 rounded-xl flex items-center justify-center font-black text-white ${
                    selectedTurnout === 'HIGH' ? 'bg-emerald-600' : 'bg-slate-400'
                  }`}
                >
                  🟢
                </div>
                <div>
                  <h3 className="font-extrabold text-slate-900 text-base">HIGH TURNOUT</h3>
                  <p className="text-xs text-slate-500 font-medium">Massive turnout (&gt;70% of registered voters present)</p>
                </div>
              </div>
              <div
                className={`w-6 h-6 rounded-full border-2 flex items-center justify-center ${
                  selectedTurnout === 'HIGH' ? 'border-emerald-600 bg-emerald-600 text-white' : 'border-slate-300'
                }`}
              >
                {selectedTurnout === 'HIGH' && <CheckCircle2 className="w-4 h-4" />}
              </div>
            </button>

            {/* MEDIUM / MIDDLE Option */}
            <button
              type="button"
              onClick={() => setSelectedTurnout('MEDIUM')}
              className={`w-full p-4 rounded-2xl border-2 transition-all flex items-center justify-between text-left ${
                selectedTurnout === 'MEDIUM'
                  ? 'bg-amber-50 border-amber-500 shadow-md ring-1 ring-amber-400'
                  : 'bg-slate-50 border-slate-200 hover:border-amber-300'
              }`}
            >
              <div className="flex items-center space-x-3">
                <div
                  className={`w-10 h-10 rounded-xl flex items-center justify-center font-black text-white ${
                    selectedTurnout === 'MEDIUM' ? 'bg-amber-500' : 'bg-slate-400'
                  }`}
                >
                  🟡
                </div>
                <div>
                  <h3 className="font-extrabold text-slate-900 text-base">MEDIUM / MIDDLE TURNOUT</h3>
                  <p className="text-xs text-slate-500 font-medium">Moderate voter flow (40% - 69% of registered voters)</p>
                </div>
              </div>
              <div
                className={`w-6 h-6 rounded-full border-2 flex items-center justify-center ${
                  selectedTurnout === 'MEDIUM' ? 'border-amber-500 bg-amber-500 text-white' : 'border-slate-300'
                }`}
              >
                {selectedTurnout === 'MEDIUM' && <CheckCircle2 className="w-4 h-4" />}
              </div>
            </button>

            {/* LOW Option */}
            <button
              type="button"
              onClick={() => setSelectedTurnout('LOW')}
              className={`w-full p-4 rounded-2xl border-2 transition-all flex items-center justify-between text-left ${
                selectedTurnout === 'LOW'
                  ? 'bg-rose-50 border-rose-500 shadow-md ring-1 ring-rose-400'
                  : 'bg-slate-50 border-slate-200 hover:border-rose-300'
              }`}
            >
              <div className="flex items-center space-x-3">
                <div
                  className={`w-10 h-10 rounded-xl flex items-center justify-center font-black text-white ${
                    selectedTurnout === 'LOW' ? 'bg-rose-600' : 'bg-slate-400'
                  }`}
                >
                  🔴
                </div>
                <div>
                  <h3 className="font-extrabold text-slate-900 text-base">LOW TURNOUT</h3>
                  <p className="text-xs text-slate-500 font-medium">Low voter turnout (&lt;40% of registered voters present)</p>
                </div>
              </div>
              <div
                className={`w-6 h-6 rounded-full border-2 flex items-center justify-center ${
                  selectedTurnout === 'LOW' ? 'border-rose-500 bg-rose-500 text-white' : 'border-slate-300'
                }`}
              >
                {selectedTurnout === 'LOW' && <CheckCircle2 className="w-4 h-4" />}
              </div>
            </button>
          </div>
        </div>

        {/* Primary Action Button */}
        <button
          type="submit"
          className="w-full py-3.5 px-4 rounded-xl bg-[#065F46] hover:bg-[#047857] text-white font-black text-sm shadow-md transition active:scale-98 flex items-center justify-center gap-2"
        >
          {isSubmitted && <CheckCircle2 className="w-4 h-4 text-emerald-300" />}
          <span>Send Turnout Report ({selectedTurnout})</span>
        </button>

        <p className="text-[11px] text-center text-slate-400 italic">
          Turnout status sent directly to Central Situation Room
        </p>
      </form>
    </div>
  );
};