"use client";

import { useState } from "react";
import { useTranslations } from "next-intl";

interface RedeemFormProps {
  prizeType: string;
  prizeDetail: string;
  costAfc: number;
  onSubmit: (deliveryInfo: string) => void;
  onCancel: () => void;
  loading: boolean;
}

export function RedeemForm({
  prizeType,
  prizeDetail,
  costAfc,
  onSubmit,
  onCancel,
  loading,
}: RedeemFormProps) {
  const t = useTranslations("afc");
  const [deliveryInfo, setDeliveryInfo] = useState("");

  const isBankTransfer = prizeType === "bank_transfer";
  const isMercadoPago = prizeType === "mercadopago";

  const placeholder = isBankTransfer
    ? t("clabe_placeholder")
    : isMercadoPago
      ? t("mp_account_placeholder")
      : t("delivery_placeholder");

  const label = isBankTransfer
    ? t("clabe_label")
    : isMercadoPago
      ? t("mp_account_label")
      : t("delivery_label");

  return (
    <div className="bg-gray-900 border border-white/10 rounded-2xl p-6 space-y-5">
      <div className="flex items-center justify-between">
        <div>
          <h3 className="text-lg font-semibold text-white">{prizeDetail}</h3>
          <p className="text-sm text-amber-400">{costAfc} AFC</p>
        </div>
        <button
          onClick={onCancel}
          className="text-sm text-gray-500 hover:text-gray-300 transition-colors"
        >
          {t("cancel")}
        </button>
      </div>

      <div className="space-y-2">
        <label className="block text-sm font-medium text-gray-400">
          {label}
        </label>
        <input
          type="text"
          value={deliveryInfo}
          onChange={(e) => setDeliveryInfo(e.target.value)}
          placeholder={placeholder}
          className="w-full bg-gray-800 border border-white/10 rounded-xl px-4 py-3 text-white placeholder:text-gray-600 focus:outline-none focus:border-amber-500/50 focus:ring-1 focus:ring-amber-500/25 transition-all"
        />
      </div>

      <div className="bg-amber-500/10 border border-amber-500/20 rounded-xl p-4 text-sm text-amber-300/80">
        {t("redeem_warning")}
      </div>

      <button
        onClick={() => onSubmit(deliveryInfo)}
        disabled={loading || !deliveryInfo.trim()}
        className="w-full py-3 bg-amber-500 hover:bg-amber-400 disabled:bg-gray-700 disabled:text-gray-500 text-black font-bold rounded-xl transition-colors"
      >
        {loading ? t("processing") : t("confirm_redeem")}
      </button>
    </div>
  );
}