import { Link, useLocation } from "react-router-dom";
import { cn } from "@/utils/cn";
import { useUiStore } from "@/store/uiStore";
import {
  LayoutDashboard,
  CreditCard,
  ArrowLeftRight,
  PiggyBank,
  TrendingUp,
  BarChart3,
  Sparkles,
  Settings,
  ChevronLeft,
  ChevronRight,
  Coins,
  Repeat,
  Receipt,
  ShieldCheck,
} from "lucide-react";

const navItems = [
  { href: "/", icon: LayoutDashboard, label: "Dashboard" },
  { href: "/accounts", icon: CreditCard, label: "Accounts" },
  { href: "/transactions", icon: ArrowLeftRight, label: "Transactions" },
  { href: "/subscriptions", icon: Repeat, label: "Subscriptions" },
  { href: "/budgets", icon: PiggyBank, label: "Budgets" },
  { href: "/investments", icon: TrendingUp, label: "Investments" },
  { href: "/reports", icon: BarChart3, label: "Reports" },
  { href: "/tax", icon: Receipt, label: "Tax" },
  { href: "/pensions", icon: ShieldCheck, label: "Pensions" },
  { href: "/predictions", icon: Sparkles, label: "Predictions" },
  { href: "/settings", icon: Settings, label: "Settings" },
];

export default function Sidebar() {
  const location = useLocation();
  const { sidebarOpen, setSidebarOpen } = useUiStore();

  return (
    <aside
      className={cn(
        "fixed left-0 top-0 h-full z-30 bg-card border-r border-border transition-all duration-200 flex flex-col",
        sidebarOpen ? "w-64" : "w-16"
      )}
    >
      {/* Logo */}
      <div className="flex items-center h-16 px-4 border-b border-border shrink-0">
        <Coins className="w-7 h-7 text-primary shrink-0" />
        {sidebarOpen && (
          <span className="ml-2 font-semibold text-lg truncate">MyMidas</span>
        )}
      </div>

      {/* Nav */}
      <nav className="flex-1 overflow-y-auto py-4 space-y-1 px-2">
        {navItems.map(({ href, icon: Icon, label }) => {
          const active = location.pathname === href || (href !== "/" && location.pathname.startsWith(href));
          return (
            <Link
              key={href}
              to={href}
              className={cn(
                "flex items-center gap-3 px-2 py-2 rounded-md text-sm font-medium transition-colors",
                active
                  ? "bg-primary/15 text-primary"
                  : "text-muted-foreground hover:bg-secondary hover:text-foreground"
              )}
              title={!sidebarOpen ? label : undefined}
            >
              <Icon className="w-5 h-5 shrink-0" />
              {sidebarOpen && <span className="truncate">{label}</span>}
            </Link>
          );
        })}
      </nav>

      {/* Toggle */}
      <button
        onClick={() => setSidebarOpen(!sidebarOpen)}
        className="flex items-center justify-center h-10 w-full border-t border-border text-muted-foreground hover:text-foreground transition-colors"
      >
        {sidebarOpen ? (
          <ChevronLeft className="w-4 h-4" />
        ) : (
          <ChevronRight className="w-4 h-4" />
        )}
      </button>
    </aside>
  );
}