"use client";

import { BellRing, CheckCheck } from "lucide-react";
import { useTranslation } from "react-i18next";

import { Button } from "@/components/ui/button";
import { usePendingWalletReconcile } from "@/hooks/use-pending-wallet-reconcile";
import { formatPlayerInstant } from "@/lib/player-datetime";
import { formatMinorAsCurrency } from "@/lib/money";
import { isCreditFundingPlayer } from "@/lib/player-funding-mode";
import {
  pendingReconcileDescriptionKey,
  pendingReconcileTitleKey,
} from "@/lib/pending-reconcile-notification";
import { usePlayerSessionStore } from "@/stores/player-session-store";
import { cn } from "@/lib/utils";

type WalletPendingReconcileSectionProps = {
  onViewLogs?: () => void;
};

/** 钱包页内嵌：待对账提醒（原独立 /notifications 页） */
export function WalletPendingReconcileSection({
  onViewLogs,
}: WalletPendingReconcileSectionProps) {
  const { t } = useTranslation("player");
  const creditMode = isCreditFundingPlayer(usePlayerSessionStore((state) => state.profile));
  const { pending, unreadPending, unreadCount, loading, markAsRead, markAllAsRead } =
    usePendingWalletReconcile();
  const unreadSet = new Set(unreadPending.map((item) => item.transfer_no));

  if (creditMode) {
    return null;
  }

  return (
    <section id="wallet-pending" className="scroll-mt-3 space-y-3">
      <div className="flex items-center justify-between rounded-xl border border-[#dce7f7] bg-[#f8fbff] px-3 py-2.5">
        <div className="flex items-center gap-2">
          <BellRing className="size-4 text-[#0b56b7]" aria-hidden />
          <p className="text-sm font-semibold text-[#0b3f96]">
            {t("notifications.title")}
            {unreadCount > 0 ? (
              <span className="ml-1.5 text-xs font-bold text-amber-700">
                ({t("notifications.unreadCount", { count: unreadCount })})
              </span>
            ) : null}
          </p>
        </div>
        <Button
          type="button"
          size="sm"
          variant="ghost"
          className="h-8 px-2 text-xs font-bold text-[#0b56b7] hover:bg-[#ebf2ff]"
          onClick={markAllAsRead}
          disabled={pending.length === 0 || unreadCount === 0}
        >
          <CheckCheck className="mr-1 size-3.5" aria-hidden />
          {t("notifications.markAllRead")}
        </Button>
      </div>

      {loading && pending.length === 0 ? (
        <div className="rounded-xl border border-[#dce7f7] bg-white px-4 py-6 text-center text-sm text-slate-500">
          {t("actions.loading")}
        </div>
      ) : null}

      {!loading && pending.length === 0 ? (
        <div className="rounded-xl border border-dashed border-[#dce7f7] bg-white px-4 py-8 text-center">
          <p className="text-sm text-slate-500">{t("notifications.empty")}</p>
        </div>
      ) : null}

      {pending.length > 0 ? (
        <ul className="space-y-2">
          {pending.map((item) => {
            const cardRead = !unreadSet.has(item.transfer_no);
            return (
              <li
                key={item.transfer_no}
                className={cn(
                  "rounded-xl border px-3 py-3 transition-colors",
                  cardRead
                    ? "border-[#e4eaf4] bg-white"
                    : "border-amber-200 bg-amber-50/80",
                )}
              >
                <div className="flex items-start justify-between gap-2">
                  <div className="min-w-0">
                    <p className="text-sm font-bold text-amber-900">
                      {t(pendingReconcileTitleKey(item.type))}
                    </p>
                    <p className="mt-0.5 text-xs text-slate-500">
                      {formatPlayerInstant(item.created_at)}
                    </p>
                  </div>
                  <div className="flex shrink-0 flex-col items-end gap-1">
                    <span className="rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-bold text-amber-800">
                      {t("notifications.pendingBadge")}
                    </span>
                    <span
                      className={cn(
                        "text-[11px] font-semibold",
                        cardRead ? "text-slate-400" : "text-amber-700",
                      )}
                    >
                      {cardRead ? t("notifications.read") : t("notifications.unread")}
                    </span>
                  </div>
                </div>

                <p className="mt-2 text-xs leading-relaxed text-amber-950/85">
                  {t(pendingReconcileDescriptionKey(item.type))}
                </p>

                <p className="mt-2 text-sm text-slate-700">
                  <span className="text-xs font-medium text-slate-500">
                    {t("notifications.amountLabel")}{" "}
                  </span>
                  {formatMinorAsCurrency(item.amount, item.currency_code)}
                </p>

                <div className="mt-3 flex items-center gap-2">
                  <Button
                    type="button"
                    size="sm"
                    variant="outline"
                    className="h-8 rounded-full border-[#dce7f7] px-3 text-xs font-semibold text-[#0b56b7]"
                    onClick={() => markAsRead(item.transfer_no)}
                  >
                    {t("notifications.markRead")}
                  </Button>
                  <Button
                    type="button"
                    size="sm"
                    className="h-8 rounded-full bg-[#07459f] px-3 text-xs font-semibold text-white hover:bg-[#063b88]"
                    onClick={() => {
                      markAsRead(item.transfer_no);
                      onViewLogs?.();
                    }}
                  >
                    {t("notifications.viewLogs")}
                  </Button>
                </div>
              </li>
            );
          })}
        </ul>
      ) : null}
    </section>
  );
}