import { useState } from "react";
import {
  ArrowDownToLine,
  ArrowLeftRight,
  ArrowUpDown,
  History,
  PencilLine,
  Star,
} from "lucide-react";
import { useNavigate } from "@tanstack/react-router";
import { Button } from "@/components/ui/button";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import type { Wallet } from "@/lib/api";
import { useSetDefaultWallet } from "@/lib/queries";
import { DepositDialog } from "./DepositDialog";
import { AdjustBalanceDialog } from "./AdjustBalanceDialog";
import { TransferDialog } from "./TransferDialog";
import { EditWalletDialog } from "./EditWalletDialog";

const balanceFormatter = new Intl.NumberFormat("es-AR", {
  minimumFractionDigits: 2,
  maximumFractionDigits: 4,
});

interface WalletCardProps {
  wallet: Wallet;
}

export function WalletCard({ wallet }: WalletCardProps) {
  const navigate = useNavigate();
  const setDefaultWallet = useSetDefaultWallet();
  const [depositOpen, setDepositOpen] = useState(false);
  const [adjustOpen, setAdjustOpen] = useState(false);
  const [transferOpen, setTransferOpen] = useState(false);
  const [editOpen, setEditOpen] = useState(false);

  return (
    <>
      <div className="rounded-lg border p-4 space-y-3">
        <div className="flex items-start justify-between">
          <div className="flex items-center gap-2">
            <p className="font-medium">{wallet.name}</p>
            {wallet.isDefault && (
              <span className="rounded-full bg-primary/10 px-2 py-0.5 text-[10px] font-medium text-primary">
                Default
              </span>
            )}
          </div>
          <div className="flex items-center gap-1">
            <TooltipProvider>
              <Tooltip>
                <TooltipTrigger asChild>
                  <button
                    type="button"
                    onClick={() => setDefaultWallet.mutate(wallet.id)}
                    className={`transition-colors cursor-pointer ${
                      wallet.isDefault
                        ? "text-yellow-500 hover:text-yellow-600"
                        : "text-muted-foreground hover:text-foreground"
                    }`}
                  >
                    <Star
                      className="size-4"
                      fill={wallet.isDefault ? "currentColor" : "none"}
                    />
                  </button>
                </TooltipTrigger>
                <TooltipContent>
                  {wallet.isDefault
                    ? "Billetera predeterminada"
                    : "Marcar como predeterminada"}
                </TooltipContent>
              </Tooltip>
            </TooltipProvider>
            <button
              type="button"
              onClick={() => setEditOpen(true)}
              className="text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
            >
              <PencilLine className="size-4" />
            </button>
          </div>
        </div>

        <p className="text-2xl font-bold tabular-nums">
          {balanceFormatter.format(wallet.balance)}
        </p>

        <div className="flex gap-1.5 flex-wrap">
          <TooltipProvider>
            <Tooltip>
              <TooltipTrigger asChild>
                <Button
                  variant="outline"
                  size="icon"
                  className="size-8"
                  onClick={() => setDepositOpen(true)}
                >
                  <ArrowDownToLine className="size-4" />
                </Button>
              </TooltipTrigger>
              <TooltipContent>Depositar</TooltipContent>
            </Tooltip>
          </TooltipProvider>

          <TooltipProvider>
            <Tooltip>
              <TooltipTrigger asChild>
                <Button
                  variant="outline"
                  size="icon"
                  className="size-8"
                  onClick={() => setAdjustOpen(true)}
                >
                  <ArrowUpDown className="size-4" />
                </Button>
              </TooltipTrigger>
              <TooltipContent>Ajustar saldo</TooltipContent>
            </Tooltip>
          </TooltipProvider>

          <TooltipProvider>
            <Tooltip>
              <TooltipTrigger asChild>
                <Button
                  variant="outline"
                  size="icon"
                  className="size-8"
                  onClick={() => setTransferOpen(true)}
                >
                  <ArrowLeftRight className="size-4" />
                </Button>
              </TooltipTrigger>
              <TooltipContent>Transferir</TooltipContent>
            </Tooltip>
          </TooltipProvider>

          <TooltipProvider>
            <Tooltip>
              <TooltipTrigger asChild>
                <Button
                  variant="outline"
                  size="icon"
                  className="size-8"
                  onClick={() =>
                    navigate({ to: "/wallets/movements", search: { walletId: wallet.id } })
                  }
                >
                  <History className="size-4" />
                </Button>
              </TooltipTrigger>
              <TooltipContent>Movimientos</TooltipContent>
            </Tooltip>
          </TooltipProvider>
        </div>
      </div>

      <DepositDialog
        wallet={wallet}
        open={depositOpen}
        onOpenChange={setDepositOpen}
      />
      <AdjustBalanceDialog
        wallet={wallet}
        open={adjustOpen}
        onOpenChange={setAdjustOpen}
      />
      <TransferDialog
        sourceWallet={wallet}
        open={transferOpen}
        onOpenChange={setTransferOpen}
      />
      <EditWalletDialog
        wallet={wallet}
        open={editOpen}
        onOpenChange={setEditOpen}
      />
    </>
  );
}
