'use client';

import Image from 'next/image';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { logoutAction } from '@/app/admin/actions';

const LINKS = [
  { href: '/admin', label: 'Genel bakış', icon: 'grid' },
  { href: '/admin/urunler', label: 'Ürünler', icon: 'box' },
  { href: '/admin/kategoriler', label: 'Kategoriler', icon: 'layers' },
  { href: '/admin/mesajlar', label: 'Mesajlar', icon: 'mail' },
  { href: '/admin/ayarlar', label: 'Site ayarları', icon: 'gear' },
];

export default function Sidebar({ unread }: { unread: number }) {
  const pathname = usePathname();

  return (
    <aside className="flex w-full shrink-0 flex-col bg-cocoa-900 lg:h-screen lg:w-64 lg:sticky lg:top-0">
      <div className="flex items-center gap-3 border-b border-white/10 px-5 py-5">
        <Image src="/images/logo-light.png" alt="" width={190} height={200} className="h-9 w-auto" />
        <div className="min-w-0">
          <p className="truncate text-sm font-medium text-cream-50">Yönetim Paneli</p>
          <p className="truncate text-[0.7rem] uppercase tracking-wider text-gold-400">
            BUEL Gurme
          </p>
        </div>
      </div>

      <nav className="flex flex-1 flex-col gap-1 overflow-x-auto p-3 lg:overflow-visible">
        <div className="flex gap-1 lg:flex-col">
          {LINKS.map((l) => {
            const active = l.href === '/admin' ? pathname === '/admin' : pathname.startsWith(l.href);
            return (
              <Link
                key={l.href}
                href={l.href}
                className={`admin-link whitespace-nowrap ${active ? 'admin-link-active' : ''}`}
              >
                <NavIcon name={l.icon} />
                {l.label}
                {l.href === '/admin/mesajlar' && unread > 0 && (
                  <span className="ml-auto rounded-full bg-gold-500 px-2 py-0.5 text-[0.65rem] font-semibold text-white">
                    {unread}
                  </span>
                )}
              </Link>
            );
          })}
        </div>
      </nav>

      <div className="space-y-1 border-t border-white/10 p-3">
        <Link href="/" target="_blank" className="admin-link">
          <NavIcon name="external" />
          Siteyi görüntüle
        </Link>
        <form action={logoutAction}>
          <button type="submit" className="admin-link w-full text-left">
            <NavIcon name="logout" />
            Çıkış yap
          </button>
        </form>
      </div>
    </aside>
  );
}

function NavIcon({ name }: { name: string }) {
  const p = {
    width: 16,
    height: 16,
    viewBox: '0 0 24 24',
    fill: 'none',
    stroke: 'currentColor',
    strokeWidth: 1.7,
    strokeLinecap: 'round' as const,
    strokeLinejoin: 'round' as const,
    className: 'shrink-0',
  };
  switch (name) {
    case 'grid':
      return (
        <svg {...p}>
          <rect x="3" y="3" width="7.5" height="7.5" rx="1.5" />
          <rect x="13.5" y="3" width="7.5" height="7.5" rx="1.5" />
          <rect x="3" y="13.5" width="7.5" height="7.5" rx="1.5" />
          <rect x="13.5" y="13.5" width="7.5" height="7.5" rx="1.5" />
        </svg>
      );
    case 'box':
      return (
        <svg {...p}>
          <path d="M21 8.5v7a2 2 0 0 1-1 1.7l-6 3.4a2 2 0 0 1-2 0l-6-3.4a2 2 0 0 1-1-1.7v-7a2 2 0 0 1 1-1.7l6-3.4a2 2 0 0 1 2 0l6 3.4a2 2 0 0 1 1 1.7Z" />
          <path d="m3.3 7.5 8.7 5 8.7-5M12 22v-9.5" />
        </svg>
      );
    case 'layers':
      return (
        <svg {...p}>
          <path d="m12 2.5 9.5 5-9.5 5-9.5-5 9.5-5Z" />
          <path d="m2.5 16.5 9.5 5 9.5-5M2.5 12l9.5 5 9.5-5" />
        </svg>
      );
    case 'mail':
      return (
        <svg {...p}>
          <rect x="2.5" y="4.5" width="19" height="15" rx="2.5" />
          <path d="m3 7 9 6 9-6" />
        </svg>
      );
    case 'gear':
      return (
        <svg {...p}>
          <circle cx="12" cy="12" r="3" />
          <path d="M19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-1.8-.3 1.6 1.6 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1A1.6 1.6 0 0 0 9 19.4a1.6 1.6 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.6 1.6 0 0 0 .3-1.8 1.6 1.6 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1A1.6 1.6 0 0 0 4.6 9a1.6 1.6 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.6 1.6 0 0 0 1.8.3H9a1.6 1.6 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.6 1.6 0 0 0 1 1.5 1.6 1.6 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.6 1.6 0 0 0-.3 1.8V9a1.6 1.6 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.6 1.6 0 0 0-1.5 1Z" />
        </svg>
      );
    case 'external':
      return (
        <svg {...p}>
          <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
          <path d="M15 3h6v6M10 14 21 3" />
        </svg>
      );
    default:
      return (
        <svg {...p}>
          <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9" />
        </svg>
      );
  }
}