"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import type { CommonContent } from "@/content/types";
import { type Locale } from "@/lib/i18n";
import { isComingSoonMode } from "@/lib/site";

type BottomNavProps = {
  locale: Locale;
  common: CommonContent;
};

export default function BottomNav({ locale, common }: BottomNavProps) {
  const pathname = usePathname();

  if (isComingSoonMode()) {
    return (
      <nav aria-label={common.navLabel} className="bottom-nav">
        <div className="container bottom-nav-inner">
          <div className="bottom-nav-links">
            <Link href={`/${locale}`} className="active" aria-current="page">
              <span aria-hidden className="nav-icon">
                ○
              </span>
              {common.nav.home}
            </Link>
          </div>
        </div>
      </nav>
    );
  }

  const normalizedPath = pathname !== "/" && pathname.endsWith("/") ? pathname.slice(0, -1) : pathname;
  const homePath = `/${locale}`;
  const aboutPath = `/${locale}/about`;
  const contactPath = `/${locale}/contact`;
  const isHome = normalizedPath === homePath;
  const isAbout = normalizedPath === aboutPath || normalizedPath.startsWith(`${aboutPath}/`);
  const isContact = normalizedPath === contactPath || normalizedPath.startsWith(`${contactPath}/`);

  return (
    <nav aria-label={common.navLabel} className="bottom-nav">
      <div className="container bottom-nav-inner">
        <div className="bottom-nav-links">
          <Link href={homePath} className={isHome ? "active" : undefined} aria-current={isHome ? "page" : undefined}>
            <span aria-hidden className="nav-icon">
              ○
            </span>
            {common.nav.home}
          </Link>
          <Link href={aboutPath} className={isAbout ? "active" : undefined} aria-current={isAbout ? "page" : undefined}>
            <span aria-hidden className="nav-icon">
              □
            </span>
            {common.nav.about}
          </Link>
          <Link
            href={contactPath}
            className={isContact ? "active" : undefined}
            aria-current={isContact ? "page" : undefined}
          >
            <span aria-hidden className="nav-icon">
              ◇
            </span>
            {common.nav.contact}
          </Link>
        </div>
      </div>
    </nav>
  );
}