"use client";

import Link from "next/link";
import { useWallet } from "@/contexts/WalletContext";
import { useCart } from "@/contexts/CartContext";
import { useAccount } from "@/contexts/AccountContext";

export default function MarketCommerceBar() {
  const { usdStoreCredit, luxCredits } = useWallet();
  const { itemCount, hydrated } = useCart();
  const { user, hydrated: accReady } = useAccount();

  return (
    <div className="flex flex-wrap items-center justify-end gap-2 border-b border-[#00ff41]/15 bg-[#040805]/90 px-3 py-2 font-mono text-[10px] text-[#8fccb0]">
      <span className="text-[#5a8f6a]">Spendable</span>
      <span title="Bitcoin-funded USD">
        USD <strong className="text-[#7af598]">${usdStoreCredit.toFixed(2)}</strong>
      </span>
      <span className="text-[#00ff41]/25">|</span>
      <span title="LUX credits">
        LUX <strong className="text-[#b4ffcc]">{luxCredits.toLocaleString()}</strong>
      </span>
      {accReady && !user ? (
        <>
          <span className="text-[#00ff41]/25">|</span>
          <Link href="/sign-in?next=/market" className="text-[#7af598] underline hover:text-white">
            Sign in to pay
          </Link>
        </>
      ) : null}
      <span className="text-[#00ff41]/25">|</span>
      <Link
        href="/checkout"
        className="inline-flex items-center gap-1 rounded border border-[#00ff41]/35 px-2 py-1 text-[#c8ffd8] hover:border-[#00ff41]/60"
      >
        🛒 Checkout
        {hydrated && itemCount > 0 ? (
          <span className="rounded bg-[#ff00aa]/90 px-1 text-[9px] font-bold text-black">{itemCount}</span>
        ) : null}
      </Link>
      <Link href="/account/add-funds" className="rounded border border-[#00ff41]/20 px-2 py-1 hover:border-[#00ff41]/45">
        +Funds
      </Link>
    </div>
  );
}