import Link from "next/link";
import Image from "next/image";
import * as LucideIcons from "lucide-react";
import type { LucideIcon } from "lucide-react";
import type { Locale, Product, Solution } from "@/types/content";
import { getProductInitial, sortProductsByShowroomOrder } from "@/lib/product-order";
import { localizedPath } from "@/lib/routing";
import { LanguageSwitcher } from "@/components/layout/LanguageSwitcher";
import { HeaderBehavior } from "@/components/layout/HeaderBehavior";

const navLabels = {
  en: {
    solutions: "Solutions",
    products: "Product",
    successStories: "Success Stories",
    roomDesigner: "Room Designer",
    insights: "Insight",
    about: "About"
  },
  id: {
    solutions: "Solusi",
    products: "Produk",
    successStories: "Success Stories",
    roomDesigner: "Room Designer",
    insights: "Insight",
    about: "Tentang"
  }
} as const;

type NavbarProps = {
  locale: Locale;
  path: string;
  solutions: Solution[];
  products: Product[];
};

const lucideIconMap = LucideIcons as unknown as Record<string, LucideIcon>;

function NavMegaCardIcon({ name }: { name?: string }) {
  const Icon = (name && lucideIconMap[name]) || LucideIcons.Sparkles;
  return (
    <span className="nav-mega-card-icon">
      <Icon size={20} strokeWidth={1.75} aria-hidden="true" />
    </span>
  );
}

export function Navbar({ locale, path, solutions, products }: NavbarProps) {
  const labels = navLabels[locale];
  const solutionItems = solutions.map((item) => ({
    label: item.title[locale],
    href: `/solutions/${item.slug}`,
    description: item.shortDescription[locale],
    category: item.eyebrow?.[locale] || "Solution",
    icon: item.icon
  }));
  const productItems = sortProductsByShowroomOrder(products).map((item, index) => ({
    label: item.title[locale],
    href: `/products/${item.slug}`,
    description: item.shortDescription[locale],
    category: item.category?.[locale] || (locale === "id" ? "Produk" : "Product"),
    icon: (item as Product & { icon?: string }).icon,
    fallbackInitial: getProductInitial(item.title[locale], index)
  }));

  return (
    <HeaderBehavior isHome>
      <nav className="container nav" aria-label="Primary navigation">
        <Link prefetch={false} href={localizedPath("/", locale)} className="brand" aria-label="Akarya home">
          <Image src="/logos/akarya/akarya-logo-full-white-blue.png" alt="Akarya" width={190} height={58} priority />
        </Link>
        <div className="nav-links">
          <div className="nav-menu nav-menu-wide">
            <Link className="nav-menu-trigger" prefetch={false} href={localizedPath("/solutions", locale)}>
              {labels.solutions}
            </Link>
            <div className="nav-mega nav-mega-solutions" aria-label={labels.solutions}>
              <div className="nav-mega-rail">
                <span>{labels.solutions}</span>
                <strong>{locale === "id" ? "Pilih setup ruang" : "Choose a room setup"}</strong>
                <Link prefetch={false} href={localizedPath("/solutions", locale)}>{locale === "id" ? "Semua solusi" : "All solutions"} →</Link>
              </div>
              <div className="nav-mega-list">
                {solutionItems.map((item) => (
                  <Link className="nav-mega-card" prefetch={false} key={item.href} href={localizedPath(item.href, locale)}>
                    <NavMegaCardIcon name={item.icon} />
                    <div>
                      <small>{item.category}</small>
                      <strong>{item.label}</strong>
                      <p>{item.description}</p>
                    </div>
                  </Link>
                ))}
              </div>
              <div className="nav-mega-preview">
                <span>{locale === "id" ? "Sales ready" : "Sales ready"}</span>
                <strong>{locale === "id" ? "AV & IT system planning yang mudah dipahami." : "Clear AV & IT system planning for every room."}</strong>
                <p>{locale === "id" ? "Mulai dari classroom, meeting room, LED display, signage, audio, sampai command center." : "From classrooms, meeting rooms, LED displays, signage, audio, to command centers."}</p>
              </div>
            </div>
          </div>
          <div className="nav-menu nav-menu-wide">
            <Link className="nav-menu-trigger" prefetch={false} href={localizedPath("/products", locale)}>
              {labels.products}
            </Link>
            <div className="nav-mega nav-mega-products" aria-label={labels.products}>
              <div className="nav-mega-rail">
                <span>{labels.products}</span>
                <strong>{locale === "id" ? "Kategori produk" : "Product categories"}</strong>
                <Link prefetch={false} href={localizedPath("/products", locale)}>{locale === "id" ? "Semua produk" : "All products"} →</Link>
              </div>
              <div className="nav-mega-list nav-mega-product-list">
                {productItems.map((item) => (
                  <Link className="nav-mega-card" prefetch={false} key={item.href} href={localizedPath(item.href, locale)}>
                    {item.icon ? (
                      <NavMegaCardIcon name={item.icon} />
                    ) : (
                      <span className="nav-mega-card-icon nav-mega-card-fallback" aria-hidden="true">
                        {item.fallbackInitial}
                      </span>
                    )}
                    <div>
                      <small>{item.category}</small>
                      <strong>{item.label}</strong>
                      <p>{item.description}</p>
                    </div>
                  </Link>
                ))}
              </div>
              <div className="nav-mega-preview nav-mega-product-preview">
                <span>{locale === "id" ? "Product ecosystem" : "Product ecosystem"}</span>
                <strong>{locale === "id" ? "Perangkat untuk display, audio, network, compute, dan software." : "Devices for display, audio, network, compute, and software."}</strong>
                <p>{locale === "id" ? "Dipilih untuk kebutuhan project, kompatibilitas sistem, dan support jangka panjang." : "Selected around project needs, system compatibility, and long-term support."}</p>
              </div>
            </div>
          </div>
          <Link prefetch={false} href={localizedPath("/success-stories", locale)}>{labels.successStories}</Link>
          <Link prefetch={false} href={localizedPath("/room-designer", locale)}>{labels.roomDesigner}</Link>
          <Link prefetch={false} href={localizedPath("/insights", locale)}>{labels.insights}</Link>
          <Link prefetch={false} href={localizedPath("/about", locale)}>{labels.about}</Link>
        </div>
        <div className="nav-actions">
          <LanguageSwitcher locale={locale} path={path} />
          <Link className="btn btn-secondary" prefetch={false} href={localizedPath("/talk-to-akarya", locale)}>
            Talk to Akarya
          </Link>
          <details className="mobile-nav">
            <summary aria-label="Open navigation menu">
              <span aria-hidden="true"></span>
              <span aria-hidden="true"></span>
              <span aria-hidden="true"></span>
            </summary>
            <div className="mobile-nav-panel">
              <Link prefetch={false} href={localizedPath("/solutions", locale)}>{labels.solutions}</Link>
              {solutionItems.map((item) => (
                <Link className="mobile-sub-link" prefetch={false} key={item.href} href={localizedPath(item.href, locale)}>
                  {item.label}
                </Link>
              ))}
              <Link prefetch={false} href={localizedPath("/products", locale)}>{labels.products}</Link>
              {productItems.map((item) => (
                <Link className="mobile-sub-link" prefetch={false} key={item.href} href={localizedPath(item.href, locale)}>
                  {item.label}
                </Link>
              ))}
              <Link prefetch={false} href={localizedPath("/success-stories", locale)}>{labels.successStories}</Link>
              <Link prefetch={false} href={localizedPath("/room-designer", locale)}>{labels.roomDesigner}</Link>
              <Link prefetch={false} href={localizedPath("/insights", locale)}>{labels.insights}</Link>
              <Link prefetch={false} href={localizedPath("/about", locale)}>{labels.about}</Link>
              <Link className="mobile-primary-link" prefetch={false} href={localizedPath("/talk-to-akarya", locale)}>
                Talk to Akarya
              </Link>
            </div>
          </details>
        </div>
      </nav>
    </HeaderBehavior>
  );
}