"use client";

import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import {
  FileCode,
  LayoutDashboard,
  LogOut,
  MessageSquare,
  Package,
  PawPrint,
  Settings,
  ShoppingCart,
  Truck,
  CreditCard,
  Menu,
  Sparkles,
  X,
} from "lucide-react";
import { useState, type ReactNode } from "react";

const nav = [
  { label: "Dashboard", href: "/admin", icon: LayoutDashboard },
  { label: "Ürünler", href: "/admin/urunler", icon: Package },
  { label: "Siparişler", href: "/admin/siparisler", icon: ShoppingCart },
  { label: "Yapay Zeka (AI)", href: "/admin/ai", icon: Sparkles },
  { label: "XML İçe Aktar", href: "/admin/xml", icon: FileCode },
  { label: "WhatsApp", href: "/admin/whatsapp", icon: MessageSquare },
  { label: "Kargo", href: "/admin/kargo", icon: Truck },
  { label: "Ödeme", href: "/admin/odeme", icon: CreditCard },
  { label: "Ayarlar", href: "/admin/ayarlar", icon: Settings },
];

export default function AdminLayout({ children }: { children: ReactNode }) {
  const pathname = usePathname();
  const router = useRouter();
  const [sideOpen, setSideOpen] = useState(false);

  // Login sayfasında layout gösterme
  if (pathname === "/admin/login") {
    return <>{children}</>;
  }

  async function handleLogout() {
    await fetch("/api/admin/auth", { method: "DELETE" });
    router.push("/admin/login");
    router.refresh();
  }

  const sidebar = (
    <div className="flex h-full flex-col">
      {/* Logo */}
      <div className="flex items-center gap-3 border-b border-slate-200 px-6 py-5">
        <span className="grid size-10 place-items-center rounded-xl bg-gradient-to-br from-brand-400 to-brand-600 text-white shadow-md">
          <PawPrint className="size-5" />
        </span>
        <div>
          <p className="font-display text-lg font-extrabold text-ink">
            Pet<span className="text-brand-600">Marketim</span>
          </p>
          <p className="text-[10px] font-bold uppercase tracking-wider text-mocha">
            Yönetim Paneli
          </p>
        </div>
      </div>

      {/* Nav */}
      <nav className="flex-1 space-y-1 overflow-y-auto px-3 py-4">
        {nav.map((item) => {
          const active = pathname === item.href;
          return (
            <Link
              key={item.href}
              href={item.href}
              onClick={() => setSideOpen(false)}
              className={`flex items-center gap-3 rounded-xl px-4 py-2.5 text-sm font-bold transition-all ${
                active
                  ? "bg-brand-500 text-white shadow-md shadow-brand-500/30"
                  : "text-cocoa hover:bg-sand hover:text-ink"
              }`}
            >
              <item.icon className={`size-5 ${active ? "text-white" : "text-brand-500"}`} />
              {item.label}
            </Link>
          );
        })}
      </nav>

      {/* Alt */}
      <div className="border-t border-slate-200 p-3">
        <Link
          href="/"
          className="flex items-center gap-3 rounded-xl px-4 py-2.5 text-sm font-bold text-cocoa transition-colors hover:bg-sand hover:text-ink"
        >
          <PawPrint className="size-5 text-brand-500" />
          Mağazaya Git
        </Link>
        <button
          type="button"
          onClick={handleLogout}
          className="mt-1 flex w-full items-center gap-3 rounded-xl px-4 py-2.5 text-sm font-bold text-red-600 transition-colors hover:bg-red-50"
        >
          <LogOut className="size-5" />
          Çıkış Yap
        </button>
      </div>
    </div>
  );

  return (
    <div className="flex min-h-screen bg-slate-50 font-sans text-ink">
      {/* Masaüstü sidebar */}
      <aside className="hidden w-64 shrink-0 border-r border-slate-200 bg-white lg:block">
        {sidebar}
      </aside>

      {/* Mobil sidebar */}
      {sideOpen && (
        <div className="fixed inset-0 z-50 lg:hidden">
          <div
            className="absolute inset-0 bg-ink/40 backdrop-blur-sm"
            onClick={() => setSideOpen(false)}
          />
          <aside className="absolute left-0 top-0 h-full w-72 animate-pop-in bg-white shadow-2xl">
            {sidebar}
          </aside>
        </div>
      )}

      {/* İçerik */}
      <div className="flex flex-1 flex-col overflow-hidden">
        {/* Üst bar */}
        <header className="flex items-center gap-4 border-b border-slate-200 bg-white px-6 py-4">
          <button
            type="button"
            onClick={() => setSideOpen(true)}
            className="rounded-xl p-2 text-cocoa hover:bg-sand lg:hidden"
          >
            <Menu className="size-5" />
          </button>
          <h2 className="flex-1 font-display text-xl font-extrabold text-ink">
            {nav.find((n) => n.href === pathname)?.label ?? "Dashboard"}
          </h2>
          <span className="hidden text-xs font-bold text-mocha sm:block">
            petmarketim.net
          </span>
        </header>

        <main className="flex-1 overflow-y-auto p-6 lg:p-8">{children}</main>
      </div>
    </div>
  );
}