import { 
  Package, 
  AlertTriangle, 
  Activity, 
  FileText, 
  LayoutGrid, 
  Plus 
} from "lucide-react";
import Button from "@/components/common/button";
import StatCard from "@/components/common/dashStatCard";



export default function EnergyPortal() {
  const metersList = [
    {
      meter: "MTR-1",
      name: "Electricity main 1",
      location: "Pump room",
      type: "Electricity",
      mf: "1",
    },
    {
      meter: "MTR-2",
      name: "Water main 2",
      location: "Main LT panel",
      type: "Water",
      mf: "10",
    },
    {
      meter: "MTR-3",
      name: "Diesel main 3",
      location: "DG room",
      type: "Diesel",
      mf: "100",
    },
    {
      meter: "MTR-4",
      name: "Electricity main 4",
      location: "Block riser",
      type: "Electricity",
      mf: "1",
    },
    {
      meter: "MTR-5",
      name: "Water main 5",
      location: "DG room",
      type: "Water",
      mf: "1",
    },
  ];

  const latestReadings = [
    {
      meter: "MTR-1",
      prev: "40.00",
      current: "58.00",
      cons: "18.0",
      uom: "kWh",
    },
    {
      meter: "MTR-2",
      prev: "49.00",
      current: "69.00",
      cons: "200.0",
      uom: "kL",
    },
    {
      meter: "MTR-3",
      prev: "58.00",
      current: "80.00",
      cons: "2200.0",
      uom: "L",
    },
    {
      meter: "MTR-4",
      prev: "67.00",
      current: "91.00",
      cons: "24.0",
      uom: "kWh",
    },
    {
      meter: "MTR-5",
      prev: "76.00",
      current: "102.00",
      cons: "26.0",
      uom: "kL",
    },
  ];

  return (
    <div className="text-slate-100 mt-15 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-[10px] font-bold tracking-widest text-slate-500 uppercase font-mono">
            <span className="text-teal-400">Apple One — HQ Tower</span>
            <span>•</span>
            <span>Operations</span>
            <span>•</span>
            <span>Energy</span>
          </div>
          <h1 className="text-2xl font-bold text-white tracking-tight mt-2">
            Meters & readings
          </h1>
          <p className="text-sm font-medium text-slate-400 mt-2 max-w-xl leading-relaxed">
            Meter master with QR identification and reading capture. Consumption is reading
            × multiplication factor.
          </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">
            Print QR
          </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">
            Add reading
          </Button>
        </div>
      </div>

    

      {/* --- TABLES GRID (SIDE-BY-SIDE) --- */}
      <div className="grid grid-cols-1 xl:grid-cols-2 gap-2 items-start">
        
        {/* LEFT TABLE: METER MASTER */}
        <div className="bg-[#0b1329] border border-slate-800/80 rounded-lg overflow-hidden">
          <div className="flex items-center justify-between px-3 py-2 border-b border-slate-800/80">
            <h2 className="text-base font-semibold text-white">Meter master</h2>
            <span className="text-xs font-mono text-slate-500">5 meters</span>
          </div>

          <div className="">
            <table className="w-full h-full text-left text-sm">
              <thead>
                <tr className="border-b border-slate-800/60 text-[11px] font-bold uppercase tracking-wider text-slate-400">
                  <th className="py-3 px-4">Meter</th>
                  <th className="py-3 px-4">Name</th>
                  <th className="py-3 px-4">Location</th>
                  <th className="py-3 px-4">Type</th>
                  <th className="py-3 px-4">MF</th>
                  <th className="py-3 px-4 text-right"></th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-800/40">
                {metersList.map((row, index) => {
                  return (
                    <tr
                      key={index}
                      className="transition-colors hover:bg-slate-800/30"
                    >
                      <td className="py-3 px-4 font-mono text-teal-400 font-semibold text-xs whitespace-nowrap">
                        {row.meter}
                      </td>
                      <td className="py-3 px-4 font-semibold text-slate-100 whitespace-nowrap">
                        {row.name}
                      </td>
                      <td className="py-3 px-4 text-slate-300 font-medium whitespace-nowrap">
                        {row.location}
                      </td>
                      <td className="py-3 px-4 text-slate-300 font-medium whitespace-nowrap">
                        {row.type}
                      </td>
                      <td className="py-3 px-4 font-semibold text-slate-200 whitespace-nowrap">
                        {row.mf}
                      </td>
                      <td className="py-3 px-4 text-right">
                        <div className="flex items-center justify-end gap-1.5">
                          <button className="px-2.5 py-1 text-xs font-medium text-slate-300 bg-slate-800/50 hover:bg-slate-800 border border-slate-700/50 rounded transition-colors">
                            Reading
                          </button>
                          <button className="px-2.5 py-1 text-xs font-medium text-slate-300 bg-slate-800/50 hover:bg-slate-800 border border-slate-700/50 rounded transition-colors">
                            QR
                          </button>
                        </div>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>

        {/* RIGHT TABLE: LATEST READINGS */}
        <div className="bg-[#0b1329] 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">Latest readings</h2>
            <span className="text-xs font-mono text-slate-500 lowercase">
              tap a meter for history
            </span>
          </div>

          <div>
            <table className="w-full h-full text-left text-sm">
              <thead>
                <tr className="border-b border-slate-800/60 text-[11px] font-bold uppercase tracking-wider text-slate-400">
                  <th className="py-3 px-4">Meter</th>
                  <th className="py-3 px-4">Prev</th>
                  <th className="py-3 px-4">Current</th>
                  <th className="py-3 px-4">Cons.</th>
                  <th className="py-3 px-4">UOM</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-800/40">
                {latestReadings.map((row, index) => (
                  <tr key={index} className="hover:bg-slate-800/30 transition-colors">
                    <td className="py-3 px-4 font-mono text-teal-400 font-medium text-xs whitespace-nowrap">
                      {row.meter}
                    </td>
                    <td className="py-3 px-4 text-slate-300 text-xs font-medium whitespace-nowrap">
                      {row.prev}
                    </td>
                    <td className="py-3 px-4 text-slate-300 text-xs font-medium whitespace-nowrap">
                      {row.current}
                    </td>
                    <td className="py-3 px-4 font-semibold text-teal-400 text-xs whitespace-nowrap">
                      {row.cons}
                    </td>
                    <td className="py-3 px-4 font-semibold text-slate-100 text-xs whitespace-nowrap">
                      {row.uom}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

      </div>

    
    </div>
  );
}