"use client";

import Link from "next/link";
import Image from "next/image";
import { usePathname } from "next/navigation";
import {
  Zap, LayoutDashboard, History, BookOpen,
  Package, ChevronRight, Settings, Wand2, Shield, Clapperboard, Film
} from "lucide-react";
import { cn } from "@/lib/utils";
import { PLATFORM_CONFIGS } from "@/types";

const navItems = [
  { href: "/dashboard",       label: "Dashboard",       icon: LayoutDashboard },
  { href: "/storyboard",      label: "Storyboard",       icon: Clapperboard, badge: "NEW" },
  { href: "/ugc-generator",   label: "Generator UGC",    icon: Film,          badge: "NEW" },
  { href: "/history",         label: "History",          icon: History },
  { href: "/templates",       label: "Templates",        icon: BookOpen },
  { href: "/products",        label: "Product Library",  icon: Package },
];

const mobileNavItems = [
  { href: "/dashboard",           label: "Dashboard",   icon: LayoutDashboard },
  { href: "/ugc-generator",       label: "UGC",         icon: Film },
  { href: "/generator/seedance",  label: "Generate",    icon: Wand2 },
  { href: "/history",             label: "History",     icon: History },
  { href: "/settings",            label: "Settings",    icon: Settings },
];

export default function Sidebar({ profile }: { profile?: { role?: string } | null }) {
  const pathname = usePathname();

  return (
    <>
      {/* ── Desktop Sidebar ──────────────────────────────────── */}
      <aside className="w-60 gold-border-r flex-col bg-card/60 hidden md:flex" style={{ backdropFilter: "blur(12px)" }}>

        {/* Logo + Brand */}
        <div className="gold-border-b flex flex-col items-center gap-2 px-4 py-4">
          {/* Profile photo logo */}
          <div className="relative w-16 h-16 rounded-2xl overflow-hidden shadow-lg shadow-blue-500/30 ring-2 ring-blue-500/30">
            <Image
              src="/logo.png"
              alt="PromptMotion Logo"
              fill
              className="object-cover"
              priority
            />
          </div>
          {/* App name below logo */}
          <div className="flex items-center gap-2">
            <div className="w-5 h-5 rounded-lg bg-gradient-to-br from-purple-500 to-cyan-500 flex items-center justify-center shadow shadow-purple-500/30">
              <Zap className="w-3 h-3 text-white" />
            </div>
            <span className="font-bold text-base gold-shimmer-text">PromptMotion</span>
          </div>
        </div>

        {/* Main navigation */}
        <nav className="flex-1 px-3 py-4 space-y-0.5 overflow-y-auto scrollbar-thin">

          {/* Main links */}
          {navItems.map((item) => {
            const isActive = pathname === item.href;
            return (
              <Link
                key={item.href}
                href={item.href}
                className={cn(
                  "nav-active-indicator flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm transition-all duration-200",
                  isActive
                    ? "bg-gradient-to-r from-amber-500/10 to-transparent text-amber-200 font-medium"
                    : "text-muted-foreground hover:text-foreground hover:bg-white/5"
                )}
              >
                <item.icon className={cn("w-4 h-4 flex-shrink-0", isActive && "text-amber-400")} />
                <span className="flex-1">{item.label}</span>
                {item.badge && (
                  <span className="text-[9px] font-bold px-1.5 py-0.5 rounded-full bg-gradient-to-r from-violet-600 to-blue-600 text-white">
                    {item.badge}
                  </span>
                )}
              </Link>
            );
          })}

          {/* Generator section */}
          <div className="pt-5 pb-1">
            <div className="flex items-center gap-2 px-3 mb-2">
              <div className="h-px flex-1 gold-hr-soft" />
              <p className="text-[10px] gold-label uppercase tracking-widest">Generator</p>
              <div className="h-px flex-1 gold-hr-soft" />
            </div>

            {Object.values(PLATFORM_CONFIGS).map((platform) => {
              const isActive = pathname === `/generator/${platform.id}`;
              return (
                <Link
                  key={platform.id}
                  href={`/generator/${platform.id}`}
                  className={cn(
                    "nav-active-indicator flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm transition-all duration-200 group",
                    isActive
                      ? "bg-gradient-to-r from-amber-500/10 to-transparent text-amber-200 font-medium"
                      : "text-muted-foreground hover:text-foreground hover:bg-white/5"
                  )}
                >
                  <span className="text-base">{platform.icon}</span>
                  <span className="flex-1 truncate">{platform.name}</span>
                  <ChevronRight className="w-3.5 h-3.5 opacity-0 group-hover:opacity-60 transition-opacity" />
                </Link>
              );
            })}
          </div>
        </nav>

        {/* Bottom: Settings + Admin */}
        <div className="px-3 py-3 gold-border-t space-y-0.5">
          {/* Thin gold divider above settings */}
          <Link
            href="/settings"
            className={cn(
              "nav-active-indicator flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm transition-all duration-200",
              pathname === "/settings"
                ? "bg-gradient-to-r from-amber-500/10 to-transparent text-amber-200 font-medium"
                : "text-muted-foreground hover:text-foreground hover:bg-white/5"
            )}
          >
            <Settings className={cn("w-4 h-4", pathname === "/settings" && "text-amber-400")} />
            Pengaturan
          </Link>

          {profile?.role === "admin" && (
            <>
              <div className="gold-hr-soft my-1.5" />
              <Link
                href="/admin/dashboard"
                className={cn(
                  "nav-active-indicator flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm transition-all duration-200",
                  pathname.startsWith("/admin")
                    ? "bg-gradient-to-r from-orange-500/15 to-transparent text-orange-300 font-medium"
                    : "text-orange-400/60 hover:text-orange-300 hover:bg-orange-500/8"
                )}
              >
                <Shield className="w-4 h-4" />
                Admin Panel
              </Link>
            </>
          )}
        </div>
      </aside>

      {/* ── Mobile Bottom Nav ─────────────────────────────────── */}
      <nav className="md:hidden fixed bottom-0 left-0 right-0 z-50 bg-card/95 backdrop-blur-md gold-border-t safe-area-pb">
        <div className="flex items-stretch h-16">
          {mobileNavItems.map((item) => {
            const isActive = item.href === "/settings"
              ? pathname === "/settings"
              : item.href.startsWith("/generator")
                ? pathname.startsWith("/generator")
                : pathname === item.href;

            return (
              <Link
                key={item.href}
                href={item.href}
                className={cn(
                  "flex-1 flex flex-col items-center justify-center gap-1 transition-all relative",
                  isActive ? "text-amber-300" : "text-muted-foreground hover:text-foreground"
                )}
              >
                <item.icon className="w-5 h-5" />
                <span className="text-[10px] font-medium">{item.label}</span>
                {isActive && (
                  <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-8 h-[2px] rounded-t-full bg-gradient-to-r from-transparent via-amber-400 to-transparent" />
                )}
              </Link>
            );
          })}
        </div>
      </nav>
    </>
  );
}
