import Button from "@/utils/button";
import StatCard from "@/utils/dashStatCard";
import { ProgressBarRow } from "@/utils/progressBarRow";
import { 
  FileText, 
  Wrench, 
  ShieldCheck, 
  Coins, 
  Smile, 
  ChevronRight, 
  Sparkles 
} from "lucide-react";

export default function PropertyManagerPortal() {
  return (
    <div className="min-h-screen
      text-slate-100 mt-15
       font-sans antialiased selection:bg-teal-500/30 relative">
      
      {/* --- HEADER SECTION --- */}
      <div className="flex flex-col 
      md:flex-row md:items-start md:justify-between
       gap-4 mb-8">
        <div>
          <div className="flex items-center gap-2 text-[10px]
           font-bold tracking-widest text-slate-500 uppercase font-mono">
            <span className="text-teal-400">Apple One — HQ Tower</span>
            <span>•</span>
            <span>Portal</span>
            <span>•</span>
            <span>Property Manager</span>
          </div>
          <h1 className="text-2xl font-extrabold text-white tracking-tight mt-2">
            Property manager portal
          </h1>
          <p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
            Day-to-day operations cockpit — work orders, SLA, budget, automated billing and occupant comfort in one remote view.
          </p>
        </div>

        {/* Action Buttons */}
        <div className="flex items-center gap-3 self-start md:mt-6">
          <Button className="flex items-center gap-2 px-4 py-2 bg-[#091624] hover:bg-[#11233a] border border-[#142538] rounded-xl text-xs font-semibold text-slate-200 transition-colors duration-200 shadow-sm">
            <FileText size={14} className="text-slate-400" />
            Documents
          </Button>
          <Button className="flex items-center gap-2 px-4 py-2 bg-[#14b8a6]/10 hover:bg-[#14b8a6]/20 border border-[#14b8a6]/30 rounded-xl text-xs font-bold text-[#2dd4bf] transition-colors duration-200 shadow-sm">
            <Wrench size={14} />
            Work orders
          </Button>
        </div>
      </div>

      {/* --- ROW 1: STATS GRID --- */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-3">
        <StatCard 
          title="Open work orders" value="15" icon={FileText} 
          badgeText="active" badgeClassName="text-slate-500 lowercase font-mono"
          iconContainerClassName="bg-[#11233a]/50 border-[#1b2c3f]/40 text-blue-400"
        />
        <StatCard 
          title="SLA compliance" value="17%" icon={ShieldCheck} 
          badgeText="this month" badgeClassName="text-emerald-400 lowercase font-mono"
          iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]"
        />
        <StatCard 
          title="Budget used" value="74%" icon={Coins} 
          badgeText="FY 2026" badgeClassName="text-slate-500 font-mono"
          iconContainerClassName="bg-[#271d15] border-amber-500/10 text-amber-500"
        />
        <StatCard 
          title="Occupant comfort" value="82%" icon={Smile} 
          badgeText="CSAT" badgeClassName="text-emerald-400 font-mono"
          iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]"
        />
      </div>

      {/* --- ROW 2: SPLIT GRID --- */}
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-4 mb-4">
        
        {/* Left Box: Work Order Status Tracking (7 Columns wide) */}
        <div className="lg:col-span-7 rounded-xl border 
        border-[#142538] bg-[#091624] p-4 flex flex-col justify-between">
          <div>
            <div className="mb-8">
              <h3 className="text-sm font-semibold text-white tracking-wide">Work order status</h3>
            </div>
            
            <div className="space-y-4 my-2">
             
                <ProgressBarRow label="Open" value={18} maxValue={18} />
                            <ProgressBarRow label="In Progress" value={13} maxValue={18} />
                            <ProgressBarRow label="Completed" value={9} maxValue={18} />
             
              
            </div>
          </div>

          {/* Inline Sub-metrics Row split container inside the card */}
          <div className="grid grid-cols-2 border border-[#142538] rounded-xl bg-[#060d18]/40 mt-6 overflow-hidden">
            <div className="p-4 border-r border-[#142538]">
              <div className="text-[10px] font-bold uppercase tracking-wider text-slate-500 font-mono">BILLED MTD</div>
              <div className="text-base font-bold text-white mt-1">₹99.4 L</div>
            </div>
            <div className="p-4">
              <div className="text-[10px] font-bold uppercase tracking-wider text-slate-500 font-mono">ENERGY SAVED</div>
              <div className="text-base font-bold text-emerald-400 mt-1">₹3.5 L/mo</div>
            </div>
          </div>
        </div>

        {/* Right Box: Quick Actions Accordion Links (5 Columns wide) */}
        <div className="lg:col-span-5 rounded-xl border border-[#142538] bg-[#091624] p-5 flex flex-col justify-between">
          <div>
            <h3 className="text-sm font-semibold text-white tracking-wide mb-6">Quick actions</h3>
            
            <div className="space-y-2">
              {[
                "Track work orders",
                "Energy optimization",
                "Automated billing",
                "Budget & approvals",
                "Contracts & SLA",
              ].map((action, idx) => (
                <button 
                  key={idx}
                  className="w-full flex items-center justify-between p-3.5 bg-[#060d18]/40 hover:bg-[#11233a]/40 border border-[#142538] hover:border-[#1b3454] rounded-xl text-xs font-bold text-white text-left transition-all duration-150 group"
                >
                  <span className="flex items-center gap-3">
                    <ChevronRight size={14} className="text-slate-500 group-hover:text-teal-400 transition-colors" />
                    {action}
                  </span>
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* --- BOTTOM INFO BANNER --- */}
      <div className="mb-20 rounded-xl border border-[#142538]/80 bg-[#091624]/60 p-4 border-l-2 border-l-teal-400">
        <p className="text-xs text-slate-400 font-medium">
          <span className="text-white font-bold">Manager view: </span>
          remote access, digital documentation archive, energy-saving optimisation, work-order tracking, automated billing and occupant-comfort monitoring.
        </p>
      </div>

      {/* Floating Ask AI Button */}
      <button className="fixed bottom-6 right-6 flex items-center gap-2 px-4 py-2.5 bg-[#14b8a6] hover:bg-[#0d9488] text-slate-900 rounded-full text-xs font-bold transition-all shadow-lg hover:scale-105 active:scale-95 z-50">
        <Sparkles size={14} fill="currentColor" />
        Ask AI
      </button>

    </div>
  );
}