"use client";

import { useState } from "react";
import { LayoutDashboard, Package, ShoppingCart, Settings, FileCode, MessageSquare, LogOut } from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";

const menu = [
  { label: "Dashboard", href: "/admin", icon: LayoutDashboard },
  { label: "Ürünler", href: "/admin/products", icon: Package },
  { label: "Siparişler", href: "/admin/orders", icon: ShoppingCart },
  { label: "XML İçe Aktar", href: "/admin/import", icon: FileCode },
  { label: "WhatsApp Ayarları", href: "/admin/whatsapp", icon: MessageSquare },
  { label: "Genel Ayarlar", href: "/admin/settings", icon: Settings },
];

export function AdminLayout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();

  return (
    <div className="flex min-h-screen bg-slate-50 font-sans text-slate-900">
      <aside className="w-64 border-r border-slate-200 bg-white">
        <div className="p-6">
          <h1 className="font-display text-xl font-extrabold text-brand-600">PetMarketim Admin</h1>
        </div>
        <nav className="mt-2 space-y-1 px-3">
          {menu.map((item) => {
            const active = pathname === item.href;
            return (
              <Link
                key={item.href}
                href={item.href}
                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-slate-600 hover:bg-slate-100"
                }`}
              >
                <item.icon className="size-5" />
                {item.label}
              </Link>
            );
          })}
        </nav>
        <div className="absolute bottom-6 w-64 px-3">
           <button className="flex w-full items-center gap-3 rounded-xl px-4 py-2.5 text-sm font-bold text-red-600 hover:bg-red-50">
             <LogOut className="size-5" /> Çıkış Yap
           </button>
        </div>
      </aside>
      <main className="flex-1 p-8 overflow-y-auto">{children}</main>
    </div>
  );
}