"use client";

import { useState } from "react";
import {
  LayoutGrid,
  CheckSquare,
  Crosshair,
  FileText,
  Box,
  Zap,
  ClipboardCheck,
  BarChart2,
  Pencil,
  Plus,
  Sparkles,
} from "lucide-react";

// Mock Data matching the design
const initialModules = [
  {
    id: "MOD-01",
    title: "Dashboard",
    description: "Operational overview & live KPIs",
    icon: LayoutGrid,
    menus: [], // Currently empty as per screenshot
  },
  {
    id: "MOD-02",
    title: "Helpdesk",
    description: "Tickets, requests & SLA tracking",
    icon: CheckSquare,
    menus: ["Tickets", "SLA Settings", "Queues"],
  },
  {
    id: "MOD-03",
    title: "Equipment",
    description: "Asset register & equipment groups",
    icon: Crosshair,
    menus: ["Asset Register", "Categories"],
  },
  {
    id: "MOD-04",
    title: "Request",
    description: "Service requests & approvals",
    icon: FileText,
    menus: ["My Requests", "Approvals"],
  },
  {
    id: "MOD-05",
    title: "Inventory",
    description: "Stock, spares & consumables",
    icon: Box,
    menus: ["Stock Levels", "Suppliers"],
  },
  {
    id: "MOD-06",
    title: "Energy",
    description: "Meters, consumption & analytics",
    icon: Zap,
    menus: ["Meters", "Analytics"],
  },
  {
    id: "MOD-07",
    title: "Inspections",
    description: "QR rounds & checklists",
    icon: ClipboardCheck,
    menus: ["Rounds", "Checklists"],
  },
  {
    id: "MOD-08",
    title: "Reports",
    description: "Analytics & export tools",
    icon: BarChart2,
    menus: ["Scheduled Reports", "Custom Builder"],
  },
];

export default function ModulesPortal() {
  const [selectedModuleId, setSelectedModuleId] = useState("MOD-01");

  const activeModule = initialModules.find((m) => m.id === selectedModuleId);

  return (
    <div className="my-15 text-slate-100  font-saas">
      {/* Header Section */}
      <div className="mb-6">
        <div className="flex items-center gap-2 text-[10px] font-semibold tracking-wider text-slate-400 uppercase font-mono mb-1">
          <span>PLATFORM</span>
          <span>•</span>
          <span>MODULES</span>
        </div>
        <h1 className="text-3xl font-bold text-white tracking-tight">Modules</h1>
        <p className="text-sm text-slate-400 mt-1 max-w-2xl">
          The catalog of system modules and their menus. These are what you switch on per tenant under feature access.
        </p>
      </div>

      {/* Main Grid Container */}
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
        {/* Left Column: Modules List */}
        <div className="lg:col-span-6 bg-[#0E1A2B]/60 border border-slate-800/80 rounded-xl p-5 backdrop-blur-sm">
          {/* Section Header */}
          <div className="flex items-center justify-between mb-4">
            <div>
              <h2 className="text-base font-semibold text-white">Modules</h2>
              <span className="text-xs font-mono text-slate-400">
                {initialModules.length} available
              </span>
            </div>
            <button className="flex items-center gap-1.5 text-emerald-400 hover:text-emerald-300 text-xs font-semibold transition-colors">
              <Plus className="w-4 h-4" />
              <span>Add module</span>
            </button>
          </div>

          {/* Module Items */}
          <div className="space-y-2 max-h-[620px] overflow-y-auto pr-1 custom-scrollbar">
            {initialModules.map((module) => {
              const Icon = module.icon;
              const isSelected = module.id === selectedModuleId;

              return (
                <div
                  key={module.id}
                  onClick={() => setSelectedModuleId(module.id)}
                  className={`group relative flex items-center justify-between p-3.5 rounded-lg border cursor-pointer transition-all ${
                    isSelected
                      ? "bg-teal-950/30 border-teal-500/40"
                      : "bg-[#09111E]/40 border-slate-800/60 hover:border-slate-700 hover:bg-[#0D1726]"
                  }`}
                >
                  <div className="flex items-center gap-3.5 min-w-0">
                    <div
                      className={`p-2.5 rounded-lg border shrink-0 ${
                        isSelected
                          ? "bg-teal-500/10 border-teal-500/30 text-teal-400"
                          : "bg-slate-900/80 border-slate-800 text-slate-400 group-hover:text-slate-200"
                      }`}
                    >
                      <Icon className="w-4 h-4" />
                    </div>
                    <div className="truncate">
                      <h3 className="text-sm font-semibold text-white truncate">
                        {module.title}
                      </h3>
                      <p className="text-xs text-slate-400 truncate mt-0.5">
                        {module.description}
                      </p>
                    </div>
                  </div>

                  <div className="flex items-center gap-2 shrink-0 ml-3">
                    <span className="text-[11px] font-mono bg-slate-900 border border-slate-800 text-slate-400 px-2 py-0.5 rounded">
                      {module.id}
                    </span>
                    <button
                      onClick={(e) => {
                        e.stopPropagation();
                        // Edit logic here
                      }}
                      className="p-1.5 text-slate-400 hover:text-white rounded-md hover:bg-slate-800 transition-colors"
                      title="Edit module"
                    >
                      <Pencil className="w-3.5 h-3.5" />
                    </button>
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        {/* Right Column: Menus Panel */}
        <div className="lg:col-span-6 bg-[#0E1A2B]/60 border border-slate-800/80 rounded-xl p-5 min-h-[500px] flex flex-col justify-between backdrop-blur-sm">
          <div>
            {/* Menus Header */}
            <div className="flex items-center justify-between mb-4">
              <div>
                <h2 className="text-base font-semibold text-white">Menus</h2>
                <span className="text-xs font-mono text-slate-400">
                  Under {activeModule?.title || "Module"}
                </span>
              </div>
              <button className="flex items-center gap-1.5 text-teal-400 hover:text-teal-300 text-xs font-semibold transition-colors">
                <Plus className="w-4 h-4" />
                <span>Add menu</span>
              </button>
            </div>

            {/* Empty State / Menus List */}
            {activeModule?.menus && activeModule.menus.length > 0 ? (
              <div className="space-y-2 mt-4">
                {activeModule.menus.map((menu, idx) => (
                  <div
                    key={idx}
                    className="flex items-center justify-between p-3 rounded-lg bg-[#09111E]/40 border border-slate-800/60"
                  >
                    <span className="text-sm font-medium text-slate-200">{menu}</span>
                    <button className="text-xs text-slate-400 hover:text-white">
                      Edit
                    </button>
                  </div>
                ))}
              </div>
            ) : (
              <div className="flex flex-col items-center justify-center h-80 text-center">
                <p className="text-sm text-slate-400 font-medium">
                  No menus under this module yet.
                </p>
              </div>
            )}
          </div>
        </div>
      </div>

     
    </div>
  );
}