"use client";

import { handleLogout } from "@/app/admin/actions";
import type { AdminModule } from "@/lib/admin-permissions";
import {
  Activity,
  Boxes,
  Clapperboard,
  ExternalLink,
  Globe2,
  KeyRound,
  LayoutDashboard,
  LayoutGrid,
  LogOut,
  ShieldCheck,
  Users,
} from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import type { ReactNode } from "react";

const navigation: Array<{ href: string; label: string; module: AdminModule; icon: typeof LayoutDashboard }> = [
  { href: "/admin/dashboard", label: "Ürünler", module: "products", icon: LayoutDashboard },
  { href: "/admin/series", label: "Seriler", module: "series", icon: Boxes },
  { href: "/admin/gallery", label: "Galeri", module: "gallery", icon: Clapperboard },
  { href: "/admin/markets", label: "Ülkeler", module: "markets", icon: Globe2 },
  { href: "/admin/sections", label: "Bölümler", module: "sections", icon: LayoutGrid },
  { href: "/admin/activity", label: "İşlem geçmişi", module: "activity", icon: Activity },
  { href: "/admin/users", label: "Kullanıcılar", module: "users", icon: Users },
];

export default function AdminShellClient({
  eyebrow,
  title,
  description,
  actions,
  allowedModules,
  user,
  children,
}: {
  eyebrow: string;
  title: string;
  description?: string;
  actions?: ReactNode;
  allowedModules: AdminModule[];
  user: { displayName: string; username: string; isSystem: boolean };
  children: ReactNode;
}) {
  const pathname = usePathname();
  const visibleNavigation = navigation.filter((item) => allowedModules.includes(item.module));

  return (
    <div className="min-h-screen bg-surface-0 text-fg-primary lg:grid lg:grid-cols-[270px_minmax(0,1fr)]">
      <aside className="border-b border-border bg-surface-1/75 px-4 py-4 backdrop-blur-xl lg:sticky lg:top-0 lg:h-screen lg:border-b-0 lg:border-r lg:px-5 lg:py-6">
        <div className="mx-auto flex max-w-7xl items-center justify-between gap-4 lg:h-full lg:flex-col lg:items-stretch">
          <div className="flex items-center gap-3 lg:px-2">
            <div className="relative h-8 w-28">
              <Image src="/brand/norden.png" alt="Norden" fill className="object-contain object-left" sizes="112px" priority />
            </div>
            <span className="rounded-full border border-ember/30 px-2 py-1 text-[9px] font-semibold uppercase tracking-[0.18em] text-ember">Admin 2.1</span>
          </div>

          <nav className="hidden flex-col gap-1 lg:flex">
            {visibleNavigation.map(({ href, label, icon: Icon }) => {
              const active = pathname === href || (href !== "/admin/dashboard" && pathname.startsWith(`${href}/`));
              return (
                <Link
                  key={href}
                  href={href}
                  className={`flex items-center gap-3 rounded-2xl px-4 py-3 text-sm transition-colors ${active ? "bg-ember/10 text-ember" : "text-fg-secondary hover:bg-white/[0.035] hover:text-fg-primary"}`}
                >
                  <Icon size={17} />
                  <span>{label}</span>
                </Link>
              );
            })}
          </nav>

          <div className="hidden flex-col gap-2 lg:flex">
            <div className="rounded-2xl border border-border bg-white/[0.025] p-3">
              <div className="flex items-center gap-2 text-xs font-semibold text-fg-primary">
                {user.isSystem ? <ShieldCheck size={15} className="text-ember" /> : <Users size={15} className="text-fg-muted" />}
                <span className="truncate">{user.displayName}</span>
              </div>
              <p className="mt-1 truncate pl-[23px] text-[10px] text-fg-muted">@{user.username}</p>
            </div>
            <Link href="/admin/account/password" className="flex items-center justify-center gap-2 rounded-full border border-border px-4 py-2.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-fg-secondary hover:text-fg-primary">
              Parolam <KeyRound size={13} />
            </Link>
            <Link href="/tr" target="_blank" className="flex items-center justify-center gap-2 rounded-full border border-border px-4 py-2.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-fg-secondary hover:text-fg-primary">
              Siteyi görüntüle <ExternalLink size={13} />
            </Link>
            <form action={handleLogout}>
              <button type="submit" className="flex w-full items-center justify-center gap-2 rounded-full border border-red-500/20 bg-red-500/[0.06] px-4 py-2.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-red-400">
                Çıkış yap <LogOut size={13} />
              </button>
            </form>
          </div>

          <div className="flex gap-2 overflow-x-auto lg:hidden">
            {visibleNavigation.map(({ href, label, icon: Icon }) => (
              <Link key={href} href={href} aria-label={label} className={`grid h-10 w-10 shrink-0 place-items-center rounded-full border ${pathname.startsWith(href) ? "border-ember/50 bg-ember/10 text-ember" : "border-border text-fg-secondary"}`}>
                <Icon size={16} />
              </Link>
            ))}
          </div>
        </div>
      </aside>

      <main className="min-w-0 px-5 py-8 md:px-8 lg:px-10 lg:py-10">
        <div className="mx-auto w-full max-w-[1500px]">
          <header className="mb-8 flex flex-col justify-between gap-5 border-b border-border pb-7 md:flex-row md:items-end">
            <div className="max-w-3xl">
              <p className="mb-3 text-[10px] font-semibold uppercase tracking-[0.22em] text-ember">{eyebrow}</p>
              <h1 className="text-3xl font-semibold tracking-[-0.035em] md:text-4xl">{title}</h1>
              {description ? <p className="mt-3 max-w-2xl text-sm leading-6 text-fg-secondary">{description}</p> : null}
            </div>
            {actions ? <div className="shrink-0">{actions}</div> : null}
          </header>
          {children}
        </div>
      </main>
    </div>
  );
}