import { useEffect, useMemo, useState } from 'react';

import type { BigFishWorkSummary } from '../../../packages/shared/src/contracts/bigFishWorkSummary';
import type { CustomWorldWorkSummary } from '../../../packages/shared/src/contracts/customWorldAgent';
import type { Match3DWorkSummary } from '../../../packages/shared/src/contracts/match3dWorks';
import type { PuzzleWorkSummary } from '../../../packages/shared/src/contracts/puzzleWorkSummary';
import type { SquareHoleWorkSummary } from '../../../packages/shared/src/contracts/squareHoleWorks';
import type { CustomWorldLibraryEntry } from '../../../packages/shared/src/contracts/runtime';
import type { CustomWorldProfile } from '../../types';
import type { PlatformCreationTypeId } from '../platform-entry/platformEntryCreationTypes';
import {
  buildCreationWorkShelfItems,
  type CreationWorkShelfItem,
  type CreationWorkShelfMetricId,
} from './creationWorkShelf';
import { CustomWorldCreationStartCard } from './CustomWorldCreationStartCard';
import { CustomWorldWorkCard } from './CustomWorldWorkCard';
import {
  type CustomWorldWorkFilter,
  CustomWorldWorkTabs,
} from './CustomWorldWorkTabs';

// 中文注释：草稿在手机端保持双列，已发布卡片由卡片自身跨两列展示公开指标。
const WORK_GRID_CLASS =
  'grid grid-cols-2 gap-2.5 sm:gap-3 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4';
const WORK_METRIC_CACHE_KEY = 'genarrative.creationHub.publishedMetrics.v1';

type WorkMetricSnapshot = Record<
  string,
  Partial<Record<CreationWorkShelfMetricId, number>>
>;

type CustomWorldCreationHubProps = {
  items: CustomWorldWorkSummary[];
  loading: boolean;
  error: string | null;
  onRetry: () => void;
  createError?: string | null;
  createBusy?: boolean;
  onCreateType: (type: PlatformCreationTypeId) => void;
  onOpenDraft: (item: CustomWorldWorkSummary) => void;
  onEnterPublished: (profileId: string) => void;
  onDeletePublished?: ((item: CustomWorldWorkSummary) => void) | null;
  deletingWorkId?: string | null;
  rpgLibraryEntries?: CustomWorldLibraryEntry<CustomWorldProfile>[];
  bigFishItems?: BigFishWorkSummary[];
  onOpenBigFishDetail?: (item: BigFishWorkSummary) => void;
  onDeleteBigFish?: ((item: BigFishWorkSummary) => void) | null;
  match3dItems?: Match3DWorkSummary[];
  onOpenMatch3DDetail?: (item: Match3DWorkSummary) => void;
  onDeleteMatch3D?: ((item: Match3DWorkSummary) => void) | null;
  squareHoleItems?: SquareHoleWorkSummary[];
  onOpenSquareHoleDetail?: (item: SquareHoleWorkSummary) => void;
  onDeleteSquareHole?: ((item: SquareHoleWorkSummary) => void) | null;
  puzzleItems?: PuzzleWorkSummary[];
  onOpenPuzzleDetail?: (item: PuzzleWorkSummary) => void;
  onDeletePuzzle?: ((item: PuzzleWorkSummary) => void) | null;
  onClaimPuzzlePointIncentive?: ((item: PuzzleWorkSummary) => void) | null;
  claimingPuzzleProfileId?: string | null;
};

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>
  );
}

function buildWorkMetricCacheItemKey(item: CreationWorkShelfItem) {
  return `${item.kind}:${item.id}`;
}

function readWorkMetricSnapshot(): WorkMetricSnapshot {
  if (typeof window === 'undefined') {
    return {};
  }

  try {
    const rawSnapshot = window.sessionStorage.getItem(WORK_METRIC_CACHE_KEY);
    if (!rawSnapshot) {
      return {};
    }

    const parsed = JSON.parse(rawSnapshot) as WorkMetricSnapshot;
    return parsed && typeof parsed === 'object' ? parsed : {};
  } catch {
    return {};
  }
}

function writeWorkMetricSnapshot(items: CreationWorkShelfItem[]) {
  if (typeof window === 'undefined') {
    return;
  }

  const snapshot: WorkMetricSnapshot = {};
  for (const item of items) {
    if (item.status !== 'published' || item.metrics.length === 0) {
      continue;
    }

    snapshot[buildWorkMetricCacheItemKey(item)] = Object.fromEntries(
      item.metrics.map((metric) => [metric.id, metric.value]),
    );
  }

  // 中文注释：缓存只作为下一次进入创作页的数字动画起点，真实展示值仍以接口返回为准。
  if (Object.keys(snapshot).length === 0) {
    return;
  }

  try {
    window.sessionStorage.setItem(
      WORK_METRIC_CACHE_KEY,
      JSON.stringify(snapshot),
    );
  } catch {
    // 中文注释：浏览器禁用 sessionStorage 时降级为无缓存动画，不影响作品列表使用。
  }
}

export function CustomWorldCreationHub({
  items,
  loading,
  error,
  onRetry,
  createError = null,
  createBusy = false,
  onCreateType,
  onOpenDraft,
  onEnterPublished,
  onDeletePublished = null,
  deletingWorkId = null,
  rpgLibraryEntries = [],
  bigFishItems = [],
  onOpenBigFishDetail,
  onDeleteBigFish = null,
  match3dItems = [],
  onOpenMatch3DDetail,
  onDeleteMatch3D = null,
  squareHoleItems = [],
  onOpenSquareHoleDetail,
  onDeleteSquareHole = null,
  puzzleItems = [],
  onOpenPuzzleDetail,
  onDeletePuzzle = null,
  onClaimPuzzlePointIncentive = null,
  claimingPuzzleProfileId = null,
}: CustomWorldCreationHubProps) {
  const [activeFilter, setActiveFilter] =
    useState<CustomWorldWorkFilter>('all');
  const shelfItems = useMemo(
    () =>
      buildCreationWorkShelfItems({
        rpgItems: items,
        rpgLibraryEntries,
        bigFishItems,
        match3dItems,
        squareHoleItems,
        puzzleItems,
        canDeleteRpg: Boolean(onDeletePublished),
        canDeleteBigFish: Boolean(onDeleteBigFish),
        canDeleteMatch3D: Boolean(onDeleteMatch3D),
        canDeleteSquareHole: Boolean(onDeleteSquareHole),
        canDeletePuzzle: Boolean(onDeletePuzzle),
      }),
    [
      bigFishItems,
      items,
      match3dItems,
      onDeleteBigFish,
      onDeleteMatch3D,
      onDeleteSquareHole,
      onDeletePublished,
      onDeletePuzzle,
      puzzleItems,
      rpgLibraryEntries,
      squareHoleItems,
    ],
  );
  const [metricSnapshot] = useState<WorkMetricSnapshot>(() =>
    readWorkMetricSnapshot(),
  );
  useEffect(() => {
    writeWorkMetricSnapshot(shelfItems);
  }, [shelfItems]);
  const draftCount = shelfItems.filter(
    (entry) => entry.status === 'draft',
  ).length;
  const publishedCount = shelfItems.filter(
    (entry) => entry.status === 'published',
  ).length;
  const filteredItems = useMemo(
    () =>
      shelfItems.filter((entry) =>
        activeFilter === 'all' ? true : entry.status === activeFilter,
      ),
    [activeFilter, shelfItems],
  );

  function handleOpenShelfItem(item: CreationWorkShelfItem) {
    switch (item.source.kind) {
      case 'puzzle':
        onOpenPuzzleDetail?.(item.source.item);
        return;
      case 'big-fish':
        onOpenBigFishDetail?.(item.source.item);
        return;
      case 'match3d':
        onOpenMatch3DDetail?.(item.source.item);
        return;
      case 'square-hole':
        onOpenSquareHoleDetail?.(item.source.item);
        return;
      case 'rpg':
        if (item.status === 'draft') {
          onOpenDraft(item.source.item);
          return;
        }

        if (item.source.item.profileId) {
          onEnterPublished(item.source.item.profileId);
        }
    }
  }

  function buildDeleteAction(item: CreationWorkShelfItem) {
    if (!item.canDelete) {
      return null;
    }

    switch (item.source.kind) {
      case 'puzzle': {
        const sourceItem = item.source.item;
        return () => {
          onDeletePuzzle?.(sourceItem);
        };
      }
      case 'big-fish': {
        const sourceItem = item.source.item;
        return () => {
          onDeleteBigFish?.(sourceItem);
        };
      }
      case 'match3d': {
        const sourceItem = item.source.item;
        return () => {
          onDeleteMatch3D?.(sourceItem);
        };
      }
      case 'square-hole': {
        const sourceItem = item.source.item;
        return () => {
          onDeleteSquareHole?.(sourceItem);
        };
      }
      case 'rpg': {
        const sourceItem = item.source.item;
        return () => {
          onDeletePublished?.(sourceItem);
        };
      }
    }
  }

  function buildPointIncentiveAction(item: CreationWorkShelfItem) {
    if (item.source.kind !== 'puzzle' || !onClaimPuzzlePointIncentive) {
      return null;
    }

    const sourceItem = item.source.item;
    return () => {
      onClaimPuzzlePointIncentive(sourceItem);
    };
  }

  return (
    <div className="platform-page-stage platform-remap-surface space-y-4 px-3 pb-4 pt-3 sm:px-4 sm:pt-4 xl:px-5 xl:pb-5 xl:pt-5">
      <div className="space-y-4 xl:space-y-3">
        <CustomWorldCreationStartCard
          busy={createBusy}
          error={createError}
          onCreateType={onCreateType}
        />

        <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={WORK_GRID_CLASS}>
            {Array.from({ length: 3 }).map((_, index) => (
              <div
                key={`skeleton-${index}`}
                className="platform-subpanel min-h-[10.5rem] rounded-[1.2rem] p-3 sm:min-h-[12rem] sm:rounded-[1.6rem] sm:p-5"
              >
                <div className="h-4 w-20 rounded-full bg-[var(--platform-track-fill)]" />
                <div className="mt-5 h-6 w-24 rounded-full bg-[var(--platform-track-fill)] sm:mt-6 sm:h-8 sm:w-36" />
                <div className="mt-3 h-3 w-full rounded-full bg-[var(--platform-track-fill)] sm:mt-4 sm:h-4" />
                <div className="mt-2 h-4 w-4/5 rounded-full bg-[var(--platform-track-fill)]" />
                <div className="mt-6 flex flex-col gap-2 sm:mt-8 sm:flex-row">
                  <div className="h-6 w-16 rounded-full bg-[var(--platform-track-fill)] sm:h-7 sm:w-20" />
                  <div className="h-6 w-16 rounded-full bg-[var(--platform-track-fill)] sm:h-7 sm:w-20" />
                </div>
              </div>
            ))}
          </div>
        ) : filteredItems.length > 0 ? (
          <div className={WORK_GRID_CLASS}>
            {filteredItems.map((item) => (
              <CustomWorldWorkCard
                key={`${item.kind}-${item.id}`}
                item={item}
                previousMetricValues={
                  metricSnapshot[buildWorkMetricCacheItemKey(item)]
                }
                onOpen={() => handleOpenShelfItem(item)}
                onDelete={buildDeleteAction(item)}
                deleteBusy={deletingWorkId === item.id}
                onClaimPointIncentive={buildPointIncentiveAction(item)}
                pointIncentiveBusy={
                  item.source.kind === 'puzzle' &&
                  claimingPuzzleProfileId === item.source.item.profileId
                }
              />
            ))}
          </div>
        ) : shelfItems.length === 0 ? (
          <EmptyState title="还没有作品" />
        ) : (
          <EmptyState title="当前筛选下没有内容" />
        )}
      </div>
    </div>
  );
}

export type { CustomWorldWorkFilter };