Genarrative/src/components/custom-world-home/CustomWorldCreationHub.tsx

import { useMemo, useState } from 'react';

import type { CustomWorldWorkSummary } from '../../../packages/shared/src/contracts/customWorldAgent';
import type { PuzzleWorkSummary } from '../../../packages/shared/src/contracts/puzzleWorkSummary';
import { CustomWorldCreationStartCard } from './CustomWorldCreationStartCard';
import {
  CustomWorldWorkCard,
  type UnifiedCreationWorkItem,
} from './CustomWorldWorkCard';
import {
  type CustomWorldWorkFilter,
  CustomWorldWorkTabs,
} from './CustomWorldWorkTabs';

type CustomWorldCreationHubProps = {
  items: CustomWorldWorkSummary[];
  loading: boolean;
  error: string | null;
  onBack: () => void;
  onRetry: () => void;
  onCreateNew: () => void;
  onOpenDraft: (item: CustomWorldWorkSummary) => void;
  onEnterPublished: (profileId: string) => void;
  puzzleItems?: PuzzleWorkSummary[];
  onOpenPuzzleDetail?: (profileId: string) => void;
};

function EmptyState({ title }: { title: string }) {
  return (
    <div className="platform-subpanel flex min-h-[14rem] flex-col items-center justify-center rounded-[1.6rem] px-6 py-8 text-center">
      <div className="text-lg font-semibold text-[var(--platform-text-strong)]">
        {title}
      </div>
    </div>
  );
}

export function CustomWorldCreationHub({
  items,
  loading,
  error,
  onBack,
  onRetry,
  onCreateNew,
  onOpenDraft,
  onEnterPublished,
  puzzleItems = [],
  onOpenPuzzleDetail,
}: CustomWorldCreationHubProps) {
  const [activeFilter, setActiveFilter] =
    useState<CustomWorldWorkFilter>('all');
  const unifiedItems = useMemo<UnifiedCreationWorkItem[]>(
    () => [
      ...items.map((item) => ({ kind: 'rpg', item }) as const),
      ...puzzleItems.map((item) => ({ kind: 'puzzle', item }) as const),
    ],
    [items, puzzleItems],
  );
  const draftCount = unifiedItems.filter((entry) =>
    entry.kind === 'puzzle'
      ? entry.item.publicationStatus === 'draft'
      : entry.item.status === 'draft',
  ).length;
  const publishedCount = unifiedItems.filter((entry) =>
    entry.kind === 'puzzle'
      ? entry.item.publicationStatus === 'published'
      : entry.item.status === 'published',
  ).length;
  const filteredItems = useMemo(
    () =>
      unifiedItems.filter((entry) =>
        activeFilter === 'all'
          ? true
          : entry.kind === 'puzzle'
            ? entry.item.publicationStatus === activeFilter
            : entry.item.status === activeFilter,
      ),
    [activeFilter, unifiedItems],
  );

  return (
    <div className="platform-page-stage platform-remap-surface space-y-4 px-3 pb-4 pt-3 sm:px-4 sm:pt-4">
      <div className="pb-1">
        <div className="flex items-start justify-between gap-3">
          <div>
            <button
              type="button"
              onClick={onBack}
              className="platform-button platform-button--ghost min-h-0 rounded-full px-3 py-1.5 text-[11px]"
            >
              返回
            </button>
            <div className="mt-4 text-[1.8rem] font-black leading-tight text-[var(--platform-text-strong)] sm:text-[2.3rem]">
              创作中心
            </div>
          </div>
          <div className="hidden shrink-0 gap-2 sm:flex">
            <span className="platform-pill platform-pill--warm px-3 py-1 text-[11px]">
              草稿 {draftCount}
            </span>
            <span className="platform-pill platform-pill--success px-3 py-1 text-[11px]">
              已发布 {publishedCount}
            </span>
          </div>
        </div>
      </div>

      <div className="space-y-4">
        <CustomWorldCreationStartCard onCreateNew={onCreateNew} />

        <CustomWorldWorkTabs
          activeFilter={activeFilter}
          draftCount={draftCount}
          publishedCount={publishedCount}
          onChange={setActiveFilter}
        />

        {error ? (
          <div className="platform-banner platform-banner--danger rounded-[1.4rem] px-4 py-4 text-sm leading-7">
            <div>{error}</div>
            <button
              type="button"
              onClick={onRetry}
              className="platform-button platform-button--ghost mt-3 min-h-0 rounded-full px-4 py-2 text-sm"
            >
              重试
            </button>
          </div>
        ) : null}

        {loading ? (
          <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
            {Array.from({ length: 3 }).map((_, index) => (
              <div
                key={`skeleton-${index}`}
                className="platform-subpanel min-h-[12rem] rounded-[1.6rem] p-5"
              >
                <div className="h-4 w-20 rounded-full bg-[var(--platform-track-fill)]" />
                <div className="mt-6 h-8 w-36 rounded-full bg-[var(--platform-track-fill)]" />
                <div className="mt-4 h-4 w-full rounded-full bg-[var(--platform-track-fill)]" />
                <div className="mt-2 h-4 w-4/5 rounded-full bg-[var(--platform-track-fill)]" />
                <div className="mt-8 flex gap-2">
                  <div className="h-7 w-20 rounded-full bg-[var(--platform-track-fill)]" />
                  <div className="h-7 w-20 rounded-full bg-[var(--platform-track-fill)]" />
                </div>
              </div>
            ))}
          </div>
        ) : filteredItems.length > 0 ? (
          <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
            {filteredItems.map((item) => (
              <CustomWorldWorkCard
                key={`${item.kind}-${item.item.workId}`}
                item={item}
                onClick={() => {
                  if (item.kind === 'puzzle') {
                    onOpenPuzzleDetail?.(item.item.profileId);
                    return;
                  }

                  if (
                    item.item.sourceType === 'agent_session' &&
                    item.item.sessionId
                  ) {
                    onOpenDraft(item.item);
                    return;
                  }

                  if (item.item.profileId) {
                    onEnterPublished(item.item.profileId);
                  }
                }}
              />
            ))}
          </div>
        ) : unifiedItems.length === 0 ? (
          <EmptyState title="还没有作品" />
        ) : (
          <EmptyState title="当前筛选下没有内容" />
        )}
      </div>
    </div>
  );
}

export type { CustomWorldWorkFilter };