"use client";

import { useState, type ComponentType } from "react";
import { useSearchParams } from "next/navigation";
import {
  ArrowLeft,
  ArrowLeftRight,
  Banknote,
  Building2,
  Check,
  Copy,
  CreditCard,
  DollarSign,
  Download,
  Hash,
  PiggyBank,
  Receipt,
  Target,
  TrendingUp,
  Wallet,
} from "lucide-react";
import Link from "next/link";
import { Container } from "@/components/common/Container";
import { Card, CardContent } from "@/components/common/Card";
import { Button, ButtonLink } from "@/components/common/Button";
import { StatusBadge } from "@/components/app/StatusBadge";
import { TransactionDetailSkeleton } from "@/components/skeletons/TransactionDetailSkeleton";
import { useTransactions } from "@/hooks/queries/useTransactions";
import { useTranslation } from "@/hooks/useTranslation";
import { mapTransactionStatus } from "@/lib/transactionStatus";
import type { ApiRemittanceData } from "@/api/transaction.api";

function buildName(rd: ApiRemittanceData): string {
  return [rd.first_name, rd.middle_name, rd.last_name].filter(Boolean).join(" ");
}

export function TransactionDetailView() {
  const { t } = useTranslation();
  const id = useSearchParams().get("id");
  const { data, isLoading } = useTransactions();
  const [copied, setCopied] = useState(false);

  const tx = data?.transaction.find((x) => x.trx_id === id);

  async function copyLink() {
    if (!tx?.share_link) return;
    try {
      await navigator.clipboard.writeText(tx.share_link);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch {
      /* ignore */
    }
  }

  if (isLoading) {
    return <TransactionDetailSkeleton />;
  }

  if (!tx) {
    return (
      <Container>
        <Card>
          <CardContent>
            <p className="text-sm text-slate-600 dark:text-slate-300">
              {t("app.transactions.detail.notFound")}
            </p>
            <ButtonLink href="/transactions" variant="outline" className="mt-4">
              <ArrowLeft className="h-4 w-4 rtl:-scale-x-100" />
              {t("app.transactions.title")}
            </ButtonLink>
          </CardContent>
        </Card>
      </Container>
    );
  }

  const rd = tx.remittance_data;
  const recipientName = buildName(rd);
  const txStatus = mapTransactionStatus(tx.status);

  const fields: Array<{ label: string; value: string; icon: ComponentType<{ className?: string }> }> = [
    { label: "MTCN Number", value: tx.trx_id, icon: Hash },
    { label: "Transaction Type", value: rd.type, icon: ArrowLeftRight },
    { label: "Method Name", value: rd.method_name, icon: Building2 },
    { label: "Account Number", value: rd.account_number, icon: CreditCard },
    { label: "Sender Amount", value: `${rd.send_money} ${rd.sender_currency}`, icon: Banknote },
    {
      label: "Exchange Rate",
      value: `1.00 ${rd.sender_currency} = ${rd.receiver_ex_rate} ${rd.currency.code}`,
      icon: TrendingUp,
    },
    { label: "Fees & Charges", value: `${rd.fees} ${rd.sender_currency}`, icon: Receipt },
    { label: "Sending Purpose", value: rd.sending_purpose, icon: Target },
    { label: "Source Of Fund", value: rd.source, icon: PiggyBank },
    { label: "Payment Method", value: rd.currency.name, icon: Wallet },
    {
      label: "Payment Method Exchange Rate",
      value: `1.00 ${rd.sender_currency} = ${rd.currency.rate} ${rd.currency.code}`,
      icon: TrendingUp,
    },
    { label: "Payable Amount", value: `${rd.payable_amount} ${rd.currency.code}`, icon: DollarSign },
  ];

  return (
    <Container className="max-w-full space-y-6">
      <Link
        href="/transactions"
        className="inline-flex items-center gap-1.5 text-sm font-semibold text-slate-600 transition hover:text-brand-600 dark:text-slate-300 dark:hover:text-brand-300"
      >
        <ArrowLeft className="h-4 w-4 rtl:-scale-x-100" />
        {t("app.transactions.title")}
      </Link>

      <Card>
        <CardContent className="space-y-6">
          <div className="flex flex-wrap items-start justify-between gap-4">
            <div>
              <p className="text-lg font-bold text-slate-900 dark:text-white">{recipientName}</p>
              <p className="mt-0.5 text-sm text-slate-500 dark:text-slate-400">
                {rd.type}
              </p>
            </div>
            <StatusBadge status={txStatus} size="md" />
          </div>

          <dl className="divide-y divide-slate-100 dark:divide-slate-800">
            {fields.map(({ label, value, icon: Icon }) => (
              <div key={label} className="flex items-start justify-between gap-4 py-3">
                <dt className="flex shrink-0 items-center gap-2 text-sm text-slate-500 dark:text-slate-400">
                  <Icon className="icon-sm shrink-0 text-slate-400 dark:text-slate-500" />
                  {label}
                </dt>
                <dd className="break-all text-end text-sm font-semibold tabular-nums text-slate-900 dark:text-white">
                  {value}
                </dd>
              </div>
            ))}
          </dl>

          <div className="flex flex-wrap gap-3 pt-2">
            <ButtonLink
              href={tx.download_link}
              variant="outline"
              size="sm"
              target="_blank"
              rel="noreferrer"
            >
              <Download className="h-4 w-4" />
              {t("app.transactions.detail.downloadReceipt")}
            </ButtonLink>
            <Button type="button" variant="outline" size="sm" onClick={copyLink}>
              {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
              {copied ? "Copied!" : "Copy Link"}
            </Button>
          </div>
        </CardContent>
      </Card>
    </Container>
  );
}