"use client";

import { useState } from "react";
import { useTranslations, useLocale } from "next-intl";
import { Check, Zap } from "lucide-react";
import { cn } from "@/lib/utils";

type PlanVariant = "ghost" | "outline" | "filled" | "dark";

interface Plan {
  id: string;
  name: string;
  price: string;
  priceNote: string;
  desc: string;
  cta: string;
  href: string;
  features: string[];
  popular: boolean;
  variant: PlanVariant;
}

export function PricingSection() {
  const t    = useTranslations("pricing");
  const locale = useLocale();
  const base = `/${locale}`;
  const [yearly, setYearly] = useState(false);

  const plans: Plan[] = [
    {
      id: "free",
      name:      t("freeName"),
      price:     t("freePrice"),
      priceNote: t("freePriceNote"),
      desc:      t("freeDesc"),
      cta:       t("ctaFree"),
      href:      "https://app.meezi.ir/register",
      features:  [t("f1"), t("f2"), t("f3"), t("f4"), t("f5")],
      popular: false,
      variant: "outline",
    },
    {
      id: "pro",
      name:      t("proName"),
      price:     yearly
        ? (locale === "fa" ? "۱٬۲۴۲٬۰۰۰" : "₺1,242,000")
        : t("proPrice"),
      priceNote: t("proPriceNote"),
      desc:      t("proDesc"),
      cta:       t("ctaPro"),
      href:      `${base}/demo`,
      features:  [t("p1"), t("p2"), t("p3"), t("p4"), t("p5"), t("p6"), t("p7")],
      popular: true,
      variant: "filled",
    },
    {
      id: "business",
      name:      t("businessName"),
      price:     yearly
        ? (locale === "fa" ? "۲٬۹۰۸٬۰۰۰" : "₺2,908,000")
        : t("businessPrice"),
      priceNote: t("businessPriceNote"),
      desc:      t("businessDesc"),
      cta:       t("ctaBusiness"),
      href:      `${base}/demo`,
      features:  [t("b1"), t("b2"), t("b3"), t("b4"), t("b5"), t("b6"), t("b7")],
      popular: false,
      variant: "dark",
    },
    {
      id: "enterprise",
      name:      t("enterpriseName"),
      price:     t("enterprisePrice"),
      priceNote: t("enterprisePriceNote"),
      desc:      t("enterpriseDesc"),
      cta:       t("ctaEnterprise"),
      href:      `${base}/contact`,
      features:  [t("e1"), t("e2"), t("e3"), t("e4"), t("e5"), t("e6")],
      popular: false,
      variant: "outline",
    },
  ];

  return (
    <section id="pricing" className="scroll-mt-16 py-20 sm:py-28">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <div className="mx-auto max-w-2xl text-center">
          <span className="inline-flex items-center gap-1.5 rounded-full border border-brand-200 bg-brand-50 px-3 py-1 text-xs font-semibold text-brand-700">
            {t("badge")}
          </span>
          <h2 className="mt-4 text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
            {t("title")}
          </h2>
          <p className="mt-4 text-lg text-gray-500">{t("subtitle")}</p>

          {/* Monthly / Yearly toggle */}
          <div className="mt-8 inline-flex items-center gap-3 rounded-full border border-gray-200 bg-gray-50 p-1">
            <button
              onClick={() => setYearly(false)}
              className={cn(
                "rounded-full px-4 py-1.5 text-sm font-medium transition-all",
                !yearly ? "bg-white text-gray-900 shadow-sm" : "text-gray-500 hover:text-gray-700"
              )}
            >
              {t("monthly")}
            </button>
            <button
              onClick={() => setYearly(true)}
              className={cn(
                "flex items-center gap-1.5 rounded-full px-4 py-1.5 text-sm font-medium transition-all",
                yearly ? "bg-white text-gray-900 shadow-sm" : "text-gray-500 hover:text-gray-700"
              )}
            >
              {t("yearly")}
              <span className="rounded-full bg-brand-100 px-2 py-0.5 text-[10px] font-semibold text-brand-700">
                {t("yearlyDiscount")}
              </span>
            </button>
          </div>
        </div>

        {/* Plan cards — 4-column grid on xl, 2-col on md, 1-col on mobile */}
        <div className="mt-12 grid gap-5 sm:grid-cols-2 xl:grid-cols-4">
          {plans.map((plan) => (
            <PlanCard key={plan.id} plan={plan} t={t} />
          ))}
        </div>

        {/* Bottom note */}
        <p className="mt-8 text-center text-xs text-gray-400">
          {locale === "fa"
            ? "همه پلن‌ها شامل پشتیبانی راه‌اندازی رایگان و امکان تغییر پلن در هر زمان هستند."
            : "All plans include free onboarding support and can be changed at any time."}
        </p>
      </div>
    </section>
  );
}

function PlanCard({
  plan,
  t,
}: {
  plan: Plan;
  t: ReturnType<typeof useTranslations<"pricing">>;
}) {
  const isFilled  = plan.variant === "filled";
  const isDark    = plan.variant === "dark";
  const isOutline = plan.variant === "outline";

  return (
    <div
      className={cn(
        "relative flex flex-col rounded-2xl border p-6 transition-all",
        isFilled && "border-brand-700 bg-brand-700 shadow-2xl shadow-brand-700/20 scale-[1.02] xl:scale-[1.04]",
        isDark   && "border-gray-800 bg-gray-900 shadow-lg",
        isOutline && "border-gray-200 bg-white shadow-sm hover:shadow-md hover:-translate-y-0.5",
      )}
    >
      {/* Popular badge */}
      {plan.popular && (
        <div className="absolute -top-3 start-1/2 -translate-x-1/2 whitespace-nowrap rounded-full bg-amber-400 px-4 py-1 text-xs font-bold text-gray-900">
          {t("popular")}
        </div>
      )}

      {/* Name + price */}
      <div>
        <h3
          className={cn(
            "text-xs font-semibold uppercase tracking-wider",
            isFilled ? "text-white/70"
            : isDark  ? "text-gray-400"
            : "text-gray-500"
          )}
        >
          {plan.name}
        </h3>

        <div className="mt-3 flex items-baseline gap-1 flex-wrap">
          <span
            className={cn(
              "text-3xl font-extrabold leading-none",
              isFilled ? "text-white" : isDark ? "text-white" : "text-gray-900"
            )}
          >
            {plan.price}
          </span>
          {plan.priceNote && (
            <span
              className={cn(
                "text-xs",
                isFilled ? "text-white/60" : isDark ? "text-gray-500" : "text-gray-400"
              )}
            >
              {plan.priceNote}
            </span>
          )}
        </div>

        <p
          className={cn(
            "mt-2 text-xs leading-relaxed",
            isFilled ? "text-white/60" : isDark ? "text-gray-500" : "text-gray-500"
          )}
        >
          {plan.desc}
        </p>
      </div>

      {/* Feature list */}
      <ul className="my-6 flex-1 space-y-2">
        {plan.features.map((f) => (
          <li key={f} className="flex items-start gap-2">
            <div
              className={cn(
                "mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full",
                isFilled ? "bg-white/20"
                : isDark  ? "bg-white/10"
                : "bg-brand-100"
              )}
            >
              <Check
                className={cn(
                  "h-2.5 w-2.5",
                  isFilled ? "text-white" : isDark ? "text-brand-400" : "text-brand-700"
                )}
              />
            </div>
            <span
              className={cn(
                "text-xs leading-relaxed",
                isFilled ? "text-white/80" : isDark ? "text-gray-300" : "text-gray-600"
              )}
            >
              {f}
            </span>
          </li>
        ))}
      </ul>

      {/* CTA */}
      <a
        href={plan.href}
        className={cn(
          "flex items-center justify-center gap-1.5 rounded-xl py-2.5 text-sm font-semibold transition-all",
          isFilled
            ? "bg-white text-brand-700 hover:bg-brand-50"
            : isDark
              ? "bg-brand-700 text-white hover:bg-brand-600"
              : plan.id === "free"
                ? "border border-gray-200 text-gray-700 hover:bg-gray-50"
                : "bg-brand-700 text-white hover:bg-brand-800"
        )}
      >
        {plan.id === "pro" && <Zap className="h-3.5 w-3.5" />}
        {plan.cta}
      </a>
    </div>
  );
}
