import Button from "@/components/common/button";
import StatCard from "@/components/common/dashStatCard";
import InfoBanner from "@/components/common/infoBanner";
import { ProgressBarRow } from "@/components/charts/progressBarRow";
import { 
  FileText, 
  Wrench, 
  ShieldCheck,  
  Smile, 
  ChevronRight, 
  Database,
} from "lucide-react";

// Import your custom Card components
import { Card } from "@/components/common/cardWrapper"; 
import { CardHeader } from "@/components/common/cardHeader";


export default function PropertyManagerPortal() {
  return (
    <div className=" mt-15  font-sans antiliased
    ">
      
      {/* --- HEADER SECTION --- */}
      <div className="flex flex-col md:flex-row md:items-start
       md:justify-between gap-4 mb-4">
        <div>
          <div className="flex items-center 
          gap-2 text-[12px] font-bold tracking-widest text-slate-500 uppercase font-mono">
            <span className="text-teal-400">Apple One — HQ Tower</span>
            <span className="text-gray-600">•</span>
            <span className="text-gray-400">Portal</span>
            <span className="text-gray-600">•</span>
            <span className="text-gray-400">Property Manager</span>
          </div>
          <h1 className="text-2xl font-bold 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-15">
          <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">
        <StatCard 
          variant="icon" 
          title="Open work orders" 
          value="16" 
          icon={FileText} 
          badgeText="active" 
          badgeClassName="text-slate-500 lowercase font-mono" 
          iconContainerClassName="bg-[#11233a]/50 border-[#1b2c3f]/40 text-blue-400" 
        />
        
        <StatCard 
          variant="icon" 
          title="SLA compliance" 
          value="11%" 
          icon={ShieldCheck} 
          badgeText="this month" 
          badgeClassName="text-emerald-400 font-mono lowercase" 
          iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]" 
        />

        <StatCard 
          variant="icon" 
          title="Budget used" 
          value="74%" 
          icon={Database} 
          badgeText="FY 2026" 
          badgeClassName="text-slate-500 font-mono" 
          iconContainerClassName="bg-[#271d15] border-amber-500/10 text-amber-500" 
        />
         
        <StatCard 
          variant="icon" 
          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 mt-5 items-stretch">
        
        {/* Left Box: Work Order Status Tracking (7 Columns wide) */}
        <div className="lg:col-span-7">
          <Card className="p-4 h-full">
            <div>
              <CardHeader title="Work order status" />
              
              <div className="space-y-4 my-4">
                <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>
          </Card>
        </div>

        {/* Right Box: Quick Actions Accordion Links (5 Columns wide) */}
        <div className="lg:col-span-5">
          <Card className="p-5 ">
            <div>
              <CardHeader title="Quick actions" />
              
              <div className="space-y-2 mt-4">
                {[
                  "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>
          </Card>
        </div>
      </div>

      {/* --- BOTTOM INFO BANNER --- */}
      <div className="mb-20">
        <InfoBanner 
          boldText="Manager view:" 
          normalText="remote access, digital documentation archive, energy-saving optimisation, work-order tracking, automated billing and occupant-comfort monitoring." 
        />
      </div>

    </div>
  );
}