'use client';

import React from 'react';
import {
  FileCheck,
  Vote,
  Users,
  CheckCircle2,
  AlertTriangle,
  Layers,
  MapPin,
  Sparkles
} from 'lucide-react';
import { AppUser } from '@/types/auth';
import { HierarchicalSubordinatesDesk } from './HierarchicalSubordinatesDesk';

export const WardSupervisorDashboard: React.FC<{ currentUser: AppUser }> = ({ currentUser }) => {
  return (
    <div className="space-y-6">
      {/* Ward Executive Banner */}
      <div className="bg-gradient-to-r from-[#0C1A38] via-[#081329] to-[#040A17] border border-blue-500/40 rounded-3xl p-6 sm:p-8 shadow-2xl relative overflow-hidden">
        <div className="absolute right-0 top-0 w-80 h-80 bg-blue-500/10 rounded-full blur-3xl pointer-events-none" />

        <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-6 relative z-10">
          <div className="flex items-center space-x-4">
            <div className="w-16 h-16 rounded-2xl bg-blue-500/20 border-2 border-blue-400 flex items-center justify-center text-blue-300 font-black text-xl shadow-lg">
              WRD
            </div>
            <div className="space-y-1">
              <div className="flex items-center space-x-2">
                <span className="text-[10px] font-black uppercase px-2 py-0.5 rounded bg-blue-500 text-white">
                  WARD COLLATION COMMAND
                </span>
                <span className="text-xs font-mono text-slate-400">Badge: {currentUser.badgeId}</span>
              </div>
              <h2 className="text-xl sm:text-2xl font-black text-white">
                {currentUser.ward} Ward Center
              </h2>
              <p className="text-xs text-slate-300">
                Supervisor: <span className="text-blue-300 font-bold">{currentUser.name}</span> • Phone:{' '}
                <span className="font-mono text-sky-400">{currentUser.phone}</span>
              </p>
            </div>
          </div>

          <div className="flex items-center space-x-3 bg-slate-900/80 px-4 py-3 rounded-2xl border border-slate-800">
            <div className="text-right">
              <span className="text-[10px] text-slate-400 uppercase font-bold block">Agent Deployment</span>
              <span className="text-sm font-black text-emerald-400">28 / 28 PUs ON POST (100%)</span>
            </div>
            <div className="w-10 h-10 rounded-xl bg-blue-500/20 border border-blue-500/40 flex items-center justify-center text-blue-300">
              <Users className="w-5 h-5" />
            </div>
          </div>
        </div>

        {/* Ward Summary KPIs */}
        <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mt-6 pt-6 border-t border-slate-800/80">
          <div className="bg-slate-950/60 p-3.5 rounded-xl border border-slate-800/80">
            <span className="text-slate-400 text-[11px] block">Polling Units in Ward:</span>
            <span className="text-lg font-black text-white">28 PUs</span>
            <span className="text-[10px] text-emerald-400 block">26 EC8A Transmitted</span>
          </div>

          <div className="bg-slate-950/60 p-3.5 rounded-xl border border-slate-800/80">
            <span className="text-slate-400 text-[11px] block">Accredited ADC Sentinels:</span>
            <span className="text-lg font-black text-sky-400">28 Verified</span>
            <span className="text-[10px] text-slate-400 block">All Equipped With Kit</span>
          </div>

          <div className="bg-slate-950/60 p-3.5 rounded-xl border border-slate-800/80">
            <span className="text-slate-400 text-[11px] block">ADC Votes in Ward:</span>
            <span className="text-lg font-black text-amber-400">4,890 Votes</span>
            <span className="text-[10px] text-emerald-400 block">Leading APC (3,120)</span>
          </div>

          <div className="bg-slate-950/60 p-3.5 rounded-xl border border-slate-800/80">
            <span className="text-slate-400 text-[11px] block">Section 63 Interventions:</span>
            <span className="text-lg font-black text-emerald-400">18 Defended</span>
            <span className="text-[10px] text-blue-300 block">0 Votes Lost to Smear</span>
          </div>
        </div>
      </div>

      {/* Hierarchical Subordinate Polling Unit Sentinels Desk */}
      <HierarchicalSubordinatesDesk currentUser={currentUser} />
    </div>
  );
};