'use client';

import React, { useState, useEffect } from 'react';
import { Clock, CheckCircle2, XCircle, FileText, Check, AlertCircle } from 'lucide-react';
import { saveModuleDraft, getModuleDraft } from '@/lib/offlineQueue';

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

export const OpenPollsModule: React.FC<Props> = ({ puCode, onComplete, isSaved }) => {
  const [officialsPresent, setOfficialsPresent] = useState<boolean | null>(true);
  const [materialsArrivalTime, setMaterialsArrivalTime] = useState('08:15');
  const [pollOpenedTime, setPollOpenedTime] = useState('08:30');
  const [notes, setNotes] = useState('');
  const [submitted, setSubmitted] = useState(isSaved || false);

  useEffect(() => {
    const draft = getModuleDraft<any>(puCode, 'open_polls');
    if (draft) {
      setOfficialsPresent(draft.officialsPresent);
      setMaterialsArrivalTime(draft.materialsArrivalTime || '08:15');
      setPollOpenedTime(draft.pollOpenedTime || '08:30');
      setNotes(draft.notes || '');
    }
  }, [puCode]);

  const handleSave = () => {
    const payload = {
      officialsPresent,
      materialsArrivalTime,
      pollOpenedTime,
      notes,
      timestamp: new Date().toISOString(),
    };
    saveModuleDraft(puCode, 'open_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-emerald-950/80 border border-emerald-600/40 text-emerald-400 flex items-center justify-center font-bold text-sm">
            1
          </div>
          <div>
            <h3 className="text-sm font-bold text-white">Open Polls & Logistics Audit</h3>
            <p className="text-[11px] text-slate-400">Opening time and INEC personnel verification</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">
        {/* Toggle: Officials Present on Time */}
        <div>
          <label className="block text-xs font-semibold text-slate-300 mb-2">
            Were INEC Presiding Officers & Security Present on Time (by 8:00 AM)?
          </label>
          <div className="grid grid-cols-2 gap-2.5">
            <button
              type="button"
              onClick={() => setOfficialsPresent(true)}
              className={`flex items-center justify-center gap-1.5 py-2.5 px-2 rounded-xl border text-xs font-medium transition ${
                officialsPresent === true
                  ? 'bg-emerald-900/60 border-emerald-500 text-emerald-200'
                  : 'bg-slate-950 border-slate-800 text-slate-400 hover:border-slate-700'
              }`}
            >
              <CheckCircle2 className="w-4 h-4 text-emerald-400 shrink-0" />
              <span>On Schedule</span>
            </button>
            <button
              type="button"
              onClick={() => setOfficialsPresent(false)}
              className={`flex items-center justify-center gap-1.5 py-2.5 px-2 rounded-xl border text-xs font-medium transition ${
                officialsPresent === false
                  ? 'bg-red-950/60 border-red-500 text-red-200'
                  : 'bg-slate-950 border-slate-800 text-slate-400 hover:border-slate-700'
              }`}
            >
              <XCircle className="w-4 h-4 text-red-400 shrink-0" />
              <span>Delayed</span>
            </button>
          </div>
        </div>

        {/* Times Grid */}
        <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" /> Materials Arrival Time
            </label>
            <input
              type="time"
              value={materialsArrivalTime}
              onChange={(e) => setMaterialsArrivalTime(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-emerald-500 focus:outline-none"
            />
          </div>
          <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" /> Poll Official Opening
            </label>
            <input
              type="time"
              value={pollOpenedTime}
              onChange={(e) => setPollOpenedTime(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-emerald-500 focus:outline-none"
            />
          </div>
        </div>

        {/* Observation Notes */}
        <div>
          <label className="block text-[11px] font-medium text-slate-400 mb-1">
            Setup Observations / Security Presence
          </label>
          <input
            type="text"
            value={notes}
            onChange={(e) => setNotes(e.target.value)}
            placeholder="e.g. Police officers present, ballot box serials confirmed intact"
            className="w-full py-2 px-3 bg-slate-950 border border-slate-800 rounded-xl text-xs text-white placeholder-slate-500 focus:border-emerald-500 focus:outline-none"
          />
        </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 Opening Audit' : 'Confirm Opening & Proceed \u2192'}
        </button>
      </div>
    </div>
  );
};