import { Coins } from 'lucide-react';

import type { ProfileWalletLedgerResponse } from '../../../packages/shared/src/contracts/runtime';
import { PlatformActionButton } from '../common/PlatformActionButton';
import { PlatformEmptyState } from '../common/PlatformEmptyState';
import { PlatformPillBadge } from '../common/PlatformPillBadge';
import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
import { PlatformSubpanel } from '../common/PlatformSubpanel';
import { PlatformProfileSecondaryModalShell } from './PlatformProfileModalShell';
import { buildWalletLedgerPresentation } from '../rpg-entry/rpgEntryProfileFundsViewModel';
import { formatPlatformWorldTime } from '../rpg-entry/rpgEntryWorldPresentation';

export type PlatformProfileWalletLedgerModalProps = {
  ledger: ProfileWalletLedgerResponse | null;
  fallbackBalance: number;
  isLoading: boolean;
  error: string | null;
  onClose: () => void;
  onRetry: () => void;
};

/**
 * 个人中心泥点账单弹窗。
 * 保持 RPG 首页里既有的展示文案、状态分支和交互，仅把实现提取为共享组件。
 */
export function PlatformProfileWalletLedgerModal({
  ledger,
  fallbackBalance,
  isLoading,
  error,
  onClose,
  onRetry,
}: PlatformProfileWalletLedgerModalProps) {
  const walletLedgerPresentation = buildWalletLedgerPresentation(
    ledger,
    fallbackBalance,
  );
  const entries = walletLedgerPresentation.entries;

  return (
    <PlatformProfileSecondaryModalShell
      title="泥点账单"
      onClose={onClose}
      closeLabel="关闭泥点账单"
      closeButtonClassName="bg-white/78"
      panelClassName="relative !max-h-[min(92vh,42rem)] !max-w-[30rem] bg-[linear-gradient(180deg,#fff7f8_0%,#ffffff_38%,#f8fafc_100%)] text-zinc-950 shadow-2xl !rounded-[1.35rem] sm:!rounded-[1.35rem]"
      contentClassName="relative max-h-[min(92vh,42rem)] overflow-y-auto px-4 pb-5 pt-4 sm:px-5"
    >
      <div className="pr-10">
        <div className="text-[10px] font-black tracking-[0.22em] text-[#ff4056]">
          LEDGER
        </div>
        <div className="mt-1 text-2xl font-black">泥点账单</div>
        <PlatformPillBadge
          tone="profile"
          icon={<Coins className="h-3.5 w-3.5 text-[#ff4056]" />}
          className="mt-3 bg-white/70"
        >
          {walletLedgerPresentation.balanceLabel}
        </PlatformPillBadge>
      </div>

      {error ? (
        <PlatformStatusMessage tone="error" className="mt-4 rounded-xl py-3">
          <div>{error}</div>
          <PlatformActionButton
            surface="profile"
            shape="pill"
            size="xs"
            className="mt-3"
            onClick={onRetry}
          >
            重新加载
          </PlatformActionButton>
        </PlatformStatusMessage>
      ) : isLoading ? (
        <div className="mt-5 space-y-3">
          {Array.from({ length: 5 }).map((_, index) => (
            <div
              key={index}
              className="h-16 animate-pulse rounded-xl bg-zinc-100"
            />
          ))}
        </div>
      ) : entries.length === 0 ? (
        <PlatformEmptyState
          surface="subpanel"
          size="inline"
          className="mt-5 py-8"
        >
          暂无账单记录
        </PlatformEmptyState>
      ) : (
        <div className="mt-5 space-y-2.5">
          {entries.map((entry) => (
            <PlatformSubpanel
              as="div"
              key={entry.id}
              surface="flat"
              radius="xs"
              padding="none"
              className="flex items-center justify-between gap-3 px-3 py-3 shadow-sm"
            >
              <div className="min-w-0">
                <div className="truncate text-sm font-black text-zinc-900">
                  {entry.sourceLabel}
                </div>
                <div className="mt-1 text-xs font-semibold text-zinc-500">
                  {formatPlatformWorldTime(entry.createdAt)}
                </div>
              </div>
              <div className="shrink-0 text-right">
                <div
                  className={`text-base font-black ${
                    entry.isIncome ? 'text-emerald-600' : 'text-rose-500'
                  }`}
                >
                  {entry.amountLabel}
                </div>
                <div className="mt-1 text-[11px] font-semibold text-zinc-400">
                  {entry.balanceLabel}
                </div>
              </div>
            </PlatformSubpanel>
          ))}
        </div>
      )}
    </PlatformProfileSecondaryModalShell>
  );
}