import Link from "next/link";
import { Building2, ChevronDown, Construction, Home, Package } from "lucide-react";

import type { Locale } from "@/lib/locales";
import { localizedPath, type ProductSlug } from "@/lib/routes";

const products = [
  { slug: "pureestate", name: "PureEstate", icon: Building2 },
  { slug: "buildpro", name: "BuildPro", icon: Construction },
  { slug: "societypro", name: "SocietyPro", icon: Home },
] satisfies { slug: ProductSlug; name: string; icon: typeof Building2 }[];

const switcherCopy: Record<Locale, { descriptions: Record<ProductSlug, string>; title: string }> = {
  en: { title: "Platforms", descriptions: { pureestate: "Real estate CRM and sales", buildpro: "Builder projects and execution", societypro: "Society billing and residents" } },
  hi: { title: "प्लेटफ़ॉर्म्स", descriptions: { pureestate: "रियल एस्टेट CRM और सेल्स", buildpro: "बिल्डर प्रोजेक्ट और कार्य", societypro: "सोसायटी बिलिंग और निवासी" } },
  gu: { title: "પ્લેટફોર્મ્સ", descriptions: { pureestate: "રિયલ એસ્ટેટ CRM અને સેલ્સ", buildpro: "બિલ્ડર પ્રોજેક્ટ અને કામગીરી", societypro: "સોસાયટી બિલિંગ અને રહેવાસી" } },
};

export default function ProductSwitcher({
  currentProduct,
  locale,
  mobile = false,
  variant = "default",
}: {
  currentProduct: ProductSlug;
  locale: Locale;
  mobile?: boolean;
  variant?: "default" | "buildpro";
}) {
  const accent = variant === "buildpro" ? "text-[#14B88A]" : "text-[#5865e8]";
  const active = variant === "buildpro" ? "border-[#14B88A]/30 bg-[#EAFBF7]" : "border-[#d8dcff] bg-[#f3f4ff]";
  const copy = switcherCopy[locale];
  const items = (
    <div className={mobile ? "mt-3 grid gap-2" : "grid gap-1"}>
      {products.map((product) => {
        const Icon = product.icon;
        return (
          <Link
            key={product.slug}
            href={localizedPath(locale, `/products/${product.slug}`)}
            className={`flex items-center gap-3 rounded-xl border px-3 py-2.5 transition hover:-translate-y-0.5 hover:shadow-sm ${
              product.slug === currentProduct ? active : "border-transparent bg-white hover:border-[#e5e9f4]"
            }`}
          >
            <span className={`grid h-9 w-9 shrink-0 place-items-center rounded-xl bg-white shadow-sm ${accent}`}><Icon size={18} /></span>
            <span className="min-w-0">
              <strong className="block text-[12px] font-extrabold text-[#263252]">{product.name}</strong>
              <span className="block truncate text-[10px] text-[#7a879e]">{copy.descriptions[product.slug]}</span>
            </span>
          </Link>
        );
      })}
    </div>
  );

  if (mobile) {
    return (
      <section className="mt-3 rounded-2xl border border-[#e5e9f4] bg-[#fbfcff] p-3">
        <h3 className="flex items-center gap-2 text-[12px] font-extrabold uppercase tracking-[0.12em] text-[#69758d]"><Package size={15} className={accent} />{copy.title}</h3>
        {items}
      </section>
    );
  }

  return (
    <details className="group relative">
      <summary className="flex cursor-pointer list-none items-center gap-1.5 rounded-lg px-2 py-2 text-[12px] font-bold text-[#57637b] transition hover:bg-[#f5f7fc]">
        <Package size={15} className={accent} />{copy.title}<ChevronDown size={13} className="transition group-open:rotate-180" />
      </summary>
      <div className="absolute left-0 top-11 z-20 w-72 rounded-2xl border border-[#e5e9f4] bg-white p-2 shadow-[0_18px_45px_rgba(28,41,84,0.14)]">
        {items}
      </div>
    </details>
  );
}