"use client";

import Link from "next/link";
import { ArrowRight } from "lucide-react";
import { StatusBadge } from "@/components/app/StatusBadge";
import { transactionDetailHref } from "@/constants/routes";
import { avatarTint, cn, formatCurrency } from "@/lib/utils";
import { mapTransactionStatus } from "@/lib/transactionStatus";
import type { ApiTransaction } from "@/api/transaction.api";

function formatRelative(iso: string | undefined): string {
  if (!iso) return "";
  const date = new Date(iso);
  const diffMs = Date.now() - date.getTime();
  const day = 1000 * 60 * 60 * 24;
  if (diffMs < day) return date.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" });
  if (diffMs < day * 7) return date.toLocaleDateString(undefined, { weekday: "short" });
  return date.toLocaleDateString(undefined, { month: "short", day: "numeric" });
}

interface Props {
  transaction: ApiTransaction;
}

export function TransactionRow({ transaction: tx }: Props) {
  const rd = tx.remittance_data;
  const name = [rd.first_name, rd.middle_name, rd.last_name].filter(Boolean).join(" ");
  const initials = name.split(" ").map((p) => p.charAt(0)).slice(0, 2).join("").toUpperCase();
  const receiveAmount = (parseFloat(rd.send_money) * parseFloat(rd.receiver_ex_rate)).toFixed(2);
  const status = mapTransactionStatus(tx.status);

  return (
    <Link
      href={transactionDetailHref(tx.trx_id)}
      prefetch={false}
      className="group flex items-center gap-3 rounded-2xl border border-transparent px-3 py-3 transition-all duration-200 hover:border-slate-200 hover:bg-slate-50/70 dark:hover:border-slate-800 dark:hover:bg-slate-900/50"
    >
      <div
        aria-hidden
        className={cn("icon-box-sm grid shrink-0 place-items-center rounded-full text-sm font-bold", avatarTint(name))}
      >
        {initials || "?"}
      </div>
      <div className="min-w-0 flex-1">
        <div className="flex items-center gap-2">
          <span className="truncate text-sm font-semibold text-slate-900 dark:text-white">
            {name}
          </span>
        </div>
        <div className="mt-0.5 flex items-center gap-2 text-xs text-slate-500 dark:text-slate-400">
          <span className="tabular-nums">{tx.trx_id}</span>
          <span aria-hidden>·</span>
          <span>{formatRelative(tx.created_at)}</span>
        </div>
      </div>
      <div className="hidden sm:block">
        <StatusBadge status={status} />
      </div>
      <div className="text-end">
        <div className="text-sm font-bold tabular-nums text-slate-900 dark:text-white">
          {formatCurrency(parseFloat(rd.send_money), rd.sender_currency)}
        </div>
        <div className="text-xs tabular-nums text-slate-500 dark:text-slate-400">
          {formatCurrency(parseFloat(receiveAmount), rd.receiver_currency)}
        </div>
      </div>
      <ArrowRight className="icon-md hidden shrink-0 text-slate-400 transition-transform rtl:-scale-x-100 group-hover:translate-x-0.5 sm:block" />
    </Link>
  );
}