import { Link } from "react-router-dom";
import { Separator } from "@/components/ui/separator";
import {
  Map, LayoutList, MessageSquare, FileText,
  Settings, LogOut, Layers
} from "lucide-react";

interface SidebarProps {
  activePath: string;
}

const navItems = [
  { path: "/", label: "Roadmap", icon: Map },
  { path: "/features", label: "Features", icon: LayoutList },
  { path: "/feedback", label: "Feedback", icon: MessageSquare },
  { path: "/changelog", label: "Changelog", icon: FileText },
  { path: "/settings", label: "Settings", icon: Settings },
];

function SidebarContent({ activePath }: SidebarProps) {
  return (
    <div className="flex flex-col h-full w-full bg-slate-900 text-white">
      {/* ── Logo ── */}
      <div className="p-6">
        <Link to="/" className="flex items-center gap-3 group">
          <div className="h-9 w-9 rounded-lg bg-blue-600 flex items-center justify-center group-hover:bg-blue-500 transition-colors">
            <Layers className="h-5 w-5 text-white" />
          </div>
          <span className="text-lg font-bold tracking-tight">ProductLab</span>
        </Link>
      </div>

      <Separator className="bg-slate-800 mx-4" />

      {/* ── Navigation ── */}
      <nav className="flex-1 p-4 space-y-1">
        {navItems.map((item) => {
          const isActive = activePath === item.path;
          return (
            <Link
              key={item.path}
              to={item.path}
              className={`relative flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors duration-200 \${
                isActive
                  ? "bg-blue-500/15 text-blue-400 shadow-sm before:absolute before:left-0 before:top-0 before:bottom-0 before:w-0.5 before:bg-blue-500 before:rounded-r"
                  : "text-slate-400 hover:text-white hover:bg-slate-800"
              }`}
            >
              <item.icon className="h-5 w-5" />
              {item.label}
            </Link>
          );
        })}
      </nav>

      <Separator className="bg-slate-800 mx-4" />

      {/* ── User + Logout ── */}
      <div className="p-4 space-y-2">
        <div className="flex items-center gap-3 px-3 py-2">
          <div className="h-8 w-8 rounded-full bg-blue-500/20 flex items-center justify-center">
            <span className="text-xs font-semibold text-blue-400">SK</span>
          </div>
          <div className="flex-1 min-w-0">
            <p className="text-sm font-medium text-white truncate">Sarah Kim</p>
            <p className="text-xs text-slate-500 truncate">Product Manager</p>
          </div>
        </div>
        <button className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-400 hover:text-red-400 hover:bg-slate-800 transition-colors w-full">
          <LogOut className="h-5 w-5" />
          Log Out
        </button>
      </div>
    </div>
  );
}

export default function Sidebar({ activePath }: SidebarProps) {
  return (
    <>
      {/* Desktop Sidebar */}
      <aside className="hidden lg:flex lg:fixed lg:inset-y-0 lg:left-0 lg:w-64 lg:z-50">
        <SidebarContent activePath={activePath} />
      </aside>
    </>
  );
}

export { SidebarContent };