import { Link } from "@tanstack/react-router";
import { ArrowDownLeft, ArrowUpRight, Paperclip } from "lucide-react";

import { cn } from "@/lib/utils";
import { formatRupiah, formatTanggalPendek, type Transaksi } from "@/lib/keuangan";

export function DaftarTransaksi({ items }: { items: Transaksi[] }) {
  if (items.length === 0) {
    return (
      <p className="rounded-2xl border border-dashed border-border bg-card px-4 py-10 text-center text-sm text-muted-foreground">
        Belum ada transaksi yang cocok.
      </p>
    );
  }

  return (
    <ul className="divide-y divide-border/70 overflow-hidden rounded-2xl border border-border/70 bg-card">
      {items.map((t) => {
        const masuk = t.jenis === "pemasukan";
        return (
          <li key={t.id}>
            <Link
              to="/transaksi/$id"
              params={{ id: t.id }}
              className="flex items-center gap-3 px-4 py-3 transition-colors hover:bg-muted/60"
            >
              <span
                className={cn(
                  "flex size-10 shrink-0 items-center justify-center rounded-full",
                  masuk ? "bg-accent text-primary" : "bg-muted text-muted-foreground",
                )}
              >
                {masuk ? (
                  <ArrowDownLeft className="size-5" />
                ) : (
                  <ArrowUpRight className="size-5" />
                )}
              </span>
              <div className="min-w-0 flex-1">
                <p className="truncate text-sm font-medium">{t.kategori}</p>
                <p className="truncate text-xs text-muted-foreground">
                  {formatTanggalPendek(t.tanggal)}
                  {t.sumber || t.tujuan ? ` · ${t.sumber ?? "?"} → ${t.tujuan ?? "?"}` : ""}
                </p>
              </div>
              {t.bukti_path && <Paperclip className="size-4 shrink-0 text-muted-foreground" />}
              <span
                className={cn(
                  "shrink-0 text-sm font-semibold tabular-nums",
                  masuk ? "text-primary" : "text-foreground",
                )}
              >
                {masuk ? "+" : "−"}
                {formatRupiah(Number(t.nominal))}
              </span>
            </Link>
          </li>
        );
      })}
    </ul>
  );
}