import { ArrowRight } from 'lucide-react';

import { NEW_WORK_ENTRY_CONFIG } from '../../config/newWorkEntryConfig';
import {
  getVisiblePlatformCreationTypes,
  type PlatformCreationTypeId,
} from '../platform-entry/platformEntryCreationTypes';

type CustomWorldCreationStartCardProps = {
  busy?: boolean;
  error?: string | null;
  onCreateType: (type: PlatformCreationTypeId) => void;
};

export function CustomWorldCreationStartCard({
  busy = false,
  error = null,
  onCreateType,
}: CustomWorldCreationStartCardProps) {
  // 创作首页首屏卡带与创作类型弹层保持同一份展示口径，
  // 避免某个玩法只在其中一个入口被隐藏而出现状态漂移。
  const visibleCreationTypes = getVisiblePlatformCreationTypes();

  return (
    // 移动端限制模块高度，模板入口改为横向滚动，避免挤占作品列表首屏空间。
    <div className="platform-surface platform-surface--hero relative max-h-[33svh] overflow-hidden px-3 py-3 sm:max-h-none sm:px-5 sm:py-5 xl:px-5 xl:py-4">
      <div className="absolute inset-0 bg-[var(--platform-hero-overlay-strong)]" />
      <div className="relative z-10 space-y-2.5 sm:space-y-4 xl:space-y-3">
        <div className="flex items-center justify-between gap-3 xl:items-end">
          <div className="text-xl font-black leading-none text-white sm:text-3xl xl:text-2xl">
            {NEW_WORK_ENTRY_CONFIG.startCard.title}
          </div>
          <div className="hidden text-sm leading-6 text-zinc-200/88 sm:block xl:text-xs xl:leading-5">
            {NEW_WORK_ENTRY_CONFIG.startCard.description}
          </div>
          <span className="platform-pill platform-pill--neutral shrink-0 border-white/25 bg-white/14 px-2.5 text-xs text-white sm:hidden">
            {busy
              ? NEW_WORK_ENTRY_CONFIG.startCard.busyBadge
              : NEW_WORK_ENTRY_CONFIG.startCard.idleBadge}
          </span>
        </div>

        <div className="-mx-1 flex snap-x gap-2 overflow-x-auto px-1 pb-1 scrollbar-hide sm:mx-0 sm:grid sm:gap-3 sm:overflow-visible sm:px-0 sm:pb-0 sm:grid-cols-2 xl:grid-cols-5 xl:gap-2.5">
          {visibleCreationTypes.map((item) => {
            const disabled = item.locked || busy;

            return (
              <button
                key={item.id}
                type="button"
                disabled={disabled}
                onClick={() => {
                  onCreateType(item.id);
                }}
                className={`platform-interactive-card relative flex min-h-[4rem] w-[11.25rem] shrink-0 snap-start flex-col overflow-hidden rounded-[1.15rem] border px-3 py-2.5 text-left transition sm:min-h-[8.5rem] sm:w-auto sm:rounded-[1.5rem] sm:px-4 sm:py-4 xl:min-h-[6.4rem] xl:px-3.5 xl:py-3 ${
                  item.locked
                    ? 'cursor-not-allowed border-white/10 bg-white/8 text-zinc-300/70'
                    : 'border-white/18 bg-[radial-gradient(circle_at_top_left,rgba(255,255,255,0.24),transparent_36%),linear-gradient(135deg,rgba(255,255,255,0.18),rgba(255,255,255,0.08))] text-white'
                } ${busy && !item.locked ? 'opacity-70' : ''}`}
              >
                <div className="flex min-h-5 items-center justify-end gap-2 sm:items-start sm:gap-3">
                  {item.locked ? (
                    <span className="platform-pill platform-pill--neutral px-2.5 text-xs text-[var(--platform-text-soft)] sm:px-3 sm:text-sm">
                      {item.badge}
                    </span>
                  ) : null}
                  {item.locked ? (
                    <span className="text-base leading-none text-white/40">·</span>
                  ) : (
                    <ArrowRight className="h-4 w-4 text-white/80" />
                  )}
                </div>

                <div className="mt-auto pt-1.5 sm:pt-4 xl:pt-2">
                  <div className="truncate text-base font-black leading-tight text-inherit sm:text-lg xl:text-base">
                    {item.title}
                  </div>
                  <div
                    className={`mt-1 truncate text-xs sm:mt-2 sm:text-sm xl:mt-1 xl:text-xs ${
                      item.locked ? 'text-zinc-400' : 'text-zinc-200/82'
                    }`}
                  >
                    {item.subtitle}
                  </div>
                </div>
              </button>
            );
          })}
        </div>

        {error ? (
          <div className="platform-banner platform-banner--danger rounded-[1rem] px-3 py-2 text-sm leading-5 sm:rounded-[1.25rem] sm:leading-6">
            {error}
          </div>
        ) : null}
      </div>
    </div>
  );
}