'use client';

import React from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Home, Swords, Radio, User, Wallet } from 'lucide-react';

const tabs = [
  { href: '/', label: 'Home', icon: Home, exact: true },
  { href: '/fantasy', label: 'Contests', icon: Swords },
  { href: '/matches', label: 'Live', icon: Radio, matchPrefix: '/matches' },
  { href: '/wallet', label: 'Wallet', icon: Wallet },
  { href: '/profile', label: 'Account', icon: User },
];

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

  return (
    <nav
      className="fixed inset-x-0 bottom-0 z-40 px-3 pb-[max(0.5rem,env(safe-area-inset-bottom))] pt-1 md:hidden"
      aria-label="Primary"
    >
      <div className="mx-auto grid max-w-app grid-cols-5 overflow-hidden rounded-2xl border border-d11-line/90 bg-white/95 shadow-dock backdrop-blur-xl">
        {tabs.map((t) => {
          const prefix = (t as { matchPrefix?: string }).matchPrefix;
          const active = t.exact
            ? pathname === t.href
            : prefix
              ? pathname.startsWith(prefix)
              : pathname.startsWith(t.href.split('?')[0]);
          const Icon = t.icon;
          return (
            <Link
              key={t.href}
              href={t.href}
              prefetch={true}
              className="relative flex min-h-[56px] cursor-pointer flex-col items-center justify-center gap-0.5 transition active:scale-95"
            >
              {active && (
                <span className="absolute inset-x-4 top-0 h-[3px] rounded-b-full bg-d11-red" />
              )}
              <span
                className={`flex h-8 w-8 items-center justify-center rounded-xl transition ${
                  active
                    ? 'bg-d11-soft text-d11-red shadow-sm'
                    : 'text-gray-400'
                }`}
              >
                <Icon className="h-[18px] w-[18px]" strokeWidth={active ? 2.5 : 2} />
              </span>
              <span
                className={`text-[10px] font-bold leading-none ${
                  active ? 'text-d11-red' : 'text-gray-400'
                }`}
              >
                {t.label}
              </span>
            </Link>
          );
        })}
      </div>
    </nav>
  );
}