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

import ProductPricingCards from "@/components/products/ProductPricingCards";
import {
  getProductPricingLabels,
  getProductPricingPlans,
} from "@/data/product-pricing.data";
import type { Product } from "@/data/products.data";
import { getProductLinks } from "@/data/products.data";
import type { Locale } from "@/lib/locales";

export default function ProductPricing({
  locale,
  product,
}: {
  locale: Locale;
  product: Product;
}) {
  const addOnsLinkLabel = {
    en: "View Add-ons",
    hi: "Add-ons देखें",
    gu: "Add-ons જુઓ",
  } satisfies Record<Locale, string>;

  const links = getProductLinks(locale, product);
  const labels = getProductPricingLabels(locale);
  const plans = getProductPricingPlans(locale, product);

  if (product.slug === "societypro") {
    /*
      SocietyPro old multi-card pricing backup.
      Do not remove this code.

      <ProductPricingCards
        labels={labels}
        locale={locale}
        plans={plans}
        registerHref={links.register}
        tone={product.tone}
        addOnsHref={`/${locale}/products/${product.slug}/add-ons`}
        addOnsLabel={addOnsLinkLabel[locale]}
      />
    */

    return (
      <SocietyPerFlatPricing
        ctaLabel={labels.getStarted}
        locale={locale}
        registerHref={links.register}
      />
    );
  }

  return (
    <ProductPricingCards
      labels={labels}
      locale={locale}
      plans={plans}
      registerHref={links.register}
      tone={product.tone}
      addOnsHref={`/${locale}/products/${product.slug}/add-ons`}
      addOnsLabel={addOnsLinkLabel[locale]}
    />
  );
}

const societyPricingCopy = {
  en: {
    eyebrow: "Simple Per Flat Pricing",
    title: "Society Management Made Simple",
    description:
      "Pay only for the flats you manage. Transparent pricing with essential features included.",
    badge: "SocietyPro Pricing",
    plan: "One Simple Plan For Every Society",
    planDescription:
      "Perfect for apartments, residential societies and gated communities.",
    compareLabel: "Regular",
    currentLabel: "Launch Offer",
    priceSuffix: "+ GST / per flat / per year",
    gst: "GST Extra",
    included: "Everything Included",
    billingNote: "Add any number of flats. Billing is calculated per flat.",
    features: [
      "Add any number of flats",
      "Admin and resident management",
      "Unit, parking and vehicle directory",
      "Visitor and gate records",
      "Maintenance billing and collections",
      "Complaint management and helpdesk",
      "Notices and announcements",
      "Facility booking and reservations",
      "Reports and priority onboarding",
    ],
  },
  hi: {
    eyebrow: "सरल प्रति फ्लैट Pricing",
    title: "Society Management अब आसान",
    description:
      "जितने flats manage करें, उतना ही payment करें. जरूरी features included हैं.",
    badge: "SocietyPro Pricing",
    plan: "हर Society के लिए एक Simple Plan",
    planDescription:
      "Apartments, residential societies और gated communities के लिए perfect.",
    compareLabel: "Regular",
    currentLabel: "Launch Offer",
    priceSuffix: "+ GST / प्रत्येक फ्लैट के लिए / प्रति वर्ष",
    gst: "GST Extra",
    included: "सब कुछ शामिल है",
    billingNote:
      "कितने भी flats add करें. Billing हर flat के हिसाब से calculate होगी.",
    features: [
      "कितने भी flats add करें",
      "Admin और resident management",
      "Unit, parking और vehicle directory",
      "Visitor और gate records",
      "Maintenance billing और collections",
      "Complaint management और helpdesk",
      "Notices और announcements",
      "Facility booking और reservations",
      "Reports और priority onboarding",
    ],
  },
  gu: {
    eyebrow: "સરળ Per Flat Pricing",
    title: "Society Management હવે સરળ",
    description:
      "તમે જેટલા flats manage કરો એટલું જ payment કરો. જરૂરી features included છે.",
    badge: "SocietyPro Pricing",
    plan: "દરેક Society માટે એક Simple Plan",
    planDescription:
      "Apartments, residential societies અને gated communities માટે perfect.",
    compareLabel: "Regular",
    currentLabel: "Launch Offer",
    priceSuffix: "+ GST / દરેક ફ્લેટ દીઠ / દર વર્ષે",
    gst: "GST Extra",
    included: "બધું સામેલ છે",
    billingNote:
      "કેટલાં પણ flats add કરો. Billing દરેક flat પ્રમાણે calculate થશે.",
    features: [
      "કેટલાં પણ flats add કરો",
      "Admin અને resident management",
      "Unit, parking અને vehicle directory",
      "Visitor અને gate records",
      "Maintenance billing અને collections",
      "Complaint management અને helpdesk",
      "Notices અને announcements",
      "Facility booking અને reservations",
      "Reports અને priority onboarding",
    ],
  },
} satisfies Record<
  Locale,
  {
    eyebrow: string;
    title: string;
    description: string;
    badge: string;
    plan: string;
    planDescription: string;
    compareLabel: string;
    currentLabel: string;
    priceSuffix: string;
    gst: string;
    included: string;
    billingNote: string;
    features: string[];
  }
>;

function SocietyPerFlatPricing({
  ctaLabel,
  locale,
  registerHref,
}: {
  ctaLabel: string;
  locale: Locale;
  registerHref: string;
}) {
  const copy = societyPricingCopy[locale];
  const splitIndex = Math.ceil(copy.features.length / 2);

  const featureColumns = [
    copy.features.slice(0, splitIndex),
    copy.features.slice(splitIndex),
  ];

  return (
    <section
      id="pricing"
      className="relative scroll-mt-24 overflow-hidden border-y border-[#d8ecd6] bg-[radial-gradient(circle_at_top_left,#e9f8ec_0,#fbfefb_42%,#ffffff_100%)] px-4 py-10 sm:px-6 sm:py-12 lg:px-8"
    >
      <div className="pointer-events-none absolute -left-24 top-8 h-60 w-60 rounded-full bg-[#dff4e4]/80 blur-2xl" />
      <div className="pointer-events-none absolute -right-28 bottom-0 h-72 w-72 rounded-full bg-[#daf4df]/80 blur-2xl" />

      <div className="relative mx-auto max-w-6xl">
        <div className="mx-auto max-w-2xl text-center">
          <span className="inline-flex items-center rounded-full border border-[#cfead2] bg-white px-4 py-1.5 text-[11px] font-extrabold text-[#17813a] shadow-sm">
            {copy.eyebrow}
          </span>

          <h2 className="mt-3 text-2xl font-black tracking-[-0.04em] text-[#071735] sm:text-3xl lg:text-4xl">
            {copy.title}
          </h2>

          <p className="mx-auto mt-2 max-w-xl text-sm font-medium leading-6 text-[#586682] sm:text-[15px]">
            {copy.description}
          </p>
        </div>

        <div className="mx-auto mt-7 max-w-5xl overflow-hidden rounded-3xl border border-[#a9d7af] bg-white text-left shadow-[0_18px_50px_rgba(22,101,52,0.12)]">
          <div className="grid lg:grid-cols-[0.85fr_1.15fr]">
            <article className="relative p-5 sm:p-6 lg:p-7">
              <div className="flex flex-wrap items-center justify-between gap-2">
                <span className="inline-flex rounded-full bg-[#e8f6e9] px-3 py-1 text-[10px] font-extrabold text-[#18803b]">
                  {copy.badge}
                </span>

                <span className="inline-flex rounded-full bg-[#f2fbf3] px-3 py-1 text-[10px] font-black text-[#18803b]">
                  {copy.currentLabel}
                </span>
              </div>

              <h3 className="mt-4 text-xl font-black tracking-[-0.035em] text-[#071735] sm:text-2xl">
                {copy.plan}
              </h3>

              <p className="mt-2 max-w-md text-[13px] font-semibold leading-6 text-[#394664]">
                {copy.planDescription}
              </p>

              <div className="mt-5 rounded-2xl border border-[#dcefe0] bg-[#fbfffb] p-4">
                <div className="flex flex-wrap items-center gap-2">
                  <span className="text-[10px] font-extrabold uppercase tracking-[0.12em] text-[#718096]">
                    {copy.compareLabel}
                  </span>

                  <span className="text-lg font-black text-[#94a3b8] line-through decoration-[#ef4444] decoration-2">
                    &#8377;599
                  </span>
                </div>

                <div className="mt-2 flex flex-wrap items-end gap-x-2 gap-y-1 text-[#287d34]">
                  <strong className="text-[42px] font-black leading-none tracking-[-0.07em] sm:text-[52px]">
                    &#8377;299
                  </strong>

                  <span className="pb-1.5 text-xs font-extrabold text-[#4d5b78] sm:text-[13px]">
                    {copy.priceSuffix}
                  </span>
                </div>

                <span className="mt-3 inline-flex rounded-full bg-[#e4f5e6] px-3 py-1 text-[10px] font-extrabold text-[#287d34]">
                  {copy.gst}
                </span>
              </div>

              <p className="mt-3 text-xs font-semibold leading-5 text-[#56627c] sm:text-[13px]">
                {copy.billingNote}
              </p>

              <Link
                href={registerHref}
                className="mt-5 flex h-12 items-center justify-center rounded-2xl bg-gradient-to-r from-[#28843c] via-[#15803d] to-[#0f9f64] px-5 text-sm font-black text-white shadow-[0_12px_26px_rgba(22,101,52,0.22)] transition duration-300 hover:-translate-y-0.5 focus:outline-none focus:ring-4 focus:ring-[#bbf7d0]"
              >
                {ctaLabel}
              </Link>
            </article>

            <article className="relative overflow-hidden bg-gradient-to-br from-[#12823c] via-[#0ca566] to-[#12b3a1] p-5 text-white sm:p-6 lg:p-7">
              <div className="pointer-events-none absolute -right-16 -top-16 h-44 w-44 rounded-full bg-white/15 blur-2xl" />
              <div className="pointer-events-none absolute -bottom-20 left-10 h-52 w-52 rounded-full bg-black/10 blur-2xl" />

              <div className="relative">
                <h3 className="text-xl font-black tracking-[-0.03em] sm:text-2xl">
                  {copy.included}
                </h3>

                <div className="mt-5 grid gap-x-6 gap-y-3 sm:grid-cols-2">
                  {featureColumns.map((features, index) => (
                    <div key={index} className="space-y-3">
                      {features.map((feature) => (
                        <p
                          key={feature}
                          className="flex items-start gap-2.5 text-[13px] font-bold leading-5 text-white"
                        >
                          <span className="mt-0.5 grid h-5 w-5 shrink-0 place-items-center rounded-full bg-white text-[#17894a] shadow-sm">
                            <Check size={12} strokeWidth={3.5} />
                          </span>
                          <span>{feature}</span>
                        </p>
                      ))}
                    </div>
                  ))}
                </div>
              </div>
            </article>
          </div>
        </div>
      </div>
    </section>
  );
}