'use client';

import React, { useState } from 'react';
import {
  X,
  Scale,
  ShieldCheck,
  AlertTriangle,
  PhoneCall,
  Copy,
  CheckCircle2,
  FileText,
  Clock,
  BookOpen
} from 'lucide-react';

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

export const AgentLegalRightsModal: React.FC<Props> = ({ isOpen, onClose, puCode }) => {
  const [copiedScript, setCopiedScript] = useState<string | null>(null);

  if (!isOpen) return null;

  const handleCopy = (text: string, id: string) => {
    navigator.clipboard.writeText(text);
    setCopiedScript(id);
    setTimeout(() => setCopiedScript(null), 2500);
  };

  const OBJECTION_SCRIPTS = [
    {
      id: 'no-ec8a-duplicate',
      title: 'INEC Official Refuses Form EC8A Duplicate Copy',
      actSection: 'Electoral Act 2022, Section 62(1) & (2)',
      text: `Presiding Officer, under Section 62 of the Electoral Act 2022, as the accredited polling agent of ADC for PU ${puCode}, I am legally entitled to a signed and stamped duplicate copy of Form EC8A. Denying this copy is a statutory election offense punishable under Section 120 of the Act.`
    },
    {
      id: 'overvoting-refusal',
      title: 'Total Votes Exceed BVAS Accredited Voters (Over-Voting)',
      actSection: 'Electoral Act 2022, Section 51(2)',
      text: `Presiding Officer, the BVAS accredited voter count is recorded, but total ballots cast exceed this number. Under Section 51(2) of the Electoral Act 2022, this constitutes over-voting and this result is null and void. I lodge a formal objection and demand you note this on the EC8A.`
    },
    {
      id: 'queue-at-cutoff',
      title: 'INEC Staff Attempts to Disperse Voters at 2:30 PM',
      actSection: 'INEC Regulations and Guidelines 2023, Clause 28',
      text: `Presiding Officer, according to official INEC Election Regulations Clause 28, voting does NOT end at 2:30 PM for voters already in the queue. Anyone who arrived and queued by 2:30 PM must be accredited and allowed to vote.`
    }
  ];

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-3 bg-black/80 backdrop-blur-sm animate-in fade-in">
      <div className="relative w-full max-w-xl bg-slate-900 border border-amber-500/50 rounded-2xl shadow-2xl overflow-hidden flex flex-col max-h-[92vh]">
        {/* Header */}
        <div className="flex items-center justify-between px-5 py-3.5 border-b border-slate-800 bg-slate-950/80">
          <div className="flex items-center space-x-2.5">
            <div className="p-2 rounded-xl bg-amber-500/10 border border-amber-500/30 text-amber-400">
              <Scale className="w-5 h-5" />
            </div>
            <div>
              <h2 className="text-sm font-black text-white flex items-center gap-2">
                Agent Legal Rights &amp; Defense Card
                <span className="text-[10px] px-2 py-0.5 rounded-full bg-emerald-950 border border-emerald-700 text-emerald-300 font-mono">
                  Electoral Act 2022
                </span>
              </h2>
              <p className="text-[11px] text-slate-400">
                Official statutory backing for ADC agents at PU {puCode}
              </p>
            </div>
          </div>
          <button
            onClick={onClose}
            className="p-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-400 hover:text-white transition"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Scrollable Content */}
        <div className="p-4 sm:p-5 overflow-y-auto space-y-4 text-xs">
          {/* Emergency Hotlines Strip */}
          <div className="p-3 rounded-xl bg-gradient-to-r from-red-950/80 via-purple-950/70 to-slate-950 border border-red-700/60">
            <div className="flex items-center justify-between mb-2">
              <span className="text-[10px] font-bold text-red-300 uppercase tracking-wider flex items-center gap-1.5">
                <PhoneCall className="w-3.5 h-3.5 text-red-400 animate-pulse" />
                Situation Room Direct Hotlines
              </span>
              <span className="text-[9px] bg-red-800/80 text-white px-2 py-0.5 rounded font-mono font-bold">
                TOLL-FREE 24/7
              </span>
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 text-[11px]">
              <div className="p-2 rounded-lg bg-black/40 border border-red-900/50 flex items-center justify-between">
                <div>
                  <div className="font-bold text-white">Situation Room Legal SAN</div>
                  <div className="text-amber-300 font-mono">+234 803 2027 002</div>
                </div>
                <a
                  href="tel:+2348032027002"
                  className="px-2 py-1 rounded bg-red-600 hover:bg-red-500 text-white font-bold text-[10px]"
                >
                  Call
                </a>
              </div>
              <div className="p-2 rounded-lg bg-black/40 border border-red-900/50 flex items-center justify-between">
                <div>
                  <div className="font-bold text-white">Security &amp; Police Liaison</div>
                  <div className="text-amber-300 font-mono">+234 803 2027 003</div>
                </div>
                <a
                  href="tel:+2348032027003"
                  className="px-2 py-1 rounded bg-red-600 hover:bg-red-500 text-white font-bold text-[10px]"
                >
                  Call
                </a>
              </div>
            </div>
          </div>

          {/* Core Legal Rules */}
          <div className="space-y-2">
            <h3 className="text-xs font-black text-amber-300 uppercase tracking-wider flex items-center gap-1.5">
              <ShieldCheck className="w-4 h-4 text-emerald-400" />
              Your 4 Inviolable Rights Under Nigerian Law
            </h3>

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-2.5">
              <div className="p-2.5 rounded-xl bg-slate-950 border border-slate-800 hover:border-amber-500/40 transition">
                <div className="font-bold text-white flex items-center gap-1.5 mb-1">
                  <span className="w-4 h-4 rounded-full bg-purple-900 text-amber-300 text-[10px] flex items-center justify-center font-bold">1</span>
                  Right to Watch &amp; Inspect (Sec 43)
                </div>
                <p className="text-slate-400 text-[11px] leading-relaxed">
                  You are legally accredited to witness BVAS accreditation, ballot box sealing, counting, and collation from 8:00 AM until close. No one can force you to leave.
                </p>
              </div>

              <div className="p-2.5 rounded-xl bg-slate-950 border border-slate-800 hover:border-amber-500/40 transition">
                <div className="font-bold text-white flex items-center gap-1.5 mb-1">
                  <span className="w-4 h-4 rounded-full bg-purple-900 text-amber-300 text-[10px] flex items-center justify-center font-bold">2</span>
                  Over-Voting Voids Result (Sec 51)
                </div>
                <p className="text-slate-400 text-[11px] leading-relaxed">
                  If total votes cast exceed the BVAS accredited voters, the election in this polling unit is null and void. Refuse to sign and note objection.
                </p>
              </div>

              <div className="p-2.5 rounded-xl bg-slate-950 border border-slate-800 hover:border-amber-500/40 transition">
                <div className="font-bold text-white flex items-center gap-1.5 mb-1">
                  <span className="w-4 h-4 rounded-full bg-purple-900 text-amber-300 text-[10px] flex items-center justify-center font-bold">3</span>
                  Mandatory EC8A Duplicate (Sec 62)
                </div>
                <p className="text-slate-400 text-[11px] leading-relaxed">
                  The Presiding Officer MUST give you an authentic, countersigned duplicate of Form EC8A. Snap it immediately and upload it to this app.
                </p>
              </div>

              <div className="p-2.5 rounded-xl bg-slate-950 border border-slate-800 hover:border-amber-500/40 transition">
                <div className="font-bold text-white flex items-center gap-1.5 mb-1">
                  <span className="w-4 h-4 rounded-full bg-purple-900 text-amber-300 text-[10px] flex items-center justify-center font-bold">4</span>
                  2:30 PM Cutoff Guarantee
                </div>
                <p className="text-slate-400 text-[11px] leading-relaxed">
                  Anyone who joined the queue before or at 2:30 PM MUST be allowed to cast their ballot. Polling stations cannot shut while valid voters queue.
                </p>
              </div>
            </div>
          </div>

          {/* Field Objection Spoken Scripts */}
          <div className="space-y-2">
            <h3 className="text-xs font-black text-amber-300 uppercase tracking-wider flex items-center gap-1.5">
              <FileText className="w-4 h-4 text-amber-400" />
              1-Click Spoken Objection Scripts (Read Aloud or Copy)
            </h3>

            <div className="space-y-2">
              {OBJECTION_SCRIPTS.map((script) => (
                <div
                  key={script.id}
                  className="p-3 rounded-xl bg-slate-950 border border-slate-800 space-y-1.5 hover:border-purple-800/80 transition"
                >
                  <div className="flex items-center justify-between flex-wrap gap-1">
                    <span className="font-bold text-white text-[11px]">
                      {script.title}
                    </span>
                    <span className="text-[9px] text-amber-400 bg-amber-400/10 px-1.5 py-0.5 rounded font-mono">
                      {script.actSection}
                    </span>
                  </div>
                  <p className="text-[11px] text-slate-300 bg-slate-900 p-2 rounded-lg border border-slate-800 font-serif italic">
                    &ldquo;{script.text}&rdquo;
                  </p>
                  <button
                    type="button"
                    onClick={() => handleCopy(script.text, script.id)}
                    className="flex items-center gap-1.5 px-2.5 py-1 rounded bg-slate-800 hover:bg-slate-700 text-[10px] font-bold text-amber-300 border border-slate-700 transition"
                  >
                    {copiedScript === script.id ? (
                      <>
                        <CheckCircle2 className="w-3 h-3 text-emerald-400" />
                        <span className="text-emerald-300">Script Copied!</span>
                      </>
                    ) : (
                      <>
                        <Copy className="w-3 h-3 text-amber-400" />
                        <span>Copy Script to Clipboard / SMS</span>
                      </>
                    )}
                  </button>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Footer */}
        <div className="p-3 border-t border-slate-800 bg-slate-950 flex items-center justify-between text-[11px] text-slate-400">
          <span>H.E. Atiku Abubakar 2027 Legal Directorate</span>
          <button
            type="button"
            onClick={onClose}
            className="px-4 py-1.5 rounded-xl bg-amber-500 hover:bg-amber-400 text-slate-950 font-bold text-xs shadow-md transition"
          >
            Understood
          </button>
        </div>
      </div>
    </div>
  );
};