import { useState } from 'react';
import { 
  Recycle, 
  Leaf, 
  Activity, 
  Check, 
  BarChart2, 
  Plus 
} from "lucide-react";
import Button from "@/components/common/button";
import StatCard from "@/components/common/dashStatCard";
import InfoBanner from '@/components/common/infoBanner';
import { scheduleItems, wasteStreams } from '@/constants/constant';



export default function WasteESGPortal() {
  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">SUSTAINABILITY</span>
            <span className="text-slate-600">•</span>
            <span className="text-slate-400">WASTE</span>
          </div>
          <h1 className="text-2xl font-bold text-white tracking-tight mt-2">
            Waste management
          </h1>
          <p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
            Waste tracked by stream, recycling rates, collection scheduling and ESG reporting with vendor compliance.
          </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>ESG report</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>Log entry</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: Total waste */}
        <StatCard
          variant="icon"
          title="Total this month"
          value="2824 kg"
          icon={Recycle}
          badgeText="5 streams"
          badgeClassName="text-slate-400 lowercase font-mono"
          iconContainerClassName="bg-blue-950/60 border-blue-800/40 text-blue-400"
        />

        {/* Card 2: Diverted rate */}
        <StatCard
          variant="icon"
          title="Diverted from landfill"
          value="54%"
          icon={Leaf}
          badgeText="recycled"
          badgeClassName="text-emerald-400 lowercase font-mono"
          iconContainerClassName="bg-emerald-950/60 border-emerald-800/40 text-emerald-400"
        />

        {/* Card 3: Hazardous waste */}
        <StatCard
          variant="icon"
          title="Hazardous"
          value="64 kg"
          icon={Activity}
          badgeText="manifest"
          badgeClassName="text-amber-400 lowercase font-mono"
          iconContainerClassName="bg-amber-950/50 border-amber-800/30 text-amber-400"
        />

        {/* Card 4: Vendors compliant */}
        <StatCard
          variant="icon"
          title="Vendors compliant"
          value="4/4"
          icon={Check}
          badgeText="SLA met"
          badgeClassName="text-emerald-400 lowercase font-mono"
          iconContainerClassName="bg-emerald-950/60 border-emerald-800/40 text-emerald-400"
        />
      </div>

      {/* --- MAIN CONTENT SECTION BELOW STAT CARDS --- */}
      <div className="grid grid-cols-1 lg:grid-cols-5 gap-4 mb-4">
        {/* Waste by Stream Progress Chart */}
        <div className="lg:col-span-3 rounded-xl border border-slate-800/80 bg-[#071321]/80 p-5 flex flex-col justify-between">
          <div className="flex items-center justify-between mb-6">
            <h2 className="text-base font-bold text-slate-100">
              Waste by stream · kg
            </h2>
            <span className="text-xs font-mono text-slate-500">
              June 2026
            </span>
          </div>

          <div className="space-y-4">
            {wasteStreams.map((item, index) => (
              <div key={index} className="flex items-center gap-4 text-sm">
                <span className="w-44 text-xs font-medium text-slate-300 shrink-0 truncate">
                  {item.name}
                </span>
                <div className="relative flex-1 h-2 rounded-full bg-slate-800/60 overflow-hidden">
                  <div 
                    className={`h-full rounded-full ${item.color}`}
                    style={{ width: `${item.percentage}%` }}
                  />
                </div>
                <span className="w-12 text-right font-mono text-xs font-bold text-slate-100 shrink-0">
                  {item.amount}
                </span>
              </div>
            ))}
          </div>
        </div>

        {/* Collection Schedule Table */}
        <div className="lg:col-span-2 rounded-xl border border-slate-800/80 bg-[#071321]/80 p-5">
          <h2 className="text-base font-bold text-slate-100 mb-6">
            Collection schedule
          </h2>

          <div className="overflow-x-auto">
            <table className="w-full text-left border-collapse">
              <thead>
                <tr className="border-b border-slate-800/80 text-[10px] font-bold tracking-wider uppercase font-mono text-slate-400">
                  <th className="pb-3 pr-2">FREQUENCY</th>
                  <th className="pb-3 px-2">STREAM</th>
                  <th className="pb-3 pl-2">VENDOR</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-800/50 text-xs">
                {scheduleItems.map((row, idx) => (
                  <tr key={idx} className="hover:bg-slate-800/30 transition-colors">
                    <td className="py-3.5 pr-2 font-mono text-slate-300 font-medium whitespace-nowrap">
                      {row.frequency}
                    </td>
                    <td className="py-3.5 px-2 font-semibold text-slate-100 whitespace-nowrap">
                      {row.stream}
                    </td>
                    <td className="py-3.5 pl-2 text-slate-300 font-medium whitespace-nowrap">
                      {row.vendor}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <InfoBanner 
        boldText='ESG:' 
        normalText='waste-reduction and recycling metrics feed the Sustainability dashboard and statutory pollution-board reporting — hazardous streams require manifest tracking to disposal.' 
      />
    </div>
  );
}