"use client";

import React from "react";
import {
  LayoutDashboard,
  Users,
  Settings,
  ListOrdered,
  FlaskConical,
  ScrollText,
  FileCode2,
  SlidersHorizontal,
  Wand2,
  ExternalLink,
} from "lucide-react";

interface SidebarProps {
  activeTab: string;
  setActiveTab: (tab: string) => void;
  pendingCount?: number;
  manualCount?: number;
}

export const Sidebar: React.FC<SidebarProps> = ({
  activeTab,
  setActiveTab,
  pendingCount = 0,
  manualCount = 0,
}) => {
  const navItems = [
    {
      id: "dashboard",
      label: "Today's Serials",
      icon: LayoutDashboard,
      badge: manualCount > 0 ? `${manualCount} Action` : pendingCount > 0 ? `${pendingCount} Left` : undefined,
      badgeColor: manualCount > 0 ? "bg-amber-500 text-slate-950" : "bg-blue-500/20 text-blue-400",
    },
    {
      id: "patients",
      label: "Patient Management",
      icon: Users,
      description: "Set daily 5 patients & priority",
    },
    {
      id: "settings",
      label: "Serial Settings",
      icon: SlidersHorizontal,
      description: "07:05 AM, 5 Serials, 1m Interval",
    },
    {
      id: "jobs",
      label: "Job Queue & History",
      icon: ListOrdered,
      description: "Track all daily submissions",
    },
    {
      id: "test",
      label: "Test Automation",
      icon: FlaskConical,
      description: "Live DOM form validator",
    },
    {
      id: "logs",
      label: "Automation Logs",
      icon: ScrollText,
      description: "Real-time worker execution logs",
    },
    {
      id: "standalone",
      label: "Project ZIP & Guide",
      icon: FileCode2,
      description: "PHP + Node.js VPS / cPanel setup",
    },
    {
      id: "installer",
      label: "Web Installer Wizard",
      icon: Wand2,
      description: "Preview /install wizard",
    },
  ];

  return (
    <aside className="w-full lg:w-64 bg-slate-900 border-r border-slate-800 flex flex-col p-4 shrink-0">
      <div className="space-y-1">
        <div className="px-3 py-2 text-[11px] font-bold uppercase tracking-wider text-slate-500">
          Core Operations
        </div>
        {navItems.map((item) => {
          const Icon = item.icon;
          const isActive = activeTab === item.id;
          return (
            <button
              key={item.id}
              onClick={() => setActiveTab(item.id)}
              className={`w-full flex items-center justify-between px-3.5 py-2.5 rounded-xl text-left transition-all text-xs font-semibold ${
                isActive
                  ? "bg-blue-600 text-white shadow-md shadow-blue-600/20 font-bold"
                  : "text-slate-400 hover:text-slate-200 hover:bg-slate-800/60"
              }`}
            >
              <div className="flex items-center gap-3">
                <Icon className={`w-4 h-4 ${isActive ? "text-white" : "text-slate-400"}`} />
                <span>{item.label}</span>
              </div>
              {item.badge && (
                <span className={`text-[10px] font-bold px-2 py-0.5 rounded-full ${item.badgeColor}`}>
                  {item.badge}
                </span>
              )}
            </button>
          );
        })}
      </div>

      {/* Target Appointment Portal Quick Link */}
      <div className="mt-auto pt-6">
        <div className="p-3.5 rounded-xl bg-slate-950/60 border border-slate-800">
          <div className="flex items-center justify-between text-[11px] font-bold text-slate-400 mb-1.5">
            <span>TARGET PORTAL</span>
            <ExternalLink className="w-3 h-3 text-slate-500" />
          </div>
          <a
            href="http://210.4.73.10:52/appointments/apps/appointment/1460/13030"
            target="_blank"
            rel="noopener noreferrer"
            className="block text-[11px] text-blue-400 hover:text-blue-300 truncate font-mono"
            title="http://210.4.73.10:52/appointments/apps/appointment/1460/13030"
          >
            210.4.73.10:52/.../13030
          </a>
          <p className="text-[10px] text-slate-500 mt-1">Configurable via Serial Settings</p>
        </div>
      </div>
    </aside>
  );
};