'use client';

import React, { useState, useEffect } from 'react';
import {
  Cpu,
  BatteryCharging,
  Wifi,
  WifiOff,
  AlertOctagon,
  Check,
  ShieldCheck,
  Clock,
  CheckCircle2,
  AlertTriangle
} from 'lucide-react';
import { BvasStatus } from '@/types';
import { saveModuleDraft, getModuleDraft } from '@/lib/offlineQueue';

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

export const BvasReadinessModule: React.FC<Props> = ({ puCode, onComplete, isSaved }) => {
  const [status, setStatus] = useState<BvasStatus>('WORKING');
  const [batteryLevel, setBatteryLevel] = useState<number>(95);
  const [backupAvailable, setBackupAvailable] = useState<boolean>(false);
  const [zeroAccreditedVerified, setZeroAccreditedVerified] = useState<boolean>(true);
  const [zeroAccreditedTime, setZeroAccreditedTime] = useState<string>('08:15 AM');
  const [serialNumber, setSerialNumber] = useState('BVAS-IKJ-2027-082');
  const [notes, setNotes] = useState('');
  const [submitted, setSubmitted] = useState(isSaved || false);

  useEffect(() => {
    const draft = getModuleDraft<any>(puCode, 'bvas_readiness');
    if (draft) {
      setStatus(draft.status || 'WORKING');
      setBatteryLevel(draft.batteryLevel !== undefined ? draft.batteryLevel : 95);
      setBackupAvailable(draft.backupAvailable || false);
      setZeroAccreditedVerified(draft.zeroAccreditedVerified !== undefined ? draft.zeroAccreditedVerified : true);
      setZeroAccreditedTime(draft.zeroAccreditedTime || '08:15 AM');
      setSerialNumber(draft.serialNumber || 'BVAS-IKJ-2027-082');
      setNotes(draft.notes || '');
    }
  }, [puCode]);

  const handleToggleZeroAudit = (val: boolean) => {
    setZeroAccreditedVerified(val);
    if (val && !zeroAccreditedTime) {
      const now = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
      setZeroAccreditedTime(now);
    }
  };

  const handleSave = () => {
    const payload = {
      status,
      batteryLevel,
      backupAvailable,
      zero_accreditation_verified: zeroAccreditedVerified,
      zero_accreditation_time: zeroAccreditedTime,
      serialNumber,
      notes,
      timestamp: new Date().toISOString(),
    };
    saveModuleDraft(puCode, 'bvas_readiness', 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">
            2
          </div>
          <div>
            <h3 className="text-sm font-bold text-white flex items-center gap-2">
              BVAS Tech Readiness & 0-Accreditation Audit
            </h3>
            <p className="text-[11px] text-slate-400">
              Biometric device certification & pre-commencement anti-rigging audit
            </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 & Certified
          </span>
        )}
      </div>

      <div className="mt-4 space-y-4">
        {/* MANDATORY 0-ACCREDITATION AUDIT CERTIFICATION BANNER */}
        <div
          className={`p-3.5 sm:p-4 rounded-xl border transition-all ${
            zeroAccreditedVerified
              ? 'bg-slate-800/80 border-amber-500/60 text-slate-100'
              : 'bg-red-950/50 border-red-600/70 text-red-100'
          }`}
        >
          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
            <div className="flex items-start space-x-2.5">
              {zeroAccreditedVerified ? (
                <ShieldCheck className="w-5 h-5 text-amber-400 flex-shrink-0 mt-0.5" />
              ) : (
                <AlertTriangle className="w-5 h-5 text-red-400 flex-shrink-0 mt-0.5 animate-pulse" />
              )}
              <div>
                <div className="text-xs font-bold flex flex-wrap items-center gap-1.5 text-white">
                  <span>MANDATORY 0-ACCREDITATION AUDIT</span>
                  {zeroAccreditedVerified && (
                    <span className="text-[9px] px-1.5 py-0.5 rounded bg-emerald-900/80 text-emerald-300 border border-emerald-600 font-mono">
                      CONFIRMED (0)
                    </span>
                  )}
                </div>
                <p className="text-[11px] text-slate-300 mt-1 leading-snug">
                  INEC rules require PO to show party agents that BVAS is at <strong className="text-white">0 accredited voters</strong> before the first vote.
                </p>
              </div>
            </div>

            <button
              type="button"
              onClick={() => handleToggleZeroAudit(!zeroAccreditedVerified)}
              className={`w-full sm:w-auto px-3.5 py-2 rounded-lg text-xs font-bold transition flex items-center justify-center gap-1.5 shrink-0 shadow-sm ${
                zeroAccreditedVerified
                  ? 'bg-emerald-600 hover:bg-emerald-500 text-white'
                  : 'bg-red-700 hover:bg-red-600 text-white'
              }`}
            >
              {zeroAccreditedVerified ? (
                <>
                  <CheckCircle2 className="w-4 h-4" /> Verified at 0
                </>
              ) : (
                <>
                  <AlertOctagon className="w-4 h-4" /> Tap to Certify 0
                </>
              )}
            </button>
          </div>

          {zeroAccreditedVerified && (
            <div className="mt-3 pt-2.5 border-t border-slate-700 flex flex-col sm:flex-row sm:items-center justify-between gap-1 text-[11px] font-mono">
              <span className="text-slate-300 flex items-center gap-1">
                <Clock className="w-3.5 h-3.5 text-amber-400" />
                Screen Checked at: <strong className="text-white">{zeroAccreditedTime || '08:15 AM'}</strong>
              </span>
              <span className="text-amber-400 font-bold">
                Code: BVAS-ZERO-OK
              </span>
            </div>
          )}
        </div>

        {/* Status Pills */}
        <div>
          <label className="block text-xs font-semibold text-slate-300 mb-2">
            BVAS Operational Health
          </label>
          <div className="grid grid-cols-3 gap-2">
            <button
              type="button"
              onClick={() => setStatus('WORKING')}
              className={`py-2 px-2 rounded-xl border text-xs font-medium flex flex-col items-center justify-center gap-1 transition ${
                status === 'WORKING'
                  ? 'bg-emerald-950/70 border-emerald-500 text-emerald-300 ring-1 ring-emerald-500'
                  : 'bg-slate-950 border-slate-800 text-slate-400 hover:border-slate-700'
              }`}
            >
              <Cpu className="w-4 h-4 text-emerald-400" />
              <span>Working 100%</span>
            </button>
            <button
              type="button"
              onClick={() => setStatus('NO_NETWORK')}
              className={`py-2 px-2 rounded-xl border text-xs font-medium flex flex-col items-center justify-center gap-1 transition ${
                status === 'NO_NETWORK'
                  ? 'bg-amber-950/70 border-amber-500 text-amber-300 ring-1 ring-amber-500'
                  : 'bg-slate-950 border-slate-800 text-slate-400 hover:border-slate-700'
              }`}
            >
              <WifiOff className="w-4 h-4 text-amber-400" />
              <span>No Cellular</span>
            </button>
            <button
              type="button"
              onClick={() => setStatus('FAULTY')}
              className={`py-2 px-2 rounded-xl border text-xs font-medium flex flex-col items-center justify-center gap-1 transition ${
                status === 'FAULTY'
                  ? 'bg-rose-950/70 border-rose-500 text-rose-300 ring-1 ring-rose-500'
                  : 'bg-slate-950 border-slate-800 text-slate-400 hover:border-slate-700'
              }`}
            >
              <AlertOctagon className="w-4 h-4 text-rose-400" />
              <span>Faulty / Stuck</span>
            </button>
          </div>
        </div>

        {/* Battery Level Slider */}
        <div className="p-3 bg-slate-950 rounded-xl border border-slate-800">
          <div className="flex items-center justify-between mb-1.5">
            <span className="text-xs font-medium text-slate-300 flex items-center gap-1.5">
              <BatteryCharging className="w-4 h-4 text-emerald-400" />
              Battery Percentage
            </span>
            <span className="text-xs font-mono font-bold text-white px-2 py-0.5 rounded bg-slate-800 border border-slate-700">
              {batteryLevel}%
            </span>
          </div>
          <input
            type="range"
            min={5}
            max={100}
            step={5}
            value={batteryLevel}
            onChange={(e) => setBatteryLevel(Number(e.target.value))}
            className="w-full accent-purple-500 cursor-pointer h-2 bg-slate-800 rounded-lg"
          />
        </div>

        {/* Backup Device & Serial */}
        <div className="grid grid-cols-2 gap-3">
          <div>
            <label className="block text-[11px] font-medium text-slate-400 mb-1">
              Backup BVAS on Site?
            </label>
            <div className="flex rounded-xl bg-slate-950 p-1 border border-slate-800">
              <button
                type="button"
                onClick={() => setBackupAvailable(true)}
                className={`flex-1 py-1 text-xs font-semibold rounded-lg transition ${
                  backupAvailable ? 'bg-amber-500 text-slate-950 font-bold' : 'text-slate-400 hover:text-white'
                }`}
              >
                Yes
              </button>
              <button
                type="button"
                onClick={() => setBackupAvailable(false)}
                className={`flex-1 py-1 text-xs font-semibold rounded-lg transition ${
                  !backupAvailable ? 'bg-slate-800 text-slate-200' : 'text-slate-400 hover:text-white'
                }`}
              >
                No
              </button>
            </div>
          </div>
          <div>
            <label className="block text-[11px] font-medium text-slate-400 mb-1">
              BVAS Serial (Device Label)
            </label>
            <input
              type="text"
              value={serialNumber}
              onChange={(e) => setSerialNumber(e.target.value)}
              placeholder="e.g. BVAS-IKJ-2027-082"
              className="w-full py-1.5 px-3 bg-slate-950 border border-slate-800 rounded-xl text-xs text-white font-mono placeholder-slate-600 focus:border-amber-500 focus:outline-none"
            />
          </div>
        </div>

        <button
          type="button"
          onClick={handleSave}
          className="w-full py-2.5 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 ? (
            <>
              <CheckCircle2 className="w-4 h-4" />
              <span>Update BVAS Status</span>
            </>
          ) : (
            <>
              <span>Confirm BVAS & Proceed &rarr;</span>
            </>
          )}
        </button>
      </div>
    </div>
  );
};