import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { useFinanceData } from "@/context/FinanceDataContext";
import { cn } from "@/lib/utils";
import { useMoney } from "@/hooks/useMoney";
import { refinedMerchantLabel } from "@/lib/merchant";
import { normalizeCategory, UNCATEGORIZED } from "@/lib/categories";
import { Link, useNavigate } from "react-router-dom";
import { MerchantAvatar } from "@/components/elements/CategoryIcon";
import { CollapseToggle } from "@/components/dashboard/CollapseToggle";
import { useCollapsed } from "@/hooks/useCollapsed";
import { useMerchantRefinements } from "@/hooks/useMerchantRefinements";

export function RecentTransactions({ rail = false, limit }: { rail?: boolean; limit?: number }) {
  const { transactions } = useFinanceData();
  const { moneyAbs, date: fmtDate } = useMoney();
  const navigate = useNavigate();
  const [collapsed, toggle] = useCollapsed("recent");
  const { data: refinements } = useMerchantRefinements();
  // A transaction with no date (a malformed import/sync row) has no
  // meaningful recency and would crash the sort below (comparing null).
  const recent = transactions
    .filter((t) => t.date)
    .sort((a, b) => b.date.localeCompare(a.date))
    .slice(0, limit ?? (rail ? 14 : 8));

  if (recent.length === 0) {
    return (
      <Card className="border-border/50">
        <CardContent className="p-8 text-center text-muted-foreground text-sm">
          No recent transactions.
        </CardContent>
      </Card>
    );
  }

  return (
    <Card className="border-border/50">
      <CardHeader className={cn("pb-3 flex flex-row items-center justify-between", rail && "px-4")}>
        <div className="flex items-center gap-1">
          <CardTitle className="text-sm font-medium text-muted-foreground">Recent transactions</CardTitle>
          <CollapseToggle collapsed={collapsed} onToggle={toggle} label="recent transactions" controls="dash-recent" />
        </div>
        <Link to="/transactions" className="text-xs text-primary hover:text-primary/80 font-medium">View all</Link>
      </CardHeader>
      <CardContent id="dash-recent" className={cn("pt-0", rail && "px-4", collapsed && "hidden")}>
        <div className="space-y-0">
          {recent.map((txn) => (
            <div
              key={txn.id}
              className={cn(
                "border-b border-border/30 last:border-0 hover:bg-muted/30 transition-all duration-150 cursor-pointer rounded-md px-2 -mx-2",
                rail ? "py-2.5" : "flex items-center justify-between py-3"
              )}
              onClick={() => navigate(`/transactions/${txn.id}`)}
            >
              {rail ? (
                <>
                  <div className="flex items-baseline justify-between gap-2">
                    <p className="text-[13px] font-medium text-foreground truncate" title={txn.description}>
                      {refinedMerchantLabel(txn.description, refinements, txn.date, txn.category)}
                    </p>
                    <span className={cn("text-[13px] font-medium tabular-nums shrink-0", txn.amount >= 0 ? "text-chart-green" : "text-foreground")}>
                      {txn.amount >= 0 ? "+" : "-"}{moneyAbs(txn.amount)}
                    </span>
                  </div>
                  <p className="text-[11px] text-muted-foreground truncate">
                    {fmtDate(txn.date, "short")}
                    {normalizeCategory(txn.category) !== UNCATEGORIZED && <span> · {normalizeCategory(txn.category)}</span>}
                  </p>
                </>
              ) : (
                <>
                  <div className="flex items-center gap-3 min-w-0">
                    <MerchantAvatar description={txn.description} category={txn.category} />
                    <div className="min-w-0">
                      <p className="text-sm font-medium text-foreground truncate" title={txn.description}>
                        {refinedMerchantLabel(txn.description, refinements, txn.date, txn.category)}
                      </p>
                      <p className="text-xs text-muted-foreground">
                        {fmtDate(txn.date)}
                        {normalizeCategory(txn.category) !== UNCATEGORIZED && (
                          <span> · {normalizeCategory(txn.category)}</span>
                        )}
                      </p>
                    </div>
                  </div>
                  <span className={cn("text-sm font-medium tabular-nums ml-3 shrink-0", txn.amount >= 0 ? "text-chart-green" : "text-foreground")}>
                    {txn.amount >= 0 ? "+" : "-"}{moneyAbs(txn.amount)}
                  </span>
                </>
              )}
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}