'use client';

import React, { useState, useMemo } from 'react';
import {
  X,
  Printer,
  Download,
  Scale,
  ShieldCheck,
  AlertTriangle,
  FileCheck2,
  CheckCircle2,
  Vote,
  Split,
  Eye,
  FileText,
  AlertOctagon,
  ArrowRight,
  ShieldAlert,
  Globe
} from 'lucide-react';
import { INITIAL_PU_RESULTS, NIGERIAN_STATES } from '@/lib/electoralData';
import { PuResultData } from '@/types';

interface Props {
  isOpen: boolean;
  onClose: () => void;
  scopeTitle?: string;
  results?: Record<string, PuResultData>;
  initialSelectedPuCode?: string;
}

export const CourtReportModal: React.FC<Props> = ({
  isOpen,
  onClose,
  scopeTitle = 'Federal Republic of Nigeria (Nationwide Command)',
  results,
  initialSelectedPuCode,
}) => {
  const [activeTab, setActiveTab] = useState<'DOSSIER' | 'SIDE_BY_SIDE'>('DOSSIER');

  // Merge static baseline initial results with live submitted PU results
  const allResults = useMemo(() => {
    const map = { ...INITIAL_PU_RESULTS, ...(results || {}) };
    return Object.values(map);
  }, [results]);

  const [selectedPuCode, setSelectedPuCode] = useState<string>(() => {
    if (initialSelectedPuCode) return initialSelectedPuCode;
    return allResults[0]?.pu_code || '24-11-01-001';
  });

  const activePuResult = useMemo(() => {
    return allResults.find((r) => r.pu_code === selectedPuCode) || allResults[0];
  }, [allResults, selectedPuCode]);

  if (!isOpen) return null;

  const handlePrint = () => {
    window.print();
  };

  const handleDownloadCsv = () => {
    const headers = [
      'PU_Code',
      'PU_Name',
      'Registered_Voters',
      'Accredited_Voters',
      'Atiku_ADC_Agent_Votes',
      'NDC_Agent_Votes',
      'APC_Agent_Votes',
      'LP_Agent_Votes',
      'PDP_Agent_Votes',
      'NNPP_Agent_Votes',
      'Total_Valid_Votes',
      'Rejected_Ballots',
      'Total_Votes_Cast',
      'INEC_IReV_Atiku_Votes',
      'IReV_Variance_Delta',
      'Over_Voting_Violation',
      'Agent_Sworn_Affidavit',
      'Form_EC8A_URL',
    ];

    const rows = allResults.map((res) => {
      const irevAdc = res.inec_irev_votes?.ADC ?? res.party_votes.ADC ?? 0;
      const variance = (res.party_votes.ADC ?? 0) - irevAdc;
      return [
        res.pu_code,
        `"PU ${res.pu_code}"`,
        res.registered_voters,
        res.accredited_voters,
        res.party_votes.ADC ?? 0,
        res.party_votes.NDC ?? 0,
        res.party_votes.APC ?? 0,
        res.party_votes.LP ?? 0,
        res.party_votes.PDP ?? 0,
        res.party_votes.NNPP ?? 0,
        res.total_valid_votes,
        res.rejected_ballots,
        res.total_votes_cast,
        irevAdc,
        variance,
        res.over_voting_detected ? 'YES_OVER_VOTING' : 'NO_COMPLIANT',
        res.agent_signature_confirmed ? 'SWORN_AFFIDAVIT_SIGNED' : 'PENDING',
        `"${res.form_ec8a_url}"`,
      ].join(',');
    });

    const csvContent = 'data:text/csv;charset=utf-8,' + [headers.join(','), ...rows].join('\n');
    const encodedUri = encodeURI(csvContent);
    const link = document.createElement('a');
    link.setAttribute('href', encodedUri);
    link.setAttribute('download', `AAMOVEMENT_TRIBUNAL_EVIDENCE_DOSSIER_${Date.now()}.csv`);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-3 sm:p-6 bg-slate-900/80 backdrop-blur-md animate-in fade-in overflow-y-auto">
      <div className="w-full max-w-5xl bg-white border border-slate-200 rounded-3xl shadow-2xl overflow-hidden my-auto max-h-[94vh] flex flex-col text-slate-900">
        {/* Header - Screen Only */}
        <div className="p-4 sm:p-5 bg-slate-50 border-b border-slate-200 flex flex-wrap items-center justify-between gap-3 flex-shrink-0 print:hidden">
          <div className="flex items-center space-x-3">
            <div className="w-12 h-12 rounded-2xl bg-white p-1 border-2 border-emerald-600 shadow-md flex items-center justify-center flex-shrink-0">
              <img
                src="/aa-movement-logo.jpg"
                alt="AA Movement Nigeria"
                className="w-full h-full object-contain"
              />
            </div>
            <div>
              <h3 className="text-base font-black text-slate-950 flex items-center gap-2">
                AA MOVEMENT &bull; Tribunal Evidence Dossier &amp; IReV Audit
                <span className="text-[10px] px-2 py-0.5 rounded-full bg-emerald-100 border border-emerald-400 text-emerald-900 font-bold">
                  COURT-READY
                </span>
              </h3>
              <p className="text-xs text-slate-500 font-medium">
                Official parallel tabulation audits, agent sworn affidavits &amp; INEC IReV comparative variances
              </p>
            </div>
          </div>

          <div className="flex items-center space-x-2">
            {/* View Mode Toggle: Dossier Schedule vs Side-by-Side IReV Inspection */}
            <div className="flex items-center p-1 bg-slate-200 rounded-xl text-xs font-bold">
              <button
                type="button"
                onClick={() => setActiveTab('DOSSIER')}
                className={`px-3 py-1 rounded-lg transition ${
                  activeTab === 'DOSSIER'
                    ? 'bg-white text-slate-900 shadow-xs'
                    : 'text-slate-600 hover:text-slate-900'
                }`}
              >
                <span className="flex items-center gap-1.5">
                  <FileText className="w-3.5 h-3.5" />
                  Dossier Schedule
                </span>
              </button>
              <button
                type="button"
                onClick={() => setActiveTab('SIDE_BY_SIDE')}
                className={`px-3 py-1 rounded-lg transition ${
                  activeTab === 'SIDE_BY_SIDE'
                    ? 'bg-white text-emerald-800 shadow-xs'
                    : 'text-slate-600 hover:text-slate-900'
                }`}
              >
                <span className="flex items-center gap-1.5">
                  <Split className="w-3.5 h-3.5 text-emerald-700" />
                  EC8A vs IReV Inspection
                </span>
              </button>
            </div>

            <button
              onClick={handleDownloadCsv}
              className="px-3 py-1.5 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-700 border border-slate-300 text-xs font-bold flex items-center gap-1.5 transition"
              title="Download CSV Spreadsheet for Legal Team"
            >
              <Download className="w-3.5 h-3.5" />
              <span className="hidden sm:inline">Export CSV</span>
            </button>
            <button
              onClick={handlePrint}
              className="px-3 py-1.5 rounded-xl bg-emerald-800 hover:bg-emerald-700 text-white text-xs font-bold flex items-center gap-1.5 shadow-sm transition"
              title="Print Official Tribunal Dossier (PDF)"
            >
              <Printer className="w-3.5 h-3.5" />
              <span>Print Dossier (PDF)</span>
            </button>
            <button
              onClick={onClose}
              className="p-1.5 rounded-lg text-slate-400 hover:text-slate-700 hover:bg-slate-100 transition"
            >
              <X className="w-5 h-5" />
            </button>
          </div>
        </div>

        {/* Printable & Scrollable Tribunal Dossier Content */}
        <div className="flex-1 overflow-y-auto p-5 sm:p-7 space-y-6 print:p-0 print:text-black print:bg-white bg-[#f8fafc]">
          {/* Official Letterhead */}
          <div className="border-b-2 border-slate-900 pb-4 print:border-black bg-white p-4 rounded-2xl border border-slate-200 shadow-xs">
            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
              <div className="flex items-center space-x-3.5">
                <div className="w-14 h-14 rounded-2xl bg-white p-1 border-2 border-emerald-600 shadow-md flex items-center justify-center flex-shrink-0">
                  <img
                    src="/aa-movement-logo.jpg"
                    alt="AA Movement Official Seal"
                    className="w-full h-full object-contain"
                  />
                </div>
                <div>
                  <span className="text-[11px] font-bold tracking-widest text-emerald-800 print:text-black uppercase block">
                    IN THE PRESIDENTIAL ELECTION PETITION TRIBUNAL HOLDEN AT ABUJA
                  </span>
                  <h1 className="text-base sm:text-lg font-black text-slate-950 print:text-black mt-0.5">
                    HIS EXCELLENCY ATIKU ABUBAKAR PRESIDENTIAL CAMPAIGN COUNCIL
                  </h1>
                  <p className="text-xs text-slate-500 font-medium print:text-gray-700">
                    AA Movement Nigeria &bull; National Legal &amp; Cryptographic Situation Room Directorate
                  </p>
                </div>
              </div>

              <div className="text-left sm:text-right text-xs font-mono text-slate-500 print:text-gray-700">
                <div>DATE: {new Date().toLocaleDateString('en-GB')}</div>
                <div className="font-bold text-emerald-800">EXHIBIT ID: AAMOVEMENT-PET-2027-VOL-I</div>
                <div className="text-[10px] text-slate-400">Total Audited Units: {allResults.length}</div>
              </div>
            </div>
          </div>

          {/* TAB 1: SCHEDULE OF AUDITED POLLING UNITS (DOSSIER) */}
          {activeTab === 'DOSSIER' && (
            <div className="space-y-6">
              {/* Scope Certification Banner */}
              <div className="p-4 rounded-2xl bg-white border border-slate-200 print:border print:border-black text-xs space-y-1.5 shadow-xs">
                <div className="font-bold text-slate-900 print:text-black flex flex-wrap items-center justify-between gap-2">
                  <span className="flex items-center gap-1.5 text-emerald-900">
                    <Scale className="w-4 h-4 text-emerald-700" />
                    CERTIFICATE OF PARALLEL VOTE TABULATION (PVT) &amp; IREV AUDIT
                  </span>
                  <span className="font-mono text-xs text-slate-600 bg-slate-100 px-2 py-0.5 rounded border border-slate-200">
                    Jurisdiction: {scopeTitle}
                  </span>
                </div>
                <p className="text-slate-600 print:text-gray-800 leading-relaxed">
                  This dossier contains verified field evidence collated from accredited Polling Unit Agents under Section 51, 60, and 64 of the Electoral Act 2022, corroborated with digital server feeds from the INEC Election Result Viewing Portal (IReV).
                </p>
              </div>

              {/* Evidence Table */}
              <div className="bg-white rounded-2xl border border-slate-200 shadow-xs overflow-hidden">
                <div className="p-3.5 bg-slate-50 border-b border-slate-200 flex items-center justify-between">
                  <h4 className="text-xs font-black uppercase tracking-wider text-slate-800 print:text-black flex items-center gap-2">
                    <FileCheck2 className="w-4 h-4 text-emerald-700" />
                    SCHEDULE OF AUDITED POLLING UNITS (FORM EC8A COMPARATIVE AUDIT)
                  </h4>
                  <span className="text-[11px] font-mono text-slate-500 font-bold">
                    {allResults.length} Audited Polling Units
                  </span>
                </div>

                <div className="overflow-x-auto">
                  <table className="w-full text-left border-collapse text-xs print:text-[10px]">
                    <thead>
                      <tr className="border-b border-slate-200 bg-slate-100/80 text-slate-700 print:text-black font-bold text-[10px] uppercase">
                        <th className="py-3 px-3">PU Code</th>
                        <th className="py-3 px-3">Accredited (BVAS)</th>
                        <th className="py-3 px-3 text-purple-900">Atiku/ADC Agent</th>
                        <th className="py-3 px-3 text-cyan-900">NDC Agent</th>
                        <th className="py-3 px-3">IReV Upload Votes</th>
                        <th className="py-3 px-3">Variance (&Delta;)</th>
                        <th className="py-3 px-3">Over-Voting (Sec 51)</th>
                        <th className="py-3 px-3">Agent Sworn Affidavit</th>
                        <th className="py-3 px-3 text-right">Side-by-Side Action</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-slate-100 font-mono">
                      {allResults.map((res) => {
                        const irevAdc = res.inec_irev_votes?.ADC ?? res.party_votes.ADC ?? 0;
                        const variance = (res.party_votes.ADC ?? 0) - irevAdc;

                        return (
                          <tr
                            key={res.pu_code}
                            className={`hover:bg-slate-50 transition cursor-pointer ${
                              res.pu_code === selectedPuCode ? 'bg-emerald-50/50' : ''
                            }`}
                            onClick={() => {
                              setSelectedPuCode(res.pu_code);
                              setActiveTab('SIDE_BY_SIDE');
                            }}
                          >
                            <td className="py-3 px-3 font-bold text-slate-900">
                              {res.pu_code}
                            </td>
                            <td className="py-3 px-3 text-slate-700">
                              {res.accredited_voters.toLocaleString()}
                            </td>
                            <td className="py-3 px-3 font-bold text-purple-700">
                              {(res.party_votes.ADC || 0).toLocaleString()}
                            </td>
                            <td className="py-3 px-3 font-bold text-cyan-700">
                              {(res.party_votes.NDC || 0).toLocaleString()}
                            </td>
                            <td className="py-3 px-3 text-slate-700">
                              {irevAdc.toLocaleString()}
                            </td>
                            <td className="py-3 px-3 font-bold">
                              {variance === 0 ? (
                                <span className="text-emerald-700 flex items-center gap-1">
                                  <CheckCircle2 className="w-3 h-3 text-emerald-600" />
                                  0 (Match)
                                </span>
                              ) : (
                                <span className="text-rose-600 font-black flex items-center gap-1">
                                  <AlertTriangle className="w-3 h-3 text-rose-600" />
                                  {variance > 0 ? `+${variance}` : variance} (Variance)
                                </span>
                              )}
                            </td>
                            <td className="py-3 px-3">
                              {res.over_voting_detected ? (
                                <span className="text-rose-600 font-black bg-rose-50 px-2 py-0.5 rounded text-[10px] border border-rose-200">
                                  VIOLATION
                                </span>
                              ) : (
                                <span className="text-emerald-700 font-semibold">COMPLIANT</span>
                              )}
                            </td>
                            <td className="py-3 px-3">
                              {res.agent_signature_confirmed ? (
                                <span className="text-emerald-700 font-bold">&check; Certified</span>
                              ) : (
                                <span className="text-slate-400">Unsigned</span>
                              )}
                            </td>
                            <td className="py-3 px-3 text-right">
                              <button
                                type="button"
                                onClick={(e) => {
                                  e.stopPropagation();
                                  setSelectedPuCode(res.pu_code);
                                  setActiveTab('SIDE_BY_SIDE');
                                }}
                                className="px-2.5 py-1 rounded-lg bg-emerald-50 hover:bg-emerald-100 text-emerald-800 font-bold text-[10px] border border-emerald-200 transition"
                              >
                                Compare vs IReV &rarr;
                              </button>
                            </td>
                          </tr>
                        );
                      })}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          )}

          {/* TAB 2: SIDE-BY-SIDE EC8A vs INEC IReV COMPARISON */}
          {activeTab === 'SIDE_BY_SIDE' && activePuResult && (
            <div className="space-y-6">
              {/* Unit Selector Bar */}
              <div className="p-4 bg-white rounded-2xl border border-slate-200 shadow-xs flex flex-wrap items-center justify-between gap-3">
                <div className="flex items-center gap-2">
                  <Split className="w-4 h-4 text-emerald-700" />
                  <span className="text-xs font-black text-slate-900 uppercase">
                    Select Polling Unit for Forensic Comparison:
                  </span>
                </div>
                <div className="flex items-center gap-2">
                  <select
                    value={selectedPuCode}
                    onChange={(e) => setSelectedPuCode(e.target.value)}
                    className="bg-slate-50 border border-slate-300 text-slate-800 text-xs font-bold py-1.5 px-3 rounded-xl focus:outline-none focus:ring-2 focus:ring-emerald-600"
                  >
                    {allResults.map((r) => (
                      <option key={r.pu_code} value={r.pu_code}>
                        PU {r.pu_code} &bull; {r.agent_name || 'PU Agent'} (ADC: {r.party_votes?.ADC || 0} vs IReV: {r.inec_irev_votes?.ADC ?? r.party_votes?.ADC ?? 0})
                      </option>
                    ))}
                  </select>
                </div>
              </div>

              {/* Side-by-Side Visual Comparison Cards */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                {/* Left Card: Field Agent Physical Form EC8A */}
                <div className="bg-white rounded-2xl border-2 border-emerald-600 shadow-sm overflow-hidden flex flex-col">
                  <div className="p-3.5 bg-emerald-50 border-b border-emerald-200 flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <ShieldCheck className="w-4 h-4 text-emerald-700" />
                      <h4 className="text-xs font-black text-emerald-950 uppercase">
                        Field Agent Physical Form EC8A
                      </h4>
                    </div>
                    <span className="text-[10px] font-bold px-2 py-0.5 rounded-full bg-emerald-200 text-emerald-900">
                      ORIGINAL DUPLICATE
                    </span>
                  </div>

                  <div className="p-4 flex-1 flex flex-col space-y-4">
                    {/* EC8A Snapshot Image */}
                    <div className="relative aspect-4/3 bg-slate-100 rounded-xl overflow-hidden border border-slate-200 group">
                      <img
                        src={activePuResult.physical_ec8a_photo || activePuResult.form_ec8a_url || '/sample_ec8a_snap.jpg'}
                        alt="Physical Form EC8A"
                        className="w-full h-full object-contain bg-slate-900"
                      />
                      <div className="absolute bottom-2 left-2 right-2 bg-slate-950/80 backdrop-blur-sm p-2 rounded-lg text-[10px] text-white font-mono flex items-center justify-between">
                        <span>Agent: {activePuResult.agent_name || 'Accredited Field Agent'}</span>
                        <span className="text-emerald-400 font-bold">&check; Sworn Signed</span>
                      </div>
                    </div>

                    {/* Agent Vote Metrics */}
                    <div className="grid grid-cols-2 gap-2 text-xs">
                      <div className="p-2.5 rounded-xl bg-slate-50 border border-slate-200">
                        <span className="text-[10px] text-slate-500 block uppercase font-bold">BVAS Accredited</span>
                        <span className="text-sm font-black text-slate-900">{activePuResult.accredited_voters.toLocaleString()}</span>
                      </div>
                      <div className="p-2.5 rounded-xl bg-purple-50 border border-purple-200">
                        <span className="text-[10px] text-purple-700 block uppercase font-bold">ADC Votes (Form EC8A)</span>
                        <span className="text-sm font-black text-purple-900">{(activePuResult.party_votes?.ADC || 0).toLocaleString()}</span>
                      </div>
                    </div>
                  </div>
                </div>

                {/* Right Card: INEC Official IReV Portal Feed */}
                <div className="bg-white rounded-2xl border-2 border-slate-300 shadow-sm overflow-hidden flex flex-col">
                  <div className="p-3.5 bg-slate-100 border-b border-slate-200 flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <Globe className="w-4 h-4 text-blue-700" />
                      <h4 className="text-xs font-black text-slate-900 uppercase">
                        INEC IReV Portal Upload Feed
                      </h4>
                    </div>
                    <span className="text-[10px] font-bold px-2 py-0.5 rounded-full bg-blue-100 text-blue-900">
                      IREV.INEC.GOV.NG
                    </span>
                  </div>

                  <div className="p-4 flex-1 flex flex-col space-y-4">
                    {/* IReV Snapshot Image */}
                    <div className="relative aspect-4/3 bg-slate-100 rounded-xl overflow-hidden border border-slate-200 group">
                      <img
                        src={activePuResult.inec_irev_url || activePuResult.form_ec8a_url || '/sample_ec8a_snap.jpg'}
                        alt="INEC IReV Form EC8A Upload"
                        className="w-full h-full object-contain bg-slate-900"
                      />
                      <div className="absolute bottom-2 left-2 right-2 bg-slate-950/80 backdrop-blur-sm p-2 rounded-lg text-[10px] text-white font-mono flex items-center justify-between">
                        <span>Server Hash: verified</span>
                        <span className="text-blue-400 font-bold">IReV Live Sync</span>
                      </div>
                    </div>

                    {/* IReV Server Vote Metrics */}
                    <div className="grid grid-cols-2 gap-2 text-xs">
                      <div className="p-2.5 rounded-xl bg-slate-50 border border-slate-200">
                        <span className="text-[10px] text-slate-500 block uppercase font-bold">IReV Upload Time</span>
                        <span className="text-xs font-mono font-bold text-slate-800">
                          {activePuResult.inec_irev_uploaded_at
                            ? new Date(activePuResult.inec_irev_uploaded_at).toLocaleTimeString()
                            : 'Synchronized'}
                        </span>
                      </div>
                      <div className="p-2.5 rounded-xl bg-blue-50 border border-blue-200">
                        <span className="text-[10px] text-blue-700 block uppercase font-bold">ADC Votes (IReV Server)</span>
                        <span className="text-sm font-black text-blue-900">
                          {(activePuResult.inec_irev_votes?.ADC ?? activePuResult.party_votes?.ADC ?? 0).toLocaleString()}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              {/* Party-by-Party Vote Delta Table */}
              <div className="bg-white rounded-2xl border border-slate-200 p-5 shadow-xs space-y-3">
                <h4 className="text-xs font-black uppercase text-slate-900 flex items-center gap-2">
                  <Scale className="w-4 h-4 text-emerald-700" />
                  Forensic Variance Analysis (Field Duplicate vs. INEC Server)
                </h4>

                <div className="overflow-x-auto">
                  <table className="w-full text-xs font-mono text-left">
                    <thead>
                      <tr className="border-b border-slate-200 bg-slate-50 text-slate-600 text-[10px] uppercase font-bold">
                        <th className="py-2.5 px-3">Party</th>
                        <th className="py-2.5 px-3">Field Form EC8A</th>
                        <th className="py-2.5 px-3">INEC IReV Portal</th>
                        <th className="py-2.5 px-3">Variance (&Delta;)</th>
                        <th className="py-2.5 px-3">Audit Finding</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-slate-100">
                      {['ADC', 'NDC', 'APC', 'PDP', 'LP', 'NNPP'].map((partyCode) => {
                        const agentVal = (activePuResult.party_votes as any)?.[partyCode] || 0;
                        const irevVal = (activePuResult.inec_irev_votes as any)?.[partyCode] ?? agentVal;
                        const diff = agentVal - irevVal;

                        return (
                          <tr key={partyCode} className="hover:bg-slate-50">
                            <td className="py-2.5 px-3 font-bold text-slate-900">
                              {partyCode}
                            </td>
                            <td className="py-2.5 px-3 font-bold text-slate-800">
                              {agentVal.toLocaleString()}
                            </td>
                            <td className="py-2.5 px-3 text-slate-700">
                              {irevVal.toLocaleString()}
                            </td>
                            <td className="py-2.5 px-3 font-bold">
                              {diff === 0 ? (
                                <span className="text-emerald-700">0 (Match)</span>
                              ) : (
                                <span className="text-rose-600 font-black">
                                  {diff > 0 ? `+${diff}` : diff}
                                </span>
                              )}
                            </td>
                            <td className="py-2.5 px-3 text-[11px] font-sans">
                              {diff === 0 ? (
                                <span className="text-emerald-700 font-semibold flex items-center gap-1">
                                  &check; Fully Authenticated
                                </span>
                              ) : (
                                <span className="text-rose-600 font-bold flex items-center gap-1">
                                  <AlertOctagon className="w-3.5 h-3.5 text-rose-600" />
                                  Statutory Discrepancy Flagged
                                </span>
                              )}
                            </td>
                          </tr>
                        );
                      })}
                    </tbody>
                  </table>
                </div>

                {activePuResult.irev_variance_notes && (
                  <div className="p-3 rounded-xl bg-amber-50 border border-amber-200 text-xs text-amber-900 font-sans mt-3">
                    <strong>Auditor Remarks:</strong> {activePuResult.irev_variance_notes}
                  </div>
                )}
              </div>
            </div>
          )}

          {/* Certification Sign-off for Court Filing */}
          <div className="pt-6 border-t border-slate-200 print:border-black grid grid-cols-1 sm:grid-cols-2 gap-6 text-xs text-slate-700 print:text-black bg-white p-5 rounded-2xl border border-slate-200">
            <div>
              <span className="block font-black text-slate-950 print:text-black uppercase">
                Director of Legal Directorate
              </span>
              <p className="text-[11px] text-slate-500 print:text-gray-700 mt-1">
                Atiku Abubakar Presidential Campaign Council &bull; Supreme Court Bar Enrolment No. SC/14982
              </p>
              <div className="mt-4 border-b border-slate-400 print:border-black w-48" />
              <span className="text-[10px] text-slate-400 print:text-gray-600 block mt-1">Signature &amp; Date</span>
            </div>

            <div>
              <span className="block font-black text-slate-950 print:text-black uppercase">
                Head, Technical Collation Desk (AA Movement Digital Innovation)
              </span>
              <p className="text-[11px] text-slate-500 print:text-gray-700 mt-1">
                Forensic Data Custodian &bull; Cryptographic Hash Verification Lead
              </p>
              <div className="mt-4 border-b border-slate-400 print:border-black w-48" />
              <span className="text-[10px] text-slate-400 print:text-gray-600 block mt-1">Signature &amp; Date</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};