import { ArrowLeftIcon, ExternalLinkIcon, HandCoinsIcon } from "lucide-react";
import { useLocation } from "react-router";
import { FormattedBitcoinAmount } from "src/components/FormattedBitcoinAmount";
import FormattedFiatAmount from "src/components/FormattedFiatAmount";
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from "src/components/ui/card";

import AppHeader from "src/components/AppHeader";
import Loading from "src/components/Loading";
import LottieLoading from "src/components/LottieLoading";
import LottieSuccess from "src/components/LottieSuccess";
import { ExternalLinkButton } from "src/components/ui/custom/external-link-button";
import { LinkButton } from "src/components/ui/custom/link-button";
import { useInfo } from "src/hooks/useInfo";
import { useMempoolApi } from "src/hooks/useMempoolApi";
import { MempoolTransaction } from "src/types";

export default function OnchainSuccess() {
  const { state } = useLocation();
  const { data: info } = useInfo();

  const amountSat = state?.amountSat as number;
  const txId = state?.txId as string;

  const { data: mempoolTx } = useMempoolApi<MempoolTransaction>(
    `/tx/${txId}`,
    3000
  );

  if (!info) {
    return <Loading />;
  }

  return (
    <div className="grid gap-4">
      <AppHeader pageTitle="Send to On-chain" title="Send to On-chain" />
      <div className="w-full md:max-w-lg">
        <Card className="w-full">
          <CardHeader>
            <CardTitle className="text-center">
              {mempoolTx?.status.confirmed
                ? "Payment Successful"
                : "Awaiting Confirmation"}
            </CardTitle>
          </CardHeader>
          <CardContent className="flex flex-col items-center gap-6">
            {mempoolTx?.status.confirmed ? (
              <LottieSuccess />
            ) : (
              <LottieLoading size={288} />
            )}
            <div className="flex flex-col gap-1 items-center">
              <p className="text-2xl font-medium slashed-zero">
                <FormattedBitcoinAmount amountMsat={amountSat * 1000} />
              </p>
              <FormattedFiatAmount amountSat={amountSat} className="text-xl" />
            </div>
          </CardContent>
          <CardFooter className="flex flex-col gap-2 pt-2">
            <ExternalLinkButton
              to={`${info?.mempoolUrl}/tx/${txId}`}
              variant="outline"
              className="w-full"
            >
              <ExternalLinkIcon className="w-4 h-4 mr-2" />
              View on Mempool
            </ExternalLinkButton>
            <LinkButton to="/wallet/send" variant="outline" className="w-full">
              <HandCoinsIcon className="w-4 h-4 mr-2" />
              Make Another Payment
            </LinkButton>
            <LinkButton to="/wallet" variant="link" className="w-full">
              <ArrowLeftIcon className="w-4 h-4 mr-2" />
              Back to Wallet
            </LinkButton>
          </CardFooter>
        </Card>
      </div>
    </div>
  );
}