"use client";

import { useState } from "react";
import { useSearchParams } from "next/navigation";
import { CheckCircle2, CreditCard, Lock } from "lucide-react";
import { useMutation } from "@tanstack/react-query";
import { Container } from "@/components/common/Container";
import { Button, ButtonLink } from "@/components/common/Button";
import { FormField } from "@/components/app/FormField";
import { agentMoneyInApi } from "@/api/agentMoney.api";
import { isApiError } from "@/lib/apiError";
import { useTranslation } from "@/hooks/useTranslation";
import { useAgentKycGate } from "@/hooks/useAgentKycGate";
import { AgentKycGate } from "@/components/agent/AgentKycGate";
import { cn } from "@/lib/utils";

function formatCardNumber(raw: string): string {
  const digits = raw.replace(/\D/g, "").slice(0, 16);
  return digits.replace(/(.{4})/g, "$1 ").trim();
}

function twoDigits(raw: string): string {
  return raw.replace(/\D/g, "").slice(0, 2);
}

export default function AgentAuthorizeView() {
  const { t } = useTranslation();
  const kycGateStatus = useAgentKycGate();
  const searchParams = useSearchParams();
  // Identifier travels via query param only — set by the money-in confirm step,
  // never shown as an editable field.
  const identifier = searchParams.get("identifier") ?? "";

  const [cardNumber, setCardNumber] = useState("");
  const [expiryYear, setExpiryYear] = useState("");
  const [expiryMonth, setExpiryMonth] = useState("");
  const [cvv, setCvv] = useState("");
  const [errors, setErrors] = useState<{ cardNumber?: string; expiry?: string; cvv?: string }>({});
  const [submitError, setSubmitError] = useState("");

  const mutation = useMutation({
    mutationFn: () =>
      agentMoneyInApi.authorizePayment({
        identifier,
        card_number: cardNumber.replace(/\s+/g, ""),
        // Backend expects 2-digit YY/MM — e.g. "30/12" for Dec 2030.
        date: `${expiryYear}/${expiryMonth}`,
        code: cvv,
      }),
    onError: (err) => {
      setSubmitError(isApiError(err) ? err.message : t("agent.moneyIn.authorize.errors.submitFailed"));
    },
  });

  function onSubmit(e: { preventDefault(): void }) {
    e.preventDefault();
    const digits = cardNumber.replace(/\s+/g, "");
    const next: typeof errors = {};
    if (!/^\d{16}$/.test(digits)) next.cardNumber = t("agent.moneyIn.authorize.errors.cardNumberInvalid");
    if (!/^\d{2}$/.test(expiryYear) || !/^\d{2}$/.test(expiryMonth) || Number(expiryMonth) < 1 || Number(expiryMonth) > 12) {
      next.expiry = t("agent.moneyIn.authorize.errors.expiryInvalid");
    }
    if (!/^\d{3,4}$/.test(cvv)) next.cvv = t("agent.moneyIn.authorize.errors.cvvInvalid");
    setErrors(next);
    if (Object.keys(next).length > 0) return;
    setSubmitError("");
    mutation.mutate();
  }

  if (mutation.isSuccess) {
    return (
      <Container className="max-w-lg">
        <div className="overflow-hidden rounded-3xl border border-slate-200/60 bg-white shadow-sm dark:border-slate-800/60 dark:bg-slate-900/40">
          <div className="flex flex-col items-center p-10 text-center">
            <div className="relative mb-6">
              <div className="absolute inset-0 animate-ping rounded-full bg-emerald-400/20" />
              <div className="relative grid h-20 w-20 place-items-center rounded-full bg-gradient-to-br from-emerald-400 to-emerald-600 shadow-lg shadow-emerald-500/30">
                <CheckCircle2 className="h-10 w-10 text-white" />
              </div>
            </div>
            <h2 className="text-2xl font-black tracking-tight text-slate-900 dark:text-white">
              {t("agent.moneyIn.authorize.successTitle")}
            </h2>
            <p className="mt-2 max-w-sm text-sm text-slate-500 dark:text-slate-400">
              {t("agent.moneyIn.authorize.successBody")}
            </p>
            <ButtonLink
              href="/agent/transactions"
              size="lg"
              className="mt-8 bg-gradient-to-r from-emerald-600 to-emerald-500 text-white font-bold shadow-lg shadow-emerald-500/25 hover:-translate-y-0.5 transition-all"
            >
              {t("agent.moneyIn.authorize.viewTransactions")}
            </ButtonLink>
          </div>
        </div>
      </Container>
    );
  }

  if (kycGateStatus) {
    return <AgentKycGate status={kycGateStatus} />;
  }

  return (
    <Container className="max-w-lg">
      <div className="overflow-hidden rounded-3xl border border-slate-200/60 bg-white shadow-sm dark:border-slate-800/60 dark:bg-slate-900/40">
        <div className="p-4 sm:p-8">
          <div className="mx-auto mb-5 grid h-14 w-14 place-items-center rounded-2xl bg-gradient-to-br from-emerald-500 to-brand-500 text-white shadow-lg">
            <CreditCard className="h-6 w-6" />
          </div>
          <h2 className="text-center text-lg font-bold text-slate-900 dark:text-white">
            {t("agent.moneyIn.authorize.title")}
          </h2>
          <p className="mt-1 text-center text-sm text-slate-500 dark:text-slate-400">
            {t("agent.moneyIn.authorize.subtitle")}
          </p>

          <form onSubmit={onSubmit} noValidate className="mt-6 space-y-4">
            <FormField
              label={t("agent.moneyIn.authorize.cardNumberLabel")}
              value={cardNumber}
              onChange={(e) => {
                setCardNumber(formatCardNumber(e.target.value));
                setErrors((prev) => ({ ...prev, cardNumber: undefined }));
              }}
              inputMode="numeric"
              autoComplete="cc-number"
              placeholder={t("agent.moneyIn.authorize.cardNumberPlaceholder")}
              error={errors.cardNumber}
              required
            />

            <div className="grid grid-cols-2 gap-x-4 gap-y-1.5">
              {/* Labels and inputs each share one grid row, so a wrapped label
                  (long translations) pushes both input groups down together
                  instead of only its own column. Labels stay single-line so
                  longer translations get room instead of wrapping. */}
              <label className="block whitespace-nowrap text-[length:var(--text-sm)] font-medium capitalize tracking-wide text-slate-500 dark:text-slate-400">
                {t("agent.moneyIn.authorize.expiryLabel")}
                <span className="ms-1 font-bold text-rose-500 dark:text-rose-400">*</span>
              </label>
              <label className="block whitespace-nowrap text-[length:var(--text-sm)] font-medium capitalize tracking-wide text-slate-500 dark:text-slate-400">
                {t("agent.moneyIn.authorize.cvvLabel")}
                <span className="ms-1 font-bold text-rose-500 dark:text-rose-400">*</span>
              </label>

              <div className="grid grid-cols-2 gap-2">
                <input
                  value={expiryYear}
                  onChange={(e) => {
                    setExpiryYear(twoDigits(e.target.value));
                    setErrors((prev) => ({ ...prev, expiry: undefined }));
                  }}
                  inputMode="numeric"
                  autoComplete="cc-exp-year"
                  placeholder={t("agent.moneyIn.authorize.yearLabel")}
                  aria-label={t("agent.moneyIn.authorize.yearLabel")}
                  aria-invalid={errors.expiry ? true : undefined}
                  className="h-11 w-full rounded-2xl border border-slate-200 bg-white px-4 text-center text-sm text-slate-900 outline-none transition placeholder:text-slate-400 focus:border-brand-500 focus:shadow-glow-sm dark:border-slate-700 dark:bg-slate-900 dark:text-white"
                />
                <input
                  value={expiryMonth}
                  onChange={(e) => {
                    setExpiryMonth(twoDigits(e.target.value));
                    setErrors((prev) => ({ ...prev, expiry: undefined }));
                  }}
                  inputMode="numeric"
                  autoComplete="cc-exp-month"
                  placeholder={t("agent.moneyIn.authorize.monthLabel")}
                  aria-label={t("agent.moneyIn.authorize.monthLabel")}
                  aria-invalid={errors.expiry ? true : undefined}
                  className="h-11 w-full rounded-2xl border border-slate-200 bg-white px-4 text-center text-sm text-slate-900 outline-none transition placeholder:text-slate-400 focus:border-brand-500 focus:shadow-glow-sm dark:border-slate-700 dark:bg-slate-900 dark:text-white"
                />
              </div>
              <input
                value={cvv}
                onChange={(e) => {
                  setCvv(e.target.value.replace(/\D/g, "").slice(0, 4));
                  setErrors((prev) => ({ ...prev, cvv: undefined }));
                }}
                type="password"
                inputMode="numeric"
                autoComplete="cc-csc"
                placeholder="123"
                aria-label={t("agent.moneyIn.authorize.cvvLabel")}
                aria-invalid={errors.cvv ? true : undefined}
                className={cn(
                  "h-11 w-full rounded-2xl border bg-white px-4 text-sm text-slate-900 outline-none transition placeholder:text-slate-400 focus:border-brand-500 focus:shadow-glow-sm dark:bg-slate-900 dark:text-white",
                  errors.cvv ? "border-rose-300 dark:border-rose-400/40" : "border-slate-200 dark:border-slate-700",
                )}
              />

              {errors.expiry && (
                <p className="text-xs font-medium text-rose-600 dark:text-rose-400">{errors.expiry}</p>
              )}
              {errors.cvv && (
                <p className="text-xs font-medium text-rose-600 dark:text-rose-400">{errors.cvv}</p>
              )}
            </div>

            {submitError && (
              <p className="text-xs font-medium text-rose-600 dark:text-rose-400">{submitError}</p>
            )}

            <Button
              type="submit"
              size="lg"
              loading={mutation.isPending}
              disabled={mutation.isPending}
              className="w-full bg-gradient-to-r from-emerald-600 to-emerald-500 font-bold text-white shadow-lg shadow-emerald-500/25 hover:from-emerald-500 hover:to-emerald-400 hover:-translate-y-0.5 transition-all duration-300"
            >
              {mutation.isPending ? t("agent.moneyIn.authorize.submitting") : t("agent.moneyIn.authorize.submit")}
            </Button>

            <div className="flex items-center justify-center gap-1.5 text-xs text-slate-500 dark:text-slate-400">
              <Lock className="h-3 w-3" aria-hidden />
              <span>{t("agent.moneyIn.authorize.securityNote")}</span>
            </div>
          </form>
        </div>
      </div>
    </Container>
  );
}