"use client";

import React from "react";
import { cn } from "@/lib/utils";

export type TrialOptionState = "default" | "selected" | "accent";

export interface TrialOptionProps extends React.ComponentProps<"button"> {
  value?: string;
  title?: string;
  state?: TrialOptionState;
  error?: boolean;
}

export function TrialOption({
  className,
  value = "$1",
  title = "Basic",
  state = "default",
  error = false,
  ...props
}: TrialOptionProps) {
  const isSelected = state === "selected";
  const isAccent = state === "accent";
  // Error must apply only to default and accent (not to selected)
  const isError = error && !isSelected;

  return (
    <button
      type="button"
      {...props}
      className={cn(
        // Layout (flex to allow w-full expansion inside grid cells)
        "flex w-full select-none items-center justify-center p-[14px] gap-1 rounded-[12px] transition-all duration-150",
        // Focus ring (does not affect layout)
        "outline-none focus-visible:ring-[3px] focus-visible:ring-[#3A70B2]/30",
        "active:scale-[0.99]",
        // Backgrounds
        !isSelected && "bg-[#F9FAFB]",
        // Shadows
        !isSelected
          ? "shadow-[0_2px_4px_rgba(0,0,0,0.10),_0_4px_6px_rgba(0,0,0,0.10)] hover:shadow-[0_4px_6px_rgba(0,0,0,0.10),_0_8px_12px_rgba(0,0,0,0.10)]"
          : "shadow-[0_4px_6px_rgba(0,0,0,0.10),_0_10px_15px_rgba(0,0,0,0.10)] hover:shadow-[0_6px_10px_rgba(0,0,0,0.10),_0_12px_18px_rgba(0,0,0,0.10)]",
        // Borders per state
        // Keep a constant 2px border to avoid layout shifts
        // Default state (2px #D1D5DB) unless error overrides
        state === "default" && !isError && "border-[2px] border-[#D1D5DB] hover:border-[#9CA3AF]",
        // Accent state: simulate 4px using inset ring (no layout shift, stays inside)
        isAccent && !isError && "border-[2px] border-[#9CA3AF] ring-inset ring-[2px] ring-[#9CA3AF] hover:border-[#6B7280] hover:ring-[#6B7280]",
        // Selected state (2px #3A70B2)
        isSelected && "border-[2px] border-[#3A70B2]",
        // Error overrides: default -> 2px red; accent -> 2px red + ring 2px red
        isError && !isAccent && "border-[2px] border-[#FF0D11]",
        isError && isAccent && "border-[2px] border-[#FF0D11] ring-inset ring-[2px] ring-[#FF0D11]",
        className
      )}
      style={
        isSelected
          ? {
              // background: var(--TrialGradient, linear-gradient(90deg, #5393DE 0%, #3A70B2 100%))
              background:
                "var(--TrialGradient, linear-gradient(90deg, #5393DE 0%, #3A70B2 100%))",
            }
          : undefined
      }
    >
      <div className="flex flex-col items-center justify-center gap-1">
        <p
          className={cn(
            "font-inter font-bold text-[20px] leading-[28px]",
            // Default/Accent normal -> black, Selected -> #E5E7EB, Error -> #FF0D11
            isSelected ? "text-[#E5E7EB]" : isError ? "text-[#FF0D11]" : "text-[#000000]"
          )}
        >
          {value}
        </p>
        <p
          className={cn(
            "font-inter font-semibold text-[14px] leading-[20px]",
            // Default/Accent normal -> #6B7280, Selected -> #E5E7EB, Error -> #FF0D11
            isSelected ? "text-[#E5E7EB]" : isError ? "text-[#FF0D11]" : "text-[#6B7280]"
          )}
        >
          {title}
        </p>
      </div>
    </button>
  );
}
