import { useState } from "react";
import { Link, NavLink } from "react-router-dom";
import { motion } from "framer-motion";
import { useTranslation } from "react-i18next";
import LanguageSwitcher from "./LanguageSwitcher";

export default function Nav() {
    const [open, setOpen] = useState(false);
    const { t } = useTranslation();

    const linkBase =
        "px-3 py-2 rounded-md text-sm font-medium transition-colors text-white/80 hover:text-white";

    const active = ({ isActive }: { isActive: boolean }) =>
        `${linkBase} ${isActive ? "text-white" : ""}`;

    return (
        <motion.header
            initial={{ y: -20, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            transition={{ duration: 0.4 }}
            className="sticky top-0 z-50 w-full backdrop-blur bg-black/70 border-b border-gray-800"
        >
            <nav className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <div className="flex h-16 items-center justify-between">
                    {/* Brand */}
                    <Link to="/" className="flex items-center m-0 p-0" aria-label={t('nav.brandAlt')}>
                        <img
                            src="/images/logo.png"
                            alt={t('nav.brandAlt')}
                            className="block h-16 w-auto m-0 p-0 object-contain select-none"
                            draggable={false}
                        />
                    </Link>

                    {/* Desktop nav */}
                    <div className="hidden md:flex items-center gap-6">
                        <NavLink to="/" className={active} end>
                            {t('nav.home')}
                        </NavLink>
                        <NavLink to="/dashboard" className={active}>
                            {t('nav.dashboard')}
                        </NavLink>
                        <a href="#services" className={`${linkBase}`}>
                            {t('nav.services')}
                        </a>
                        <a href="#contact" className={`${linkBase}`}>
                            {t('nav.contact')}
                        </a>
                        <Link
                            to="/dashboard"
                            className="ml-2 inline-flex items-center gap-2 rounded-md bg-red-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-700"
                        >
                            {t('nav.bookService')}
                        </Link>
                        <LanguageSwitcher />
                    </div>

                    {/* Mobile toggle */}
                    <button
                        className="md:hidden inline-flex items-center justify-center rounded-md p-2 text-white/80 hover:bg-white/10"
                        aria-label="Toggle navigation"
                        onClick={() => setOpen((v) => !v)}
                    >
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            fill="none"
                            viewBox="0 0 24 24"
                            strokeWidth={1.5}
                            stroke="currentColor"
                            className="h-6 w-6"
                        >
                            {open ? (
                                <path
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    d="M6 18L18 6M6 6l12 12"
                                />
                            ) : (
                                <path
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
                                />
                            )}
                        </svg>
                    </button>
                </div>

                {/* Mobile menu */}
                {open && (
                    <div className="md:hidden pb-4">
                        <div className="flex flex-col gap-2">
                            <NavLink to="/" className={active} end onClick={() => setOpen(false)}>
                                {t('nav.home')}
                            </NavLink>
                            <NavLink to="/dashboard" className={active} onClick={() => setOpen(false)}>
                                {t('nav.dashboard')}
                            </NavLink>
                            <a href="#services" className={`${linkBase}`} onClick={() => setOpen(false)}>
                                {t('nav.services')}
                            </a>
                            <a href="#contact" className={`${linkBase}`} onClick={() => setOpen(false)}>
                                {t('nav.contact')}
                            </a>
                            <Link
                                to="/dashboard"
                                className="mt-2 inline-flex items-center justify-center rounded-md bg-red-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-700"
                                onClick={() => setOpen(false)}
                            >
                                {t('nav.bookService')}
                            </Link>
                            <div className="pt-2">
                                <LanguageSwitcher />
                            </div>
                        </div>
                    </div>
                )}
            </nav>
        </motion.header>
    );
}
