"use client";

import { useState } from "react";
import { useSearchParams } from "next/navigation";
import { CheckCircle2 } from "lucide-react";
import { useMutation } from "@tanstack/react-query";
import { Container } from "@/components/common/Container";
import { Card, CardContent } from "@/components/common/Card";
import { Button } from "@/components/common/Button";
import { FormField } from "@/components/app/FormField";
import { sendRemittanceApi } from "@/api/sendRemittance.api";
import { useKycGate } from "@/hooks/useKycGate";
import { KycGate } from "@/components/app/KycGate";

export default function SendCryptoView() {
  const kycGateStatus = useKycGate();
  const searchParams = useSearchParams();
  const trxId = searchParams.get("trxId") ?? "";

  const [txnHash, setTxnHash] = useState("");
  const [error, setError] = useState("");

  const mutation = useMutation({
    mutationFn: () => sendRemittanceApi.confirmCrypto(trxId, txnHash),
  });

  function onSubmit(e: { preventDefault(): void }) {
    e.preventDefault();
    const val = txnHash.trim();
    if (!val) {
      setError("Transaction hash is required");
      return;
    }
    setError("");
    mutation.mutate();
  }

  if (mutation.isSuccess) {
    return (
      <Container className="max-w-lg">
        <Card>
          <CardContent>
            <div className="py-6 text-center">
              <span className="mx-auto grid h-16 w-16 place-items-center rounded-2xl bg-gradient-to-br from-accent-100 to-accent-50 text-accent-600 dark:from-accent-500/25 dark:to-accent-500/5 dark:text-accent-300">
                <CheckCircle2 className="h-8 w-8" />
              </span>
              <h2 className="mt-5 text-[length:var(--text-lg-fixed)] font-bold text-slate-900 dark:text-white">
                Payment Confirmed
              </h2>
              <p className="mt-2 text-sm text-slate-500 dark:text-slate-400">
                Your crypto transaction has been submitted for verification.
              </p>
            </div>
          </CardContent>
        </Card>
      </Container>
    );
  }

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

  return (
    <Container className="max-w-lg">
      <Card>
        <CardContent>
          <h2 className="mb-1 text-lg font-bold text-slate-900 dark:text-white">
            Confirm Crypto Payment
          </h2>
          <p className="mb-6 text-sm text-slate-500 dark:text-slate-400">
            Paste your blockchain transaction hash below to confirm the payment.
          </p>

          <form onSubmit={onSubmit} noValidate className="space-y-5">
            <div className="space-y-1.5">
              <FormField
                label="Transaction Hash *"
                value={txnHash}
                onChange={(e) => {
                  setTxnHash(e.target.value);
                  setError("");
                }}
                placeholder="e.g. 0x4a3b…"
                required
              />
              {error && (
                <p className="text-xs font-medium text-rose-600">{error}</p>
              )}
              {mutation.isError && (
                <p className="text-xs font-medium text-rose-600">
                  Submission failed. Check the hash and try again.
                </p>
              )}
            </div>

            <Button
              type="submit"
              size="lg"
              loading={mutation.isPending}
              disabled={mutation.isPending}
              className="w-full"
            >
              Confirm Payment
            </Button>
          </form>
        </CardContent>
      </Card>
    </Container>
  );
}