"use client";

import { useState } from "react";
import { Check, CheckCircle2, Download, Share2 } from "lucide-react";
import { Modal } from "@/components/app/Modal";
import { Button, ButtonLink } from "@/components/common/Button";
import { useTranslation } from "@/hooks/useTranslation";

interface Props {
  open: boolean;
  onClose: () => void;
  trxId: string;
  shareLink: string;
  downloadLink: string;
}

/** Shown on /transactions after a redirect back from a hosted payment gateway
 *  (success_url carries trx/share_link/download_link) — lets the user share or
 *  download a copy of the just-completed transfer's receipt. */
export function TransferSuccessModal({ open, onClose, trxId, shareLink, downloadLink }: Props) {
  const { t } = useTranslation();
  const [copied, setCopied] = useState(false);

  async function handleShare() {
    if (typeof navigator !== "undefined" && navigator.share) {
      try {
        await navigator.share({ title: t("app.send.successTitle"), url: shareLink });
      } catch {
        /* user cancelled the native share sheet — nothing more to do */
      }
      return;
    }
    try {
      await navigator.clipboard.writeText(shareLink);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch {
      /* clipboard unavailable — nothing more we can do */
    }
  }

  return (
    <Modal
      open={open}
      onClose={onClose}
      title={t("app.send.successTitle")}
      footer={
        <Button type="button" variant="outline" size="sm" onClick={onClose} className="w-full sm:w-auto">
          {t("app.transactions.successModal.gotIt")}
        </Button>
      }
    >
      <div className="flex flex-col items-center text-center">
        <span className="grid h-16 w-16 place-items-center rounded-2xl bg-gradient-to-br from-accent-100 to-accent-50 text-accent-600 animate-scale-in dark:from-accent-500/25 dark:to-accent-500/5 dark:text-accent-300">
          <CheckCircle2 className="h-8 w-8" />
        </span>
        <p className="mt-4 text-sm text-slate-600 dark:text-slate-300">
          {t("app.send.successBody")}
        </p>
        <div className="mt-5 inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-50 px-4 py-2 text-xs font-semibold tabular-nums text-slate-700 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200">
          {t("app.send.reference")} · {trxId}
        </div>

        <div className="mt-6 flex w-full flex-col gap-3 sm:flex-row">
          <ButtonLink
            href={downloadLink}
            target="_blank"
            rel="noreferrer"
            variant="outline"
            size="md"
            className="flex-1"
          >
            <Download className="h-4 w-4" />
            {t("app.transactions.detail.downloadReceipt")}
          </ButtonLink>
          <Button type="button" size="md" onClick={handleShare} className="flex-1">
            {copied ? <Check className="h-4 w-4" /> : <Share2 className="h-4 w-4" />}
            {copied ? t("app.transactions.successModal.shareCopied") : t("app.transactions.successModal.share")}
          </Button>
        </div>
      </div>
    </Modal>
  );
}