"use client";

import { useState } from "react";
import Link from "next/link";
import { Check } from "lucide-react";
import { cn } from "@/lib/utils/cn";
import { Button } from "@/components/ui/Button";
import { Reveal } from "./Reveal";

const plans = [
  {
    tier: "Free",
    monthly: "$0",
    annual: "$0",
    desc: "For getting a first survey out the door.",
    features: ["100 responses/mo", "3 active surveys", "Basic question types"],
    cta: "Get started",
    href: "/register",
    featured: false,
  },
  {
    tier: "Pro",
    monthly: "$39",
    annual: "$31",
    desc: "For growing teams running regular research.",
    features: [
      "10,000 responses/mo",
      "Unlimited surveys",
      "Logic jump & branching",
      "Custom branding",
    ],
    cta: "Start Free Trial",
    href: "/register",
    featured: true,
  },
  {
    tier: "Enterprise",
    monthly: "Custom",
    annual: "Custom",
    desc: "For orgs needing SSO, SLAs, and white-label.",
    features: [
      "Unlimited responses",
      "White-label / custom domain",
      "SSO & audit logs",
    ],
    cta: "Talk to sales",
    href: "mailto:contact@surveystronghold.com",
    featured: false,
  },
] as const;

export function PricingToggle() {
  const [annual, setAnnual] = useState(false);

  return (
    <div>
      <Reveal className="mb-11 flex items-center justify-center gap-3.5">
        <span
          className={cn(
            "text-[13px] font-semibold transition-colors",
            annual ? "text-muted" : "text-text"
          )}
        >
          Monthly
        </span>
        <button
          type="button"
          role="switch"
          aria-checked={annual}
          aria-label="Toggle annual billing"
          onClick={() => setAnnual((v) => !v)}
          className="relative h-[26px] w-[46px] rounded-full bg-primary transition-colors"
        >
          <span
            className={cn(
              "absolute top-[3px] h-5 w-5 rounded-full bg-white shadow transition-all duration-200",
              annual ? "left-[23px]" : "left-[3px]"
            )}
          />
        </button>
        <span
          className={cn(
            "text-[13px] font-semibold transition-colors",
            annual ? "text-text" : "text-muted"
          )}
        >
          Annual
        </span>
        <span className="rounded-full bg-success-bg px-2 py-0.5 text-[11.5px] font-bold text-success">
          Save 20%
        </span>
      </Reveal>

      <div className="grid gap-5 md:grid-cols-3">
        {plans.map((plan, i) => {
          const price = annual ? plan.annual : plan.monthly;
          const isCustom = price === "Custom";
          return (
            <Reveal
              key={plan.tier}
              delayMs={i * 90}
              className={cn(
                "relative rounded-2xl border border-border bg-card p-7 shadow-DEFAULT",
                plan.featured &&
                  "border-primary shadow-lg md:-translate-y-2 ring-[3px] ring-primary/10"
              )}
            >
              {plan.featured && (
                <span className="absolute -top-3.5 left-1/2 -translate-x-1/2 rounded-full bg-primary px-3.5 py-1 text-[11px] font-bold tracking-wide text-white">
                  Most popular
                </span>
              )}
              <div className="mb-2.5 text-sm font-bold uppercase tracking-wider text-muted">
                {plan.tier}
              </div>
              <div
                className={cn(
                  "mb-0.5 font-mono font-black text-text",
                  isCustom ? "text-[26px]" : "text-[38px]"
                )}
              >
                {price}
                {!isCustom && (
                  <span className="font-sans text-sm font-medium text-muted">
                    /mo
                  </span>
                )}
              </div>
              <p className="mb-5 text-[13px] text-muted">{plan.desc}</p>
              <ul className="mb-6 flex flex-col gap-2.5">
                {plan.features.map((f) => (
                  <li
                    key={f}
                    className="flex items-start gap-2.5 text-[13.5px] text-text"
                  >
                    <Check
                      className="mt-0.5 h-[15px] w-[15px] shrink-0 text-success"
                      strokeWidth={3}
                    />
                    {f}
                  </li>
                ))}
              </ul>
              <Link href={plan.href} className="block">
                <Button
                  variant={plan.featured ? "primary" : "outline"}
                  className="w-full justify-center"
                >
                  {plan.cta}
                </Button>
              </Link>
            </Reveal>
          );
        })}
      </div>
    </div>
  );
}