'use client';

import React, { useState, useEffect } from 'react';
import { LogOut, Clock, Users, CheckSquare, Check } from 'lucide-react';
import { QueueStatus } from '@/types';
import { saveModuleDraft, getModuleDraft } from '@/lib/offlineQueue';

interface Props {
  puCode: string;
  onComplete: (data: any) => void;
  isSaved?: boolean;
}

export const ClosingPollsModule: React.FC<Props> = ({ puCode, onComplete, isSaved }) => {
  const [closingTime, setClosingTime] = useState('14:30');
  const [queueStatus, setQueueStatus] = useState<QueueStatus>('FEW_VOTERS');
  const [queueLength, setQueueLength] = useState<number>(14);
  const [cutoffObserved, setCutoffObserved] = useState<boolean>(true);
  const [notes, setNotes] = useState('');
  const [submitted, setSubmitted] = useState(isSaved || false);

  useEffect(() => {
    const draft = getModuleDraft<any>(puCode, 'closing_polls');
    if (draft) {
      setClosingTime(draft.closingTime || '14:30');
      setQueueStatus(draft.queueStatus || 'FEW_VOTERS');
      setQueueLength(draft.queueLength !== undefined ? draft.queueLength : 14);
      setCutoffObserved(draft.cutoffObserved ?? true);
      setNotes(draft.notes || '');
    }
  }, [puCode]);

  const handleSave = () => {
    const payload = {
      closingTime,
      queueStatus,
      queueLength,
      cutoffObserved,
      notes,
      timestamp: new Date().toISOString(),
    };
    saveModuleDraft(puCode, 'closing_polls', payload);
    setSubmitted(true);
    onComplete(payload);
  };

  return (
    <div className="bg-slate-900 border border-slate-800 rounded-2xl p-5 shadow-lg">
      <div className="flex items-center justify-between pb-3 border-b border-slate-800">
        <div className="flex items-center space-x-2.5">
          <div className="w-8 h-8 rounded-lg bg-slate-800 border border-amber-500/40 text-amber-400 flex items-center justify-center font-bold text-sm">
            4
          </div>
          <div>
            <h3 className="text-sm font-bold text-white">Closing Polls & 2:30 PM Cutoff Audit</h3>
            <p className="text-[11px] text-slate-400">Queue status at legal cutoff and voting closure</p>
          </div>
        </div>
        {submitted && (
          <span className="inline-flex items-center gap-1 text-[11px] font-medium text-emerald-400 bg-emerald-950/60 px-2 py-0.5 rounded-full border border-emerald-800">
            <Check className="w-3 h-3" /> Logged
          </span>
        )}
      </div>

      <div className="mt-4 space-y-4">
        {/* Closing Time */}
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <div>
            <label className="block text-[11px] font-medium text-slate-400 mb-1 flex items-center gap-1">
              <Clock className="w-3 h-3 text-slate-400" /> Official Closing Time
            </label>
            <input
              type="time"
              value={closingTime}
              onChange={(e) => setClosingTime(e.target.value)}
              className="w-full py-2 px-3 bg-slate-950 border border-slate-800 rounded-xl text-xs text-white focus:border-amber-500 focus:outline-none"
            />
          </div>

          <div>
            <label className="block text-[11px] font-medium text-slate-400 mb-1 flex items-center gap-1">
              <Users className="w-3 h-3 text-slate-400" /> Persons Remaining in Queue
            </label>
            <input
              type="number"
              min={0}
              value={queueLength}
              onChange={(e) => setQueueLength(Number(e.target.value))}
              className="w-full py-2 px-3 bg-slate-950 border border-slate-800 rounded-xl text-xs text-white font-mono focus:border-amber-500 focus:outline-none"
            />
          </div>
        </div>

        {/* 2:30 PM Cutoff Queue Status */}
        <div>
          <label className="block text-xs font-semibold text-slate-300 mb-2">
            Queue State at Official 2:30 PM INEC Cutoff
          </label>
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
            <button
              type="button"
              onClick={() => setQueueStatus('EMPTY')}
              className={`py-2 px-2 rounded-xl border text-xs font-medium text-center transition ${
                queueStatus === 'EMPTY'
                  ? 'bg-emerald-950/70 border-emerald-500 text-emerald-300'
                  : 'bg-slate-950 border-slate-800 text-slate-400'
              }`}
            >
              Empty / Clear
            </button>
            <button
              type="button"
              onClick={() => setQueueStatus('FEW_VOTERS')}
              className={`py-2 px-2 rounded-xl border text-xs font-medium text-center transition ${
                queueStatus === 'FEW_VOTERS'
                  ? 'bg-blue-950/70 border-blue-500 text-blue-300'
                  : 'bg-slate-950 border-slate-800 text-slate-400'
              }`}
            >
              Few (&lt;20)
            </button>
            <button
              type="button"
              onClick={() => setQueueStatus('LONG_QUEUE')}
              className={`py-2 px-2 rounded-xl border text-xs font-medium text-center transition ${
                queueStatus === 'LONG_QUEUE'
                  ? 'bg-amber-950/70 border-amber-500 text-amber-300'
                  : 'bg-slate-950 border-slate-800 text-slate-400'
              }`}
            >
              Long (&gt;50)
            </button>
            <button
              type="button"
              onClick={() => setQueueStatus('DISPERSED')}
              className={`py-2 px-2 rounded-xl border text-xs font-medium text-center transition ${
                queueStatus === 'DISPERSED'
                  ? 'bg-red-950/70 border-red-500 text-red-300'
                  : 'bg-slate-950 border-slate-800 text-slate-400'
              }`}
            >
              Dispersed
            </button>
          </div>
        </div>

        {/* Electoral Act Compliance Check */}
        <div className="p-3 bg-slate-950 rounded-xl border border-slate-800 flex items-start gap-2.5">
          <input
            type="checkbox"
            id="cutoffObserved"
            checked={cutoffObserved}
            onChange={(e) => setCutoffObserved(e.target.checked)}
            className="mt-0.5 w-4 h-4 rounded text-amber-500 bg-slate-900 border-slate-700 focus:ring-amber-500"
          />
          <label htmlFor="cutoffObserved" className="text-xs text-slate-300">
            <strong>Electoral Act 2022:</strong> I confirm every voter in queue at 2:30 PM was allowed to cast their ballot.
          </label>
        </div>

        <button
          type="button"
          onClick={handleSave}
          className="w-full py-3 rounded-xl bg-amber-500 hover:bg-amber-400 text-slate-950 font-bold text-xs shadow-md transition flex items-center justify-center gap-1.5"
        >
          {submitted ? 'Update Closing Audit' : 'Proceed to Form EC8A \u2192'}
        </button>
      </div>
    </div>
  );
};