import { Eye, EyeOff, ShieldCheck, ChevronRight, Plus, Store } from "lucide-react";
import { Link } from "@tanstack/react-router";
import { formatNaira } from "@/lib/format";
import { cn } from "@/lib/utils";
import { usePrivacyStore } from "@/stores/privacy";

/**
 * OPay-style wallet card: a compact solid brand panel with an "Available
 * balance" label, privacy eye, transaction-history shortcut, the balance and
 * an "Add money" pill — plus an attached darker strip for today's activity.
 */
export function BalanceCard({
  balance,
  spent = 0,
}: {
  balance: number;
  name?: string | null;
  spent?: number;
  onQr?: () => void;
}) {
  const show = usePrivacyStore((s) => s.visible);
  const toggle = usePrivacyStore((s) => s.toggle);

  return (
    <div className="overflow-hidden rounded-2xl shadow-card">
      <div className="relative bg-gradient-wallet p-3.5 text-primary-foreground">
        <div className="pointer-events-none absolute -right-10 -top-12 h-28 w-28 rounded-full bg-white/15 blur-3xl" />

        <div className="relative flex items-center justify-between">
          <div className="flex items-center gap-1.5">
            <ShieldCheck className="h-3.5 w-3.5 opacity-90" />
            <span className="text-[11px] font-medium opacity-90">Available balance</span>
            <button
              onClick={toggle}
              className="rounded-full p-0.5 transition hover:bg-white/20"
              aria-label={show ? "Hide all amounts" : "Show all amounts"}
              aria-pressed={!show}
            >
              {show ? <Eye className="h-3.5 w-3.5" /> : <EyeOff className="h-3.5 w-3.5" />}
            </button>
          </div>
          <Link
            to="/app/history"
            className="flex items-center gap-0.5 text-[11px] font-medium opacity-90 transition hover:opacity-100"
          >
            Transaction history <ChevronRight className="h-3.5 w-3.5" />
          </Link>
        </div>

        <div className="relative mt-2 flex items-end justify-between gap-3">
          <Link to="/app/history" className="flex items-center gap-1">
            <span
              className={cn(
                "text-[26px] font-extrabold leading-none tracking-tight tabular-nums transition-all duration-300",
                !show && "tracking-[0.12em]",
              )}
            >
              {show ? formatNaira(balance) : "****"}
            </span>
            <ChevronRight className="h-4 w-4 opacity-80" />
          </Link>

          <Link
            to="/app/wallet"
            className="flex shrink-0 items-center gap-1 rounded-full bg-white/20 px-3.5 py-2 text-xs font-bold backdrop-blur transition hover:bg-white/30 active:scale-[0.98]"
          >
            <Plus className="h-3.5 w-3.5" /> Add money
          </Link>
        </div>
      </div>

      <Link
        to="/app/history"
        className="flex items-center gap-2 bg-primary/12 px-3.5 py-2.5 transition hover:bg-primary/20"
      >
        <span className="grid h-6 w-6 place-items-center rounded-lg bg-primary/15 text-primary">
          <Store className="h-3.5 w-3.5" />
        </span>
        <span className="flex-1 truncate text-xs font-medium text-foreground">
          This month&apos;s spending:{" "}
          <span className="font-bold text-primary">{show ? formatNaira(spent) : "₦ ••••"}</span>
        </span>
        <ChevronRight className="h-4 w-4 text-muted-foreground" />
      </Link>
    </div>
  );
}