"use client";

import { useState } from "react";
import { IconCircleCheckFilled } from "@tabler/icons-react";
import { m } from "motion/react";

import type { Dictionary } from "@/app/[lang]/dictionaries";
import { signupUrl } from "@/lib/env";
import { Button } from "@/components/ui/button";
import { Container } from "@/components/ui/container";
import { SectionHead } from "@/components/ui/section-head";
import { plans, type Plan } from "@/lib/pricing";
import { cn } from "@/lib/utils";

export const Pricing = ({ dict }: { dict: Dictionary["pricing"] }) => {
  const [active, setActive] = useState<"monthly" | "yearly">("monthly");
  const tabs = [
    { name: dict.toggle_monthly, value: "monthly" as const },
    { name: dict.toggle_yearly, value: "yearly" as const },
  ];

  const featureKeys = Object.keys(
    dict.feature_labels,
  ) as (keyof Plan["features"])[];

  return (
    <section
      id="pricing"
      className="relative overflow-hidden py-10 md:py-20 lg:py-32"
    >
      <div
        aria-hidden
        className="brand-glow pointer-events-none absolute top-0 left-1/2 -z-10 h-[420px] w-[900px] -translate-x-1/2 opacity-60"
      />
      <Container>
        <SectionHead
          center
          eyebrow={dict.eyebrow}
          title={dict.title}
          subtitle={dict.subtitle}
        />

        {/* Monthly / Yearly toggle */}
        <div className="mt-10 flex flex-col items-center justify-center gap-3">
          <div className="border-hairline-2 flex w-fit items-center justify-center overflow-hidden rounded-full border bg-white/[0.03] p-1">
            {tabs.map((tab) => (
              <button
                key={tab.value}
                onClick={() => setActive(tab.value)}
                aria-pressed={active === tab.value}
                className={cn(
                  "text-ink-3 relative rounded-full px-5 py-2.5 text-sm font-medium",
                  active === tab.value ? "text-white" : "",
                )}
              >
                {active === tab.value && (
                  <m.span
                    layoutId="pricing-toggle"
                    transition={{ type: "spring", bounce: 0.2, duration: 0.6 }}
                    className="bg-gradient-brand absolute inset-0 rounded-full"
                  />
                )}
                <span className="relative z-10">{tab.name}</span>
              </button>
            ))}
          </div>
          {active === "yearly" && (
            <span className="bg-gradient-brand inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold text-white">
              {dict.yearly_badge}
            </span>
          )}
        </div>

        {/* Plans grid */}
        <div className="relative z-20 mx-auto mt-10 grid grid-cols-1 items-stretch gap-6 md:mt-16 md:grid-cols-2 lg:grid-cols-4">
          {plans.map((plan, planIdx) => (
            <div
              key={plan.id}
              className={cn(
                "flex h-full flex-col justify-between rounded-2xl border p-6 transition-all duration-300 hover:-translate-y-1",
                plan.popular
                  ? "border-brand-orange/50 from-surface-hi to-surface bg-gradient-to-b shadow-[0_0_0_1px_rgba(255,87,34,0.35),0_30px_70px_-30px_rgba(255,87,34,0.4)]"
                  : "border-hairline bg-surface hover:border-hairline-2",
              )}
            >
              <div>
                <div className="flex items-center justify-between gap-2">
                  <h3 className="text-base font-semibold text-neutral-700 dark:text-neutral-300">
                    {plan.name}
                  </h3>
                  {plan.popular && (
                    <span className="bg-gradient-brand inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold text-white">
                      {dict.popular}
                    </span>
                  )}
                </div>

                <p
                  className="mt-4 flex items-baseline gap-x-1"
                  aria-live="polite"
                  aria-atomic="true"
                >
                  <m.span
                    key={active}
                    initial={{ y: 12, opacity: 0, filter: "blur(8px)" }}
                    animate={{ y: 0, opacity: 1, filter: "blur(0px)" }}
                    transition={{
                      duration: 0.2,
                      ease: "easeOut",
                      delay: 0.05 * planIdx,
                    }}
                    className="font-display inline-block text-4xl font-bold tracking-tight text-neutral-900 dark:text-neutral-100"
                  >
                    ${active === "monthly" ? plan.monthly : plan.yearly}
                  </m.span>
                  <span className="text-sm font-medium text-neutral-500 dark:text-neutral-400">
                    {dict.per_month}
                  </span>
                </p>

                <Button asChild className="mt-6 w-full">
                  <a href={signupUrl}>{dict.cta}</a>
                </Button>

                <ul role="list" className="mt-8 space-y-3 text-sm">
                  {featureKeys.map((key) => {
                    const value = plan.features[key];
                    return (
                      <li
                        key={key}
                        className="flex gap-x-2 text-neutral-600 dark:text-neutral-300"
                      >
                        <IconCircleCheckFilled
                          aria-hidden="true"
                          className="text-brand-blue size-5 flex-none"
                        />
                        <span>
                          <span className="text-neutral-500 dark:text-neutral-400">
                            {dict.feature_labels[key]}:
                          </span>{" "}
                          {value === "__UNLIMITED__" ? dict.unlimited : value}
                        </span>
                      </li>
                    );
                  })}
                </ul>
              </div>
            </div>
          ))}
        </div>

        {/* Add-ons */}
        <div className="border-hairline bg-surface shadow-premium mx-auto mt-12 max-w-3xl rounded-2xl border p-6 md:p-8">
          <h3 className="font-display text-lg font-bold">
            {dict.addons_title}
          </h3>
          <ul role="list" className="mt-4 space-y-3 text-sm">
            {dict.addons.map((addon, i) => (
              <li
                key={i}
                className="flex gap-x-2 text-neutral-600 dark:text-neutral-300"
              >
                <IconCircleCheckFilled
                  aria-hidden="true"
                  className="size-5 flex-none text-neutral-700 dark:text-neutral-300"
                />
                <span>{addon}</span>
              </li>
            ))}
          </ul>
        </div>
      </Container>
    </section>
  );
};