'use client';

import React, { useState } from 'react';
import {
  Camera,
  Upload,
  CheckCircle2,
  AlertTriangle,
  FileCheck2,
  CreditCard,
  Send,
  Sparkles,
  ShieldAlert,
  Smartphone,
  Eye,
  ArrowRight,
  Clock,
  Check,
  Building2,
  DollarSign
} from 'lucide-react';
import { AppUser } from '@/types/auth';

interface PuEasyAbcdConsoleProps {
  currentUser: AppUser;
  onRefreshDashboard?: () => void;
}

export const PuEasyAbcdConsole: React.FC<PuEasyAbcdConsoleProps> = ({
  currentUser
}) => {
  const [activeTab, setActiveTab] = useState<'A' | 'B' | 'C' | 'D'>('A');

  // Step A: Snap & Upload State
  const [snapUploaded, setSnapUploaded] = useState(false);
  const [isUploading, setIsUploading] = useState(false);
  const [uploadSuccess, setUploadSuccess] = useState(false);

  // Step B: Quick Tally State
  const [accredited, setAccredited] = useState<number>(512);
  const [adcVotes, setAdcVotes] = useState<number>(342);
  const [apcVotes, setApcVotes] = useState<number>(115);
  const [pdpVotes, setPdpVotes] = useState<number>(38);
  const [lpVotes, setLpVotes] = useState<number>(14);
  const [rejectedVotes, setRejectedVotes] = useState<number>(3);
  const [tallyTransmitted, setTallyTransmitted] = useState(false);

  // Step C: Direct Report Template State
  const [selectedTemplate, setSelectedTemplate] = useState<string>('all_clear');
  const [customReportNote, setCustomReportNote] = useState<string>('');
  const [reportSent, setReportSent] = useState(false);

  // Step D: Payment Gateway State
  const [paymentStatus, setPaymentStatus] = useState<'PENDING' | 'DISBURSED' | 'CONFIRMED'>('DISBURSED');
  const [bankAccount, setBankAccount] = useState('0123456789 (Access Bank)');
  const [puaStipend] = useState(35000); // N35,000 allowance

  // Math validations for Section 51(2)
  const totalVotesCast = adcVotes + apcVotes + pdpVotes + lpVotes + rejectedVotes;
  const isOverVoting = totalVotesCast > accredited;

  const handleSimulateSnap = () => {
    setIsUploading(true);
    setTimeout(() => {
      setIsUploading(false);
      setSnapUploaded(true);
      setUploadSuccess(true);
    }, 1500);
  };

  const handleSendReport = () => {
    setReportSent(true);
    setTimeout(() => setReportSent(false), 3500);
  };

  const reportTemplates = [
    {
      id: 'all_clear',
      label: 'Accreditation Commenced On Time',
      badge: 'Normal',
      badgeColor: 'bg-emerald-100 text-emerald-800',
      text: 'Accreditation commenced exactly 08:30am with BVAS zero-reading verified by all party agents. Peace prevails across the queue.'
    },
    {
      id: 'bvas_slow',
      label: 'BVAS Biometric Scanning Sluggish',
      badge: 'Advisory',
      badgeColor: 'bg-amber-100 text-amber-800',
      text: 'BVAS facial authentication is experiencing intermittent network delay. Voters orderly. Requesting technical backup from Ward RAC.'
    },
    {
      id: 'threat_alert',
      label: 'Security / Intimidation Threat Alert',
      badge: 'Critical Priority',
      badgeColor: 'bg-rose-100 text-rose-800',
      text: 'Unidentified non-state actors attempting to hover around ballot perimeter. Formal objection lodged with Police sentinel officer on site.'
    },
    {
      id: 'poll_closed',
      label: 'Poll Closed & Sorting Underway',
      badge: 'Progress',
      badgeColor: 'bg-blue-100 text-blue-800',
      text: 'Queue closed at 14:30. Last voter escorted. Section 63 ballot inspection completed without illegal ballot invalidations.'
    },
    {
      id: 'ec8a_ready',
      label: 'Form EC8A Signed & Declared',
      badge: 'Final Results',
      badgeColor: 'bg-purple-100 text-purple-800',
      text: 'Form EC8A signed by Presiding Officer and ADC Sentinel. Result publicly announced and copy in hand.'
    }
  ];

  return (
    <div className="bg-white rounded-3xl border border-slate-200/90 shadow-sm overflow-hidden">
      {/* Header Banner */}
      <div className="bg-gradient-to-r from-[#0A1424] via-[#102038] to-[#0A1424] text-white p-5 sm:p-6 flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
          <div className="flex items-center space-x-2">
            <span className="px-2.5 py-0.5 rounded-full text-[10px] font-black uppercase bg-emerald-500 text-slate-950">
              PU SENTINEL RAPID ACTION
            </span>
            <span className="text-xs text-slate-400 font-mono">
              PU-21-02-004 • Kanta Museum Square
            </span>
          </div>
          <h2 className="text-xl sm:text-2xl font-black mt-1">
            Easy As A-B-C-D Field Operations Console
          </h2>
          <p className="text-xs text-slate-300 mt-0.5">
            Simplified for 1-click operation in low-network polling booths by field agents.
          </p>
        </div>

        {/* Rapid Status Pill */}
        <div className="flex items-center space-x-3 bg-white/10 backdrop-blur-sm px-4 py-2.5 rounded-2xl border border-white/10 self-start md:self-auto">
          <div className="w-9 h-9 rounded-xl bg-emerald-500/20 text-emerald-400 flex items-center justify-center font-bold">
            <CheckCircle2 className="w-5 h-5" />
          </div>
          <div>
            <span className="text-[10px] uppercase tracking-wider text-slate-300 font-bold block">
              Agent Identity
            </span>
            <span className="text-xs font-black text-white">{currentUser.name || 'Fatima Yusuf'}</span>
            <span className="text-[10px] text-emerald-400 font-mono block">Argungu LGA, Kebbi</span>
          </div>
        </div>
      </div>

      {/* 4 Big Nav Tabs: A - B - C - D */}
      <div className="grid grid-cols-2 sm:grid-cols-4 border-b border-slate-200 bg-slate-50/80">
        <button
          type="button"
          onClick={() => setActiveTab('A')}
          className={`p-4 text-left border-b-2 transition-all flex items-center space-x-3 ${
            activeTab === 'A'
              ? 'border-emerald-600 bg-white shadow-xs'
              : 'border-transparent hover:bg-slate-100/60 text-slate-600'
          }`}
        >
          <div
            className={`w-9 h-9 rounded-xl font-black text-sm flex items-center justify-center ${
              activeTab === 'A'
                ? 'bg-emerald-600 text-white'
                : 'bg-slate-200 text-slate-700'
            }`}
          >
            A
          </div>
          <div>
            <span className="text-xs font-black text-slate-900 block">Snap Result</span>
            <span className="text-[10px] text-slate-500 font-medium">Camera & e-EC8A Sync</span>
          </div>
        </button>

        <button
          type="button"
          onClick={() => setActiveTab('B')}
          className={`p-4 text-left border-b-2 transition-all flex items-center space-x-3 ${
            activeTab === 'B'
              ? 'border-blue-600 bg-white shadow-xs'
              : 'border-transparent hover:bg-slate-100/60 text-slate-600'
          }`}
        >
          <div
            className={`w-9 h-9 rounded-xl font-black text-sm flex items-center justify-center ${
              activeTab === 'B'
                ? 'bg-blue-600 text-white'
                : 'bg-slate-200 text-slate-700'
            }`}
          >
            B
          </div>
          <div>
            <span className="text-xs font-black text-slate-900 block">Fast Tally</span>
            <span className="text-[10px] text-slate-500 font-medium">Anti-Over-Voting Check</span>
          </div>
        </button>

        <button
          type="button"
          onClick={() => setActiveTab('C')}
          className={`p-4 text-left border-b-2 transition-all flex items-center space-x-3 ${
            activeTab === 'C'
              ? 'border-amber-600 bg-white shadow-xs'
              : 'border-transparent hover:bg-slate-100/60 text-slate-600'
          }`}
        >
          <div
            className={`w-9 h-9 rounded-xl font-black text-sm flex items-center justify-center ${
              activeTab === 'C'
                ? 'bg-amber-600 text-white'
                : 'bg-slate-200 text-slate-700'
            }`}
          >
            C
          </div>
          <div>
            <span className="text-xs font-black text-slate-900 block">Direct Report</span>
            <span className="text-[10px] text-slate-500 font-medium">1-Tap Pre-fill Templates</span>
          </div>
        </button>

        <button
          type="button"
          onClick={() => setActiveTab('D')}
          className={`p-4 text-left border-b-2 transition-all flex items-center space-x-3 ${
            activeTab === 'D'
              ? 'border-purple-600 bg-white shadow-xs'
              : 'border-transparent hover:bg-slate-100/60 text-slate-600'
          }`}
        >
          <div
            className={`w-9 h-9 rounded-xl font-black text-sm flex items-center justify-center ${
              activeTab === 'D'
                ? 'bg-purple-600 text-white'
                : 'bg-slate-200 text-slate-700'
            }`}
          >
            D
          </div>
          <div>
            <span className="text-xs font-black text-slate-900 block">Agent Payment</span>
            <span className="text-[10px] text-slate-500 font-medium">Stipend & Disbursal</span>
          </div>
        </button>
      </div>

      {/* Tab Contents */}
      <div className="p-6">
        {/* ================= STEP A: SNAP & UPLOAD RESULT SHEET ================= */}
        {activeTab === 'A' && (
          <div className="space-y-6">
            <div className="flex flex-col md:flex-row md:items-center justify-between gap-3 border-b border-slate-100 pb-4">
              <div>
                <h3 className="text-base font-black text-slate-900 flex items-center space-x-2">
                  <Camera className="w-5 h-5 text-emerald-600" />
                  <span>Step A: Snap & Upload Official Form EC8A Result Sheet</span>
                </h3>
                <p className="text-xs text-slate-500">
                  Instantly transmits certified physical sheet copy directly to Waziri Situation Room National Database.
                </p>
              </div>
              <span className="px-2.5 py-1 rounded-full bg-emerald-100 text-emerald-800 text-xs font-bold self-start md:self-auto">
                Offline-Safe Auto Cache Active
              </span>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 items-center">
              {/* Camera Trigger Card */}
              <div className="border-2 border-dashed border-slate-300 rounded-3xl p-8 text-center bg-slate-50/60 hover:bg-slate-50 transition-colors flex flex-col items-center justify-center space-y-4">
                <div className="w-16 h-16 rounded-2xl bg-emerald-100 text-emerald-600 flex items-center justify-center shadow-xs">
                  <Camera className="w-8 h-8" />
                </div>
                <div className="space-y-1">
                  <h4 className="text-sm font-bold text-slate-900">
                    Snap or Pick Result Sheet Photo
                  </h4>
                  <p className="text-xs text-slate-500 max-w-sm">
                    Ensure good natural daylight, readable numbers, and clearly visible INEC stamp & Presiding Officer signature.
                  </p>
                </div>

                <div className="flex flex-wrap items-center justify-center gap-3 pt-2">
                  <button
                    type="button"
                    onClick={handleSimulateSnap}
                    disabled={isUploading}
                    className="px-6 py-3 rounded-2xl bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-xs shadow-md shadow-emerald-600/20 transition-all flex items-center space-x-2 disabled:opacity-50"
                  >
                    {isUploading ? (
                      <>
                        <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
                        <span>Scanning & Digitizing...</span>
                      </>
                    ) : (
                      <>
                        <Camera className="w-4 h-4" />
                        <span>Snap With Phone Camera</span>
                      </>
                    )}
                  </button>

                  <button
                    type="button"
                    onClick={handleSimulateSnap}
                    disabled={isUploading}
                    className="px-5 py-3 rounded-2xl bg-white border border-slate-300 hover:bg-slate-100 text-slate-700 font-bold text-xs transition-all flex items-center space-x-2"
                  >
                    <Upload className="w-4 h-4 text-slate-500" />
                    <span>Upload From Gallery</span>
                  </button>
                </div>
              </div>

              {/* Live Preview & Verification Box */}
              <div className="bg-slate-900 text-white rounded-3xl p-6 space-y-4 shadow-xl">
                <div className="flex items-center justify-between border-b border-slate-800 pb-3">
                  <span className="text-xs font-mono text-emerald-400 font-bold">
                    PREVIEW: FORM EC8A DUAL AUDIT
                  </span>
                  <span className="px-2 py-0.5 rounded bg-emerald-500/20 text-emerald-300 text-[10px] font-bold">
                    High Clarity (98.4%)
                  </span>
                </div>

                <div className="bg-slate-950/80 p-4 rounded-2xl border border-slate-800 space-y-3 font-mono text-xs">
                  <div className="flex justify-between text-slate-400 text-[11px]">
                    <span>Polling Unit:</span>
                    <span className="text-white font-bold">PU-21-02-004</span>
                  </div>
                  <div className="flex justify-between text-slate-400 text-[11px]">
                    <span>LGA / State:</span>
                    <span className="text-white font-bold">Argungu / Kebbi</span>
                  </div>
                  <div className="flex justify-between text-slate-400 text-[11px]">
                    <span>INEC Stamp Detected:</span>
                    <span className="text-emerald-400 font-bold">✓ VERIFIED AUTHENTIC</span>
                  </div>
                  <div className="flex justify-between text-slate-400 text-[11px]">
                    <span>Agent Signature:</span>
                    <span className="text-emerald-400 font-bold">✓ FATIMA YUSUF (ADC)</span>
                  </div>
                  <div className="flex justify-between text-slate-400 text-[11px]">
                    <span>Transmission Cloud:</span>
                    <span className="text-sky-400 font-bold">Abuja Situation Room Server</span>
                  </div>
                </div>

                {uploadSuccess ? (
                  <div className="p-3.5 rounded-2xl bg-emerald-950/80 border border-emerald-500 text-emerald-200 text-xs flex items-center space-x-2.5">
                    <CheckCircle2 className="w-5 h-5 text-emerald-400 flex-shrink-0" />
                    <div>
                      <span className="font-black block">Result Sheet Transmitted & Logged!</span>
                      <span className="text-[11px] text-emerald-300">
                        Cryptographic SHA-256 receipt stored. Ward Supervisor notified.
                      </span>
                    </div>
                  </div>
                ) : (
                  <div className="p-3 rounded-2xl bg-slate-800/60 text-slate-400 text-xs text-center">
                    Ready to capture certified copy immediately after Presiding Officer declaration.
                  </div>
                )}
              </div>
            </div>
          </div>
        )}

        {/* ================= STEP B: INSTANT TALLY & ANTI-OVER-VOTING ================= */}
        {activeTab === 'B' && (
          <div className="space-y-6">
            <div className="flex flex-col md:flex-row md:items-center justify-between gap-3 border-b border-slate-100 pb-4">
              <div>
                <h3 className="text-base font-black text-slate-900 flex items-center space-x-2">
                  <FileCheck2 className="w-5 h-5 text-blue-600" />
                  <span>Step B: Quick Vote Tally & Section 51(2) Over-Voting Validation</span>
                </h3>
                <p className="text-xs text-slate-500">
                  Key in figures directly from the board. Automated integrity engine prevents mathematical error.
                </p>
              </div>
              <span className="text-xs font-mono font-bold text-blue-700 bg-blue-50 px-3 py-1 rounded-full border border-blue-200">
                Registered: 750 Voters
              </span>
            </div>

            {/* Inputs Grid */}
            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
              <div className="bg-slate-50 p-3.5 rounded-2xl border border-slate-200">
                <label className="text-[11px] font-bold text-slate-600 block mb-1">
                  BVAS Accredited
                </label>
                <input
                  type="number"
                  value={accredited}
                  onChange={(e) => setAccredited(Number(e.target.value) || 0)}
                  className="w-full bg-white border border-slate-300 rounded-xl px-3 py-2 text-base font-black text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500"
                />
              </div>

              <div className="bg-emerald-50 p-3.5 rounded-2xl border border-emerald-200">
                <label className="text-[11px] font-bold text-emerald-800 block mb-1">
                  ADC Votes (Atiku)
                </label>
                <input
                  type="number"
                  value={adcVotes}
                  onChange={(e) => setAdcVotes(Number(e.target.value) || 0)}
                  className="w-full bg-white border border-emerald-300 rounded-xl px-3 py-2 text-base font-black text-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-500"
                />
              </div>

              <div className="bg-slate-50 p-3.5 rounded-2xl border border-slate-200">
                <label className="text-[11px] font-bold text-slate-600 block mb-1">
                  APC Votes
                </label>
                <input
                  type="number"
                  value={apcVotes}
                  onChange={(e) => setApcVotes(Number(e.target.value) || 0)}
                  className="w-full bg-white border border-slate-300 rounded-xl px-3 py-2 text-base font-black text-slate-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
                />
              </div>

              <div className="bg-slate-50 p-3.5 rounded-2xl border border-slate-200">
                <label className="text-[11px] font-bold text-slate-600 block mb-1">
                  PDP Votes
                </label>
                <input
                  type="number"
                  value={pdpVotes}
                  onChange={(e) => setPdpVotes(Number(e.target.value) || 0)}
                  className="w-full bg-white border border-slate-300 rounded-xl px-3 py-2 text-base font-black text-slate-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
                />
              </div>

              <div className="bg-slate-50 p-3.5 rounded-2xl border border-slate-200">
                <label className="text-[11px] font-bold text-slate-600 block mb-1">
                  LP Votes
                </label>
                <input
                  type="number"
                  value={lpVotes}
                  onChange={(e) => setLpVotes(Number(e.target.value) || 0)}
                  className="w-full bg-white border border-slate-300 rounded-xl px-3 py-2 text-base font-black text-slate-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
                />
              </div>

              <div className="bg-rose-50 p-3.5 rounded-2xl border border-rose-200">
                <label className="text-[11px] font-bold text-rose-800 block mb-1">
                  Rejected Ballots
                </label>
                <input
                  type="number"
                  value={rejectedVotes}
                  onChange={(e) => setRejectedVotes(Number(e.target.value) || 0)}
                  className="w-full bg-white border border-rose-300 rounded-xl px-3 py-2 text-base font-black text-rose-700 focus:outline-none focus:ring-2 focus:ring-rose-500"
                />
              </div>
            </div>

            {/* Statutory Integrity Indicator */}
            {isOverVoting ? (
              <div className="p-4 rounded-2xl bg-rose-50 border border-rose-300 text-rose-900 flex items-center space-x-3">
                <AlertTriangle className="w-6 h-6 text-rose-600 flex-shrink-0" />
                <div>
                  <span className="font-black text-sm block">
                    CRITICAL WARNING: SECTION 51(2) OVER-VOTING DETECTED!
                  </span>
                  <span className="text-xs">
                    Total votes cast ({totalVotesCast}) exceeds BVAS accredited voters ({accredited}).
                    This result sheet cannot be accepted under the Electoral Act 2022. Verify figures immediately.
                  </span>
                </div>
              </div>
            ) : (
              <div className="p-4 rounded-2xl bg-emerald-50 border border-emerald-300 text-emerald-950 flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                <div className="flex items-center space-x-3">
                  <CheckCircle2 className="w-6 h-6 text-emerald-600 flex-shrink-0" />
                  <div>
                    <span className="font-black text-sm block">
                      Mathematical Integrity Verified (Clean Audit)
                    </span>
                    <span className="text-xs text-emerald-800">
                      Total Votes: {totalVotesCast} / Accredited: {accredited} • ADC Margin: +{adcVotes - apcVotes} votes ahead.
                    </span>
                  </div>
                </div>

                <button
                  type="button"
                  onClick={() => {
                    setTallyTransmitted(true);
                    setTimeout(() => setTallyTransmitted(false), 3000);
                  }}
                  className="px-5 py-2.5 rounded-xl bg-emerald-700 hover:bg-emerald-800 text-white font-bold text-xs shadow-md transition-all flex items-center space-x-1.5 self-end sm:self-auto"
                >
                  <Send className="w-3.5 h-3.5" />
                  <span>{tallyTransmitted ? 'Transmitted!' : 'Transmit Tally To Situation Room'}</span>
                </button>
              </div>
            )}
          </div>
        )}

        {/* ================= STEP C: DIRECT REPORT TEMPLATES ================= */}
        {activeTab === 'C' && (
          <div className="space-y-6">
            <div className="flex flex-col md:flex-row md:items-center justify-between gap-3 border-b border-slate-100 pb-4">
              <div>
                <h3 className="text-base font-black text-slate-900 flex items-center space-x-2">
                  <Send className="w-5 h-5 text-amber-600" />
                  <span>Step C: 1-Tap Direct Report Templates To Command Center</span>
                </h3>
                <p className="text-xs text-slate-500">
                  Pre-configured reports allow field sentinels to report immediately without typing essays.
                </p>
              </div>
              <span className="text-xs font-mono font-bold text-amber-800 bg-amber-50 px-3 py-1 rounded-full border border-amber-200">
                Direct Line: Shortcode 32027
              </span>
            </div>

            {/* Template Selector Cards */}
            <div className="space-y-2.5">
              {reportTemplates.map((item) => (
                <div
                  key={item.id}
                  onClick={() => setSelectedTemplate(item.id)}
                  className={`p-3.5 rounded-2xl border cursor-pointer transition-all flex items-start justify-between gap-3 ${
                    selectedTemplate === item.id
                      ? 'border-amber-500 bg-amber-50/70 shadow-xs'
                      : 'border-slate-200 bg-white hover:bg-slate-50'
                  }`}
                >
                  <div className="space-y-1">
                    <div className="flex items-center space-x-2">
                      <span className={`text-[10px] font-black uppercase px-2 py-0.5 rounded ${item.badgeColor}`}>
                        {item.badge}
                      </span>
                      <span className="text-xs font-black text-slate-900">{item.label}</span>
                    </div>
                    <p className="text-xs text-slate-600 italic">"{item.text}"</p>
                  </div>

                  <div className="flex-shrink-0 pt-1">
                    {selectedTemplate === item.id ? (
                      <div className="w-5 h-5 rounded-full bg-amber-600 text-white flex items-center justify-center">
                        <Check className="w-3 h-3" />
                      </div>
                    ) : (
                      <div className="w-5 h-5 rounded-full border border-slate-300" />
                    )}
                  </div>
                </div>
              ))}
            </div>

            {/* Custom Notes (Optional) */}
            <div className="space-y-2">
              <label className="text-xs font-bold text-slate-700 block">
                Additional Note or PU Sentinel Observation (Optional):
              </label>
              <textarea
                value={customReportNote}
                onChange={(e) => setCustomReportNote(e.target.value)}
                rows={2}
                placeholder="E.g., INEC collation officer arrived 08:15am with complete election materials..."
                className="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 text-xs text-slate-900 focus:outline-none focus:ring-2 focus:ring-amber-500"
              />
            </div>

            {/* Send Dispatch Button */}
            <div className="flex items-center justify-between pt-2">
              <span className="text-xs text-slate-400">
                Report will be logged in Ward, LGA, and National Situation Room desks concurrently.
              </span>
              <button
                type="button"
                onClick={handleSendReport}
                className="px-6 py-3 rounded-2xl bg-amber-600 hover:bg-amber-700 text-white font-bold text-xs shadow-md transition-all flex items-center space-x-2"
              >
                <Send className="w-4 h-4" />
                <span>{reportSent ? 'Dispatched to Command HQ!' : 'Send Direct Incident Report'}</span>
              </button>
            </div>
          </div>
        )}

        {/* ================= STEP D: AGENT PAYMENT GATEWAY & STIPEND ================= */}
        {activeTab === 'D' && (
          <div className="space-y-6">
            <div className="flex flex-col md:flex-row md:items-center justify-between gap-3 border-b border-slate-100 pb-4">
              <div>
                <h3 className="text-base font-black text-slate-900 flex items-center space-x-2">
                  <CreditCard className="w-5 h-5 text-purple-600" />
                  <span>Step D: Polling Unit Agent Stipend & Direct Payment Gateway</span>
                </h3>
                <p className="text-xs text-slate-500">
                  Automated allowance disbursal and instant payment verification from Waziri Situation Room HQ.
                </p>
              </div>
              <span className="text-xs font-mono font-bold text-purple-800 bg-purple-50 px-3 py-1 rounded-full border border-purple-200">
                Stipend Tier: Accredited Field Sentinel
              </span>
            </div>

            {/* Payment Summary Banner */}
            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
              <div className="bg-purple-50 border border-purple-200 rounded-2xl p-4 space-y-1">
                <span className="text-[11px] font-bold text-purple-700 uppercase block">
                  Designated Field Allowance
                </span>
                <span className="text-2xl font-black text-purple-950">
                  ₦{puaStipend.toLocaleString()}
                </span>
                <span className="text-[10px] text-purple-600 block">
                  Includes feeding, transport & data allowance
                </span>
              </div>

              <div className="bg-slate-50 border border-slate-200 rounded-2xl p-4 space-y-1">
                <span className="text-[11px] font-bold text-slate-500 uppercase block">
                  Linked Payout Account
                </span>
                <span className="text-sm font-black text-slate-900 block truncate">
                  {bankAccount}
                </span>
                <span className="text-[10px] text-emerald-600 font-bold block">
                  ✓ BVN & NIN Identity Verified
                </span>
              </div>

              <div className="bg-emerald-50 border border-emerald-200 rounded-2xl p-4 space-y-1">
                <span className="text-[11px] font-bold text-emerald-700 uppercase block">
                  Situation Room Disbursal Status
                </span>
                <div className="flex items-center space-x-1.5">
                  <span className="w-2.5 h-2.5 rounded-full bg-emerald-500 animate-pulse" />
                  <span className="text-base font-black text-emerald-950">
                    {paymentStatus === 'DISBURSED' ? 'DISBURSED / PAID' : paymentStatus === 'CONFIRMED' ? 'FUNDS RECEIVED' : 'PROCESSING'}
                  </span>
                </div>
                <span className="text-[10px] text-emerald-700 font-mono block">
                  Tx Ref: WAZ-PAY-2027-KB004
                </span>
              </div>
            </div>

            {/* Confirmation & Dispute Action Buttons */}
            <div className="bg-slate-50 rounded-2xl p-5 border border-slate-200 flex flex-col sm:flex-row items-center justify-between gap-4">
              <div className="space-y-0.5 text-center sm:text-left">
                <span className="text-xs font-bold text-slate-900 block">
                  Did you receive the ₦35,000 alert on your mobile device?
                </span>
                <p className="text-[11px] text-slate-500">
                  Please acknowledge receipt or flag if your bank has not credited your account.
                </p>
              </div>

              <div className="flex items-center space-x-2.5">
                <button
                  type="button"
                  onClick={() => setPaymentStatus('CONFIRMED')}
                  className="px-4 py-2.5 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-xs shadow-sm transition-all flex items-center space-x-1.5"
                >
                  <Check className="w-4 h-4" />
                  <span>Confirm Receipt of ₦35,000</span>
                </button>

                <button
                  type="button"
                  onClick={() => alert('Payment Inquiry logged. Situation Room Accounts Officer notified.')}
                  className="px-4 py-2.5 rounded-xl bg-white border border-slate-300 hover:bg-slate-100 text-slate-700 font-bold text-xs transition-all"
                >
                  Report Payment Delay
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default PuEasyAbcdConsole;