import { useQuery } from "@tanstack/react-query";
import { useNavigate } from "react-router-dom";
import { History, LogOut } from "lucide-react";
import { getBalance } from "@/api/driver";
import { formatMoney } from "@/lib/format";
import { useAuth } from "@/store/auth";
import { AppHeader } from "@/components/AppHeader";
import { Spinner } from "@/components/Spinner";

export function BalancePage() {
  const nav = useNavigate();
  const clear = useAuth((s) => s.clear);
  const { data, isLoading } = useQuery({ queryKey: ["balance"], queryFn: getBalance });

  const accounts = data?.accounts ?? [];
  const totalDebt = accounts.filter((a) => a.balance < 0).reduce((s, a) => s + a.balance, 0);

  return (
    <div>
      <AppHeader initials="" />
      <div className="card p-4 mb-4 text-center">
        <p className="text-muted text-xs mb-1">Общий долг</p>
        <p className={`text-2xl font-extrabold ${totalDebt < 0 ? "text-neg" : ""}`}>{formatMoney(totalDebt)}</p>
      </div>

      {isLoading ? (
        <div className="flex justify-center py-10"><Spinner /></div>
      ) : (
        <div className="mb-4">
          {accounts.map((a) => (
            <button
              key={a.bucket}
              onClick={() => nav("/topup", { state: { bucket: a.bucket } })}
              className="w-full flex justify-between items-center py-3 border-b border-line last:border-0 text-left"
            >
              <span className="text-sm">{a.bucket}</span>
              <b className={a.balance < 0 ? "text-neg" : "text-pos"}>{formatMoney(a.balance)}</b>
            </button>
          ))}
        </div>
      )}

      <button className="btn-primary" onClick={() => nav("/topup")}>Пополнить</button>

      <div className="flex justify-center gap-6 mt-6 text-muted text-xs">
        <button className="flex items-center gap-1.5" onClick={() => nav("/history")}>
          <History size={15} /> История
        </button>
        <button className="flex items-center gap-1.5" onClick={() => { clear(); nav("/login"); }}>
          <LogOut size={15} /> Выйти
        </button>
      </div>
    </div>
  );
}
