"use client";

import { CardPricing } from "@/features/catalog/components/base/CardPricing";

interface ActivationFeeDetails {
  amount: number;
  name: string;
}

interface ActivationFormProps {
  activationType: "Immediate" | "Scheduled";
  onActivationTypeChange: (type: "Immediate" | "Scheduled") => void;
  scheduledActivationDate: string;
  onScheduledActivationDateChange: (date: string) => void;
  errors: Record<string, string | undefined>;
  activationFee?: ActivationFeeDetails;
}

type ActivationOption = {
  type: "Immediate" | "Scheduled";
  title: string;
  description: string;
};

const activationOptions: ActivationOption[] = [
  {
    type: "Immediate",
    title: "Immediate Activation",
    description: "Activate as soon as your SIM arrives and is set up.",
  },
  {
    type: "Scheduled",
    title: "Scheduled Activation",
    description: "Pick a go-live date within the next 30 days.",
  },
];

export function ActivationForm({
  activationType,
  onActivationTypeChange,
  scheduledActivationDate,
  onScheduledActivationDateChange,
  errors,
  activationFee,
}: ActivationFormProps) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
      {activationOptions.map(option => {
        const isSelected = activationType === option.type;
        return (
          <label
            key={option.type}
            className={`p-6 rounded-xl border-2 text-left transition-all duration-200 focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 cursor-pointer flex flex-col gap-3 ${
              isSelected
                ? "border-blue-500 bg-blue-50 shadow-md"
                : "border-gray-200 hover:border-blue-400 hover:bg-blue-50/50 shadow-sm hover:shadow-md"
            }`}
          >
            <input
              type="radio"
              name="activationType"
              value={option.type}
              checked={isSelected}
              onChange={e => onActivationTypeChange(e.target.value as "Immediate" | "Scheduled")}
              className="sr-only"
            />

            <div className="flex items-start justify-between gap-3">
              <div className="flex-1 min-w-0">
                <h4 className="text-lg font-semibold text-gray-900 leading-tight">{option.title}</h4>
              </div>
              <div
                className={`w-5 h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0 ${
                  isSelected ? "bg-blue-500 border-blue-500" : "border-gray-300 bg-white"
                }`}
                aria-hidden="true"
              >
                {isSelected && <div className="w-2 h-2 bg-white rounded-full" />}
              </div>
            </div>

            <p className="text-sm text-gray-600">{option.description}</p>

            {activationFee ? (
              <div className="pt-3 border-t border-gray-200">
                <CardPricing alignment="left" size="md" oneTimePrice={activationFee.amount} />
              </div>
            ) : (
              <p className="text-sm text-gray-500">Activation fee shown at checkout</p>
            )}

            {option.type === "Scheduled" && (
              <div
                className={`overflow-hidden transition-[max-height,opacity] duration-300 ease-out ${
                  isSelected ? "max-h-[260px] opacity-100" : "max-h-0 opacity-0"
                }`}
                aria-hidden={!isSelected}
              >
                <div className="mt-3">
                  <label
                    htmlFor="scheduledActivationDate"
                    className="block text-sm font-medium text-gray-700 mb-1"
                  >
                    Preferred activation date *
                  </label>
                  <input
                    type="date"
                    id="scheduledActivationDate"
                    value={scheduledActivationDate}
                    onChange={e => onScheduledActivationDateChange(e.target.value)}
                    min={new Date().toISOString().split("T")[0]}
                    max={new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString().split("T")[0]}
                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white"
                  />
                  {errors.scheduledActivationDate && (
                    <p className="text-red-600 text-sm mt-1">{errors.scheduledActivationDate}</p>
                  )}
                  <p className="text-xs text-blue-700 mt-1">
                    Weekend or holiday requests may be processed on the next business day.
                  </p>
                </div>
              </div>
            )}
          </label>
        );
      })}
    </div>
  );
}
