"use client";

import Link from "next/link";
import { AlertTriangle } from "lucide-react";
import { useTranslation } from "react-i18next";

import { usePendingWalletReconcile } from "@/hooks/use-pending-wallet-reconcile";

/** 钱包盘：顶栏铃铛隐藏后，在钱包页展示待对账提醒入口 */
export function WalletPendingReconcileBanner() {
  const { t } = useTranslation("player");
  const { pending, unreadCount, hasPending } = usePendingWalletReconcile();

  if (!hasPending) {
    return null;
  }

  return (
    <div className="rounded-xl border border-amber-200 bg-amber-50 px-3 py-3 text-sm text-amber-950">
      <div className="flex items-start gap-2">
        <AlertTriangle className="mt-0.5 size-4 shrink-0 text-amber-600" aria-hidden />
        <div className="min-w-0 flex-1">
          <p className="font-bold text-amber-900">{t("wallet.pendingTitle")}</p>
          <p className="mt-1 text-xs leading-relaxed text-amber-950/85">
            {t("wallet.pendingDescription")}
          </p>
          {unreadCount > 0 ? (
            <p className="mt-1.5 text-xs font-semibold text-amber-800">
              {t("notifications.unreadCount", { count: unreadCount })}
            </p>
          ) : null}
          <Link
            href="/notifications"
            className="mt-2 inline-flex text-xs font-bold text-[#0b56b7] underline-offset-2 hover:underline"
          >
            {t("wallet.viewPendingReconcile", {
              defaultValue: "查看待对账详情（{{count}}）",
              count: pending.length,
            })}
          </Link>
        </div>
      </div>
    </div>
  );
}