"use client";

import Link from "next/link";
import Image from "next/image";
import { usePathname } from "next/navigation";

const navItems = [
  { icon: "target", label: "Mission", href: "/mission" },
  { icon: "group", label: "Agents", href: "/agents" },
  { icon: "psychology", label: "Intelligence", href: "/intelligence" },
  { icon: "hub", label: "Knowledge Base", href: "/knowledge-base" },
  { icon: "terminal", label: "System Logs", href: "/logs" },
];

const activityItems = [
  { icon: "video_camera_front", label: "Meetings", href: "/meetings" },
  { icon: "bug_report", label: "Jira Tickets", href: "/jira" },
  { icon: "chat", label: "Chat History", href: "/chats" },
];

export default function Sidebar() {
  const pathname = usePathname();

  return (
    <aside
      className="h-screen w-[240px] fixed left-0 top-0 flex flex-col border-r z-50"
      style={{ backgroundColor: "#0C0C0E" }}
    >
      {/* Logo */}
      <div className="p-8">
        <Link href="/" className="flex items-center gap-3 w-full hover:opacity-80 transition-opacity drop-shadow-lg">
          <Image src="/new-logo.png" alt="ThirdEye" width={32} height={32} className="rounded-md" />
          <div className="flex flex-col justify-center">
            <div className="text-2xl font-black tracking-wide text-[#a88cf8] uppercase leading-none mt-1">THIRDEYE</div>
            <div className="text-[9px] font-bold tracking-[0.3em] text-zinc-500 mt-1.5 uppercase">SOVEREIGN_V1</div>
          </div>
        </Link>
      </div>

      {/* Navigation */}
      <nav className="flex-1 px-4 space-y-1 overflow-y-auto custom-scrollbar">
        {navItems.map((item) => {
          const isActive = pathname === item.href;
          return (
            <Link
              key={item.label}
              href={item.href}
              className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-300 ${
                isActive
                  ? "text-[#A78BFA] bg-[rgba(167,139,250,0.1)]"
                  : "text-zinc-500 hover:text-zinc-200 hover:bg-[#141419]"
              }`}
            >
              <span className="material-symbols-outlined" style={{ fontSize: "18px" }}>
                {item.icon}
              </span>
              <span className="text-[11px] uppercase tracking-wider font-semibold">
                {item.label}
              </span>
            </Link>
          );
        })}

        {/* Activity section */}
        <div className="pt-4 pb-1 px-4">
          <p className="text-[9px] font-bold tracking-[0.25em] text-zinc-600 uppercase">Activity</p>
        </div>
        {activityItems.map((item) => {
          const isActive = pathname === item.href;
          return (
            <Link
              key={item.label}
              href={item.href}
              className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-300 ${
                isActive
                  ? "text-[#A78BFA] bg-[rgba(167,139,250,0.1)]"
                  : "text-zinc-500 hover:text-zinc-200 hover:bg-[#141419]"
              }`}
            >
              <span className="material-symbols-outlined" style={{ fontSize: "18px" }}>
                {item.icon}
              </span>
              <span className="text-[11px] uppercase tracking-wider font-semibold">
                {item.label}
              </span>
            </Link>
          );
        })}
      </nav>

      {/* Footer */}
      <div className="p-6 border-t">
        <Link
          href="#"
          className="flex items-center gap-3 px-4 py-3 text-zinc-500 hover:text-zinc-200 hover:bg-[#141419] rounded-lg transition-all duration-300 mb-6"
        >
          <span className="material-symbols-outlined" style={{ fontSize: "18px" }}>
            settings
          </span>
          <span className="text-[11px] uppercase tracking-wider font-semibold">
            Settings
          </span>
        </Link>

        {/* User Card */}
        <div
          className="flex items-center gap-3 px-4 py-3 rounded-xl"
          style={{ backgroundColor: "rgba(20,20,25,0.5)" }}
        >
          <div
            className="w-8 h-8 rounded flex items-center justify-center overflow-hidden flex-shrink-0"
            style={{ backgroundColor: "rgba(167,139,250,0.1)" }}
          >
            <span
              className="material-symbols-outlined text-[#A78BFA]"
              style={{ fontSize: "18px" }}
            >
              person
            </span>
          </div>
          <div className="overflow-hidden">
            <p className="text-[11px] text-zinc-200 font-semibold truncate">CMD_DECKARD</p>
            <p className="text-[9px] text-zinc-500 uppercase tracking-tighter">Clearance L4</p>
          </div>
        </div>
      </div>
    </aside>
  );
}