import { ArrowLeft } from 'lucide-react';
import type { ReactNode } from 'react';

import type { UnifiedCreationSpec } from './unifiedCreationSpecs';

type UnifiedCreationPageProps = {
  spec: UnifiedCreationSpec;
  children: ReactNode;
  onBack?: () => void;
  isBackDisabled?: boolean;
};

export function UnifiedCreationPage({
  spec,
  children,
  onBack,
  isBackDisabled = false,
}: UnifiedCreationPageProps) {
  return (
    <div
      className="unified-creation-page platform-remap-surface mx-auto flex h-full min-h-0 w-full max-w-5xl flex-col overflow-y-auto overflow-x-hidden px-3 pt-2 sm:px-4 sm:pt-3"
      data-play-id={spec.playId}
      data-field-kinds={spec.fields.map((field) => field.kind).join(',')}
      data-workspace-stage={spec.workspaceStage}
      data-generation-stage={spec.generationStage}
      data-result-stage={spec.resultStage}
    >
      <header className="unified-creation-page__header shrink-0 pb-3">
        <div className="mb-2 flex items-center gap-3">
          {onBack ? (
            <button
              type="button"
              onClick={onBack}
              disabled={isBackDisabled}
              className={`platform-button platform-button--ghost min-h-0 shrink-0 px-3 py-1.5 text-[11px] ${
                isBackDisabled ? 'cursor-not-allowed opacity-45' : ''
              }`}
            >
              <ArrowLeft className="h-3.5 w-3.5" />
              返回
            </button>
          ) : (
            <span aria-hidden="true" className="min-h-8 w-0 shrink-0" />
          )}
        </div>
        <div className="flex items-center justify-between gap-3">
          <h1 className="m-0 min-w-0 truncate text-[1.35rem] font-black leading-tight tracking-normal text-[var(--platform-text-strong)] sm:text-[1.65rem]">
            {spec.title}
          </h1>
        </div>
      </header>
      <div className="sr-only" data-testid="unified-creation-spec">
        <h1>{spec.title}</h1>
        <ul>
          {spec.fields.map((field) => (
            <li
              key={field.id}
              data-testid="unified-creation-field"
              data-field-id={field.id}
              data-field-kind={field.kind}
              data-required={field.required ? 'true' : 'false'}
            >
              {field.label}
            </li>
          ))}
        </ul>
      </div>
      <div className="unified-creation-page__content flex min-h-max flex-col pb-3 sm:pb-4">
        {children}
      </div>
    </div>
  );
}

export default UnifiedCreationPage;