import { useState } from 'react';
import { 
  ClipboardCheck, 
  Clock, 
  AlertTriangle, 
  Activity, 
  Building2, 
  Users, 
  MapPin, 
  Grid,
  ArrowRight,
  Sparkles
} from "lucide-react";
import StatCard from "@/components/common/dashStatCard";

export default function AdminOverviewPortal() {
  // Sample data for the recent audits table below
  const recentAudits = [
    { id: 'AUD-1004', location: 'Local 1', lead: 'Local Admin', date: '2026-02-02', status: 'ACTIVE' },
    { id: 'AUD-1003', location: 'SRM Campus', lead: 'Estates Office', date: '2026-01-08', status: 'ACTIVE' },
    { id: 'AUD-1002', location: 'Novotel Pune', lead: 'Site FM Lead', date: '2025-12-12', status: 'ACTIVE' },
    { id: 'AUD-1001', location: 'Apple One', lead: 'Dhananjay T.', date: '2025-11-04', status: 'ACTIVE' },
  ];

  // Sample data for module/checklist adoption progress bars
  const adoptionModules = [
    { name: 'Dashboard', score: 100, count: '4/4' },
    { name: 'Helpdesk', score: 75, count: '3/4' },
    { name: 'Equipment', score: 75, count: '3/4' },
    { name: 'Request', score: 75, count: '3/4' },
    { name: 'Inventory', score: 50, count: '2/4' },
    { name: 'Energy', score: 75, count: '3/4' },
  ];

  return (
    <div className="my-15 text-slate-100 font-sans ">
      {/* --- HEADER SECTION --- */}
      <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-6">
        <div>
          <div className="flex items-center gap-2 text-[10px] font-bold tracking-widest uppercase font-mono">
            <span className="text-teal-400">PLATFORM</span>
            <span className="text-slate-500">•</span>
            <span className="text-slate-500">KAFM</span>
          </div>
          <h1 className="text-2xl font-bold text-white tracking-tight mt-1">
            Platform overview
          </h1>
          <p className="text-sm font-medium text-slate-400 mt-1 max-w-xl leading-relaxed">
            Live snapshot of every organization, user, and site managed across the KAFM facility platform.
          </p>
        </div>

        {/* Top Right Status Badge */}
        <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-slate-900/80 border border-teal-500/30 text-teal-400 text-xs font-mono w-fit">
          <span className="h-2 w-2 rounded-full bg-teal-400 animate-pulse" />
          <span>PRODUCTION</span>
          <span className="text-slate-600">•</span>
          <span className="text-teal-300/80">region us-east-1</span>
        </div>
      </div>

      {/* --- STAT CARDS --- */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        {/* Card 1: Total Tenants */}
        <StatCard
          variant="icon"
          title="Total tenants"
          value="4"
          icon={Building2}
          badgeText="4 active"
          badgeClassName="text-teal-400 font-mono text-xs"
          iconContainerClassName="bg-teal-950/40 border-teal-800/30 text-teal-400"
        />

        {/* Card 2: Platform users */}
        <StatCard
          variant="icon"
          title="Platform users"
          value="6"
          icon={Users}
          badgeText="+2 this wk"
          badgeClassName="text-teal-400 font-mono text-xs"
          iconContainerClassName="bg-slate-800/50 border-slate-700/50 text-blue-400"
        />

        {/* Card 3: Managed sites */}
        <StatCard
          variant="icon"
          title="Managed sites"
          value="6"
          icon={MapPin}
          badgeText="6 live"
          badgeClassName="text-teal-400 font-mono text-xs"
          iconContainerClassName="bg-amber-950/30 border-amber-800/30 text-amber-400"
        />

        {/* Card 4: System modules */}
        <StatCard
          variant="icon"
          title="System modules"
          value="13"
          icon={Grid}
          badgeText="all enabled"
          badgeClassName="text-slate-400 font-mono text-xs"
          iconContainerClassName="bg-purple-950/40 border-purple-800/30 text-purple-400"
        />
      </div>

      {/* --- LOWER SECTION (ADDITION FROM SCREENSHOT) --- */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        
        {/* Left 2-Columns: Recently Onboarded Tenants Table */}
        <div className="lg:col-span-2 bg-slate-900/60 border border-slate-800/80 rounded-xl p-5 flex flex-col justify-between">
          <div>
            <div className="flex items-center justify-between mb-4">
              <div>
                <h2 className="text-base font-semibold text-white">Recently onboarded tenants</h2>
                <p className="text-xs text-slate-400 font-mono mt-0.5">Newest organizations on the platform</p>
              </div>
              <button className="text-teal-400 hover:text-teal-300 text-xs font-semibold flex items-center gap-1 transition-colors">
                View all <ArrowRight className="w-3.5 h-3.5" />
              </button>
            </div>

            {/* Table Header */}
            <div className="grid grid-cols-12 text-[11px] font-mono text-slate-500 uppercase tracking-wider py-2 border-b border-slate-800/80">
              <span className="col-span-4">Organization</span>
              <span className="col-span-3">Tenant ID</span>
              <span className="col-span-3">Created</span>
              <span className="col-span-2 text-right">Status</span>
            </div>

            {/* Table Rows */}
            <div className="divide-y divide-slate-800/40">
              {recentAudits.map((item, index) => (
                <div key={index} className="grid grid-cols-12 items-center py-3 text-xs">
                  <div className="col-span-4 flex items-center gap-3">
                    <div className="w-8 h-8 rounded-lg bg-slate-800 border border-slate-700/60 flex items-center justify-center font-bold text-slate-300 text-xs">
                      {item.location.substring(0, 2).toUpperCase()}
                    </div>
                    <div>
                      <div className="font-semibold text-slate-200">{item.location}</div>
                      <div className="text-[11px] text-slate-400">{item.lead}</div>
                    </div>
                  </div>
                  <span className="col-span-3 font-mono text-slate-400 text-xs">{item.id}</span>
                  <span className="col-span-3 font-mono text-slate-400 text-xs">{item.date}</span>
                  <div className="col-span-2 flex justify-end">
                    <span className="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-[10px] font-mono font-bold bg-teal-950/80 text-teal-400 border border-teal-800/50">
                      <span className="h-1.5 w-1.5 rounded-full bg-teal-400"></span>
                      {item.status}
                    </span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Right 1-Column: Module Adoption */}
        <div className="bg-slate-900/60 border border-slate-800/80 rounded-xl p-5 flex flex-col justify-between">
          <div>
            <h2 className="text-base font-semibold text-white mb-5">Module adoption</h2>
            
            <div className="space-y-4">
              {adoptionModules.map((module, idx) => (
                <div key={idx} className="space-y-1.5">
                  <div className="flex justify-between items-center text-xs">
                    <span className="font-semibold text-slate-200">{module.name}</span>
                    <span className="font-mono text-slate-400 text-[11px]">{module.count}</span>
                  </div>
                  {/* Progress Bar Container */}
                  <div className="w-full bg-slate-800/80 h-2 rounded-full overflow-hidden">
                    <div 
                      className="bg-teal-400 h-full rounded-full transition-all duration-500"
                      style={{ width: `${module.score}%` }}
                    />
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

      </div>

      
    </div>
  );
}