'use client';

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

export const StateSupervisorDashboard: React.FC<{ currentUser: AppUser }> = ({ currentUser }) => {
  return (
    <div className="space-y-6">
      {/* State Executive Banner */}
      <div className="bg-gradient-to-r from-[#0C1E38] via-[#081529] to-[#040D1C] border border-amber-400/40 rounded-3xl p-6 sm:p-8 shadow-2xl relative overflow-hidden">
        <div className="absolute right-0 top-0 w-96 h-96 bg-amber-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-amber-400/20 border-2 border-amber-400 flex items-center justify-center text-amber-300 font-black text-xl shadow-lg">
              {currentUser.state.slice(0, 2).toUpperCase()}
            </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-amber-400 text-slate-950">
                  STATE OPERATIONS 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.state} State Command Center
              </h2>
              <p className="text-xs text-slate-300">
                Supervisor: <span className="text-amber-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">ADC Leading Status</span>
              <span className="text-sm font-black text-emerald-400">PROJECTED WIN (62.4%)</span>
            </div>
            <div className="w-10 h-10 rounded-xl bg-emerald-500/20 border border-emerald-500/40 flex items-center justify-center text-emerald-400">
              <TrendingUp className="w-5 h-5" />
            </div>
          </div>
        </div>

        {/* State 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">LGAs Under Command:</span>
            <span className="text-lg font-black text-white">21 LGAs</span>
            <span className="text-[10px] text-emerald-400 block">100% Coordinators Active</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">Wards & PUs Reporting:</span>
            <span className="text-lg font-black text-sky-400">3,480 / 3,745</span>
            <span className="text-[10px] text-slate-400 block">92.9% Transmission Rate</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">Total ADC Votes Tallied:</span>
            <span className="text-lg font-black text-amber-400">312,480</span>
            <span className="text-[10px] text-emerald-400 block">+48,200 Over APC Baseline</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 Rescued Votes:</span>
            <span className="text-lg font-black text-emerald-400">14,280 Ballots</span>
            <span className="text-[10px] text-amber-300 block">Zero-Reject Drill Enforced</span>
          </div>
        </div>
      </div>

      {/* Hierarchical Subordinate LGA Coordinators Desk */}
      <HierarchicalSubordinatesDesk currentUser={currentUser} />
    </div>
  );
};