'use client';
import Link from 'next/link';
import { usePathname } from 'next/navigation';

const NAV: [string, string, string][] = [
  ['/krtf1krtf', 'Genel bakış', 'M3 13h8V3H3zm10 8h8V11h-8zM3 21h8v-6H3zm10-18v6h8V3z'],
  ['/krtf1krtf/siparisler', 'Siparişler', 'M4 4h16v4H4zm0 6h16v4H4zm0 6h16v4H4z'],
  ['/krtf1krtf/kullanicilar', 'Kullanıcılar', 'M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm-7 9a7 7 0 0 1 14 0z'],
  ['/krtf1krtf/odemeler', 'Ödemeler', 'M3 6h18v12H3zm0 4h18'],
  ['/krtf1krtf/kuyruk', 'Üretim kuyruğu', 'M4 6h16M4 12h10M4 18h6'],
  ['/krtf1krtf/webhooklar', 'Webhook olayları', 'M12 3v6m0 6v6M3 12h6m6 0h6'],
  ['/krtf1krtf/gunluk', 'İşlem günlüğü', 'M6 3h12v18H6zm3 5h6m-6 4h6m-6 4h4'],
  ['/krtf1krtf/sistem', 'Sistem', 'M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm0-5v3m0 12v3M3 12h3m12 0h3'],
];

export function AdminNav({ badges }: { badges: Record<string, number> }) {
  const path = usePathname();
  return (
    <nav className="flex gap-1 overflow-x-auto md:flex-col md:gap-0.5">
      {NAV.map(([h, l, d]) => {
        const on = h === '/krtf1krtf' ? path === '/krtf1krtf' : path.startsWith(h);
        const b = badges[h];
        return (
          <Link key={h} href={h} className={`flex shrink-0 items-center gap-2.5 px-3 py-2 text-[13.5px] font-semibold ${on ? 'bg-white text-ink' : 'text-white/75 hover:bg-white/10 hover:text-white'}`}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinejoin="round" aria-hidden><path d={d} /></svg>
            <span className="flex-1">{l}</span>
            {b ? <span className={`num min-w-[20px] px-1.5 text-center text-[11.5px] font-bold ${on ? 'bg-ink text-white' : 'bg-signal text-ink'}`}>{b}</span> : null}
          </Link>
        );
      })}
    </nav>
  );
}