"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { clsx } from "clsx";
import { LayoutDashboard, ListChecks } from "lucide-react";
import { UserProfile } from "@/lib/types";
import { BACKEND_URL } from "@/lib/env";

export const navItems = [
  { href: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
  { href: "/posts", label: "Posts", icon: ListChecks },
];

type SidebarProps = {
  user: UserProfile;
};

export default function Sidebar({ user }: SidebarProps) {
  const pathname = usePathname();

  return (
    <aside className="hidden w-72 flex-col border-r border-slate-200 bg-slate-50 px-6 py-8 dark:border-white/5 dark:bg-slate-900/40 lg:flex">
      <div className="flex items-center gap-3 text-slate-900 dark:text-white">
        <div className="relative h-10 w-10 overflow-hidden rounded-2xl bg-slate-100 ring-2 ring-orange-500/80 dark:bg-slate-900/80">
          {/* Use backend-hosted logo directly so we don't depend on Next.js public dir */}
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src={`${BACKEND_URL}/images/logo.png`}
            alt="Gain Rhino logo"
            className="h-full w-full object-contain p-1"
          />
        </div>
        <div>
          <p className="text-sm uppercase tracking-[0.2em] text-orange-500 dark:text-orange-400">Gain Rhino</p>
          <p className="text-lg font-semibold text-slate-900 dark:text-white">Social Media Agent</p>
        </div>
      </div>

      <nav className="mt-10 flex flex-1 flex-col gap-2 text-sm font-medium">
        {navItems.map((item) => {
          const isActive = pathname.startsWith(item.href);
          const Icon = item.icon;
          return (
            <Link
              key={item.href}
              href={item.href}
              className={clsx(
                "flex items-center gap-3 rounded-2xl px-4 py-3 transition",
                isActive
                  ? "bg-orange-500/15 text-slate-900 shadow-lg shadow-orange-500/30 dark:text-white"
                  : "text-slate-600 hover:bg-orange-500/10 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white"
              )}
            >
              <Icon className="h-4 w-4" />
              {item.label}
            </Link>
          );
        })}
      </nav>

      <div className="rounded-2xl border border-slate-200 bg-slate-100 p-4 dark:border-white/5 dark:bg-white/5">
        <p className="text-xs uppercase tracking-[0.3em] text-slate-500 dark:text-slate-400">Account</p>
        <p className="mt-2 text-base font-semibold text-slate-900 dark:text-white">{user.name}</p>
        <p className="text-sm text-slate-600 dark:text-slate-400">{user.email}</p>
      </div>
    </aside>
  );
}