import { 
  Package, 
  AlertTriangle, 
  Activity, 
  FileText, 
  LayoutGrid, 
  Plus 
} from "lucide-react";
import Button from "@/components/common/button";
import StatCard from "@/components/common/dashStatCard";
import InfoBanner from "@/components/common/infoBanner";
import Table from "@/components/common/dataTable";
import { consumptionHeaders, consumptionRows, inventoryHeaders, inventoryRows,  } from "@/constants/tabledata";




export default function InventoryPortal() {
 
  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 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'>Operations</span>
            <span className='text-gray-600'>•</span>
            <span className='text-gray-400'>Inventory</span>
          </div>
          <h1 className="text-2xl font-bold text-white tracking-tight mt-2">
            Inventory & stock
          </h1>
          <p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
            Stock master with receipt / consume transactions. Consumption posts back to the
            originating request job card; items at or below minimum are flagged for reorder.
          </p>
        </div>

        {/* --- HEADER BUTTONS --- */}
        <div className="flex items-center gap-2 self-start md:mt-10">
          <Button className="bg-slate-800/80 hover:bg-slate-800 text-white border border-slate-700/60 text-xs px-3 py-2 rounded-md flex items-center gap-2 font-medium">
            <LayoutGrid className="w-4 h-4 text-slate-400" />
            Bulk upload
          </Button>
          <Button className="bg-slate-800/80 hover:bg-slate-800 text-white border border-slate-700/60 text-xs px-3 py-2 rounded-md flex items-center gap-2 font-medium">
            <Plus className="w-4 h-4 text-slate-400" />
            Add item
          </Button>
          <Button className="bg-teal-400 hover:bg-teal-500 text-slate-950 font-semibold text-xs px-3 py-2 rounded-md transition-colors">
            Receive stock
          </Button>
        </div>
      </div>

      {/* --- STAT CARDS --- */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        {/* Stock items */}
        <StatCard
          variant="icon"
          title="Stock items"
          value="7"
          icon={Package}
          badgeText="tracked"
          badgeClassName="text-slate-400 lowercase font-mono"
          iconContainerClassName="bg-blue-950/40 border-blue-800/30 text-blue-400"
        />

        {/* Below minimum */}
        <StatCard
          variant="icon"
          title="Below minimum"
          value="5"
          icon={AlertTriangle}
          badgeText="reorder"
          badgeClassName="text-rose-400 lowercase font-mono"
          iconContainerClassName="bg-rose-950/40 border-rose-800/30 text-rose-400"
        />

        {/* Units consumed */}
        <StatCard
          variant="icon"
          title="Units consumed"
          value="17"
          icon={Activity}
          badgeText="this month"
          badgeClassName="text-slate-400 lowercase font-mono"
          iconContainerClassName="bg-amber-950/40 border-amber-800/30 text-amber-400"
        />

        {/* Posted to requests */}
        <StatCard
          variant="icon"
          title="Posted to requests"
          value="10"
          icon={FileText}
          badgeText="linked"
          badgeClassName="text-emerald-400 lowercase font-mono"
          iconContainerClassName="bg-emerald-950/40 border-emerald-800/30 text-emerald-400"
        />
      </div>

      {/* --- TABLES GRID (SIDE-BY-SIDE) --- */}
      <div className="grid grid-cols-1 xl:grid-cols-2 gap-6 items-start">
        
        {/* LEFT TABLE: STOCK MASTER */}
        <div className=" border border-slate-800/80 rounded-lg ">
          <div className="flex items-center justify-between px-4
           py-4 border-b border-slate-800/80">
            <h2 className="text-base font-semibold text-white">Stock master</h2>
            <span className="text-xs font-mono text-slate-500">7 items</span>
          </div>

          {/* Corrected column layout and removed horizontal scrollbar to align with the right UI. */}
        <Table headers={inventoryHeaders} rows={inventoryRows} />
        </div>

        {/* RIGHT TABLE: CONSUMPTION LEDGER */}
        <div className="h-full  w-full border border-slate-800/80 rounded-lg overflow-hidden">
          <div className="flex items-center justify-between px-6 py-4 border-b border-slate-800/80">
            <h2 className="text-base font-semibold text-white">Consumption ledger</h2>
            <span className="text-xs font-mono text-slate-500 lowercase">
              posts back to job card
            </span>
          </div>

          <Table headers={consumptionHeaders} rows={consumptionRows} />
        </div>

      </div>
        <div className="mb-10 mt-10">
              <InfoBanner 
                boldText="Post back:" 
                normalText="consuming a spare against a TFM request decrements stock and writes a transaction onto that request's job card (shared item, UOM and store masters) — visible in Reports → Stock Consumption and on the request history." 
              />
            </div>
    </div>
  );
}