import Link from "next/link";
import { Check } from "lucide-react";

import type {
  ProductPricingLabels,
  ProductPricingPlan,
} from "@/data/product-pricing.data";
import type { ProductTone } from "@/data/products.data";
import type { Locale } from "@/lib/locales";

type PricingCardPlan = Omit<ProductPricingPlan, "description" | "name"> & {
  badge?: string;
  ctaHref?: string;
  ctaLabel?: string;
  description?: string;
  name: string;
};

const billingCopy = {
  en: {
    year: "/ Year",
    yearly: "Yearly plans - 2 months included",
    gst: "GST Included",
  },
  hi: {
    year: "/ वर्ष",
    yearly: "वार्षिक प्लान - 2 महीने शामिल",
    gst: "GST शामिल",
  },
  gu: {
    year: "/ વર્ષ",
    yearly: "વાર્ષિક પ્લાન - 2 મહિના સામેલ",
    gst: "GST સામેલ",
  },
} satisfies Record<Locale, Record<string, string>>;

const palettes = {
  violet: {
    section: "border-[#e3e1fb] bg-[#f8f7ff]",
    card: "border-[#e3e1fb]",
    featured: "border-[#7564e6]",
    badge: "bg-[#7564e6]",
    featuredCard:
      "border-[#7564e6] bg-gradient-to-br from-[#6755de] to-[#8669ef] text-white",
    featuredBadge: "bg-[#4937b9]",
    featuredCta: "bg-white text-[#5d49ca]",
    price: "text-[#655ddd]",
    button: "bg-[#edeaff] text-[#655ddd]",
    featuredButton: "bg-[#7564e6] text-white",
    check: "text-[#7564e6]",
  },
  blue: {
    section: "border-[#d9e8fb] bg-[#f3f8ff]",
    card: "border-[#d9e8fb]",
    featured: "border-[#3c83df]",
    badge: "bg-[#3c83df]",
    featuredCard:
      "border-[#2563eb] bg-gradient-to-br from-[#2563eb] via-[#3677ed] to-[#06b6d4] text-white",
    featuredBadge: "bg-[#1746a2]",
    featuredCta: "bg-white text-[#1d4ed8]",
    price: "text-[#3678dc]",
    button: "bg-[#e8f2ff] text-[#3678dc]",
    featuredButton: "bg-[#3c83df] text-white",
    check: "text-[#3c83df]",
  },
  green: {
    section: "border-[#dce9d5] bg-[#f4faef]",
    card: "border-[#d7e8ce]",
    featured: "border-[#49ad51]",
    badge: "bg-[#49ad51]",
    featuredCard:
      "border-[#10b981] bg-gradient-to-br from-[#16835d] via-[#249866] to-[#14b8a6] text-white",
    featuredBadge: "bg-[#0f766e]",
    featuredCta: "bg-white text-[#0f766e]",
    price: "text-[#287d34]",
    button: "bg-[#e7f4e8] text-[#287d34]",
    featuredButton: "bg-[#49b34f] text-white",
    check: "text-[#49ad51]",
  },
  buildpro: {
    section: "border-[#d6efe7] bg-[#f2fbf7]",
    card: "border-[#d6efe7]",
    featured: "border-[#14b88a]",
    badge: "bg-[#14b88a]",
    featuredCard:
      "border-[#14b88a] bg-gradient-to-br from-[#14b88a] via-[#249866] to-[#06b6d4] text-white",
    featuredBadge: "bg-[#0f766e]",
    featuredCta: "bg-white text-[#0f766e]",
    price: "text-[#0f8f68]",
    button: "bg-[#e4f8f1] text-[#0f8f68]",
    featuredButton: "bg-[#14b88a] text-white",
    check: "text-[#14b88a]",
  },
} satisfies Record<ProductTone | "buildpro", Record<string, string>>;

export default function ProductPricingCards({
  description,
  addOnsHref,
  addOnsLabel,
  eyebrow,
  footer,
  labels,
  locale,
  plans,
  registerHref,
  title,
  tone,
}: {
  description?: string;
  eyebrow?: string;
  footer?: string;
  labels: ProductPricingLabels;
  locale: Locale;
  plans: PricingCardPlan[];
  registerHref: string;
  title?: string;
  tone: ProductTone | "buildpro";
  addOnsHref?: string;
  addOnsLabel?: string;
}) {
  const billing = billingCopy[locale];
  const palette = palettes[tone];

  return (
    <section
      id="pricing"
      className={`scroll-mt-24 border-y px-6 py-12 xl:px-8 ${palette.section}`}
    >
      {title ? (
        <div className="mx-auto mb-8 max-w-2xl text-center">
          {eyebrow ? (
            <p
              className={`text-[11px] font-extrabold uppercase tracking-[0.16em] ${palette.price}`}
            >
              {eyebrow}
            </p>
          ) : null}

          <h2 className="mt-3 text-3xl font-extrabold tracking-[-0.055em] text-[#111a35] sm:text-4xl">
            {title}
          </h2>

          {description ? (
            <p className="mt-3 text-[15px] leading-7 text-[#657694]">
              {description}
            </p>
          ) : null}
        </div>
      ) : null}

      <div className="mb-8 flex justify-center">
        <span
          className={`rounded-full border border-white/90 bg-white px-4 py-2 text-[12px] font-extrabold shadow-[0_6px_18px_rgba(31,48,94,0.08)] ${palette.price}`}
        >
          {billing.yearly}
        </span>
      </div>

      <div className="mx-auto grid max-w-390 gap-4 sm:grid-cols-2 xl:grid-cols-4">
        {plans.map((plan) => (
          <article
            key={plan.name}
            className={`relative flex h-full flex-col rounded-[20px] border p-6 shadow-[0_8px_16px_rgba(31,48,94,0.12)] ${
              plan.featured ? palette.featuredCard : `bg-white ${palette.card}`
            }`}
          >
            {plan.featured ? (
              <span
                className={`absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 rounded-full px-7 py-2 text-[14px] font-extrabold text-white ${palette.featuredBadge}`}
              >
                {plan.badge ?? labels.mostPopular}
              </span>
            ) : null}

            <h3
              className={`text-[24px] font-extrabold tracking-[-0.04em] ${
                plan.featured ? "text-white" : "text-[#111a35]"
              }`}
            >
              {plan.name}
            </h3>

            {plan.description ? (
              <p
                className={`mt-2 min-h-14 text-[15px] leading-7 ${
                  plan.featured ? "text-white/80" : "text-[#657694]"
                }`}
              >
                {plan.description}
              </p>
            ) : null}

            <div
              className={`mt-3 flex min-h-14 items-end gap-1.5 ${
                plan.featured ? "text-white" : palette.price
              }`}
            >
              {isCustomPrice(plan.price) ? (
                <strong className="text-[42px] font-extrabold tracking-[-0.055em]">
                  {plan.price}
                </strong>
              ) : (
                <>
                  <strong className="text-[42px] font-extrabold tracking-[-0.055em]">
                    ₹ {formatAnnualPrice(plan.price, locale)}
                  </strong>
                  <span
                    className={`pb-1 text-[15px] ${
                      plan.featured ? "text-white/75" : "text-[#65718b]"
                    }`}
                  >
                    {billing.year}
                  </span>
                </>
              )}
            </div>

            <div className="mt-3">
              <span
                className={`inline-flex rounded-full px-3 py-1 text-[11px] font-extrabold ${
                  plan.featured ? "bg-white/15 text-white" : `${palette.button}`
                }`}
              >
                {billing.gst}
              </span>
            </div>

            <Link
              href={plan.ctaHref ?? registerHref}
              className={`mt-6 flex h-14.5  items-center justify-center rounded-[14px] text-[15px] font-extrabold transition hover:-translate-y-0.5 ${
                plan.featured ? palette.featuredCta : palette.button
              }`}
            >
              {plan.ctaLabel ?? labels.getStarted}
            </Link>

            <div className="mt-6 space-y-3">
              {plan.features.map((feature) => {
                const featureText =
                  typeof feature === "string" ? feature : feature.text;
                const isIncluded =
                  typeof feature === "string"
                    ? true
                    : feature.included !== false;

                return (
                  <p
                    key={featureText}
                    className={`flex items-start gap-3 text-[14px] leading-6 ${
                      plan.featured
                        ? isIncluded
                          ? "text-white/88"
                          : "text-white/55"
                        : isIncluded
                          ? ""
                          : "text-slate-400"
                    }`}
                  >
                    {isIncluded ? (
                      <Check
                        size={17}
                        strokeWidth={3.5}
                        className={`mt-0.5 shrink-0 ${
                          plan.featured ? "text-white" : palette.check
                        }`}
                      />
                    ) : (
                      <span
                        className={`mt-0.5 inline-flex h-[17px] w-[17px] shrink-0 items-center justify-center text-lg leading-none ${
                          plan.featured ? "text-white/65" : "text-slate-400"
                        }`}
                      >
                        —
                      </span>
                    )}
                    <span>{featureText}</span>
                  </p>
                );
              })}
            </div>
          </article>
        ))}
      </div>
        {addOnsHref ? (
        <div className="mt-8 flex justify-center">
          <Link
            href={addOnsHref}
            className={`inline-flex h-12 items-center justify-center rounded-full px-6 text-sm font-extrabold transition hover:-translate-y-0.5 ${palette.button}`}
          >
            {addOnsLabel ?? "View Add-ons"}
          </Link>
        </div>
      ) : null}
    </section>
  );
}

function formatAnnualPrice(price: string, locale: Locale) {
  const value = Number(price.replaceAll(",", ""));
  return new Intl.NumberFormat(`${locale}-IN`).format(value);
}

function isCustomPrice(price: string) {
  return !/\d/.test(price);
}