"use client";

import type { SubscriptionPlanFeature, SubscriptionPlanOffer } from "@/features/subscription/types";
import { subscriptionDict } from "@/features/subscription/dict";
import { formatPlanPrice } from "@/features/subscription/utils/format";

type SubscriptionPlanCardProps = {
  plan: SubscriptionPlanOffer;
  isCurrent?: boolean;
  isLoading?: boolean;
  onSelect: (planId: string) => void;
};

function CheckIcon() {
  return (
    <svg
      aria-hidden="true"
      className="size-4 shrink-0 text-[#2EC4B6]"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2.5}
    >
      <path d="M5 13l4 4L19 7" />
    </svg>
  );
}

function CloseIcon() {
  return (
    <svg
      aria-hidden="true"
      className="size-4 shrink-0 text-destructive/60"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2.5}
    >
      <path d="M18 6L6 18M6 6l12 12" />
    </svg>
  );
}

function FeatureList({ features }: { features: SubscriptionPlanFeature[] }) {
  return (
    <ul className="mt-5 flex-1 space-y-2.5">
      {features.map((feature) => (
        <li key={feature.label} className="flex items-start gap-2 text-sm">
          {feature.available ? <CheckIcon /> : <CloseIcon />}
          <span
            className={`leading-5 ${
              feature.available ? "text-foreground" : "text-muted-foreground"
            }`}
          >
            {feature.label}
            {feature.note ? (
              <span className="text-muted-foreground"> {feature.note}</span>
            ) : null}
          </span>
        </li>
      ))}
    </ul>
  );
}

export function SubscriptionPlanCard({
  plan,
  isCurrent = false,
  isLoading = false,
  onSelect,
}: SubscriptionPlanCardProps) {
  return (
    <div
      className={`relative flex flex-col rounded-3xl border p-6 shadow-soft-sm ${
        plan.isHighlighted
          ? "border-primary/40 bg-primary/[0.04]"
          : "border-border bg-card"
      }`}
    >
      {plan.isHighlighted ? (
        <span className="absolute -top-2.5 left-1/2 -translate-x-1/2 rounded-full bg-primary px-3 py-0.5 text-[11px] font-semibold text-primary-foreground">
          {subscriptionDict.mostPopular}
        </span>
      ) : null}

      <h3 className="text-lg font-bold text-foreground">{plan.name}</h3>
      <p className="mt-1 text-xs text-muted-foreground">{plan.periodLabel}</p>

      <div className="mt-3">
        <span className="text-2xl font-bold text-foreground">
          {formatPlanPrice(plan.price)}
        </span>
      </div>

      <FeatureList features={plan.features} />

      <button
        type="button"
        disabled={isLoading || isCurrent}
        onClick={() => onSelect(plan.id)}
        className="mt-6 inline-flex h-12 items-center justify-center rounded-2xl bg-primary px-6 text-sm font-semibold text-primary-foreground shadow-soft-sm transition-all hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-60"
      >
        {isLoading
          ? subscriptionDict.paying
          : isCurrent
            ? subscriptionDict.currentPlan
            : subscriptionDict.pay}
      </button>
    </div>
  );
}