import {
  Archive,
  ArrowRight,
  Bell,
  BookOpen,
  Camera,
  ChevronRight,
  Clock3,
  Coins,
  Copy,
  Crown,
  House,
  MessageCircle,
  Pencil,
  Search,
  Settings,
  Sparkles,
  Ticket,
  UserPlus,
  UserRound,
} from 'lucide-react';
import {
  type ComponentType,
  type ReactNode,
  useEffect,
  useMemo,
  useState,
} from 'react';

import type {
  CustomWorldGalleryCard,
  CustomWorldLibraryEntry,
  PlatformBrowseHistoryEntry,
  ProfileDashboardCardKey,
  ProfileDashboardSummary,
  ProfileSaveArchiveSummary,
} from '../../../packages/shared/src/contracts/runtime';
import type { HydratedSavedGameSnapshot } from '../../persistence/runtimeSnapshotTypes';
import type { AuthUser } from '../../services/authService';
import type { CustomWorldProfile } from '../../types';
import { useAuthUi } from '../auth/AuthUiContext';
import { ResolvedAssetImage } from '../ResolvedAssetImage';
import { RpgEntryBrandLogo } from './RpgEntryBrandLogo';
import {
  buildPlatformWorldTags,
  describePlatformThemeLabel,
  formatPlatformWorldTime,
  type PlatformWorldCardLike,
  resolvePlatformWorldCoverImage,
  resolvePlatformWorldLeadPortrait,
} from './rpgEntryWorldPresentation';

export type PlatformHomeTab = 'home' | 'create' | 'saves' | 'profile';
export interface RpgEntryHomeViewProps {
  activeTab: PlatformHomeTab;
  onTabChange: (tab: PlatformHomeTab) => void;
  hasSavedGame: boolean;
  savedSnapshot: HydratedSavedGameSnapshot | null;
  saveEntries: ProfileSaveArchiveSummary[];
  saveError: string | null;
  featuredEntries: CustomWorldGalleryCard[];
  latestEntries: CustomWorldGalleryCard[];
  myEntries: CustomWorldLibraryEntry<CustomWorldProfile>[];
  historyEntries: PlatformBrowseHistoryEntry[];
  profileDashboard: ProfileDashboardSummary | null;
  isLoadingPlatform: boolean;
  isLoadingDashboard: boolean;
  isResumingSaveWorldKey: string | null;
  platformError: string | null;
  dashboardError: string | null;
  onContinueGame: (snapshot?: HydratedSavedGameSnapshot | null) => void;
  onResumeSave: (entry: ProfileSaveArchiveSummary) => void;
  onOpenCreateWorld: () => void;
  onOpenCreateTypePicker: () => void;
  onOpenGalleryDetail: (entry: CustomWorldGalleryCard) => void;
  onOpenLibraryDetail: (
    entry: CustomWorldLibraryEntry<CustomWorldProfile>,
  ) => void;
  onOpenProfileDashboardCard?: (cardKey: ProfileDashboardCardKey) => void;
  createTabContent?: ReactNode;
}

const PANEL_SURFACE_CLASS = 'platform-surface platform-surface--soft';
const HERO_SURFACE_CLASS =
  'platform-surface platform-surface--hero platform-interactive-card';
const MOBILE_PAGE_STAGE_CLASS =
  'platform-page-stage platform-remap-surface space-y-4 pb-2';
const DESKTOP_PAGE_STAGE_CLASS =
  'platform-page-stage platform-remap-surface space-y-5 pb-4';
const DESKTOP_LAYOUT_QUERY = '(min-width: 1024px)';
const PLATFORM_HOME_TABS: PlatformHomeTab[] = [
  'home',
  'create',
  'saves',
  'profile',
];

function usePlatformDesktopLayout() {
  const [isDesktopLayout, setIsDesktopLayout] = useState(() => {
    if (
      typeof window === 'undefined' ||
      typeof window.matchMedia !== 'function'
    ) {
      return false;
    }

    return window.matchMedia(DESKTOP_LAYOUT_QUERY).matches;
  });

  useEffect(() => {
    if (
      typeof window === 'undefined' ||
      typeof window.matchMedia !== 'function'
    ) {
      return;
    }

    const mediaQuery = window.matchMedia(DESKTOP_LAYOUT_QUERY);
    const updateLayout = (event?: MediaQueryListEvent) => {
      setIsDesktopLayout(event?.matches ?? mediaQuery.matches);
    };

    updateLayout();

    // 平台页只挂载当前断点外壳，避免隐藏的移动端/桌面端内容重复抢占查询。
    if (typeof mediaQuery.addEventListener === 'function') {
      mediaQuery.addEventListener('change', updateLayout);
      return () => mediaQuery.removeEventListener('change', updateLayout);
    }

    mediaQuery.addListener(updateLayout);
    return () => mediaQuery.removeListener(updateLayout);
  }, []);

  return isDesktopLayout;
}

function ResolvedAssetBackdrop({
  src,
  alt,
  className,
  ariaHidden = false,
}: {
  src?: string | null;
  alt: string;
  className: string;
  ariaHidden?: boolean;
}) {
  return (
    <ResolvedAssetImage
      src={src}
      alt={alt}
      aria-hidden={ariaHidden}
      className={className}
    />
  );
}

function SectionHeader({ title, detail }: { title: string; detail: string }) {
  return (
    <div className="mb-3">
      <div className="text-[10px] font-semibold tracking-[0.26em] text-[var(--platform-text-soft)]">
        {detail}
      </div>
      <div className="mt-1 text-base font-semibold text-[var(--platform-text-strong)]">
        {title}
      </div>
    </div>
  );
}

function EmptyShelf({ text }: { text: string }) {
  return (
    <div
      className={`${PANEL_SURFACE_CLASS} rounded-[1.35rem] px-4 py-3 text-sm leading-6 text-[var(--platform-text-base)]`}
    >
      {text}
    </div>
  );
}

function SaveArchivePreview({
  entry,
  label,
  className,
}: {
  entry: ProfileSaveArchiveSummary;
  label: string;
  className: string;
}) {
  return (
    <div
      aria-hidden="true"
      className={`platform-remap-surface relative shrink-0 overflow-hidden rounded-[1.35rem] border border-white/12 bg-black/18 shadow-[var(--platform-desktop-hover-shadow)] ${className}`}
    >
      {entry.coverImageSrc ? (
        <ResolvedAssetBackdrop
          src={entry.coverImageSrc}
          alt=""
          className="absolute inset-0 h-full w-full object-cover"
        />
      ) : (
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(255,255,255,0.18),transparent_34%),linear-gradient(145deg,rgba(255,94,125,0.92),rgba(255,150,116,0.88))]" />
      )}
      <div className="absolute inset-0 bg-[var(--platform-card-overlay-soft)]" />
      <div className="absolute inset-x-0 bottom-0 px-2.5 py-2">
        <span className="inline-flex max-w-full items-center rounded-full border border-white/15 bg-black/24 px-2.5 py-1 text-[9px] font-semibold tracking-[0.14em] text-[var(--platform-text-strong)]">
          {label}
        </span>
      </div>
    </div>
  );
}

function WorldCard({
  entry,
  badge,
  metaLabel,
  onClick,
  className,
}: {
  entry: PlatformWorldCardLike;
  badge: string;
  metaLabel: string;
  onClick: () => void;
  className?: string;
}) {
  const coverImage = resolvePlatformWorldCoverImage(entry);
  const leadPortrait = resolvePlatformWorldLeadPortrait(entry);
  const tags = [
    ...new Set(
      buildPlatformWorldTags(entry)
        .map((tag) => tag.trim())
        .filter(Boolean),
    ),
  ].slice(0, 3);

  return (
    <button
      type="button"
      onClick={onClick}
      className={`platform-surface platform-interactive-card relative flex h-[15rem] w-[15.25rem] shrink-0 flex-col overflow-hidden px-3.5 py-3.5 text-left ${className ?? ''}`}
    >
      {coverImage ? (
        <ResolvedAssetBackdrop
          src={coverImage}
          alt={entry.worldName}
          className="absolute inset-0 h-full w-full object-cover opacity-40"
        />
      ) : null}
      {leadPortrait ? (
        <ResolvedAssetImage
          src={leadPortrait}
          alt=""
          aria-hidden="true"
          className="absolute bottom-2 right-2 h-24 w-24 object-contain opacity-25"
        />
      ) : null}
      <div className="absolute inset-0 bg-[var(--platform-card-overlay-strong)]" />
      <div className="relative z-10 flex h-full flex-col">
        <div className="flex items-start justify-between gap-3">
          <span className="platform-pill platform-pill--warm">{badge}</span>
          <span className="platform-pill platform-pill--neutral px-2.5">
            {metaLabel}
          </span>
        </div>
        <div className="mt-auto">
          <div className="line-clamp-1 text-xl font-black text-[var(--platform-text-strong)]">
            {entry.worldName}
          </div>
          {entry.subtitle ? (
            <div className="mt-1 line-clamp-1 text-[11px] tracking-[0.16em] text-[color:color-mix(in_srgb,var(--platform-text-base)_85%,transparent)]">
              {entry.subtitle}
            </div>
          ) : null}
          <div className="mt-2 line-clamp-2 text-xs leading-5 text-[color:color-mix(in_srgb,var(--platform-text-base)_90%,transparent)]">
            {entry.summaryText || '等待补充世界摘要。'}
          </div>
          <div className="mt-3 flex flex-wrap gap-2">
            {tags.length > 0 ? (
              tags.map((tag, index) => (
                <span
                  key={`world-tag-${index}-${tag || 'empty'}`}
                  className="platform-pill platform-pill--neutral px-2.5"
                >
                  {tag}
                </span>
              ))
            ) : (
              <span className="platform-pill platform-pill--neutral px-2.5">
                {describePlatformThemeLabel(entry.themeMode)}
              </span>
            )}
          </div>
        </div>
      </div>
    </button>
  );
}

function CreationLibraryCard({
  entry,
  onClick,
}: {
  entry: CustomWorldLibraryEntry<CustomWorldProfile>;
  onClick: () => void;
}) {
  const coverImage = resolvePlatformWorldCoverImage(entry);
  const leadPortrait = resolvePlatformWorldLeadPortrait(entry);
  const statusLabel = entry.visibility === 'published' ? '已发布' : '草稿';
  const metaLabel =
    entry.visibility === 'published'
      ? formatPlatformWorldTime(entry.publishedAt)
      : '仅自己可见';
  const primaryTag =
    buildPlatformWorldTags(entry)
      .map((tag) => tag.trim())
      .filter(Boolean)[0] ?? describePlatformThemeLabel(entry.themeMode);
  const summaryText =
    entry.summaryText || entry.subtitle || '继续补完这个世界的设定与游玩入口。';

  return (
    <button
      type="button"
      onClick={onClick}
      className="platform-surface platform-interactive-card relative flex min-h-[13rem] w-full min-w-0 flex-col overflow-hidden px-3 py-3 text-left sm:min-h-[14rem] sm:px-3.5 sm:py-3.5"
    >
      {coverImage ? (
        <ResolvedAssetBackdrop
          src={coverImage}
          alt={entry.worldName}
          className="absolute inset-0 h-full w-full object-cover opacity-38"
        />
      ) : null}
      {leadPortrait ? (
        <ResolvedAssetImage
          src={leadPortrait}
          alt=""
          aria-hidden="true"
          className="absolute bottom-1.5 right-1.5 h-16 w-16 object-contain opacity-24 sm:h-20 sm:w-20"
        />
      ) : null}
      <div className="absolute inset-0 bg-[var(--platform-card-overlay-strong)]" />
      <div className="relative z-10 flex h-full min-w-0 flex-col">
        <div className="flex min-w-0 flex-wrap items-center gap-1.5">
          <span
            className={`inline-flex items-center rounded-full border px-2 py-1 text-[10px] font-semibold tracking-[0.12em] ${
              entry.visibility === 'published'
                ? 'border-emerald-300/25 bg-emerald-500/12 text-emerald-50'
                : 'border-amber-300/25 bg-amber-500/12 text-amber-50'
            }`}
          >
            {statusLabel}
          </span>
          <span className="inline-flex min-w-0 max-w-full items-center rounded-full border border-white/12 bg-black/18 px-2 py-1 text-[10px] font-medium text-[var(--platform-text-base)]">
            <span className="truncate">{metaLabel}</span>
          </span>
        </div>

        <div className="mt-auto min-w-0">
          <div className="line-clamp-2 break-words text-base font-black leading-[1.15] text-[var(--platform-text-strong)] sm:text-[1.12rem]">
            {entry.worldName}
          </div>
          {entry.subtitle ? (
            <div className="mt-1 line-clamp-1 break-words text-[11px] tracking-[0.08em] text-[color:color-mix(in_srgb,var(--platform-text-base)_84%,transparent)]">
              {entry.subtitle}
            </div>
          ) : null}
          <div className="mt-2 line-clamp-3 break-words text-[11px] leading-5 text-[color:color-mix(in_srgb,var(--platform-text-base)_88%,transparent)] sm:text-xs">
            {summaryText}
          </div>
          <div className="mt-3 flex flex-wrap items-center gap-1.5">
            <span className="inline-flex min-w-0 max-w-full items-center rounded-full border border-white/12 bg-black/18 px-2 py-1 text-[10px] font-semibold tracking-[0.1em] text-[color:color-mix(in_srgb,var(--platform-text-strong)_90%,transparent)]">
              <span className="truncate">{primaryTag}</span>
            </span>
            <span className="inline-flex items-center gap-1 text-[11px] font-semibold text-[var(--platform-text-base)]">
              <span>
                {entry.visibility === 'published' ? '进入世界' : '继续创作'}
              </span>
              <ArrowRight className="h-3.5 w-3.5 shrink-0" />
            </span>
          </div>
        </div>
      </div>
    </button>
  );
}

function SaveArchiveCard({
  entry,
  onClick,
  loading = false,
}: {
  entry: ProfileSaveArchiveSummary;
  onClick: () => void;
  loading?: boolean;
}) {
  const summaryText =
    entry.summaryText || entry.subtitle || '继续推进上一次保存的故事。';

  return (
    <button
      type="button"
      onClick={onClick}
      disabled={loading}
      className={`platform-surface platform-surface--soft platform-interactive-card relative flex min-h-[13rem] w-full overflow-hidden p-3.5 text-left sm:min-h-[12.5rem] sm:p-4 ${loading ? 'opacity-80' : ''}`}
    >
      <div className="absolute inset-0 bg-[var(--platform-card-overlay-deep)]" />
      <div className="relative z-10 flex h-full w-full flex-col gap-3">
        <div className="flex flex-wrap items-center justify-between gap-2">
          <span className="platform-pill platform-pill--cool">ARCHIVE</span>
          <span className="rounded-full border border-white/10 bg-black/18 px-2.5 py-1 text-[11px] font-medium text-[var(--platform-text-base)]">
            {loading ? '恢复中' : formatSnapshotTime(entry.lastPlayedAt)}
          </span>
        </div>
        <div className="flex min-w-0 flex-1 items-stretch gap-3 sm:gap-4">
          <div className="min-w-0 flex-1">
            <div className="line-clamp-2 break-words text-[1.15rem] font-black leading-tight text-[var(--platform-text-strong)] sm:text-xl">
              {entry.worldName}
            </div>
            {entry.subtitle ? (
              <div className="mt-1 line-clamp-1 break-words text-sm text-[var(--platform-text-base)]">
                {entry.subtitle}
              </div>
            ) : null}
            <div className="mt-2 line-clamp-3 break-words text-xs leading-5 text-[var(--platform-text-soft)] sm:text-sm">
              {summaryText}
            </div>
            <div className="mt-4 inline-flex items-center gap-1.5 text-xs font-semibold text-zinc-200">
              <span>{loading ? '正在恢复' : '继续游玩'}</span>
              <ArrowRight className="h-3.5 w-3.5 shrink-0" />
            </div>
          </div>
          <SaveArchivePreview
            entry={entry}
            label={loading ? '恢复中' : '最近存档'}
            className="h-[7.4rem] w-[5.6rem] sm:h-[8rem] sm:w-[6.4rem]"
          />
        </div>
      </div>
    </button>
  );
}

function PlatformTabButton({
  active,
  label,
  icon: Icon,
  onClick,
}: {
  active: boolean;
  label: string;
  icon: ComponentType<{ className?: string }>;
  onClick: () => void;
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={`platform-bottom-nav__button ${active ? 'platform-bottom-nav__button--active' : ''}`}
    >
      <span className="platform-bottom-nav__button-content">
        <span className="platform-bottom-nav__icon-shell">
          <Icon className="platform-bottom-nav__icon" />
        </span>
        <span className="platform-bottom-nav__label">{label}</span>
      </span>
    </button>
  );
}

function DesktopTabButton({
  active,
  label,
  icon: Icon,
  onClick,
}: {
  active: boolean;
  label: string;
  icon: ComponentType<{ className?: string }>;
  onClick: () => void;
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={`platform-desktop-rail__button ${active ? 'platform-desktop-rail__button--active' : ''}`}
    >
      <span className="platform-desktop-rail__icon-shell">
        <Icon className="platform-desktop-rail__icon h-[1.1rem] w-[1.1rem]" />
      </span>
      <span className="platform-desktop-rail__label text-[11px] font-semibold tracking-[0.2em]">
        {label}
      </span>
    </button>
  );
}

function PlatformTabPanel({
  tab,
  activeTab,
  children,
}: {
  tab: PlatformHomeTab;
  activeTab: PlatformHomeTab;
  children: ReactNode;
}) {
  const active = activeTab === tab;

  // 主 Tab 保持挂载，只切换可见性，避免重页面卸载重建造成首帧闪烁。
  return (
    <section
      id={`platform-tab-panel-${tab}`}
      aria-hidden={!active}
      className={`platform-tab-panel ${active ? 'platform-tab-panel--active' : 'platform-tab-panel--hidden'}`}
    >
      {children}
    </section>
  );
}

function DesktopTrendingItem({
  entry,
  rank,
  onClick,
}: {
  entry: CustomWorldGalleryCard;
  rank: number;
  onClick: () => void;
}) {
  const coverImage = resolvePlatformWorldCoverImage(entry);
  const tags = buildPlatformWorldTags(entry).filter(Boolean).slice(0, 2);

  return (
    <button
      type="button"
      onClick={onClick}
      className="platform-desktop-trending-item flex items-center gap-4 px-4 py-4 text-left"
    >
      <div className="relative h-[5.5rem] w-[4.3rem] shrink-0 overflow-hidden rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-[rgba(255,255,255,0.66)]">
        {coverImage ? (
          <ResolvedAssetBackdrop
            src={coverImage}
            alt={entry.worldName}
            className="h-full w-full object-cover"
          />
        ) : null}
        <div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(255,255,255,0.04),rgba(91,24,46,0.26))]" />
      </div>

      <div className="min-w-0 flex-1">
        <div className="flex items-center gap-2 text-[10px] tracking-[0.18em] text-[var(--platform-text-soft)]">
          <span>{`${rank}`.padStart(2, '0')}</span>
          <span>{formatPlatformWorldTime(entry.publishedAt)}</span>
        </div>
        <div className="mt-2 line-clamp-1 text-lg font-semibold text-[var(--platform-text-strong)]">
          {entry.worldName}
        </div>
        <div className="mt-1 line-clamp-2 text-sm leading-6 text-[color:color-mix(in_srgb,var(--platform-text-base)_86%,transparent)]">
          {entry.summaryText || entry.subtitle || '等待补充世界摘要。'}
        </div>
        <div className="mt-3 flex flex-wrap gap-2">
          {tags.length > 0 ? (
            tags.map((tag, index) => (
              <span
                key={`${entry.profileId}-trend-tag-${index}-${tag}`}
                className="platform-pill platform-pill--neutral px-2.5"
              >
                {tag}
              </span>
            ))
          ) : (
            <span className="platform-pill platform-pill--neutral px-2.5">
              {describePlatformThemeLabel(entry.themeMode)}
            </span>
          )}
        </div>
      </div>

      <ChevronRight className="h-4 w-4 shrink-0 text-[var(--platform-text-soft)]" />
    </button>
  );
}

function formatSnapshotTime(value: string | null | undefined) {
  if (!value) {
    return '刚刚保存';
  }

  const date = new Date(value);
  if (Number.isNaN(date.getTime())) {
    return value;
  }

  return date.toLocaleString('zh-CN', {
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
  });
}

function describeLoginMethod(loginMethod: AuthUser['loginMethod']) {
  switch (loginMethod) {
    case 'phone':
      return '手机号';
    case 'wechat':
      return '微信';
    default:
      return '账号密码';
  }
}

function describeBindingStatus(bindingStatus: AuthUser['bindingStatus']) {
  return bindingStatus === 'pending_bind_phone' ? '待绑定手机号' : '正常';
}

function formatCompactPlayTime(playTimeMs: number) {
  const totalMinutes = Math.max(0, Math.floor(playTimeMs / 60000));
  const days = totalMinutes / 1440;

  if (days >= 10) {
    return `${Math.floor(days)}天`;
  }
  if (days >= 1) {
    return `${days.toFixed(days >= 3 ? 0 : 1)}天`;
  }

  const hours = totalMinutes / 60;
  if (hours >= 1) {
    return `${hours.toFixed(hours >= 10 ? 0 : 1)}小时`;
  }

  return `${Math.max(0, totalMinutes)}分`;
}

function formatDashboardCount(value: number) {
  const normalizedValue = Math.max(0, Math.round(value));
  if (normalizedValue >= 100000000) {
    return `${(normalizedValue / 100000000).toFixed(1)}亿`;
  }
  if (normalizedValue >= 10000) {
    return `${(normalizedValue / 10000).toFixed(1)}万`;
  }

  return normalizedValue.toLocaleString('zh-CN');
}

function formatDashboardUpdatedAt(value: string | null | undefined) {
  if (!value) {
    return '暂无更新记录';
  }

  const date = new Date(value);
  if (Number.isNaN(date.getTime())) {
    return value;
  }

  return date.toLocaleString('zh-CN', {
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
  });
}

function buildPublicUserCode(user: AuthUser | null | undefined) {
  const raw =
    user?.id.replace(/[^a-zA-Z0-9]/gu, '').toUpperCase() ||
    user?.username.replace(/[^a-zA-Z0-9]/gu, '').toUpperCase() ||
    '00000000';

  return `SY-${raw.slice(-8).padStart(8, '0')}`;
}

function getUserAvatarLabel(user: AuthUser | null | undefined) {
  return (user?.displayName || user?.username || '叙')
    .slice(0, 1)
    .toUpperCase();
}

function copyText(value: string) {
  if (typeof navigator === 'undefined' || !navigator.clipboard?.writeText) {
    return;
  }

  void navigator.clipboard.writeText(value);
}

function ProfileStatCard({
  cardKey,
  label,
  value,
  onClick,
  icon,
}: {
  cardKey: ProfileDashboardCardKey;
  label: string;
  value: string;
  onClick?: ((cardKey: ProfileDashboardCardKey) => void) | null;
  icon: ComponentType<{ className?: string }>;
}) {
  const Icon = icon;

  return (
    <button
      type="button"
      onClick={onClick ? () => onClick(cardKey) : undefined}
      className="platform-subpanel rounded-[1.35rem] px-4 py-3 text-left transition hover:border-[var(--platform-surface-hover-border)] hover:bg-[var(--platform-button-secondary-fill)]"
    >
      <div className="flex items-center gap-2 text-[var(--platform-text-soft)]">
        <Icon className="h-4 w-4" />
        <span className="text-[11px] tracking-[0.16em]">{label}</span>
      </div>
      <div className="mt-3 text-lg font-black text-[var(--platform-text-strong)]">
        {value}
      </div>
    </button>
  );
}

function ProfileStatCardSkeleton() {
  return (
    <div className="platform-subpanel rounded-[1.35rem] px-4 py-3">
      <div className="h-4 w-20 animate-pulse rounded-full bg-[var(--platform-subpanel-border)]" />
      <div className="mt-3 h-7 w-16 animate-pulse rounded-full bg-[var(--platform-line-soft)]" />
    </div>
  );
}

function ProfileShortcutButton({
  label,
  icon,
  onClick,
}: {
  label: string;
  icon: ComponentType<{ className?: string }>;
  onClick?: (() => void) | null;
}) {
  const Icon = icon;

  return (
    <button
      type="button"
      onClick={onClick ?? undefined}
      className="platform-subpanel flex min-h-[5.25rem] flex-col items-center justify-center gap-2 rounded-[1.2rem] px-3 py-3 text-center transition hover:border-[var(--platform-surface-hover-border)] hover:bg-[var(--platform-button-secondary-fill)]"
    >
      <div className="platform-profile-chip flex h-10 w-10 items-center justify-center rounded-full">
        <Icon className="h-[1.125rem] w-[1.125rem]" />
      </div>
      <div className="text-sm font-semibold text-[var(--platform-text-strong)]">
        {label}
      </div>
    </button>
  );
}

export function RpgEntryHomeView({
  activeTab,
  onTabChange,
  hasSavedGame,
  savedSnapshot,
  saveEntries,
  saveError,
  featuredEntries,
  latestEntries,
  myEntries,
  historyEntries,
  profileDashboard,
  isLoadingPlatform,
  isLoadingDashboard,
  isResumingSaveWorldKey,
  platformError,
  dashboardError,
  onContinueGame,
  onResumeSave,
  onOpenCreateWorld,
  onOpenCreateTypePicker,
  onOpenGalleryDetail,
  onOpenLibraryDetail,
  onOpenProfileDashboardCard,
  createTabContent,
}: RpgEntryHomeViewProps) {
  const authUi = useAuthUi();
  const isAuthenticated = Boolean(authUi?.user);
  const isDesktopLayout = usePlatformDesktopLayout();
  const featuredShelf = useMemo(
    () => featuredEntries.slice(0, 6),
    [featuredEntries],
  );
  const snapshotWorldName =
    savedSnapshot?.gameState.customWorldProfile?.name ??
    savedSnapshot?.gameState.currentScenePreset?.name ??
    '继续冒险';
  const snapshotCharacterName =
    savedSnapshot?.gameState.playerCharacter?.title ??
    savedSnapshot?.gameState.playerCharacter?.name ??
    '旅人';
  const snapshotDigest =
    savedSnapshot?.gameState.storyEngineMemory?.continueGameDigest ??
    savedSnapshot?.currentStory?.text ??
    savedSnapshot?.gameState.customWorldProfile?.summary ??
    '上一次冒险已经保存，可以从这里继续推进故事。';
  const publicUserCode = buildPublicUserCode(authUi?.user);
  const avatarLabel = getUserAvatarLabel(authUi?.user);
  const remainingNarrativeCoins = profileDashboard?.walletBalance ?? 0;
  const totalPlayTime = formatCompactPlayTime(
    profileDashboard?.totalPlayTimeMs ?? 0,
  );
  const playedWorkCount = profileDashboard?.playedWorldCount ?? 0;
  const tabIcons = {
    home: House,
    create: Sparkles,
    saves: Archive,
    profile: UserRound,
  } as const;
  const openUserSurface = () => {
    if (authUi?.user) {
      authUi.openAccountModal();
      return;
    }
    authUi?.openLoginModal();
  };
  const desktopHeroEntry =
    featuredShelf[0] ?? latestEntries[0] ?? myEntries[0] ?? null;
  const desktopHeroCover = desktopHeroEntry
    ? resolvePlatformWorldCoverImage(desktopHeroEntry)
    : null;
  const desktopHeroStripEntries = (
    featuredShelf.length > 0 ? featuredShelf : latestEntries
  ).slice(0, 5);
  const desktopTrendingEntries = latestEntries.slice(0, 3);
  const desktopFeaturedGrid = featuredShelf.slice(0, 4);
  const desktopReleaseGrid = latestEntries.slice(0, 6);
  const desktopLibraryPreview = myEntries.slice(0, 2);

  const mobileHomeContent: ReactNode = (
    <div className={MOBILE_PAGE_STAGE_CLASS}>
      <button
        type="button"
        onClick={() => {
          if (hasSavedGame) {
            onContinueGame();
            return;
          }

          onOpenCreateWorld();
        }}
        className={`${HERO_SURFACE_CLASS} relative block w-full overflow-hidden px-[18px] py-4 text-left`}
      >
        <div className="absolute inset-0 bg-[var(--platform-hero-overlay-strong)]" />
        <div className="relative z-10 flex min-h-[10rem] flex-col justify-between">
          <div className="flex items-start justify-between gap-4">
            <span className="platform-pill platform-pill--warm">
              {hasSavedGame ? 'CONTINUE' : 'CREATE'}
            </span>
            <div className="platform-pill platform-pill--neutral px-3 text-[11px] tracking-[0.08em]">
              {hasSavedGame ? '继续冒险' : '创建世界'}
            </div>
          </div>
          <div>
            <div className="text-3xl font-black text-white">
              {hasSavedGame ? snapshotWorldName : '写下一个能被游玩的世界'}
            </div>
            <div className="mt-2 max-w-[28rem] text-sm leading-6 text-zinc-200/88">
              {hasSavedGame
                ? `${snapshotCharacterName} 的进度已保存，点这里回到上一次停下来的故事节点。`
                : '从设定、角色到场景网络，先生成一版可玩的世界底稿，再继续精修和发布。'}
            </div>
            <div className="mt-4 flex items-center gap-2 text-sm font-semibold text-white/90">
              <span>{hasSavedGame ? '继续推进故事' : '进入创作工作台'}</span>
              <ArrowRight className="h-4 w-4" />
            </div>
          </div>
        </div>
      </button>

      {platformError ? (
        <div className="rounded-2xl border border-rose-400/20 bg-rose-500/10 px-4 py-3 text-sm leading-6 text-rose-700">
          {platformError}
        </div>
      ) : null}

      <section>
        <SectionHeader title="精选推荐" detail="为你挑选" />
        {isLoadingPlatform ? (
          <EmptyShelf text="正在读取精选作品..." />
        ) : featuredShelf.length > 0 ? (
          <div className="flex gap-3 overflow-x-auto pb-1 scrollbar-hide">
            {featuredShelf.map((entry: CustomWorldGalleryCard) => (
              <WorldCard
                key={`${entry.ownerUserId}:${entry.profileId}:featured`}
                entry={entry}
                badge="推荐"
                metaLabel={describePlatformThemeLabel(entry.themeMode)}
                onClick={() => onOpenGalleryDetail(entry)}
              />
            ))}
          </div>
        ) : (
          <EmptyShelf text="还没有公开作品，先创建你的第一个世界吧。" />
        )}
      </section>

      <section>
        <SectionHeader title="最新发布" detail="玩家广场" />
        {isLoadingPlatform ? (
          <EmptyShelf text="正在读取最新发布..." />
        ) : latestEntries.length > 0 ? (
          <div className="flex gap-3 overflow-x-auto pb-1 scrollbar-hide">
            {latestEntries.map((entry: CustomWorldGalleryCard) => (
              <WorldCard
                key={`${entry.ownerUserId}:${entry.profileId}:latest`}
                entry={entry}
                badge={formatPlatformWorldTime(entry.publishedAt)}
                metaLabel={entry.authorDisplayName}
                onClick={() => onOpenGalleryDetail(entry)}
              />
            ))}
          </div>
        ) : (
          <EmptyShelf text="公开广场暂时还没有新作品。" />
        )}
      </section>
    </div>
  );

  const createContent: ReactNode = createTabContent ?? (
    <div className={MOBILE_PAGE_STAGE_CLASS}>
      <button
        type="button"
        onClick={onOpenCreateTypePicker}
        className={`${HERO_SURFACE_CLASS} relative block w-full overflow-hidden px-[18px] py-4 text-left`}
      >
        <div className="absolute inset-0 bg-[var(--platform-hero-overlay-strong)]" />
        <div className="relative z-10 flex min-h-[10rem] flex-col justify-between">
          <span className="platform-pill platform-pill--cool w-fit">
            CREATE
          </span>
          <div>
            <div className="text-3xl font-black text-white">开启新的创作</div>
            <div className="mt-2 max-w-[28rem] text-sm leading-6 text-zinc-200/88">
              先选择游戏类型，再进入对应的创作工作台继续推进。
            </div>
            <div className="mt-4 flex items-center gap-2 text-sm font-semibold text-white/90">
              <span>选择类型并继续</span>
              <ArrowRight className="h-4 w-4" />
            </div>
          </div>
        </div>
      </button>

      <section>
        <SectionHeader title="我的创作" detail="草稿与已发布" />
        {isLoadingPlatform ? (
          <EmptyShelf text="正在读取你的作品..." />
        ) : myEntries.length > 0 ? (
          <div className="grid grid-cols-2 gap-2.5 sm:gap-3 xl:grid-cols-3">
            {myEntries.map(
              (entry: CustomWorldLibraryEntry<CustomWorldProfile>) => (
                <CreationLibraryCard
                  key={`${entry.ownerUserId}:${entry.profileId}:mine`}
                  entry={entry}
                  onClick={() => onOpenLibraryDetail(entry)}
                />
              ),
            )}
          </div>
        ) : (
          <EmptyShelf
            text={
              isAuthenticated
                ? '你还没有保存任何自定义世界，先创建一个草稿开始吧。'
                : '登录后查看你的作品。'
            }
          />
        )}
      </section>
    </div>
  );

  const savesContent: ReactNode = (
    <div className={MOBILE_PAGE_STAGE_CLASS}>
      {authUi?.user ? (
        <>
          {saveError ? (
            <div className="rounded-2xl border border-rose-400/20 bg-rose-500/10 px-4 py-3 text-sm leading-6 text-rose-700">
              {saveError}
            </div>
          ) : null}

          <section className={`${PANEL_SURFACE_CLASS} px-4 py-3.5`}>
            <SectionHeader title="全部存档" detail="最近更新时间排序" />
            {isLoadingPlatform ? (
              <EmptyShelf text="正在读取存档..." />
            ) : saveEntries.length > 0 ? (
              <div className="grid gap-3 md:grid-cols-2">
                {saveEntries.map((entry) => (
                  <SaveArchiveCard
                    key={entry.worldKey}
                    entry={entry}
                    loading={isResumingSaveWorldKey === entry.worldKey}
                    onClick={() => onResumeSave(entry)}
                  />
                ))}
              </div>
            ) : (
              <EmptyShelf text="还没有可恢复的存档，去首页开始一段新的游玩吧。" />
            )}
          </section>
        </>
      ) : (
        <section className={`${PANEL_SURFACE_CLASS} px-4 py-3.5`}>
          <div className="platform-subpanel rounded-[1.35rem] px-4 py-4">
            <div className="text-base font-semibold text-[var(--platform-text-strong)]">
              尚未登录
            </div>
            <button
              type="button"
              onClick={() => authUi?.openLoginModal()}
              className="platform-button platform-button--primary mt-4"
            >
              登录
            </button>
          </div>
        </section>
      )}
    </div>
  );

  const profileContent: ReactNode = (
    <div className={MOBILE_PAGE_STAGE_CLASS}>
      {authUi?.user ? (
        <>
          <section className="platform-profile-hero rounded-[1.8rem] p-4">
            <div className="flex items-start justify-between gap-3">
              <div className="flex min-w-0 items-center gap-3">
                <button
                  type="button"
                  onClick={() => authUi.openAccountModal()}
                  className="platform-profile-avatar relative h-16 w-16 shrink-0 rounded-[1.4rem]"
                >
                  <span className="flex h-full w-full items-center justify-center text-2xl font-black">
                    {avatarLabel}
                  </span>
                  <span className="platform-profile-camera absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full">
                    <Camera className="h-3.5 w-3.5" />
                  </span>
                </button>

                <div className="min-w-0">
                  <div className="flex items-center gap-2">
                    <div className="truncate text-xl font-black text-[var(--platform-text-strong)]">
                      {authUi.user.displayName}
                    </div>
                    <button
                      type="button"
                      onClick={() => authUi.openAccountModal()}
                      className="platform-profile-icon-button flex h-7 w-7 items-center justify-center rounded-full"
                    >
                      <Pencil className="h-3.5 w-3.5" />
                    </button>
                  </div>
                  <div className="mt-1 flex flex-wrap items-center gap-2 text-xs text-[var(--platform-text-soft)]">
                    <span>叙世号 {publicUserCode}</span>
                    <button
                      type="button"
                      onClick={() => copyText(publicUserCode)}
                      className="platform-profile-chip flex items-center gap-1 rounded-full px-2 py-1"
                    >
                      <Copy className="h-3 w-3" />
                      复制
                    </button>
                  </div>
                  <div className="mt-2 flex flex-wrap items-center gap-2 text-xs">
                    <span className="platform-profile-chip rounded-full px-2.5 py-1">
                      {describeLoginMethod(authUi.user.loginMethod)}
                    </span>
                    <span className="platform-profile-chip rounded-full px-2.5 py-1">
                      {describeBindingStatus(authUi.user.bindingStatus)}
                    </span>
                  </div>
                </div>
              </div>

              <button
                type="button"
                className="platform-profile-action flex shrink-0 items-center gap-2 rounded-[1.1rem] px-3 py-2 text-left"
              >
                <Crown className="h-4 w-4" />
                <div>
                  <div className="text-xs font-bold">会员充值</div>
                  <div className="text-[10px] opacity-80">普通用户</div>
                </div>
                <ChevronRight className="h-4 w-4 opacity-80" />
              </button>
            </div>
          </section>

          <section className={`${PANEL_SURFACE_CLASS} px-4 py-3.5`}>
            <div className="grid grid-cols-3 gap-3">
              {isLoadingDashboard ? (
                <>
                  <ProfileStatCardSkeleton />
                  <ProfileStatCardSkeleton />
                  <ProfileStatCardSkeleton />
                </>
              ) : dashboardError ? (
                <>
                  <ProfileStatCard
                    cardKey="wallet"
                    label="剩余叙世币"
                    value="暂不可用"
                    icon={Coins}
                    onClick={onOpenProfileDashboardCard}
                  />
                  <ProfileStatCard
                    cardKey="playTime"
                    label="总游戏时长"
                    value="暂不可用"
                    icon={Clock3}
                    onClick={onOpenProfileDashboardCard}
                  />
                  <ProfileStatCard
                    cardKey="playedWorks"
                    label="玩过作品"
                    value="暂不可用"
                    icon={BookOpen}
                    onClick={onOpenProfileDashboardCard}
                  />
                </>
              ) : (
                <>
                  <ProfileStatCard
                    cardKey="wallet"
                    label="剩余叙世币"
                    value={formatDashboardCount(remainingNarrativeCoins)}
                    icon={Coins}
                    onClick={onOpenProfileDashboardCard}
                  />
                  <ProfileStatCard
                    cardKey="playTime"
                    label="总游戏时长"
                    value={totalPlayTime}
                    icon={Clock3}
                    onClick={onOpenProfileDashboardCard}
                  />
                  <ProfileStatCard
                    cardKey="playedWorks"
                    label="玩过作品"
                    value={formatDashboardCount(playedWorkCount)}
                    icon={BookOpen}
                    onClick={onOpenProfileDashboardCard}
                  />
                </>
              )}
            </div>
            <div className="mt-3 text-[11px] text-[var(--platform-text-soft)]">
              {dashboardError
                ? dashboardError
                : `更新于 ${formatDashboardUpdatedAt(profileDashboard?.updatedAt)}`}
            </div>
          </section>

          <section className={`${PANEL_SURFACE_CLASS} px-4 py-3.5`}>
            <SectionHeader title="常用功能" detail="快捷入口" />
            <div className="grid grid-cols-3 gap-3">
              <ProfileShortcutButton label="邀请好友" icon={UserPlus} />
              <ProfileShortcutButton label="填邀请码" icon={Ticket} />
              <ProfileShortcutButton label="玩家社区" icon={MessageCircle} />
            </div>
          </section>

          <section className={`${PANEL_SURFACE_CLASS} px-4 py-3.5`}>
            <button
              type="button"
              onClick={() => authUi.openSettingsModal()}
              className="platform-subpanel platform-interactive-card flex w-full items-center justify-between gap-3 rounded-[1.25rem] px-4 py-4 text-left transition hover:border-[var(--platform-surface-hover-border)] hover:bg-[var(--platform-button-secondary-fill)]"
            >
              <div className="flex items-center gap-3">
                <div className="platform-profile-chip flex h-10 w-10 items-center justify-center rounded-full">
                  <Settings className="h-[1.125rem] w-[1.125rem]" />
                </div>
                <div>
                  <div className="text-base font-semibold text-[var(--platform-text-strong)]">
                    设置
                  </div>
                  <div className="text-xs text-[var(--platform-text-soft)]">
                    主题与账号
                  </div>
                </div>
              </div>
              <ChevronRight className="h-4 w-4 text-[var(--platform-text-soft)]" />
            </button>
          </section>
        </>
      ) : (
        <section className={`${PANEL_SURFACE_CLASS} px-4 py-3.5`}>
          <div className="platform-subpanel rounded-[1.35rem] px-4 py-4">
            <div className="text-base font-semibold text-[var(--platform-text-strong)]">
              尚未登录
            </div>
            <button
              type="button"
              onClick={() => authUi?.openLoginModal()}
              className="platform-button platform-button--primary mt-4"
            >
              登录
            </button>
          </div>
        </section>
      )}
    </div>
  );

  const desktopHomeContent: ReactNode = (
    <div className={DESKTOP_PAGE_STAGE_CLASS}>
      {platformError ? (
        <div className="rounded-[1.5rem] border border-rose-400/20 bg-rose-500/10 px-4 py-3 text-sm leading-6 text-rose-700">
          {platformError}
        </div>
      ) : null}

      <div className="grid gap-5 xl:grid-cols-[minmax(0,1.55fr)_22rem]">
        <button
          type="button"
          onClick={() => {
            if (hasSavedGame) {
              onContinueGame();
              return;
            }

            onOpenCreateWorld();
          }}
          className={`${HERO_SURFACE_CLASS} relative block overflow-hidden px-7 py-6 text-left`}
        >
          {desktopHeroCover ? (
            <ResolvedAssetBackdrop
              src={desktopHeroCover}
              alt=""
              aria-hidden="true"
              className="absolute inset-0 h-full w-full object-cover opacity-34"
            />
          ) : null}
          <div className="absolute inset-0 bg-[var(--platform-hero-overlay-strong)]" />
          <div className="relative z-10 flex min-h-[24rem] flex-col justify-between">
            <div className="flex items-start justify-between gap-4">
              <span className="platform-pill platform-pill--warm">
                {hasSavedGame ? 'CONTINUE STORY' : 'CREATE WORLD'}
              </span>
              <span className="platform-pill platform-pill--neutral px-3">
                {hasSavedGame ? '最近存档' : '创作入口'}
              </span>
            </div>

            <div className="max-w-[35rem]">
              <div className="text-5xl font-semibold leading-[1.08] text-white">
                {hasSavedGame
                  ? snapshotWorldName
                  : '把你的世界观直接变成可游玩的舞台'}
              </div>
              <div className="mt-4 text-base leading-8 text-zinc-200/86">
                {hasSavedGame
                  ? `${snapshotCharacterName} 的进度已经保存，桌面端可以直接从这里回到上一次停下来的关键节点。`
                  : '从设定、角色、世界结构到可玩流程，一次生成创作底稿，再继续精修并发布到平台广场。'}
              </div>
              <div className="mt-5 inline-flex items-center gap-2 rounded-full border border-white/18 bg-white/18 px-4 py-2 text-sm font-semibold text-white/92">
                <span>{hasSavedGame ? '继续推进故事' : '进入创作工作台'}</span>
                <ArrowRight className="h-4 w-4" />
              </div>
            </div>

            {desktopHeroStripEntries.length > 0 ? (
              <div className="grid gap-3 sm:grid-cols-5">
                {desktopHeroStripEntries.map((entry, index) => {
                  const coverImage = resolvePlatformWorldCoverImage(entry);
                  return (
                    <div
                      key={`${entry.ownerUserId}:${entry.profileId}:hero-strip`}
                      className="platform-subpanel overflow-hidden rounded-[1.15rem]"
                    >
                      <div className="relative aspect-[1.35/1] overflow-hidden">
                        {coverImage ? (
                          <ResolvedAssetBackdrop
                            src={coverImage}
                            alt=""
                            aria-hidden="true"
                            className="h-full w-full object-cover"
                          />
                        ) : null}
                        <div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(255,255,255,0.04),rgba(91,24,46,0.34))]" />
                      </div>
                      <div className="flex items-center gap-2 px-3 py-2 text-[11px] text-[color:color-mix(in_srgb,var(--platform-text-base)_82%,transparent)]">
                        <span className="text-[var(--platform-text-soft)]">
                          {`${index + 1}`.padStart(2, '0')}
                        </span>
                        <span className="line-clamp-1">{entry.worldName}</span>
                      </div>
                    </div>
                  );
                })}
              </div>
            ) : null}
          </div>
        </button>

        <section className="platform-desktop-panel px-5 py-5">
          <div className="mb-4 flex items-start justify-between gap-3">
            <SectionHeader title="趋势关注" detail="TRENDING NOW" />
            <span className="platform-pill platform-pill--neutral px-3">
              LIVE
            </span>
          </div>
          {isLoadingPlatform ? (
            <EmptyShelf text="正在整理趋势作品..." />
          ) : desktopTrendingEntries.length > 0 ? (
            <div className="space-y-3">
              {desktopTrendingEntries.map((entry, index) => (
                <DesktopTrendingItem
                  key={`${entry.ownerUserId}:${entry.profileId}:desktop-trend`}
                  entry={entry}
                  rank={index + 1}
                  onClick={() => onOpenGalleryDetail(entry)}
                />
              ))}
            </div>
          ) : (
            <EmptyShelf text="公开广场暂时还没有趋势作品。" />
          )}
        </section>
      </div>

      <div className="grid gap-5 2xl:grid-cols-[minmax(0,1.2fr)_minmax(22rem,0.8fr)]">
        <section className="platform-desktop-panel px-5 py-5">
          <SectionHeader title="精选推荐" detail="CURATED WORLDS" />
          {isLoadingPlatform ? (
            <EmptyShelf text="正在读取精选作品..." />
          ) : desktopFeaturedGrid.length > 0 ? (
            <div className="grid gap-4 xl:grid-cols-2">
              {desktopFeaturedGrid.map((entry) => (
                <WorldCard
                  key={`${entry.ownerUserId}:${entry.profileId}:desktop-featured`}
                  entry={entry}
                  badge="推荐"
                  metaLabel={describePlatformThemeLabel(entry.themeMode)}
                  onClick={() => onOpenGalleryDetail(entry)}
                  className="h-[16rem] w-full min-w-0"
                />
              ))}
            </div>
          ) : (
            <EmptyShelf text="还没有公开作品，先创建你的第一个世界吧。" />
          )}
        </section>

        <section className="platform-desktop-panel px-5 py-5">
          <SectionHeader
            title={hasSavedGame ? '继续进度' : '创作入口'}
            detail="QUICK ACCESS"
          />
          <button
            type="button"
            onClick={() => {
              if (hasSavedGame) {
                onContinueGame();
                return;
              }

              onOpenCreateWorld();
            }}
            className="platform-surface platform-surface--soft platform-interactive-card relative block w-full overflow-hidden px-5 py-5 text-left"
          >
            <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(255,164,198,0.18),transparent_28%),radial-gradient(circle_at_bottom_left,rgba(255,202,176,0.18),transparent_32%)]" />
            <div className="relative z-10">
              <div className="flex items-center justify-between gap-3">
                <span className="platform-pill platform-pill--cool">
                  {hasSavedGame ? 'SAVE POINT' : 'START HERE'}
                </span>
                <ArrowRight className="h-4 w-4 text-[var(--platform-text-soft)]" />
              </div>
              <div className="mt-4 text-2xl font-semibold text-[var(--platform-text-strong)]">
                {hasSavedGame ? snapshotWorldName : '从这里开启新的创作'}
              </div>
              <div className="mt-2 text-sm leading-7 text-[color:color-mix(in_srgb,var(--platform-text-base)_84%,transparent)]">
                {hasSavedGame
                  ? `当前角色：${snapshotCharacterName}`
                  : '快速进入自定义世界创作，继续补齐设定、角色与核心冲突。'}
              </div>
              <div className="mt-3 line-clamp-3 text-sm leading-6 text-[var(--platform-text-soft)]">
                {hasSavedGame
                  ? snapshotDigest
                  : '先生成一版可玩的世界底稿，再继续编辑并发布。'}
              </div>
            </div>
          </button>

          <div className="mt-5">
            <div className="text-[10px] font-semibold tracking-[0.24em] text-[var(--platform-text-soft)]">
              {desktopLibraryPreview.length > 0
                ? '最近作品'
                : historyEntries.length > 0
                  ? '最近浏览'
                  : isAuthenticated
                    ? '创作状态'
                    : '账户状态'}
            </div>

            {desktopLibraryPreview.length > 0 ? (
              <div className="mt-3 space-y-3">
                {desktopLibraryPreview.map((entry) => (
                  <button
                    key={`${entry.ownerUserId}:${entry.profileId}:desktop-mine`}
                    type="button"
                    onClick={() => onOpenLibraryDetail(entry)}
                    className="platform-desktop-trending-item flex w-full items-center justify-between gap-3 px-4 py-4 text-left"
                  >
                    <div className="min-w-0">
                      <div className="line-clamp-1 text-base font-semibold text-[var(--platform-text-strong)]">
                        {entry.worldName}
                      </div>
                      <div className="mt-1 text-sm text-[var(--platform-text-soft)]">
                        {entry.visibility === 'published'
                          ? `发布于 ${formatPlatformWorldTime(entry.publishedAt)}`
                          : '草稿待完善'}
                      </div>
                    </div>
                    <span className="platform-pill platform-pill--neutral px-3">
                      {entry.visibility === 'published' ? '已发布' : '草稿'}
                    </span>
                  </button>
                ))}
              </div>
            ) : historyEntries.length > 0 ? (
              <div className="mt-3 space-y-3">
                {historyEntries.slice(0, 2).map((entry) => (
                  <button
                    key={`${entry.ownerUserId}:${entry.profileId}:desktop-history`}
                    type="button"
                    onClick={() =>
                      onOpenGalleryDetail({
                        ownerUserId: entry.ownerUserId,
                        profileId: entry.profileId,
                        visibility: 'published',
                        publishedAt: entry.visitedAt,
                        updatedAt: entry.visitedAt,
                        worldName: entry.worldName,
                        subtitle: entry.subtitle,
                        summaryText: entry.summaryText,
                        coverImageSrc: entry.coverImageSrc,
                        themeMode: entry.themeMode,
                        authorDisplayName: entry.authorDisplayName,
                        playableNpcCount: 0,
                        landmarkCount: 0,
                      })
                    }
                    className="platform-desktop-trending-item flex w-full items-center justify-between gap-3 px-4 py-4 text-left"
                  >
                    <div className="min-w-0">
                      <div className="line-clamp-1 text-base font-semibold text-[var(--platform-text-strong)]">
                        {entry.worldName}
                      </div>
                      <div className="mt-1 text-sm text-[var(--platform-text-soft)]">
                        作者：{entry.authorDisplayName}
                      </div>
                    </div>
                    <span className="platform-pill platform-pill--neutral px-3">
                      浏览
                    </span>
                  </button>
                ))}
              </div>
            ) : (
              <div className="platform-subpanel mt-3 rounded-[1.35rem] px-4 py-4 text-sm leading-6 text-[var(--platform-text-base)]">
                {isAuthenticated
                  ? '创建一个草稿后，这里会出现你最近保存的作品。'
                  : '登录后可同步你的创作、游玩进度与平台资料。'}
              </div>
            )}
          </div>
        </section>
      </div>

      <section className="platform-desktop-panel px-5 py-5">
        <SectionHeader title="最新发布" detail="PLAYER SQUARE" />
        {isLoadingPlatform ? (
          <EmptyShelf text="正在读取最新发布..." />
        ) : desktopReleaseGrid.length > 0 ? (
          <div className="grid gap-4 xl:grid-cols-3">
            {desktopReleaseGrid.map((entry) => (
              <WorldCard
                key={`${entry.ownerUserId}:${entry.profileId}:desktop-latest`}
                entry={entry}
                badge={formatPlatformWorldTime(entry.publishedAt)}
                metaLabel={entry.authorDisplayName}
                onClick={() => onOpenGalleryDetail(entry)}
                className="h-[17rem] w-full min-w-0"
              />
            ))}
          </div>
        ) : (
          <EmptyShelf text="公开广场暂时还没有新作品。" />
        )}
      </section>
    </div>
  );

  const tabContentById = {
    home: isDesktopLayout ? desktopHomeContent : mobileHomeContent,
    create: createContent,
    saves: savesContent,
    profile: profileContent,
  } satisfies Record<PlatformHomeTab, ReactNode>;
  const tabPanels = PLATFORM_HOME_TABS.map((tab) => (
    <PlatformTabPanel key={tab} tab={tab} activeTab={activeTab}>
      {tabContentById[tab]}
    </PlatformTabPanel>
  ));

  if (!isDesktopLayout) {
    return (
      <div className="flex h-full min-h-0 flex-col">
        <div className="mb-4">
          <RpgEntryBrandLogo />
        </div>

        <div className="platform-tab-panel-stack flex-1">{tabPanels}</div>

        <div
          className="mt-4 border-t pt-3"
          style={{
            borderColor: 'var(--platform-line-soft)',
            paddingBottom: 'calc(env(safe-area-inset-bottom) + 0.2rem)',
          }}
        >
          <div className="platform-bottom-nav grid grid-cols-4">
            <PlatformTabButton
              active={activeTab === 'home'}
              label="首页"
              icon={tabIcons.home}
              onClick={() => onTabChange('home')}
            />
            <PlatformTabButton
              active={activeTab === 'create'}
              label="创作"
              icon={tabIcons.create}
              onClick={() => onTabChange('create')}
            />
            <PlatformTabButton
              active={activeTab === 'saves'}
              label="存档"
              icon={tabIcons.saves}
              onClick={() => onTabChange('saves')}
            />
            <PlatformTabButton
              active={activeTab === 'profile'}
              label="我的"
              icon={tabIcons.profile}
              onClick={() => onTabChange('profile')}
            />
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="flex h-full min-h-0 flex-col">
      <div className="flex h-full min-h-0 flex-col">
        <div className="platform-desktop-shell flex h-full min-h-0 flex-col p-5 xl:p-6">
          <div className="platform-desktop-topbar flex items-center gap-4 px-5 py-4">
            <div className="flex min-w-0 flex-1 items-center gap-5">
              <RpgEntryBrandLogo className="shrink-0" decorative />
              <div className="platform-desktop-search flex min-w-0 max-w-[34rem] flex-1 items-center gap-3 px-4 py-3 text-[var(--platform-text-soft)]">
                <Search className="h-4 w-4 shrink-0" />
                <span className="truncate text-sm">
                  搜索世界、角色、主题或灵感
                </span>
              </div>
            </div>

            <div className="flex items-center gap-3">
              <button
                type="button"
                onClick={openUserSurface}
                className="platform-icon-button"
                aria-label="通知与账户"
              >
                <Bell className="h-4 w-4" />
              </button>
              <button
                type="button"
                onClick={openUserSurface}
                className="platform-desktop-search flex items-center gap-3 px-3 py-2.5 text-left"
              >
                <span
                  className="flex h-11 w-11 items-center justify-center rounded-full text-base font-black text-white"
                  style={{
                    background: 'var(--platform-profile-avatar-fill)',
                    boxShadow: 'var(--platform-profile-avatar-shadow)',
                  }}
                >
                  {avatarLabel}
                </span>
                <span className="min-w-0">
                  <span className="block truncate text-sm font-semibold text-[var(--platform-text-strong)]">
                    {authUi?.user?.displayName || '进入账户'}
                  </span>
                  <span className="block truncate text-xs text-[var(--platform-text-soft)]">
                    {authUi?.user ? publicUserCode : '登录后同步创作与进度'}
                  </span>
                </span>
              </button>
            </div>
          </div>

          <div className="mt-5 flex min-h-0 gap-5">
            <aside className="platform-desktop-rail flex w-[5.8rem] shrink-0 flex-col gap-3 p-3">
              <DesktopTabButton
                active={activeTab === 'home'}
                label="首页"
                icon={tabIcons.home}
                onClick={() => onTabChange('home')}
              />
              <DesktopTabButton
                active={activeTab === 'create'}
                label="创作"
                icon={tabIcons.create}
                onClick={() => onTabChange('create')}
              />
              <DesktopTabButton
                active={activeTab === 'saves'}
                label="存档"
                icon={tabIcons.saves}
                onClick={() => onTabChange('saves')}
              />
              <DesktopTabButton
                active={activeTab === 'profile'}
                label="我的"
                icon={tabIcons.profile}
                onClick={() => onTabChange('profile')}
              />
            </aside>

            <div className="platform-tab-panel-stack min-w-0 flex-1">
              {tabPanels}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export const PlatformHomeView = RpgEntryHomeView;