"use client";

import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { Button } from "@/components/ui/button";
import { Building2, GripVertical, Pencil } from "lucide-react";
import { cn } from "@/lib/utils";
import Link from "next/link";
import type { Account } from "@/lib/types";
import { getAccountBalance } from "@/lib/account-utils";

interface DraggableAccountItemProps {
  account: Account;
  onEditAccount: (account: Account) => void;
  formatCurrency: (amount: number) => string;
}

export function DraggableAccountItem({
  account,
  onEditAccount,
  formatCurrency,
}: DraggableAccountItemProps) {
  const realBalance = getAccountBalance(account);
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({
    id: `account-${account.id}`,
    data: {
      type: "account",
      account,
    },
  });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    opacity: isDragging ? 0.5 : 1,
  };

  return (
    <div
      ref={setNodeRef}
      style={style}
      className={cn(
        "flex items-center gap-2 p-2 rounded-lg hover:bg-muted/50 group ml-12",
        isDragging && "bg-muted/80"
      )}
    >
      <button
        {...attributes}
        {...listeners}
        className="p-1 hover:bg-muted rounded cursor-grab active:cursor-grabbing"
      >
        <GripVertical className="w-4 h-4 text-muted-foreground" />
      </button>
      <Building2 className="w-4 h-4 text-muted-foreground" />
      <Link
        href={`/transactions?accountId=${account.id}`}
        className="flex-1 text-sm hover:text-primary hover:underline truncate"
      >
        {account.name}
        {account.accountNumber && (
          <span className="text-muted-foreground">
            {" "}({account.accountNumber})
          </span>
        )}
      </Link>
      <span
        className={cn(
          "text-sm tabular-nums",
          realBalance >= 0 ? "text-emerald-600" : "text-red-600"
        )}
      >
        {formatCurrency(realBalance)}
      </span>
      <Button
        variant="ghost"
        size="icon"
        className="h-7 w-7 opacity-0 group-hover:opacity-100"
        onClick={() => onEditAccount(account)}
      >
        <Pencil className="w-4 h-4" />
      </Button>
    </div>
  );
}