'use client';

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

export const LgaCoordinatorDashboard: React.FC<{ currentUser: AppUser }> = ({ currentUser }) => {
  return (
    <div className="space-y-6">
      {/* LGA Executive Banner */}
      <div className="bg-gradient-to-r from-[#140E2E] via-[#0E0C22] to-[#060814] border border-purple-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-purple-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-purple-500/20 border-2 border-purple-400 flex items-center justify-center text-purple-300 font-black text-xl shadow-lg">
              {currentUser.lga?.slice(0, 3).toUpperCase() || 'LGA'}
            </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-purple-500 text-white">
                  LGA CAMPAIGN DIRECTORATE
                </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.lga} LGA Operations Command
              </h2>
              <p className="text-xs text-slate-300">
                Coordinator: <span className="text-purple-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">Collation Center Status</span>
              <span className="text-sm font-black text-emerald-400">FORM EC8B IN PROGRESS</span>
            </div>
            <div className="w-10 h-10 rounded-xl bg-purple-500/20 border border-purple-500/40 flex items-center justify-center text-purple-300">
              <ShieldCheck className="w-5 h-5" />
            </div>
          </div>
        </div>

        {/* LGA 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">Wards Under Command:</span>
            <span className="text-lg font-black text-white">11 Wards</span>
            <span className="text-[10px] text-emerald-400 block">11/11 Supervisors Connected</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">Polling Units Reporting:</span>
            <span className="text-lg font-black text-sky-400">168 / 182 PUs</span>
            <span className="text-[10px] text-slate-400 block">92.3% EC8A Collection</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 LGA:</span>
            <span className="text-lg font-black text-amber-400">32,410</span>
            <span className="text-[10px] text-emerald-400 block">+10,560 Over APC (21,850)</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 Challenges:</span>
            <span className="text-lg font-black text-emerald-400">84 Interventions</span>
            <span className="text-[10px] text-purple-300 block">All 84 Ballots Defended</span>
          </div>
        </div>
      </div>

      {/* Hierarchical Subordinate Ward Supervisors Desk */}
      <HierarchicalSubordinatesDesk currentUser={currentUser} />
    </div>
  );
};