"use client";

import Link from "next/link";
import { motion } from "framer-motion";
import { cn } from "@/vendor/ui/cn";
import type { SkuTemplate } from "@/vendor/carrier/types";

interface PlanCardProps {
  plan: SkuTemplate;
  href?: string;
  onSelect?: (plan: SkuTemplate) => void;
  featured?: boolean;
  /**
   * This plan is the one currently in the order summary. Only meaningful on
   * the select-then-continue flow; a card that links straight to checkout is
   * never in a selected state.
   */
  selected?: boolean;
}

export function PlanCard({ plan, href, onSelect, featured, selected }: PlanCardProps) {
  const destination = href ?? (onSelect ? undefined : `/checkout/${plan.id}`);

  function handleSelect() {
    onSelect?.(plan);
  }

  const inner = (
    <>
      {featured && (
        <span
          className="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 rounded-full px-3 py-0.5 text-xs font-semibold text-white"
          style={{ background: "var(--brand-accent)" }}
        >
          Most popular
        </span>
      )}
      <div>
        <p className="font-semibold text-sand-900 dark:text-sand-50">{plan.name}</p>
        <p className="mt-0.5 text-sm text-sand-500">{plan.description}</p>
      </div>
      <div className="flex items-baseline gap-1">
        <span className="text-3xl font-bold text-sand-900 dark:text-sand-50">
          €{(plan.price_cents / 100).toFixed(2)}
        </span>
        <span className="text-sm text-sand-500">one-time</span>
      </div>
      <ul className="space-y-1.5 text-sm text-sand-700 dark:text-sand-300">
        {plan.features.map((f) => (
          <li key={f} className="flex items-center gap-2">
            <span style={{ color: "var(--brand-accent)" }}>✓</span>
            {f}
          </li>
        ))}
      </ul>
      <span
        className={cn(
          "mt-auto block rounded-full py-2 text-center text-sm font-semibold transition-colors",
          featured || selected
            ? "text-white"
            : "border border-sand-300 text-sand-900 hover:bg-sand-100 dark:border-sand-700 dark:text-sand-50 dark:hover:bg-sand-800",
        )}
        style={featured || selected ? { background: "var(--brand-accent)" } : undefined}
      >
        {selected ? "Selected" : "Select plan"}
      </span>
    </>
  );

  const cardClass = cn(
    "relative flex flex-col gap-4 rounded-2xl border p-6 pt-8 transition-colors",
    selected && "ring-2 ring-[var(--brand-accent)] ring-offset-2 ring-offset-sand-50 dark:ring-offset-sand-950",
    featured
      ? "border-[var(--brand-accent)] bg-[color-mix(in_srgb,var(--brand-accent)_6%,white)] dark:bg-[color-mix(in_srgb,var(--brand-accent)_12%,#0F0E0A)]"
      : "border-sand-200 bg-white hover:border-sand-300 dark:border-sand-800 dark:bg-sand-900 dark:hover:border-sand-700",
  );

  if (destination && !onSelect) {
    return (
      <motion.div whileHover={{ y: -4 }}>
        <Link href={destination} className={cardClass}>
          {inner}
        </Link>
      </motion.div>
    );
  }

  return (
    <motion.button
      type="button"
      aria-pressed={selected ?? undefined}
      whileHover={{ y: -4 }}
      className={cn(cardClass, "w-full text-left")}
      onClick={handleSelect}
    >
      {inner}
    </motion.button>
  );
}