import Link from 'next/link'
import type { ReactNode } from 'react'
import { Users, FileText, ShoppingBag, UserRound } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'

const navItems = [
  {
    label: 'Kullanıcılar',
    href: '/admin/users',
    icon: Users,
    disabled: false,
  },
  {
    label: 'Profilim',
    href: '/admin/profile',
    icon: UserRound,
    disabled: false,
  },
  {
    label: 'Posts',
    href: '#',
    icon: FileText,
    disabled: true,
  },
  {
    label: 'Shop',
    href: '#',
    icon: ShoppingBag,
    disabled: true,
  },
]

export default function AdminLayout({ children }: { children: ReactNode }) {
  return (
    <div className="flex w-full flex-1 gap-3 pl-2 pr-3 pt-0 pb-0 lg:gap-4 lg:pl-3 lg:pr-4">
      {/* ── Sidebar (sol) ── */}
      <aside className="hidden w-64 shrink-0 lg:block">
        <div className="sticky top-12 h-[calc(100dvh-3rem)] overflow-hidden rounded-none border-y-0 border-l-0 border-r bg-sidebar text-sidebar-foreground">
          <div className="border-b border-sidebar-border px-4 py-4">
            <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-sidebar-foreground/70">
              Admin Panel
            </p>
            <p className="mt-1 text-sm font-medium">Yonetim Menusu</p>
          </div>

          <div className="border-b border-sidebar-border px-4 py-3">
            <p className="text-xs text-sidebar-foreground/70">Hizli Erisim</p>
            <p className="text-sm font-medium">Kullanicilar ve Icerik</p>
          </div>

          <nav className="space-y-1 p-2">
            {navItems.map((item) => {
              const Icon = item.icon

              if (item.disabled) {
                return (
                  <div
                    key={item.label}
                    className="flex cursor-not-allowed items-center gap-3 rounded-md px-3 py-2 text-sm text-sidebar-foreground/60"
                  >
                    <Icon className="size-4" />
                    <span>{item.label}</span>
                    <Badge variant="secondary" className="ml-auto border-0 bg-sidebar-accent text-[10px] text-sidebar-accent-foreground">
                      Yakinda
                    </Badge>
                  </div>
                )
              }

              return (
                <Button
                  key={item.label}
                  variant="ghost"
                  size="sm"
                  className="h-10 w-full justify-start gap-3 rounded-md text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
                  asChild
                >
                  <Link href={item.href}>
                    <Icon className="size-4" />
                    {item.label}
                  </Link>
                </Button>
              )
            })}
          </nav>
        </div>
      </aside>

      {/* ── İçerik (sağ) ── */}
      <main className="min-w-0 flex-1 overflow-hidden rounded-xl border bg-card shadow-sm">
        {children}
      </main>
    </div>
  )
}