'use client';

import React, { useState } from 'react';
import {
  X,
  PhoneCall,
  Radio,
  Send,
  ShieldAlert,
  AlertTriangle,
  CheckCircle2,
  Users,
  Copy,
  Clock,
  Sparkles,
  Lock,
  Headphones
} from 'lucide-react';

interface Props {
  isOpen: boolean;
  onClose: () => void;
}

export const SituationRoomHotlineModal: React.FC<Props> = ({ isOpen, onClose }) => {
  const [broadcastTarget, setBroadcastTarget] = useState('ALL_176846_AGENTS');
  const [broadcastText, setBroadcastText] = useState(
    'URGENT DIRECTIVE: Ensure you do NOT sign Form EC8A if total votes exceed BVAS accredited voter count (Electoral Act Section 51). Demand an objection note on the sheet immediately.'
  );
  const [sending, setSending] = useState(false);
  const [sentSuccess, setSentSuccess] = useState(false);
  const [copiedNumber, setCopiedNumber] = useState<string | null>(null);

  if (!isOpen) return null;

  const handleSendBroadcast = () => {
    setSending(true);
    setTimeout(() => {
      setSending(false);
      setSentSuccess(true);
      setTimeout(() => setSentSuccess(false), 4000);
    }, 1200);
  };

  const handleCopy = (num: string) => {
    navigator.clipboard.writeText(num);
    setCopiedNumber(num);
    setTimeout(() => setCopiedNumber(null), 2000);
  };

  const HOTLINES = [
    {
      title: 'National Presidential Situation Room DG',
      contact: 'Amb. Dr. Ralph Nwosu / Chief of Staff',
      phone: '+234 803 2027 001',
      role: 'Overall Strategic Command & Direct Escalation to His Excellency',
      color: 'border-amber-500/50 bg-amber-500/10 text-amber-300'
    },
    {
      title: 'Legal Defense Rapid Response (SANs)',
      contact: 'Lead Senior Advocate of Nigeria (SAN)',
      phone: '+234 803 2027 002',
      role: 'Emergency Court Injunctions, Form EC8A Objections & Evidence Act Sec 84',
      color: 'border-purple-500/50 bg-purple-500/10 text-purple-300'
    },
    {
      title: 'Police & Security Taskforce Liaison',
      contact: 'DIG Operations / DSS Electoral Security Desk',
      phone: '+234 803 2027 003',
      role: 'Agent Protection, Thuggery Extraction & Ballot Box Security',
      color: 'border-blue-500/50 bg-blue-500/10 text-blue-300'
    },
    {
      title: 'INEC Technical & IReV Collation Liaison',
      contact: 'National Collation Operations Desk',
      phone: '+234 803 2027 004',
      role: 'Reporting Server Blackouts, BVAS Failures & Collation Violations',
      color: 'border-emerald-500/50 bg-emerald-500/10 text-emerald-300'
    }
  ];

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-3 sm:p-4 bg-black/85 backdrop-blur-md animate-in fade-in overflow-y-auto">
      <div className="w-full max-w-2xl bg-slate-900 border border-purple-900/60 rounded-3xl shadow-2xl overflow-hidden flex flex-col my-auto max-h-[92vh]">
        {/* Header */}
        <div className="p-4 sm:p-5 bg-gradient-to-r from-red-950 via-slate-900 to-amber-950/60 border-b border-red-900/40 flex items-center justify-between">
          <div className="flex items-center space-x-3">
            <div className="w-10 h-10 rounded-full overflow-hidden border-2 border-amber-400 shadow-md bg-slate-800 shrink-0">
              <img src="/logo.png" alt="Atiku 2027" className="w-full h-full object-cover" />
            </div>
            <div>
              <div className="flex items-center gap-2 flex-wrap">
                <h3 className="text-sm sm:text-base font-black text-white tracking-wide flex items-center gap-1.5">
                  <PhoneCall className="w-4 h-4 text-red-400" />
                  <span>Situation Room Hotlines &amp; Emergency Dispatch</span>
                </h3>
                <span className="text-[10px] px-2 py-0.5 rounded-full bg-red-500/20 text-red-300 border border-red-500/40 font-bold animate-pulse">
                  24/7 Red Alert
                </span>
              </div>
              <p className="text-xs text-slate-300 mt-0.5">
                Presidential Rapid Intervention Desk &bull; Direct Escalation to High Command
              </p>
            </div>
          </div>
          <button
            onClick={onClose}
            className="p-2 rounded-xl text-slate-400 hover:text-white hover:bg-slate-800 transition"
            title="Close"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Modal Body */}
        <div className="p-4 sm:p-6 overflow-y-auto space-y-5 text-xs">
          {/* Section 1: Emergency Command Hotlines */}
          <div>
            <h4 className="font-bold text-white uppercase tracking-wider text-[11px] mb-2.5 flex items-center gap-1.5">
              <Headphones className="w-4 h-4 text-amber-400" />
              <span>Priority Command Hotlines (Toll-Free &amp; Encrypted VoIP)</span>
            </h4>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-2.5">
              {HOTLINES.map((h, i) => (
                <div
                  key={i}
                  className="p-3 rounded-2xl bg-slate-950 border border-slate-800 space-y-1.5 hover:border-slate-700 transition"
                >
                  <div className="flex items-center justify-between">
                    <span className="font-black text-white text-xs">{h.title}</span>
                    <button
                      type="button"
                      onClick={() => handleCopy(h.phone)}
                      className="p-1 rounded bg-slate-900 hover:bg-slate-800 text-slate-400 hover:text-amber-300 transition text-[10px] flex items-center gap-1"
                    >
                      <Copy className="w-3 h-3" />
                      <span>{copiedNumber === h.phone ? 'Copied!' : 'Copy'}</span>
                    </button>
                  </div>
                  <div className="text-amber-300 font-mono font-bold text-xs">{h.phone}</div>
                  <p className="text-[10px] text-slate-400 leading-tight">{h.role}</p>
                </div>
              ))}
            </div>
          </div>

          {/* Section 2: Rapid Push Broadcast Dispatcher */}
          <div className="p-4 rounded-2xl bg-slate-950 border border-purple-900/60 space-y-3">
            <div className="flex items-center justify-between">
              <h4 className="font-bold text-white uppercase tracking-wider text-[11px] flex items-center gap-1.5">
                <Radio className="w-4 h-4 text-emerald-400" />
                <span>Instant High-Priority Field Push Broadcast</span>
              </h4>
              <span className="text-[10px] px-2 py-0.5 rounded-full bg-emerald-500/20 text-emerald-300 border border-emerald-500/40 font-mono">
                Encrypted Push + SMS
              </span>
            </div>

            {/* Target Selector */}
            <div className="flex items-center gap-2">
              <span className="text-slate-400 text-[11px] shrink-0 font-semibold">Broadcast To:</span>
              <select
                value={broadcastTarget}
                onChange={(e) => setBroadcastTarget(e.target.value)}
                className="bg-slate-900 border border-slate-700 text-white rounded-xl px-2.5 py-1 text-xs focus:outline-none focus:border-amber-500 font-medium"
              >
                <option value="ALL_176846_AGENTS">All 176,846 Polling Unit Agents (Nationwide)</option>
                <option value="WARD_SUPERVISORS">8,809 Ward Supervisors (Collation Centers)</option>
                <option value="LGA_SUPERVISORS">774 LGA Coordinators</option>
                <option value="STATE_COORDINATORS">37 State Returning Officers</option>
              </select>
            </div>

            {/* Quick Templates */}
            <div className="flex items-center gap-1.5 overflow-x-auto text-[10px]">
              <span className="text-slate-500 shrink-0 font-bold">Quick Templates:</span>
              <button
                type="button"
                onClick={() =>
                  setBroadcastText(
                    'MANDATORY: Verify BVAS starts at Zero (0) accreditation before the first voter is accredited. Log confirmation immediately in your app.'
                  )
                }
                className="px-2 py-0.5 rounded bg-slate-900 hover:bg-slate-800 text-amber-300 border border-slate-700 whitespace-nowrap"
              >
                BVAS Zero Check
              </button>
              <button
                type="button"
                onClick={() =>
                  setBroadcastText(
                    'QUEUE LAW: Under Section 50 of Electoral Act 2022, every voter on the queue at 2:30 PM MUST be accredited and allowed to vote. Object if PO attempts cutoff.'
                  )
                }
                className="px-2 py-0.5 rounded bg-slate-900 hover:bg-slate-800 text-purple-300 border border-slate-700 whitespace-nowrap"
              >
                2:30 PM Queue Rule
              </button>
              <button
                type="button"
                onClick={() =>
                  setBroadcastText(
                    'CRITICAL: Snap your Form EC8A photo and obtain your duplicate carbon copy before leaving the PU. Do not surrender physical copy to anyone.'
                  )
                }
                className="px-2 py-0.5 rounded bg-slate-900 hover:bg-slate-800 text-emerald-300 border border-slate-700 whitespace-nowrap"
              >
                EC8A Photo Secure
              </button>
            </div>

            {/* Textarea */}
            <textarea
              rows={3}
              value={broadcastText}
              onChange={(e) => setBroadcastText(e.target.value)}
              className="w-full bg-slate-900 border border-slate-800 rounded-xl p-3 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-amber-500"
              placeholder="Type your strategic directive here..."
            />

            {/* Dispatch Action */}
            <div className="flex items-center justify-between pt-1">
              <span className="text-[10px] text-slate-400">
                Transmits via Firebase Cloud Messaging &bull; Fallback to Bulk SMS
              </span>
              <button
                type="button"
                onClick={handleSendBroadcast}
                disabled={sending || !broadcastText}
                className="px-4 py-2 rounded-xl bg-gradient-to-r from-red-600 via-amber-600 to-amber-500 hover:from-red-500 hover:to-amber-400 text-white font-black text-xs shadow-lg flex items-center gap-1.5 transition disabled:opacity-50"
              >
                {sending ? (
                  <>
                    <span className="w-3 h-3 border-2 border-white border-t-transparent rounded-full animate-spin" />
                    <span>Transmitting...</span>
                  </>
                ) : (
                  <>
                    <Send className="w-3.5 h-3.5" />
                    <span>Transmit Directive Now</span>
                  </>
                )}
              </button>
            </div>

            {sentSuccess && (
              <div className="p-2.5 rounded-xl bg-emerald-950/80 border border-emerald-600 text-emerald-200 text-xs flex items-center gap-2 animate-in fade-in">
                <CheckCircle2 className="w-4 h-4 text-emerald-400 shrink-0" />
                <span>
                  <strong>Broadcast Dispatched!</strong> Successfully queued for delivery across{' '}
                  {broadcastTarget === 'ALL_176846_AGENTS' ? '176,846 Polling Units' : 'Assigned Coordinators'}.
                </span>
              </div>
            )}
          </div>
        </div>

        {/* Footer */}
        <div className="p-3 sm:p-4 bg-slate-950 border-t border-slate-800 flex items-center justify-between text-xs text-slate-400">
          <span className="text-[11px]">
            National Presidential Situation Room Command &bull; Abuja HQ
          </span>
          <button
            onClick={onClose}
            className="px-4 py-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-white font-bold transition"
          >
            Close
          </button>
        </div>
      </div>
    </div>
  );
};