'use client';

import React from 'react';
import {
  Radio,
  Zap,
  CheckCircle2,
  AlertTriangle,
  Split,
  Eye,
  FileText,
  ShieldCheck,
  Clock,
  ArrowRight
} from 'lucide-react';
import { PuResultData } from '@/types';

interface LivePuTransmissionsFeedProps {
  results: Record<string, PuResultData>;
  onInspectIrev: (puCode: string) => void;
  onQuickSimulate?: () => void;
  isSimulating?: boolean;
}

export function LivePuTransmissionsFeed({
  results,
  onInspectIrev,
  onQuickSimulate,
  isSimulating = false,
}: LivePuTransmissionsFeedProps) {
  const resultList = Object.values(results).reverse(); // latest first

  return (
    <div className="bg-white rounded-2xl border border-slate-200/90 p-5 shadow-xs space-y-4">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center justify-between pb-3.5 border-b border-slate-100 gap-3">
        <div className="flex items-center space-x-3">
          <div className="w-10 h-10 rounded-xl bg-emerald-50 border border-emerald-200 text-emerald-800 flex items-center justify-center shrink-0">
            <Radio className="w-5 h-5 text-emerald-700 animate-pulse" />
          </div>
          <div>
            <div className="flex items-center gap-2">
              <h3 className="text-sm font-black text-slate-900 tracking-tight">
                Live Polling Unit Form EC8A Submissions &amp; IReV Stream
              </h3>
              <span className="w-2 h-2 rounded-full bg-emerald-500 animate-ping" />
            </div>
            <p className="text-xs text-slate-500 font-medium">
              Real-time transmissions directly from accredited field agents and mobile PU apps.
            </p>
          </div>
        </div>

        <div className="flex items-center gap-2">
          {onQuickSimulate && (
            <button
              type="button"
              disabled={isSimulating}
              onClick={onQuickSimulate}
              className="px-3.5 py-1.5 rounded-xl bg-amber-400 hover:bg-amber-300 text-slate-950 text-xs font-black flex items-center gap-1.5 shadow-sm transition active:scale-95 cursor-pointer disabled:opacity-75"
              title="Simulate an agent transmitting Form EC8A from phone"
            >
              <Zap className="w-3.5 h-3.5 fill-current" />
              <span>{isSimulating ? 'Transmitting...' : '⚡ Quick Test PU Transmission'}</span>
            </button>
          )}

          <div className="px-3 py-1.5 rounded-xl bg-slate-100 text-slate-700 font-mono text-xs font-bold border border-slate-200">
            {resultList.length} Units Received
          </div>
        </div>
      </div>

      {/* Transmissions Table */}
      <div className="overflow-x-auto">
        <table className="w-full text-left text-xs font-mono">
          <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">PU Code</th>
              <th className="py-2.5 px-3">Agent &amp; Location</th>
              <th className="py-2.5 px-3 text-purple-900">ADC (Atiku)</th>
              <th className="py-2.5 px-3 text-cyan-900">NDC</th>
              <th className="py-2.5 px-3">APC</th>
              <th className="py-2.5 px-3">PDP</th>
              <th className="py-2.5 px-3">Accredited</th>
              <th className="py-2.5 px-3">IReV Comparison</th>
              <th className="py-2.5 px-3 text-right">Actions</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-slate-100 font-sans">
            {resultList.map((res) => {
              const pVotes = res.party_votes || {};
              const adc = pVotes.ADC || 0;
              const ndc = pVotes.NDC || 0;
              const apc = pVotes.APC || 0;
              const pdp = pVotes.PDP || 0;
              const irevAdc = res.inec_irev_votes?.ADC ?? adc;
              const delta = adc - irevAdc;
              const isMatch = delta === 0 && !res.irev_discrepancy_detected;

              return (
                <tr key={res.pu_code} className="hover:bg-slate-50 transition">
                  <td className="py-3 px-3 font-mono font-bold text-slate-900">
                    <div className="flex items-center gap-1.5">
                      <span className="w-2 h-2 rounded-full bg-emerald-500" />
                      <span>{res.pu_code}</span>
                    </div>
                  </td>
                  <td className="py-3 px-3">
                    <div className="font-bold text-slate-900">{res.agent_name || 'PU Field Agent'}</div>
                    <div className="text-[10px] text-slate-400 font-mono">
                      {res.submitted_at ? new Date(res.submitted_at).toLocaleTimeString() : 'Live Transmission'}
                    </div>
                  </td>
                  <td className="py-3 px-3 font-mono font-black text-purple-700">
                    {adc.toLocaleString()}
                  </td>
                  <td className="py-3 px-3 font-mono font-bold text-cyan-700">
                    {ndc.toLocaleString()}
                  </td>
                  <td className="py-3 px-3 font-mono text-slate-700">
                    {apc.toLocaleString()}
                  </td>
                  <td className="py-3 px-3 font-mono text-slate-700">
                    {pdp.toLocaleString()}
                  </td>
                  <td className="py-3 px-3 font-mono text-slate-700">
                    {res.accredited_voters.toLocaleString()}
                  </td>
                  <td className="py-3 px-3">
                    {isMatch ? (
                      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-emerald-50 text-emerald-800 text-[10px] font-bold border border-emerald-200">
                        <CheckCircle2 className="w-3 h-3 text-emerald-600" />
                        <span>IReV 100% Match</span>
                      </span>
                    ) : (
                      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-rose-50 text-rose-700 text-[10px] font-bold border border-rose-200">
                        <AlertTriangle className="w-3 h-3 text-rose-600" />
                        <span>IReV Variance ({delta > 0 ? `+${delta}` : delta})</span>
                      </span>
                    )}
                  </td>
                  <td className="py-3 px-3 text-right">
                    <button
                      type="button"
                      onClick={() => onInspectIrev(res.pu_code)}
                      className="px-3 py-1 rounded-xl bg-emerald-50 hover:bg-emerald-100 text-emerald-900 font-bold text-xs border border-emerald-300 transition flex items-center gap-1 ml-auto"
                    >
                      <Split className="w-3.5 h-3.5 text-emerald-700" />
                      <span>Compare vs IReV &rarr;</span>
                    </button>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}