"use client";

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { motion, AnimatePresence } from 'motion/react';
import { useTranslation } from '@/lib/i18n/context';
import { useNavVisibility } from '@/components/nav-visibility';

function HomeIcon({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" className={className} fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
      <path strokeLinecap="round" strokeLinejoin="round" d="M3 10.5L12 3l9 7.5M5 9.5V21h5v-6h4v6h5V9.5" />
    </svg>
  );
}

function HeartIcon({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" className={className} fill="currentColor" aria-hidden="true">
      <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
    </svg>
  );
}

function GearIcon({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" className={className} fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M10.3 4.3a2 2 0 013.4 0l.6.9a2 2 0 002 1l1-.3a2 2 0 012.5 2.5l-.3 1a2 2 0 001 2l.9.6a2 2 0 010 3.4l-.9.6a2 2 0 00-1 2l.3 1a2 2 0 01-2.5 2.5l-1-.3a2 2 0 00-2 1l-.6.9a2 2 0 01-3.4 0l-.6-.9a2 2 0 00-2-1l-1 .3a2 2 0 01-2.5-2.5l.3-1a2 2 0 00-1-2l-.9-.6a2 2 0 010-3.4l.9-.6a2 2 0 001-2l-.3-1a2 2 0 012.5-2.5l1 .3a2 2 0 002-1l.6-.9z"
      />
      <circle cx="12" cy="12" r="3" />
    </svg>
  );
}

const TABS = [
  { href: '/', key: 'home' as const, Icon: HomeIcon },
  { href: '/matches', key: 'matches' as const, Icon: HeartIcon },
  { href: '/settings', key: 'settings' as const, Icon: GearIcon },
];

/**
 * Bottom-Navigation mit drei Tabs (Home/Matches/Einstellungen). Wird nur im
 * (tabs)-Layout gerendert - auf dem Swipe-Screen und der Daten-loeschen-Seite
 * existiert sie nicht. Laesst sich ueber NavVisibilityProvider ausblenden
 * (z.B. im Erstellen-Wizard). Interaktiv wie die Sprachwahl: aktiver Tab wird
 * per layoutId-Pill hervorgehoben, Taps skalieren kurz.
 */
export function BottomNav() {
  const { t } = useTranslation();
  const pathname = usePathname();
  const { hidden } = useNavVisibility();

  return (
    <AnimatePresence>
      {!hidden && (
        <motion.nav
          initial={{ y: 96 }}
          animate={{ y: 0 }}
          exit={{ y: 120 }}
          transition={{ type: 'spring', stiffness: 300, damping: 32 }}
          className="fixed bottom-0 inset-x-0 z-50 px-4 pb-[calc(0.75rem+env(safe-area-inset-bottom,0px))]"
        >
          <div className="mx-auto max-w-sm flex items-center gap-1 rounded-full border border-white/10 bg-neutral-900 px-2 py-1.5 shadow-2xl">
            {TABS.map(({ href, key, Icon }) => {
              const active = href === '/' ? pathname === '/' : pathname.startsWith(href);
              return (
                <Link key={href} href={href} className="relative flex-1" aria-current={active ? 'page' : undefined}>
                  <motion.div
                    whileTap={{ scale: 0.88 }}
                    className="relative flex flex-col items-center gap-0.5 py-1 rounded-full"
                  >
                    {active && (
                      <motion.span
                        layoutId="nav-active-pill"
                        transition={{ type: 'spring', stiffness: 400, damping: 32 }}
                        className="absolute inset-0 rounded-full bg-yumder-pink"
                      />
                    )}
                    <Icon className={`relative z-10 w-5 h-5 transition-colors ${active ? 'text-white' : 'text-neutral-500'}`} />
                    <span className={`relative z-10 text-[10px] font-semibold transition-colors ${active ? 'text-white' : 'text-neutral-500'}`}>
                      {t.nav[key]}
                    </span>
                  </motion.div>
                </Link>
              );
            })}
          </div>
        </motion.nav>
      )}
    </AnimatePresence>
  );
}