import { IconCheck } from "@tabler/icons-react";
import { FadeIn } from "@/components/ui/fade-in";
import { SecondaryButton } from "@/components/ui/secondary-button";
import { Link } from "@/i18n/navigation";

export interface PricingTier {
  annualPeriod?: string;
  annualPrice?: string;
  badge?: string;
  ctaHref?: string;
  ctaLabel: string;
  description: string;
  featured: boolean;
  features: string[];
  id: string;
  monthlyPeriod: string;
  monthlyPrice: string;
  name: string;
}

interface PricingTiersProps {
  bottomCta?: {
    text: string;
    ctaLabel: string;
    ctaHref?: string;
  };
  featuresLabel?: string;
  frequency?: {
    monthlyLabel: string;
    annualLabel: string;
    annualSavingsBadge?: string;
  };
  guarantee?: string;
  header?: {
    eyebrow?: string;
    titleLine1: string;
    titleLine2?: string;
    subtitle?: string;
  };
  tiers: PricingTier[];
}

function cx(...classes: Array<string | false | undefined>) {
  return classes.filter(Boolean).join(" ");
}

export function PricingTiers({
  tiers,
  header,
  frequency,
  featuresLabel,
  guarantee,
  bottomCta,
}: PricingTiersProps) {
  const hasFrequencyToggle =
    !!frequency && tiers.every((t) => t.annualPrice && t.annualPeriod);

  return (
    <form className="group/tiers relative overflow-hidden py-16 sm:py-24 lg:py-32">
      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        {header && (
          <FadeIn>
            <div className="mx-auto max-w-4xl text-center">
              {header.eyebrow && (
                <h2 className="font-semibold text-[#FD105E] text-sm uppercase tracking-wide">
                  {header.eyebrow}
                </h2>
              )}
              <p className="mt-2 font-bold text-3xl text-white tracking-tight sm:text-4xl md:text-5xl">
                {header.titleLine1}
                {header.titleLine2 && (
                  <>
                    <br />
                    <span className="bg-gradient-to-r from-[#FD105E] to-[#FF3070] bg-clip-text text-transparent">
                      {header.titleLine2}
                    </span>
                  </>
                )}
              </p>
              {header.subtitle && (
                <p className="mx-auto mt-6 max-w-2xl text-center text-base text-neutral-300 sm:text-lg md:text-xl">
                  {header.subtitle}
                </p>
              )}
            </div>
          </FadeIn>
        )}

        {hasFrequencyToggle && (
          <FadeIn>
            <div className="mt-12 flex flex-col items-center gap-3">
              <fieldset aria-label="Fréquence de facturation">
                <div className="grid grid-cols-2 gap-x-1 rounded-full p-1 text-center font-semibold text-xs ring-1 ring-white/15 ring-inset">
                  <label className="group relative cursor-pointer rounded-full px-4 py-2 has-checked:bg-[#FD105E]">
                    <input
                      className="absolute inset-0 appearance-none rounded-full"
                      defaultChecked
                      defaultValue="monthly"
                      name="frequency"
                      type="radio"
                    />
                    <span className="text-neutral-400 group-has-checked:text-white">
                      {frequency?.monthlyLabel}
                    </span>
                  </label>
                  <label className="group relative cursor-pointer rounded-full px-4 py-2 has-checked:bg-[#FD105E]">
                    <input
                      className="absolute inset-0 appearance-none rounded-full"
                      defaultValue="annual"
                      name="frequency"
                      type="radio"
                    />
                    <span className="text-neutral-400 group-has-checked:text-white">
                      {frequency?.annualLabel}
                    </span>
                  </label>
                </div>
              </fieldset>
              {frequency?.annualSavingsBadge && (
                <span className="font-semibold text-[#FD105E] text-xs uppercase tracking-wide group-not-has-[[name=frequency][value=annual]:checked]/tiers:invisible">
                  {frequency?.annualSavingsBadge}
                </span>
              )}
            </div>
          </FadeIn>
        )}

        <div className="isolate mx-auto mt-12 grid max-w-md grid-cols-1 gap-8 md:mt-16 lg:mx-0 lg:max-w-none lg:grid-cols-3">
          {tiers.map((tier, index) => (
            <FadeIn
              delay={index * 0.1}
              duration={0.6}
              ease={[0.21, 0.47, 0.32, 0.98]}
              key={tier.id}
              viewportAmount={0.2}
            >
              <div
                className={cx(
                  "relative flex h-full flex-col rounded-3xl bg-[#1a1a1a]/80 p-8 backdrop-blur-sm transition-all duration-300 xl:p-10",
                  tier.featured
                    ? "ring-2 ring-[#FD105E] hover:ring-[#FF3070]"
                    : "ring-1 ring-[#333333] hover:ring-[#FD105E]/40"
                )}
              >
                {tier.featured && tier.badge && (
                  <div className="absolute -top-3 left-1/2 -translate-x-1/2">
                    <span className="rounded-xl bg-[#E00D54] px-4 py-1 font-semibold text-white text-xs uppercase tracking-wide">
                      {tier.badge}
                    </span>
                  </div>
                )}

                <h3
                  className={cx(
                    "font-semibold text-lg",
                    tier.featured ? "text-[#FD105E]" : "text-white"
                  )}
                  id={`tier-${tier.id}`}
                >
                  {tier.name}
                </h3>
                <p className="mt-4 text-neutral-300 text-sm leading-6">
                  {tier.description}
                </p>

                {/* Monthly price */}
                <p
                  className={cx(
                    "mt-6 flex items-baseline gap-x-1",
                    hasFrequencyToggle &&
                      "group-not-has-[[name=frequency][value=monthly]:checked]/tiers:hidden"
                  )}
                >
                  <span className="font-bold text-4xl text-white tracking-tight">
                    {tier.monthlyPrice}
                  </span>
                  <span className="font-semibold text-neutral-400 text-sm">
                    {tier.monthlyPeriod}
                  </span>
                </p>

                {/* Annual price (only rendered if data present) */}
                {hasFrequencyToggle &&
                  tier.annualPrice &&
                  tier.annualPeriod && (
                    <p className="mt-6 flex items-baseline gap-x-1 group-not-has-[[name=frequency][value=annual]:checked]/tiers:hidden">
                      <span className="font-bold text-4xl text-white tracking-tight">
                        {tier.annualPrice}
                      </span>
                      <span className="font-semibold text-neutral-400 text-sm">
                        {tier.annualPeriod}
                      </span>
                    </p>
                  )}

                <Link
                  aria-describedby={`tier-${tier.id}`}
                  className={cx(
                    "mt-6 block w-full rounded-md px-3 py-2.5 text-center font-semibold text-sm transition-all duration-300",
                    tier.featured
                      ? "bg-[#E00D54] text-white shadow-[#FD105E]/20 shadow-lg hover:bg-[#FD105E]"
                      : "bg-[#FD105E] text-white hover:bg-[#E00D54]"
                  )}
                  href={tier.ctaHref ?? "/contact"}
                >
                  {tier.ctaLabel}
                </Link>

                {featuresLabel && (
                  <h4 className="mt-8 font-semibold text-neutral-400 text-xs uppercase tracking-wide">
                    {featuresLabel}
                  </h4>
                )}
                <ul className="mt-4 flex-1 space-y-3 text-neutral-300 text-sm leading-6">
                  {tier.features.map((feature) => (
                    <li className="flex gap-x-3" key={feature}>
                      <IconCheck
                        aria-hidden="true"
                        className="mt-0.5 h-5 w-5 shrink-0 text-[#FD105E]"
                        strokeWidth={2.5}
                      />
                      <span>{feature}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </FadeIn>
          ))}
        </div>

        {guarantee && (
          <FadeIn
            className="mt-10 text-center text-neutral-400 text-sm"
            delay={0.3}
          >
            <p>{guarantee}</p>
          </FadeIn>
        )}

        {bottomCta && (
          <FadeIn
            className="mt-12 flex flex-col items-center text-center"
            delay={0.4}
          >
            <p className="mb-4 text-neutral-400 text-sm">{bottomCta.text}</p>
            <SecondaryButton href={bottomCta.ctaHref ?? "/contact"}>
              {bottomCta.ctaLabel}
            </SecondaryButton>
          </FadeIn>
        )}
      </div>
    </form>
  );
}