'use client';

import React, { useState } from 'react';
import {
  PhoneCall,
  MessageSquare,
  Radio,
  Send,
  X,
  ShieldCheck,
  Users,
  AlertTriangle,
  CheckCircle2,
  Share2
} from 'lucide-react';
import { AppUser } from '@/types/auth';
import { KEBBI_LGAS_REGISTRY, ARGUNGU_WARDS_REGISTRY, WARD_PUS_REGISTRY } from '@/lib/votersRegistryData';

interface MultiTierCommunicationModalProps {
  isOpen: boolean;
  onClose: () => void;
  currentUser?: AppUser;
}

export const MultiTierCommunicationModal: React.FC<MultiTierCommunicationModalProps> = ({
  isOpen,
  onClose,
  currentUser
}) => {
  const [activeTab, setActiveTab] = useState<'DIRECT_CALLS' | 'FLASH_BROADCAST' | 'SMS_DISPATCH'>('DIRECT_CALLS');
  const [broadcastMessage, setBroadcastMessage] = useState('');
  const [isSent, setIsSent] = useState(false);

  if (!isOpen) return null;

  const handleSendBroadcast = (e: React.FormEvent) => {
    e.preventDefault();
    if (!broadcastMessage.trim()) return;
    setIsSent(true);
    setTimeout(() => {
      setIsSent(false);
      setBroadcastMessage('');
    }, 3000);
  };

  return (
    <div className="fixed inset-0 z-50 bg-slate-900/60 backdrop-blur-sm flex items-center justify-center p-4 animate-fadeIn">
      <div className="bg-white rounded-3xl shadow-2xl border border-slate-200 w-full max-w-2xl overflow-hidden text-slate-800 space-y-4">
        {/* Header Bar */}
        <div className="bg-gradient-to-r from-[#0A1424] to-[#12233F] text-white p-5 flex items-center justify-between">
          <div className="flex items-center space-x-3">
            <div className="w-10 h-10 rounded-xl bg-emerald-500/20 border border-emerald-400/40 flex items-center justify-center text-emerald-400">
              <PhoneCall className="w-5 h-5" />
            </div>
            <div>
              <div className="flex items-center space-x-2">
                <span className="text-[10px] font-black uppercase px-2 py-0.2 rounded bg-emerald-500 text-slate-950">
                  AAMOVEMENT DESK
                </span>
                <span className="text-xs font-mono text-slate-300">Fast Field Intercom</span>
              </div>
              <h3 className="text-base font-black text-white mt-0.5">
                Multi-Tier Command Communication Hub
              </h3>
            </div>
          </div>

          <button
            onClick={onClose}
            className="p-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-300 transition-colors"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Tab Switcher */}
        <div className="px-5 pt-1">
          <div className="flex border-b border-slate-200 space-x-2 text-xs font-bold">
            <button
              onClick={() => setActiveTab('DIRECT_CALLS')}
              className={`pb-2.5 px-3 border-b-2 transition-all ${
                activeTab === 'DIRECT_CALLS'
                  ? 'border-emerald-600 text-emerald-700'
                  : 'border-transparent text-slate-400 hover:text-slate-600'
              }`}
            >
              Direct Intercom & Phone Lines
            </button>
            <button
              onClick={() => setActiveTab('FLASH_BROADCAST')}
              className={`pb-2.5 px-3 border-b-2 transition-all ${
                activeTab === 'FLASH_BROADCAST'
                  ? 'border-emerald-600 text-emerald-700'
                  : 'border-transparent text-slate-400 hover:text-slate-600'
              }`}
            >
              Flash Broadcast Down Chain
            </button>
            <button
              onClick={() => setActiveTab('SMS_DISPATCH')}
              className={`pb-2.5 px-3 border-b-2 transition-all ${
                activeTab === 'SMS_DISPATCH'
                  ? 'border-emerald-600 text-emerald-700'
                  : 'border-transparent text-slate-400 hover:text-slate-600'
              }`}
            >
              Zero-Data GSM Shortcode (32027)
            </button>
          </div>
        </div>

        {/* Tab 1: Direct Intercom Directory */}
        {activeTab === 'DIRECT_CALLS' && (
          <div className="p-5 pt-0 space-y-4 max-h-[420px] overflow-y-auto text-xs">
            {/* National to State Lines */}
            <div className="space-y-2">
              <span className="text-[11px] font-black uppercase text-slate-400 tracking-wider block">
                State Operations Coordinators (Sample Kebbi Tier)
              </span>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-2.5">
                <div className="p-3 rounded-2xl bg-slate-50 border border-slate-200 flex items-center justify-between">
                  <div>
                    <span className="font-bold text-slate-900 block">Dr. Bello Haliru</span>
                    <span className="text-[10px] text-slate-500 font-mono">Kebbi State Coordinator</span>
                  </div>
                  <div className="flex space-x-1.5">
                    <a
                      href="tel:+2348039991122"
                      className="p-2 rounded-xl bg-emerald-600 text-white hover:bg-emerald-700 transition-colors shadow-xs"
                      title="Direct Call"
                    >
                      <PhoneCall className="w-3.5 h-3.5" />
                    </a>
                    <a
                      href="sms:+2348039991122"
                      className="p-2 rounded-xl bg-blue-600 text-white hover:bg-blue-700 transition-colors shadow-xs"
                      title="Direct SMS"
                    >
                      <MessageSquare className="w-3.5 h-3.5" />
                    </a>
                  </div>
                </div>

                <div className="p-3 rounded-2xl bg-slate-50 border border-slate-200 flex items-center justify-between">
                  <div>
                    <span className="font-bold text-slate-900 block">Alh. Ibrahim Kanta</span>
                    <span className="text-[10px] text-slate-500 font-mono">Argungu LGA Coordinator</span>
                  </div>
                  <div className="flex space-x-1.5">
                    <a
                      href="tel:+2348031122334"
                      className="p-2 rounded-xl bg-emerald-600 text-white hover:bg-emerald-700 transition-colors shadow-xs"
                      title="Direct Call"
                    >
                      <PhoneCall className="w-3.5 h-3.5" />
                    </a>
                    <a
                      href="sms:+2348031122334"
                      className="p-2 rounded-xl bg-blue-600 text-white hover:bg-blue-700 transition-colors shadow-xs"
                      title="Direct SMS"
                    >
                      <MessageSquare className="w-3.5 h-3.5" />
                    </a>
                  </div>
                </div>
              </div>
            </div>

            {/* Ward to PU Agent Lines */}
            <div className="space-y-2 pt-2 border-t border-slate-100">
              <span className="text-[11px] font-black uppercase text-slate-400 tracking-wider block">
                Argungu Central I Ward Sentinels (28 PUs Link)
              </span>
              <div className="space-y-2">
                {WARD_PUS_REGISTRY.slice(0, 4).map((pu) => (
                  <div
                    key={pu.code}
                    className="p-3 rounded-2xl bg-slate-50 border border-slate-200 flex items-center justify-between"
                  >
                    <div>
                      <div className="flex items-center space-x-1.5">
                        <span className="font-bold text-slate-900">{pu.agentName}</span>
                        <span className="text-[10px] font-mono px-1.5 py-0.2 bg-emerald-100 text-emerald-800 rounded font-bold">
                          {pu.code}
                        </span>
                      </div>
                      <span className="text-[10px] text-slate-500">{pu.name}</span>
                    </div>

                    <div className="flex space-x-1.5">
                      <a
                        href={`tel:${pu.agentPhone}`}
                        className="px-2.5 py-1.5 rounded-xl bg-emerald-600 text-white hover:bg-emerald-700 font-bold flex items-center space-x-1 text-[11px] shadow-xs"
                      >
                        <PhoneCall className="w-3 h-3" />
                        <span>Call</span>
                      </a>
                      <a
                        href={`sms:${pu.agentPhone}?body=AAMovement: Please confirm Form e-EC8A transmission for ${pu.code}`}
                        className="px-2.5 py-1.5 rounded-xl bg-blue-600 text-white hover:bg-blue-700 font-bold flex items-center space-x-1 text-[11px] shadow-xs"
                      >
                        <MessageSquare className="w-3 h-3" />
                        <span>SMS</span>
                      </a>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}

        {/* Tab 2: Flash Broadcast Down Chain */}
        {activeTab === 'FLASH_BROADCAST' && (
          <form onSubmit={handleSendBroadcast} className="p-5 pt-0 space-y-4">
            <div className="p-3 rounded-2xl bg-amber-50 border border-amber-200 text-amber-900 text-xs">
              <div className="font-bold flex items-center space-x-1.5">
                <AlertTriangle className="w-4 h-4 text-amber-600" />
                <span>Hierarchical Emergency Broadcast</span>
              </div>
              <p className="mt-1 text-[11px] text-amber-800">
                This flash bulletin instantly pushes notifications and SMS dispatch to all subordinates under your command (National → State → LGA → Ward → PU).
              </p>
            </div>

            <div>
              <label className="text-xs font-bold text-slate-700 block mb-1">
                Broadcast Directive:
              </label>
              <textarea
                rows={4}
                value={broadcastMessage}
                onChange={(e) => setBroadcastMessage(e.target.value)}
                placeholder="e.g. MANDATORY DIRECTIVE: All sentinels must cross-check BVAS accreditation against physical ballot counterfoils before signing Form EC8A..."
                className="w-full p-3 rounded-2xl bg-slate-50 border border-slate-300 text-xs text-slate-800 focus:outline-none focus:ring-2 focus:ring-emerald-500 placeholder-slate-400"
              />
            </div>

            {isSent && (
              <div className="p-3 rounded-xl bg-emerald-50 border border-emerald-300 text-emerald-800 text-xs flex items-center space-x-2">
                <CheckCircle2 className="w-4 h-4 text-emerald-600" />
                <span className="font-bold">Broadcast transmitted successfully across all subordinate command nodes!</span>
              </div>
            )}

            <div className="flex justify-end space-x-2">
              <button
                type="button"
                onClick={onClose}
                className="px-4 py-2 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-xs"
              >
                Cancel
              </button>
              <button
                type="submit"
                className="px-5 py-2 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white font-black text-xs flex items-center space-x-2 shadow-md"
              >
                <Send className="w-3.5 h-3.5" />
                <span>Transmit Broadcast</span>
              </button>
            </div>
          </form>
        )}

        {/* Tab 3: Zero-Data GSM Shortcode (32027) */}
        {activeTab === 'SMS_DISPATCH' && (
          <div className="p-5 pt-0 space-y-4 text-xs">
            <div className="p-4 rounded-2xl bg-slate-900 text-white space-y-2">
              <div className="flex items-center justify-between">
                <span className="font-bold text-emerald-400 uppercase text-[10px] tracking-wider">
                  Toll-Free National SMS Gateway
                </span>
                <span className="font-mono text-amber-400 font-black">Shortcode: 32027</span>
              </div>
              <p className="text-slate-300 text-[11px]">
                In remote villages with zero mobile data/internet, agents send this standard 160-character GSM telegram:
              </p>
              <div className="p-2.5 rounded-xl bg-slate-950 font-mono text-emerald-300 text-[11px] select-all border border-slate-800">
                AA*PU:PU2102004*REG:750*BVAS:512*REJ:3*ADC:342*APC:145*PDP:4*LP:14*OTH:0*S:E9A2
              </div>
            </div>

            <a
              href="sms:32027?body=AA*PU:PU2102004*REG:750*BVAS:512*REJ:3*ADC:342*APC:145*PDP:4*LP:14*OTH:0*S:E9A2"
              className="w-full py-3 rounded-2xl bg-emerald-600 hover:bg-emerald-700 text-white font-black text-xs flex items-center justify-center space-x-2 transition-all shadow-md"
            >
              <MessageSquare className="w-4 h-4" />
              <span>1-Click Open in Phone SMS App (32027)</span>
            </a>
          </div>
        )}

        {/* Footer */}
        <div className="bg-slate-50 p-4 border-t border-slate-200 flex items-center justify-between text-[11px] text-slate-500">
          <span>AAMovement Encrypted Intercom • Section 62 & 64 Statutory Archive</span>
          <button onClick={onClose} className="font-bold text-slate-700 hover:text-slate-900">
            Close
          </button>
        </div>
      </div>
    </div>
  );
};