"use client";

import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  LayoutDashboard,
  Newspaper,
  Layers,
  Briefcase,
  MessageSquareQuote,
  Search,
  Inbox,
  Image as ImageIcon,
  type LucideIcon,
} from "lucide-react";

type Item = { href: string; label: string; icon: LucideIcon };

const items: Item[] = [
  { href: "/admin", label: "Pano", icon: LayoutDashboard },
  { href: "/admin/blog", label: "Blog", icon: Newspaper },
  { href: "/admin/hizmetler", label: "Hizmetler", icon: Layers },
  { href: "/admin/projeler", label: "Projeler", icon: Briefcase },
  { href: "/admin/referanslar", label: "Referanslar", icon: MessageSquareQuote },
  { href: "/admin/seo", label: "SEO", icon: Search },
  { href: "/admin/iletisim", label: "Mesajlar", icon: Inbox },
  { href: "/admin/medya", label: "Medya", icon: ImageIcon },
];

export function AdminSidebar() {
  const pathname = usePathname();

  return (
    <aside className="hidden w-64 shrink-0 border-r border-[var(--border)] bg-white md:flex md:flex-col">
      <Link
        href="/admin"
        className="flex items-center gap-3 border-b border-[var(--border)] px-5 py-4"
      >
        <Image src="/logo.png" alt="Kovak Yazılım" width={36} height={36} />
        <div>
          <p className="text-sm font-semibold text-[var(--navy)]">Kovak Yazılım</p>
          <p className="text-xs text-[var(--muted)]">Yönetim Paneli</p>
        </div>
      </Link>

      <nav className="flex-1 space-y-1 p-3">
        {items.map((it) => {
          const active =
            it.href === "/admin"
              ? pathname === "/admin"
              : pathname.startsWith(it.href);
          const Icon = it.icon;
          return (
            <Link
              key={it.href}
              href={it.href}
              className={`flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition ${
                active
                  ? "bg-[var(--navy)] text-white"
                  : "text-[var(--muted)] hover:bg-[var(--navy-50)] hover:text-[var(--navy)]"
              }`}
            >
              <Icon className="size-4" />
              {it.label}
            </Link>
          );
        })}
      </nav>

      <Link
        href="/"
        target="_blank"
        className="border-t border-[var(--border)] px-5 py-3 text-xs text-[var(--muted)] hover:text-[var(--navy)]"
      >
        ↗ Siteyi görüntüle
      </Link>
    </aside>
  );
}