import { Building2, ShieldCheck, Database, Leaf, FileSpreadsheet, Sparkles } from "lucide-react";
import StatCard from "@/utils/dashStatCard"; 
import {  energyData } from "@/constants/constant";
import BarChart from "@/utils/barchart";
import InfoBanner from "@/utils/infoBanner";
import Button from "@/utils/button";
import { ProgressBarRow } from "@/utils/progressBarRow";

export default function BuildingOwnerPortal() {
  // Mock data matching the screenshot chart (Jan - Jun)
 

  return (
    <div className="min-h-screen bg-[#060d18] text-slate-100 p-6 lg:p-10 font-sans antialiased selection:bg-teal-500/30">
      
      {/* ---  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>Building Owner</span>
          </div>
          <h1 className="text-3xl font-extrabold text-white tracking-tight mt-2">
            Building owner portal
          </h1>
          <p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
            Portfolio-level benchmarking, property performance, energy-cost outlook and ESG standing for asset owners and investors.
          </p>
        </div>

        {/* Action Button */}
        <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 self-start md:mt-6">
          <FileSpreadsheet size={14} className="text-slate-400" />
          Portfolio report
        </Button>
      </div>

      {/* --- ROW 1: STATS GRID --- */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <StatCard 
          variant="icon" title="Managed assets" value="8" icon={Building2} 
          badgeText="2 sites" badgeClassName="text-slate-500 lowercase font-mono"
          iconContainerClassName="bg-[#11233a]/50 border-[#1b2c3f]/40 text-blue-400"
        />
        <StatCard 
          variant="icon" title="Asset availability" value="38%" icon={ShieldCheck} 
          badgeText="SLA met" badgeClassName="text-emerald-400 font-sans normal-case"
          iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]"
        />
        <StatCard 
          variant="icon" title="Energy cost / mo" value="₹11.8 L" icon={Database} 
          badgeText="↓ vs avg" badgeClassName="text-emerald-400 font-sans normal-case font-bold"
          iconContainerClassName="bg-[#271d15] border-amber-500/10 text-amber-500"
        />
        <StatCard 
          variant="icon" title="ESG rating" value="B+" icon={Leaf} 
          badgeText="improving" badgeClassName="text-emerald-400 font-sans normal-case"
          iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]"
        />
      </div>

      {/* --- ROW 2: CHARTS & METRICS SPLIT GRID --- */}
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-4 mb-6 items-stretch">
        
        {/* Left Box: Site Benchmarking Progress Lists (7 Columns) */}
        <div className="lg:col-span-7 rounded-xl border border-[#142538] bg-[#091624] p-5 flex flex-col justify-between">
          <div>
            <div className="flex items-center justify-between mb-8">
              <h3 className="text-sm font-semibold text-white tracking-wide">Site benchmarking</h3>
              <span className="text-[10px] font-mono text-slate-500 uppercase tracking-wider">performance index</span>
            </div>
            
            <div className="space-y-6 my-2">
              {/* Progress Item 1 */}
              <ProgressBarRow label="HQ Tower" value={18} maxValue={18} />
     <ProgressBarRow label="Annexe" value={13} maxValue={18} />
            </div>
          </div>
        </div>

        {/* Right Box: Energy Cost Bar Chart integration (5 Columns) */}
        <div className="lg:col-span-5 rounded-xl border border-[#142538] bg-[#091624] p-5 flex flex-col justify-between">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-sm font-semibold text-white tracking-wide">
              Energy cost outlook · ₹L
            </h3>
            <span className="text-[10px] font-mono text-slate-500 tracking-wider lowercase">
              forecast ↓
            </span>
          </div>
          <hr className="border-[#142538] mb-6" />
          <div className="flex-grow flex flex-col justify-end">
            <BarChart data={energyData} />
          </div>
        </div>
      </div>

      {/* --- BOTTOM INFORMATION VIEW BANNER --- */}
      <div className="mb-20">
        <InfoBanner 
          boldText="Owner view:" 
          normalText="asset-level benchmarks, property metrics, team performance and predicted energy costs — a remote, read-only window across the whole portfolio." 
        />
      </div>

    </div>
  );
}