import Link from "next/link";
import { Check, Pencil, Trash2, Undo2, Landmark } from "lucide-react";
import { ConfirmButton } from "./ConfirmButton";
import { deleteTransaction, togglePaid } from "@/app/w/[ws]/actions";
import { dateBR, money, today } from "@/lib/format";
import type { Account, Category, Transaction } from "@/lib/types";

export function StatusBadge({ tx }: { tx: Transaction }) {
  if (tx.paid_at) return <span className="badge bg-stone-100 text-stone-600">{tx.type === "receita" ? "Recebido" : "Pago"}</span>;
  if (tx.date < today()) return <span className="badge bg-red-100 text-red-700">Atrasado</span>;
  return <span className="badge bg-amber-100 text-amber-800">Pendente</span>;
}

export function TransactionRow({
  tx, ws, categories, accounts, members, editHref, showStatus = true,
}: {
  tx: Transaction;
  ws: string;
  categories: Map<string, Category>;
  accounts: Map<string, Account>;
  members: Map<string, string>;
  editHref: string;
  showStatus?: boolean;
}) {
  const cat = tx.category_id ? categories.get(tx.category_id) : null;
  const acc = tx.account_id ? accounts.get(tx.account_id) : null;
  return (
    <tr className="hover:bg-stone-50">
      <td className="whitespace-nowrap text-stone-500 tabular">{dateBR(tx.date)}</td>
      <td>
        <div className="flex items-center gap-1.5 font-medium">
          {tx.source === "openfinance" && <Landmark size={12} className="text-stone-400" aria-label="Importado via Open Finance" />}
          {tx.description}
        </div>
        <div className="text-xs text-stone-500">
          {[tx.counterparty, acc?.name, tx.created_by && members.get(tx.created_by) ? `por ${members.get(tx.created_by)}` : null]
            .filter(Boolean).join(" · ")}
        </div>
      </td>
      <td>
        {cat ? (
          <span className="inline-flex items-center gap-1.5 text-stone-700">
            <span className="h-2 w-2 rounded-full" style={{ background: cat.color }} /> {cat.name}
          </span>
        ) : <span className="text-stone-400">—</span>}
      </td>
      {showStatus && <td><StatusBadge tx={tx} /></td>}
      <td className={`whitespace-nowrap text-right font-medium tabular ${tx.type === "receita" ? "text-income" : "text-expense"}`}>
        {tx.type === "receita" ? "+" : "−"} {money(tx.amount)}
      </td>
      <td className="whitespace-nowrap text-right">
        <div className="inline-flex items-center gap-0.5">
          <form action={togglePaid}>
            <input type="hidden" name="ws" value={ws} />
            <input type="hidden" name="id" value={tx.id} />
            <input type="hidden" name="paid" value={tx.paid_at ? "1" : "0"} />
            <button className="btn-ghost" title={tx.paid_at ? "Marcar como pendente" : "Marcar como pago hoje"}>
              {tx.paid_at ? <Undo2 size={14} /> : <Check size={14} />}
            </button>
          </form>
          <Link href={editHref} className="btn-ghost" title="Editar"><Pencil size={14} /></Link>
          <form action={deleteTransaction}>
            <input type="hidden" name="ws" value={ws} />
            <input type="hidden" name="id" value={tx.id} />
            <ConfirmButton message={`Excluir "${tx.description}"?`} className="btn-ghost hover:text-red-600" title="Excluir"><Trash2 size={14} /></ConfirmButton>
          </form>
        </div>
      </td>
    </tr>
  );
}