'use client'

import Link from 'next/link'
import { useRouter } from 'next/router'
import clsx from 'clsx'
import { explorerOperationsSurfaces } from '@/data/explorerOperations'

function normalizePath(path: string): string {
  if (path.length > 1 && path.endsWith('/')) {
    return path.slice(0, -1)
  }
  return path
}

export default function OperationsSurfaceNav({ className }: { className?: string }) {
  const router = useRouter()
  const currentPath = normalizePath(router.pathname)

  return (
    <nav aria-label="Operations surfaces" className={clsx('mb-6', className)}>
      <details className="group rounded-2xl border border-gray-200 bg-gray-50/80 dark:border-gray-800 dark:bg-gray-900/40 md:hidden">
        <summary className="cursor-pointer list-none px-4 py-3 text-sm font-semibold text-gray-900 dark:text-white [&::-webkit-details-marker]:hidden">
          <span className="flex items-center justify-between gap-3">
            Jump to operations surface
            <span className="text-xs font-normal uppercase tracking-wide text-gray-500 group-open:hidden">Show</span>
            <span className="hidden text-xs font-normal uppercase tracking-wide text-gray-500 group-open:inline">Hide</span>
          </span>
        </summary>
        <ul className="space-y-1 border-t border-gray-200 px-2 py-2 dark:border-gray-800">
          {explorerOperationsSurfaces.map((surface) => {
            const active = currentPath === surface.href
            return (
              <li key={surface.href}>
                <Link
                  href={surface.href}
                  className={clsx(
                    'block rounded-xl px-3 py-2 transition',
                    active
                      ? 'bg-primary-50 text-primary-700 dark:bg-primary-950/40 dark:text-primary-200'
                      : 'text-gray-700 hover:bg-white dark:text-gray-300 dark:hover:bg-gray-950/60',
                  )}
                >
                  <div className="text-sm font-semibold">{surface.label}</div>
                  <div className="text-xs text-gray-500 dark:text-gray-400">{surface.description}</div>
                </Link>
              </li>
            )
          })}
        </ul>
      </details>

      <div className="hidden md:block">
        <div className="text-xs font-semibold uppercase tracking-[0.2em] text-gray-500 dark:text-gray-400">
          Operations surfaces
        </div>
        <div className="mt-3 flex flex-wrap gap-2">
          {explorerOperationsSurfaces.map((surface) => {
            const active = currentPath === surface.href
            return (
              <Link
                key={surface.href}
                href={surface.href}
                title={surface.description}
                className={clsx(
                  'rounded-full border px-3 py-1.5 text-sm font-medium transition',
                  active
                    ? 'border-primary-500 bg-primary-50 text-primary-700 dark:border-primary-400 dark:bg-primary-950/40 dark:text-primary-200'
                    : 'border-gray-200 text-gray-700 hover:border-primary-300 hover:text-primary-600 dark:border-gray-700 dark:text-gray-300 dark:hover:border-primary-500 dark:hover:text-primary-300',
                )}
              >
                {surface.label}
              </Link>
            )
          })}
        </div>
      </div>
    </nav>
  )
}
