import { useTranslation } from "react-i18next";
import { usePaymentForm } from "../hooks/usePaymentForm";

export default function PaymentForm({ bookingId = "", token = "" }) {
  const { t } = useTranslation();
  const form = usePaymentForm(bookingId, token);

  return (
    <section className="payments">
      <div className="payments-header">
        <div>
          <h2>{t("payment.title")}</h2>
          <p className="payments-subtitle">{t("payment.subtitle")}</p>
        </div>
        <span className="payments-badge">{t("payment.badge")}</span>
      </div>

      <form
        className="payments-form"
        onSubmit={(e) => {
          e.preventDefault();
          form.submit();
        }}
      >
        <label className="field">
          <span>{t("payment.bookingId")}</span>
          <input
            type="number"
            min="1"
            value={form.bookingIdInput}
            onChange={(e) => form.setBookingIdInput(e.target.value)}
            placeholder="123"
            required
          />
        </label>
        <label className="field">
          <span>{t("payment.sourceType")}</span>
          <select
            value={form.sourceType}
            onChange={(e) => form.setSourceType(e.target.value)}
          >
            <option value="stcpay">{t("payment.sources.stcpay")}</option>
            <option value="token">{t("payment.sources.token")}</option>
            <option value="applepay">{t("payment.sources.applepay")}</option>
            <option value="samsungpay">{t("payment.sources.samsungpay")}</option>
          </select>
        </label>
        <label className="field">
          <span>{t("payment.sourceValue")}</span>
          <input
            type="text"
            value={form.sourceValue}
            onChange={(e) => form.setSourceValue(e.target.value)}
            placeholder={t("payment.sourceValuePlaceholder")}
          />
        </label>
        <label className="field">
          <span>{t("payment.callbackUrl")}</span>
          <input
            type="url"
            value={form.callbackUrl}
            onChange={(e) => form.setCallbackUrl(e.target.value)}
            placeholder="https://example.com/payments/return"
          />
        </label>
        <div className="payments-actions">
          <button type="submit" disabled={form.status === "loading"}>
            {form.status === "loading"
              ? t("payment.processing")
              : t("payment.payNow")}
          </button>
          <p className="helper">
            {t("payment.idempotency")}: {form.idempotencyKey}
          </p>
        </div>
      </form>

      {form.status === "error" && form.error && (
        <p className="error">{form.error}</p>
      )}
      {form.status === "ready" && form.result && (
        <pre className="payment-result">{JSON.stringify(form.result, null, 2)}</pre>
      )}
    </section>
  );
}