"use client";

import { useState } from "react";
import { useSearchParams } from "next/navigation";
import { CheckCircle2, Bitcoin } 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";

export default function AgentMoneyInCryptoView() {
  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 [txnHash, setTxnHash] = useState("");
  const [error, setError] = useState("");

  const mutation = useMutation({
    mutationFn: () => agentMoneyInApi.confirmCrypto(identifier, txnHash),
    onError: (err) => {
      setError(isApiError(err) ? err.message : t("agent.moneyIn.crypto.errors.submitFailed"));
    },
  });

  function onSubmit(e: { preventDefault(): void }) {
    e.preventDefault();
    const val = txnHash.trim();
    if (!val) {
      setError(t("agent.moneyIn.crypto.errors.hashRequired"));
      return;
    }
    setError("");
    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.crypto.successTitle")}
            </h2>
            <p className="mt-2 max-w-sm text-sm text-slate-500 dark:text-slate-400">
              {t("agent.moneyIn.crypto.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.crypto.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">
            <Bitcoin className="h-6 w-6" />
          </div>
          <h2 className="text-center text-lg font-bold text-slate-900 dark:text-white">
            {t("agent.moneyIn.crypto.title")}
          </h2>
          <p className="mt-1 text-center text-sm text-slate-500 dark:text-slate-400">
            {t("agent.moneyIn.crypto.subtitle")}
          </p>

          <form onSubmit={onSubmit} noValidate className="mt-6 space-y-4">
            <FormField
              label={t("agent.moneyIn.crypto.txnHashLabel")}
              value={txnHash}
              onChange={(e) => {
                setTxnHash(e.target.value);
                setError("");
              }}
              placeholder={t("agent.moneyIn.crypto.txnHashPlaceholder")}
              required
              error={error || undefined}
            />

            <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.crypto.submitting") : t("agent.moneyIn.crypto.submit")}
            </Button>
          </form>
        </div>
      </div>
    </Container>
  );
}