import { useState } from 'react';
import { 
  Leaf, 
  Activity, 
  ClipboardCheck, 
  Star, 
  BarChart2, 
  Plus, 
} from "lucide-react";
import Button from "@/components/common/button";
import StatCard from "@/components/common/dashStatCard";
import NavigationTabs from '@/components/common/tabs';

// Card Components
import { Card } from "@/components/common/cardWrapper"; 
import { CardHeader } from "@/components/common/cardHeader"; 

// Custom BarChart Import
import BarChart from "@/components/charts/barchart";

import InfoBanner from '@/components/common/infoBanner';
import { EMISSION_SOURCES, energyData, } from '@/constants/constant';
import { sustainabilitytabs } from '@/constants/tabConstant';




export default function SustainabilityPortal() {
  const [activeTab, setActiveTab] = useState<string>('ESG Data Hub');

  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-[12px] font-bold tracking-widest uppercase font-mono">
            <span className="text-teal-400">Apple One — HQ Tower</span>
            <span className="text-slate-600">•</span>
            <span className="text-slate-400">INTELLIGENCE</span>
            <span className="text-slate-600">•</span>
            <span className="text-slate-400">SUSTAINABILITY</span>
          </div>
          <h1 className="text-2xl font-bold text-white tracking-tight mt-2">
            ESG One — sustainability platform
          </h1>
          <p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
            Every environmental, social and governance metric — carbon, energy, water, waste, safety, DEI, compliance — consolidated on one live platform with framework-ready reporting.
          </p>
        </div>

        {/* --- HEADER BUTTONS --- */}
        <div className="flex items-center gap-3 self-start md:mt-10">
          <Button className="bg-[#0b1727] hover:bg-slate-800/60 text-slate-200 border border-slate-800 text-xs px-4 py-2 rounded-lg flex items-center gap-2 font-semibold transition-colors">
            <BarChart2 className="w-4 h-4 text-slate-300" />
            <span>Framework reports</span>
          </Button>

          <Button className="bg-[#2dd4bf] hover:bg-teal-300 text-slate-950 font-bold text-xs px-4 py-2 rounded-lg flex items-center gap-2 transition-colors">
            <Plus className="w-4 h-4 stroke-[3]" />
            <span>New target</span>
          </Button>
        </div>
      </div>

     {/* --- STAT CARDS --- */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        {/* Card 1: 118 t */}
        <StatCard
          variant="icon"
          title=""
          value="118 t"
          icon={Leaf}
          badgeText="-6% vs avg"
          badgeClassName="text-emerald-400 font-mono text-xs"
          iconContainerClassName="bg-emerald-950/40 border-emerald-800/30 text-emerald-400"
          subtitle="CO₂e this month · Scope 1+2"
        />

        {/* Card 2: 214 */}
        <StatCard
          variant="icon"
          title=""
          value="214"
          icon={Activity}
          badgeText="live"
          badgeClassName="text-slate-400 lowercase font-mono text-xs"
          iconContainerClassName="bg-sky-950/40 border-sky-800/30 text-sky-400"
          subtitle="Live data streams · meters + IoT"
        />

        {/* Card 3: 5 */}
        <StatCard
          variant="icon"
          title=""
          value="5"
          icon={ClipboardCheck}
          badgeText="ready"
          badgeClassName="text-teal-400 lowercase font-mono text-xs"
          iconContainerClassName="bg-teal-950/40 border-teal-800/30 text-teal-400"
          subtitle="Frameworks ready · GRI, BRSR, CSRD..."
        />

        {/* Card 4: B+ */}
        <StatCard
          variant="icon"
          title=""
          value="B+"
          icon={Star}
          badgeText="improving"
          badgeClassName="text-amber-400 lowercase font-mono text-xs"
          iconContainerClassName="bg-amber-950/40 border-amber-800/30 text-amber-400"
          subtitle="ESG rating · on track to A-"
        />
      </div>

      {/* --- NAVIGATION TABS --- */}
      <NavigationTabs
        tabs={sustainabilitytabs}
        activeTab={activeTab}
        onTabChange={setActiveTab}
        className="mb-4"
      />

      {/* --- ESG CARDS SECTION BELOW TABS --- */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
        {/* Environmental Card */}
        <Card className=" p-5 ">
          <CardHeader title="Environmental" subtitle="metered · live" />
          <div className="mt-4 space-y-3.5 text-xs">
            <div className="flex items-center justify-between">
              <span className="text-slate-300 font-medium">Energy</span>
              <div className="flex items-center gap-3 font-mono">
                <span className="text-white font-bold">1.42 GWh</span>
                <span className="text-emerald-400">-4.2%</span>
              </div>
            </div>
            <div className="flex items-center justify-between">
              <span className="text-slate-300 font-medium">Water</span>
              <div className="flex items-center gap-3 font-mono">
                <span className="text-white font-bold">18,400 kL</span>
                <span className="text-emerald-400">-2.8%</span>
              </div>
            </div>
            <div className="flex items-center justify-between">
              <span className="text-slate-300 font-medium">Waste diverted</span>
              <div className="flex items-center gap-3 font-mono">
                <span className="text-white font-bold">61%</span>
                <span className="text-emerald-400">+5.0%</span>
              </div>
            </div>
            <div className="flex items-center justify-between">
              <span className="text-slate-300 font-medium">Refrigerant leaks</span>
              <div className="flex items-center gap-3 font-mono">
                <span className="text-white font-bold">2 events</span>
                <span className="text-amber-400">+1</span>
              </div>
            </div>
          </div>
        </Card>

        {/* Social Card */}
        <Card className="p-5">
          <CardHeader title="Social" subtitle="people & occupants" />
          <div className="mt-4 space-y-3.5 text-xs">
            <div className="flex items-center justify-between">
              <span className="text-slate-300 font-medium">Safety · LTIFR</span>
              <div className="flex items-center gap-3 font-mono">
                <span className="text-white font-bold">0.42</span>
                <span className="text-emerald-400">-0.11</span>
              </div>
            </div>
            <div className="flex items-center justify-between">
              <span className="text-slate-300 font-medium">Training hours</span>
              <div className="flex items-center gap-3 font-mono">
                <span className="text-white font-bold">1,240</span>
                <span className="text-emerald-400">+180</span>
              </div>
            </div>
            <div className="flex items-center justify-between">
              <span className="text-slate-300 font-medium">Tenant satisfaction</span>
              <div className="flex items-center gap-3 font-mono">
                <span className="text-white font-bold">4.4 / 5</span>
                <span className="text-emerald-400">+0.2</span>
              </div>
            </div>
            <div className="flex items-center justify-between">
              <span className="text-slate-300 font-medium">Workforce diversity</span>
              <div className="flex items-center gap-3 font-mono">
                <span className="text-white font-bold">34%</span>
                <span className="text-emerald-400">+2%</span>
              </div>
            </div>
          </div>
        </Card>

        {/* Governance Card */}
        <Card className=" p-5 ">
          <CardHeader title="Governance" subtitle="compliance & ethics" />
          <div className="mt-4 space-y-3.5 text-xs">
            <div className="flex items-center justify-between">
              <span className="text-slate-300 font-medium">Statutory compliance</span>
              <div className="flex items-center gap-3 font-mono">
                <span className="text-white font-bold">98%</span>
                <span className="text-teal-400">2 open</span>
              </div>
            </div>
            <div className="flex items-center justify-between">
              <span className="text-slate-300 font-medium">Audit findings closed</span>
              <div className="flex items-center gap-3 font-mono">
                <span className="text-white font-bold">91%</span>
                <span className="text-teal-400">on time</span>
              </div>
            </div>
            <div className="flex items-center justify-between">
              <span className="text-slate-300 font-medium">Vendor code-of-conduct</span>
              <div className="flex items-center gap-3 font-mono">
                <span className="text-white font-bold">87%</span>
                <span className="text-amber-400">signed</span>
              </div>
            </div>
            <div className="flex items-center justify-between">
              <span className="text-slate-300 font-medium">Data-privacy incidents</span>
              <div className="flex items-center gap-3 font-mono">
                <span className="text-white font-bold">0</span>
                <span className="text-emerald-400">90 days</span>
              </div>
            </div>
          </div>
        </Card>
      </div>

      {/* --- CARBON EMISSIONS BAR CHART & EMISSION SOURCES SECTION --- */}
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-4 mb-6">
        {/* Left: Carbon Emissions BarChart */}
        <div className="lg:col-span-7">
          <Card className="p-5  h-full flex flex-col justify-between">
            <CardHeader title="Carbon emissions · tCO₂e" subtitle="2026 · trending down" />
            <div className="mt-6">
              <BarChart data={energyData} />
            </div>
          </Card>
        </div>

        {/* Right: Emission Sources */}
        <div className="lg:col-span-5">
          <Card className="  h-full flex flex-col justify-between">
            <CardHeader title="Emission sources" subtitle="drill down by site / meter" />
            <div className="mt-5 space-y-4">
              {EMISSION_SOURCES.map((source, idx) => (
                <div key={idx} className="flex items-center justify-between text-xs gap-3">
                  <span className="text-slate-300 w-36 leading-snug font-medium">{source.name}</span>
                  <div className="flex-1 h-2 rounded-full bg-[#101e30] overflow-hidden">
                    <div className={`h-2 rounded-full ${source.color} ${source.width}`} />
                  </div>
                  <span className="font-mono font-bold text-white w-10 text-right">{source.percentage}</span>
                </div>
              ))}
            </div>
            <p className="text-[11px] text-[#596980] mt-6 pt-3 border-t border-[#132235]/60 leading-relaxed">
              Every figure traces back to a meter, sensor or signed record — audit-ready by construction.
            </p>
          </Card>
        </div>
      </div>

      <div className="mt-5">
        <InfoBanner 
          boldText='One platform:' 
          normalText='E, S and G metrics share the same live data spine as operations — a chiller repair updates energy, refrigerant and compliance records in the same thread.'
        />
      </div>
      
    </div>
  );
}