"use client";

import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { signOut, useSession } from "next-auth/react";
import {
  LayoutDashboard,
  ShoppingCart,
  Package,
  Receipt,
  Clock,
  Users,
  Settings,
  LogOut,
} from "lucide-react";
import type { Role } from "@prisma/client";
import { cn } from "@/lib/utils";

type Item = {
  href: string;
  label: string;
  icon: React.ComponentType<{ className?: string }>;
  roles: Role[];
};

const NAV: Item[] = [
  { href: "/dashboard", label: "Dashboard", icon: LayoutDashboard, roles: ["ADMIN", "KASIR", "GUDANG"] },
  { href: "/pos", label: "Kasir POS", icon: ShoppingCart, roles: ["ADMIN", "KASIR"] },
  { href: "/produk", label: "Produk", icon: Package, roles: ["ADMIN", "GUDANG"] },
  { href: "/transaksi", label: "Transaksi", icon: Receipt, roles: ["ADMIN", "KASIR"] },
  { href: "/shift", label: "Shift", icon: Clock, roles: ["ADMIN", "KASIR"] },
  { href: "/pelanggan", label: "Pelanggan", icon: Users, roles: ["ADMIN", "KASIR", "GUDANG"] },
  { href: "/pengaturan", label: "Pengaturan", icon: Settings, roles: ["ADMIN"] },
];

export function AppShell({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const router = useRouter();
  const { data: session } = useSession();
  const role = (session?.user as { role?: Role } | undefined)?.role ?? "KASIR";
  const items = NAV.filter((it) => it.roles.includes(role));

  return (
    <div className="min-h-screen flex bg-[var(--color-bg)]">
      <aside className="w-60 border-r border-[var(--color-border)] bg-white flex flex-col sticky top-0 h-screen">
        <div className="px-5 py-5 border-b border-[var(--color-border)]">
          <Link href="/dashboard" className="flex items-center gap-2">
            <div className="h-8 w-8 rounded-lg gradient-brand flex items-center justify-center text-white font-bold">P</div>
            <div>
              <div className="font-semibold tracking-tight text-sm">POS Toko</div>
              <div className="text-[10px] text-[var(--color-text-muted)]">Onodevart Studio</div>
            </div>
          </Link>
        </div>

        <nav className="flex-1 p-3 space-y-0.5 overflow-y-auto">
          {items.map((it) => {
            const active = pathname === it.href || pathname.startsWith(it.href + "/");
            return (
              <Link
                key={it.href}
                href={it.href}
                className={cn(
                  "flex items-center gap-2.5 px-3 py-2 rounded-md text-sm font-medium transition-colors",
                  active
                    ? "bg-[var(--color-brand-soft)] text-[var(--color-brand)]"
                    : "text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-muted)] hover:text-[var(--color-text-primary)]"
                )}
              >
                <it.icon className="h-4 w-4" />
                {it.label}
              </Link>
            );
          })}
        </nav>

        <div className="p-3 border-t border-[var(--color-border)]">
          <div className="px-2 py-1.5 mb-2">
            <div className="text-xs font-medium truncate">{session?.user?.name ?? "User"}</div>
            <div className="text-[10px] text-[var(--color-text-muted)] truncate">{session?.user?.email}</div>
            <div className="mt-1">
              <span className="inline-flex items-center rounded-md border border-[var(--color-brand-soft)] bg-[var(--color-brand-soft)] px-1.5 py-0.5 text-[10px] font-medium text-[var(--color-brand)]">
                {role}
              </span>
            </div>
          </div>
          <button
            onClick={async () => {
              await signOut({ redirect: false });
              router.push("/signin");
            }}
            className="w-full inline-flex items-center gap-2 px-3 py-2 rounded-md text-sm text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-muted)]"
          >
            <LogOut className="h-4 w-4" /> Keluar
          </button>
        </div>
      </aside>

      <main className="flex-1 min-w-0">{children}</main>
    </div>
  );
}