import { Check, ChevronDown, Cpu, Film, ImageIcon, Music } from 'lucide-react';
import {
  type CSSProperties,
  type Dispatch,
  type ReactNode,
  type RefObject,
  type SetStateAction,
  useCallback,
  useRef,
  useState,
} from 'react';

import { PlatformActionButton } from '../common/PlatformActionButton';
import {
  PlatformFloatingMenu,
  PlatformFloatingMenuItem,
} from '../common/PlatformFloatingMenu';
import { PlatformInlineOptionButton } from '../common/PlatformInlineOptionButton';
import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
import { PlatformTextField } from '../common/PlatformTextField';
import { ImageCanvasBasicGenerationComposerView } from './ImageCanvasBasicGenerationComposerView';
import { ImageCanvasCharacterAnimationPanelView } from './ImageCanvasCharacterAnimationPanelView';
import { ImageCanvasCharacterGenerationComposerView } from './ImageCanvasCharacterGenerationComposerView';
import { ImageCanvasCropExpandPanelView } from './ImageCanvasCropExpandPanelView';
import { ImageCanvasEditGenerationModalView } from './ImageCanvasEditGenerationModalView';
import { ImageCanvasEditorPortal } from './ImageCanvasEditorPortal';
import type {
  CanvasLayer,
  CharacterAnimationPanelState,
  CropExpandPanelState,
  GenerateDialogState,
  QuickEditPanelState,
  SpecFormValues,
  SpecGenerationType,
  UploadTarget,
} from './ImageCanvasEditorTypes';
import {
  calculateEditorBackgroundMusicPrice,
  calculateEditorSoundEffectPrice,
  calculateEditorVideoPrice,
  DEFAULT_BACKGROUND_MUSIC_MODEL,
  DEFAULT_SOUND_EFFECT_DURATION_SECONDS,
  DEFAULT_SOUND_EFFECT_MODEL,
  DEFAULT_VIDEO_ASPECT_RATIO,
  DEFAULT_VIDEO_DURATION_SECONDS,
  DEFAULT_VIDEO_SOUND,
  EDITOR_SOUND_EFFECT_MODEL_OPTIONS,
  EDITOR_VIDEO_ASPECT_RATIO_OPTIONS,
  EDITOR_VIDEO_MODEL_OPTIONS,
  EDITOR_VIDEO_RESOLUTION_OPTIONS,
  resizeGenerationPlaceholderToVideoSelection,
  SPEC_TYPE_LABEL,
  VIDEO_MODEL_SEEDANCE_2_FAST,
} from './ImageCanvasGenerationModel';
import { ImageCanvasIconSpritesheetComposerView } from './ImageCanvasIconSpritesheetComposerView';
import { ImageCanvasPublicationMaterialsDemoPanelView } from './ImageCanvasPublicationMaterialsDemoPanelView';
import { getPublicationMaterialsWorkflow } from './ImageCanvasPublicationMaterialsModel';
import { ImageCanvasQuickEditPanelView } from './ImageCanvasQuickEditPanelView';
import { ImageCanvasReferenceSlot } from './ImageCanvasReferenceSlot';
import { ImageCanvasSpecGenerationPanelView } from './ImageCanvasSpecGenerationPanelView';
import { useImageCanvasFloatingOptionDismiss } from './useImageCanvasFloatingOptionDismiss';

type ImageCanvasGenerationComposerViewProps = {
  specToolWrapRef: RefObject<HTMLSpanElement | null>;
  publicationReferenceButtonRef: RefObject<HTMLButtonElement | null>;
  characterSpecButtonRef: RefObject<HTMLButtonElement | null>;
  characterReferenceButtonRef: RefObject<HTMLButtonElement | null>;
  generationReferenceButtonRef: RefObject<HTMLButtonElement | null>;
  iconSpecButtonRef: RefObject<HTMLButtonElement | null>;
  isSpecMenuOpen: boolean;
  isGenerationReferenceMenuOpen: boolean;
  isPublicationReferenceMenuOpen: boolean;
  isCharacterSpecMenuOpen: boolean;
  isCharacterReferenceMenuOpen: boolean;
  isIconSpecMenuOpen: boolean;
  isUiDesignSpecMenuOpen: boolean;
  isPickingGenerationReferenceFromCanvas: boolean;
  isPickingQuickEditReferenceFromCanvas: boolean;
  isPickingPublicationReferenceFromCanvas: boolean;
  isPickingCharacterSpecFromCanvas: boolean;
  isPickingCharacterReferenceFromCanvas: boolean;
  isPickingIconSpecFromCanvas: boolean;
  isPickingUiDesignSpecFromCanvas: boolean;
  generateDialog: GenerateDialogState | null;
  generationComposerStyle: CSSProperties | null;
  iconComposerStyle: CSSProperties | null;
  quickEditPanel: QuickEditPanelState | null;
  quickEditSourceLayer: CanvasLayer | null;
  quickEditPanelStyle: CSSProperties | null;
  cropExpandPanel: CropExpandPanelState | null;
  cropExpandSourceLayer: CanvasLayer | null;
  cropExpandPanelStyle: CSSProperties | null;
  characterAnimationPanel: CharacterAnimationPanelState | null;
  characterAnimationSourceLayer: CanvasLayer | null;
  characterAnimationPanelStyle: CSSProperties | null;
  characterAnimationPrice: number;
  setGenerateDialog: Dispatch<SetStateAction<GenerateDialogState | null>>;
  setQuickEditPanel: Dispatch<SetStateAction<QuickEditPanelState | null>>;
  setCropExpandPanel: Dispatch<SetStateAction<CropExpandPanelState | null>>;
  setCharacterAnimationPanel: Dispatch<
    SetStateAction<CharacterAnimationPanelState | null>
  >;
  setIsGenerationReferenceMenuOpen: Dispatch<SetStateAction<boolean>>;
  setIsPublicationReferenceMenuOpen: Dispatch<SetStateAction<boolean>>;
  setIsCharacterSpecMenuOpen: Dispatch<SetStateAction<boolean>>;
  setIsCharacterReferenceMenuOpen: Dispatch<SetStateAction<boolean>>;
  setIsIconSpecMenuOpen: Dispatch<SetStateAction<boolean>>;
  setIsUiDesignSpecMenuOpen: Dispatch<SetStateAction<boolean>>;
  setIsPickingGenerationReferenceFromCanvas: Dispatch<SetStateAction<boolean>>;
  setIsPickingQuickEditReferenceFromCanvas: Dispatch<SetStateAction<boolean>>;
  setIsPickingPublicationReferenceFromCanvas: Dispatch<
    SetStateAction<boolean>
  >;
  setIsPickingCharacterSpecFromCanvas: Dispatch<SetStateAction<boolean>>;
  setIsPickingCharacterReferenceFromCanvas: Dispatch<SetStateAction<boolean>>;
  setIsPickingIconSpecFromCanvas: Dispatch<SetStateAction<boolean>>;
  setIsPickingUiDesignSpecFromCanvas: Dispatch<SetStateAction<boolean>>;
  onOpenSpecDialog: (specType: SpecGenerationType) => void;
  onRequestUpload: (target: UploadTarget) => void;
  onSubmitImageGeneration: (dialog: GenerateDialogState) => void;
  onSubmitIconSpritesheetGeneration: (dialog: GenerateDialogState) => void;
  onSubmitQuickEdit: () => void;
  onSubmitCropExpand: () => void;
  onSubmitCharacterAnimation: () => void;
  onUpdateSpecFormValue: (key: keyof SpecFormValues, value: string) => void;
  onUpdateIconDescriptionText: (value: string) => void;
  onUpdateCharacterAnimationDuration: (frameCountValue: string) => void;
  onRememberImageModel: (model: string) => void;
  onSpecMenuPointerEnter?: () => void;
  onSpecMenuPointerLeave?: () => void;
};

function buildPortalMenuStyle(
  anchor: HTMLElement | null,
  placement: 'above' | 'below',
): CSSProperties {
  const rect = anchor?.getBoundingClientRect();
  if (!rect) {
    return {
      position: 'fixed',
      left: 0,
      top: 0,
      right: 'auto',
      bottom: 'auto',
      zIndex: 70,
    };
  }

  return {
    position: 'fixed',
    left: Math.round(rect.left),
    top:
      placement === 'above'
        ? Math.round(rect.top)
        : Math.round(rect.bottom + 8),
    right: 'auto',
    bottom: 'auto',
    zIndex: 70,
    transform:
      placement === 'above' ? 'translateY(calc(-100% - 0.45rem))' : undefined,
  };
}

function renderEditorPortal(node: ReactNode) {
  return <ImageCanvasEditorPortal>{node}</ImageCanvasEditorPortal>;
}

function resetFailedVideoDialogStatus(dialog: GenerateDialogState) {
  return {
    ...dialog,
    status: dialog.status === 'failed' ? 'idle' : dialog.status,
    errorMessage: dialog.status === 'failed' ? undefined : dialog.errorMessage,
  };
}

function isSeedanceVideoModel(model: string | undefined) {
  return model === 'seedance2.0' || model === 'seedance2.0-fast';
}

function VideoReferenceChip({
  reference,
  index,
  onRemove,
}: {
  reference: {
    id: string;
    label: string;
    src: string;
    mediaType?: string;
    objectKey?: string | null;
  };
  index: number;
  onRemove: () => void;
}) {
  const mediaType = reference.mediaType ?? 'image';
  const labelPrefix =
    mediaType === 'video'
      ? '参考视频'
      : mediaType === 'audio'
        ? '参考音频'
        : '参考图';
  const label = reference.label || `${labelPrefix}${index + 1}`;
  const icon =
    mediaType === 'video' ? (
      <Film className="h-4 w-4" aria-hidden="true" />
    ) : mediaType === 'audio' ? (
      <Music className="h-4 w-4" aria-hidden="true" />
    ) : (
      <ImageIcon className="h-4 w-4" aria-hidden="true" />
    );
  return (
    <ImageCanvasReferenceSlot
      tone={mediaType === 'audio' ? 'audio' : 'video'}
      icon={icon}
      imageSrc={mediaType === 'image' ? reference.src : undefined}
      objectKey={mediaType === 'image' ? reference.objectKey : undefined}
      label={label}
      ariaLabel={label}
      title={reference.label}
      onRemove={onRemove}
      removeLabel={`删除${label}`}
    />
  );
}

function VideoOptionChoice({
  children,
  selected,
  className,
  ariaLabel,
  disabled,
  onClick,
}: {
  children: ReactNode;
  selected: boolean;
  className?: string;
  ariaLabel?: string;
  disabled?: boolean;
  onClick?: () => void;
}) {
  return (
    <button
      type="button"
      className={['image-canvas-editor__option-popover-choice', className]
        .filter(Boolean)
        .join(' ')}
      aria-label={ariaLabel}
      aria-pressed={selected}
      disabled={disabled}
      onClick={onClick}
    >
      {children}
    </button>
  );
}

function ImageCanvasVideoGenerationComposerView({
  dialog,
  style,
  generationReferenceButtonRef,
  isGenerationReferenceMenuOpen,
  setGenerateDialog,
  setIsGenerationReferenceMenuOpen,
  setIsPickingGenerationReferenceFromCanvas,
  renderEditorPortal,
  buildPortalMenuStyle,
  onRequestUpload,
  onSubmit,
}: {
  dialog: GenerateDialogState;
  style: CSSProperties;
  generationReferenceButtonRef: RefObject<HTMLButtonElement | null>;
  isGenerationReferenceMenuOpen: boolean;
  setGenerateDialog: Dispatch<SetStateAction<GenerateDialogState | null>>;
  setIsGenerationReferenceMenuOpen: Dispatch<SetStateAction<boolean>>;
  setIsPickingGenerationReferenceFromCanvas: Dispatch<SetStateAction<boolean>>;
  renderEditorPortal: (node: ReactNode) => ReactNode;
  buildPortalMenuStyle: (
    anchor: HTMLElement | null,
    placement: 'above' | 'below',
  ) => CSSProperties;
  onRequestUpload: (target: UploadTarget) => void;
  onSubmit: (dialog: GenerateDialogState) => void;
}) {
  const [openPanel, setOpenPanel] = useState<'params' | 'model' | null>(null);
  const paramsButtonRef = useRef<HTMLButtonElement | null>(null);
  const modelButtonRef = useRef<HTMLButtonElement | null>(null);
  const normalizeVideoDuration = (value: number) =>
    Math.min(15, Math.max(4, Math.round(value)));
  const resolution = dialog.videoResolution ?? '480p';
  const durationSeconds = normalizeVideoDuration(
    dialog.videoDurationSeconds ?? DEFAULT_VIDEO_DURATION_SECONDS,
  );
  const soundMode = dialog.videoSound ?? DEFAULT_VIDEO_SOUND;
  const aspectRatio = dialog.videoAspectRatio ?? DEFAULT_VIDEO_ASPECT_RATIO;
  const currentModel =
    EDITOR_VIDEO_MODEL_OPTIONS.find(
      (item) => item.value === dialog.videoModel,
    ) ?? EDITOR_VIDEO_MODEL_OPTIONS[0];
  const supportsReferences = isSeedanceVideoModel(currentModel.value);
  const price = calculateEditorVideoPrice(
    currentModel.value,
    resolution,
    durationSeconds,
  );
  const isGenerating = dialog.status === 'generating';
  const closeVideoFloatingPanels = useCallback(() => {
    setOpenPanel(null);
    setIsGenerationReferenceMenuOpen(false);
  }, [setIsGenerationReferenceMenuOpen]);

  useImageCanvasFloatingOptionDismiss({
    isOpen: openPanel !== null || isGenerationReferenceMenuOpen,
    boundaryRefs: [
      paramsButtonRef,
      modelButtonRef,
      generationReferenceButtonRef,
    ],
    onDismiss: closeVideoFloatingPanels,
  });

  const updateVideoDialog = (patch: Partial<GenerateDialogState>) => {
    setGenerateDialog((currentDialog) =>
      currentDialog?.mode === 'video'
        ? resizeGenerationPlaceholderToVideoSelection({
            ...resetFailedVideoDialogStatus(currentDialog),
            ...patch,
          })
        : currentDialog,
    );
  };

  const updateVideoModel = (model: GenerateDialogState['videoModel']) => {
    updateVideoDialog({
      videoModel: model,
      videoResolution:
        model === VIDEO_MODEL_SEEDANCE_2_FAST && dialog.videoResolution === '1080p'
          ? '720p'
          : dialog.videoResolution,
      ...(isSeedanceVideoModel(model) ? {} : { generationReferences: [] }),
    });
  };

  return (
    <>
      <form
        className="image-canvas-editor__generation-composer image-canvas-editor__generation-composer--image image-canvas-editor__generation-composer--video"
        style={style}
        role="dialog"
        aria-label="生成视频"
        onPointerDown={(event) => event.stopPropagation()}
        onSubmit={(event) => {
          event.preventDefault();
          if (!isGenerating) {
            onSubmit(dialog);
          }
        }}
      >
        {supportsReferences ? (
          <div className="image-canvas-editor__reference-strip">
            {(dialog.generationReferences ?? []).map((reference, index) => (
              <VideoReferenceChip
                key={reference.id}
                reference={reference}
                index={index}
                onRemove={() =>
                  updateVideoDialog({
                    generationReferences: (
                      dialog.generationReferences ?? []
                    ).filter((item) => item.id !== reference.id),
                  })
                }
              />
            ))}
            <ImageCanvasReferenceSlot
              buttonRef={generationReferenceButtonRef}
              tone="video"
              icon={<ImageIcon className="h-4 w-4" aria-hidden="true" />}
              label="参考"
              ariaLabel="添加视频参考素材"
              disabled={isGenerating}
              isAdd
              onClick={() => setIsGenerationReferenceMenuOpen((open) => !open)}
            />
          </div>
        ) : null}
        <PlatformTextField
          variant="textarea"
          aria-label="视频描述"
          value={dialog.prompt}
          disabled={isGenerating}
          placeholder="你希望生成什么视频？"
          size="sm"
          density="compact"
          className="image-canvas-editor__generation-prompt"
          onChange={(event) =>
            updateVideoDialog({ prompt: event.target.value })
          }
        />
        <div className="image-canvas-editor__generation-composer-footer">
          <div className="image-canvas-editor__option-popover-anchor image-canvas-editor__option-popover-anchor--dimensions">
            <PlatformInlineOptionButton
              ref={paramsButtonRef}
              className="image-canvas-editor__option-cluster image-canvas-editor__option-cluster--dimensions"
              aria-label={`视频参数 ${aspectRatio} · ${durationSeconds}秒 · ${resolution}`}
              aria-expanded={openPanel === 'params'}
              disabled={isGenerating}
              trailingIcon={<ChevronDown className="h-3 w-3" />}
              onClick={() =>
                setOpenPanel((currentPanel) =>
                  currentPanel === 'params' ? null : 'params',
                )
              }
            >
              {aspectRatio} · {durationSeconds}秒 · {resolution} ·{' '}
              {soundMode === 'off' ? '静音' : '有声'}
            </PlatformInlineOptionButton>
            {openPanel === 'params'
              ? renderEditorPortal(
                  <PlatformFloatingMenu
                    className="image-canvas-editor__option-popover image-canvas-editor__portal-menu"
                    label="视频参数选项"
                    placement="top-start"
                    style={buildPortalMenuStyle(
                      paramsButtonRef.current,
                      'above',
                    )}
                    onPointerDown={(event) => event.stopPropagation()}
                  >
                    <div className="image-canvas-editor__option-popover-sections">
                      <section className="image-canvas-editor__option-popover-section">
                        <span className="image-canvas-editor__option-popover-title">
                          比例
                        </span>
                        <div className="image-canvas-editor__option-popover-items image-canvas-editor__option-popover-items--card">
                          {EDITOR_VIDEO_ASPECT_RATIO_OPTIONS.map((option) => (
                            <VideoOptionChoice
                              key={option}
                              selected={aspectRatio === option}
                              className="image-canvas-editor__option-popover-choice--ratio"
                              disabled={isGenerating}
                              ariaLabel={`比例 ${option}`}
                              onClick={() =>
                                updateVideoDialog({
                                  videoAspectRatio: option,
                                })
                              }
                            >
                              <span
                                className="image-canvas-editor__ratio-wireframe"
                                data-ratio={option}
                                aria-hidden="true"
                              />
                              <span>{option}</span>
                            </VideoOptionChoice>
                          ))}
                        </div>
                      </section>
                      <section className="image-canvas-editor__option-popover-section">
                        <span className="image-canvas-editor__option-popover-title">
                          时长
                        </span>
                        <div className="image-canvas-editor__video-duration-slider">
                          <input
                            type="range"
                            min={4}
                            max={15}
                            step={1}
                            value={durationSeconds}
                            disabled={isGenerating}
                            aria-label="视频时长"
                            onChange={(event) =>
                              updateVideoDialog({
                                videoDurationSeconds: normalizeVideoDuration(
                                  Number(event.target.value),
                                ),
                              })
                            }
                          />
                          <span>{durationSeconds}秒</span>
                        </div>
                      </section>
                      <section className="image-canvas-editor__option-popover-section">
                        <span className="image-canvas-editor__option-popover-title">
                          清晰度
                        </span>
                        <div className="image-canvas-editor__option-popover-items">
                          {EDITOR_VIDEO_RESOLUTION_OPTIONS.map((option) => {
                            const available =
                              currentModel.value !== VIDEO_MODEL_SEEDANCE_2_FAST ||
                              option !== '1080p';
                            return (
                              <VideoOptionChoice
                                key={option}
                                selected={resolution === option}
                                disabled={isGenerating || !available}
                                ariaLabel={`清晰度 ${option}`}
                                onClick={() =>
                                  available
                                    ? updateVideoDialog({
                                        videoResolution: option,
                                      })
                                    : undefined
                                }
                              >
                                {option}
                              </VideoOptionChoice>
                            );
                          })}
                        </div>
                      </section>
                      <section className="image-canvas-editor__option-popover-section">
                        <span className="image-canvas-editor__option-popover-title">
                          声音
                        </span>
                        <div className="image-canvas-editor__video-toggle-row">
                          <button
                            type="button"
                            className="image-canvas-editor__video-toggle"
                            aria-pressed={soundMode === 'off'}
                            disabled={isGenerating}
                            onClick={() =>
                              updateVideoDialog({
                                videoSound:
                                  soundMode === 'off' ? 'on' : 'off',
                              })
                            }
                          >
                            <span aria-hidden="true" />
                            <strong>静音</strong>
                          </button>
                        </div>
                      </section>
                    </div>
                  </PlatformFloatingMenu>,
                )
              : null}
          </div>
          <div className="image-canvas-editor__option-popover-anchor image-canvas-editor__option-popover-anchor--model">
            <PlatformInlineOptionButton
              ref={modelButtonRef}
              className="image-canvas-editor__option-cluster image-canvas-editor__option-cluster--model"
              aria-label={`模型 ${currentModel.label}`}
              aria-expanded={openPanel === 'model'}
              disabled={isGenerating}
              trailingIcon={<ChevronDown className="h-3 w-3" />}
              onClick={() =>
                setOpenPanel((currentPanel) =>
                  currentPanel === 'model' ? null : 'model',
                )
              }
            >
              <span className="image-canvas-editor__model-trigger-label">
                <span
                  className="image-canvas-editor__model-icon"
                  aria-hidden="true"
                >
                  <Cpu />
                </span>
                <span>{currentModel.label}</span>
              </span>
            </PlatformInlineOptionButton>
            {openPanel === 'model'
              ? renderEditorPortal(
                  <PlatformFloatingMenu
                    className="image-canvas-editor__option-popover image-canvas-editor__option-popover--model image-canvas-editor__portal-menu"
                    label="视频模型选项"
                    placement="top-start"
                    style={buildPortalMenuStyle(
                      modelButtonRef.current,
                      'above',
                    )}
                    onPointerDown={(event) => event.stopPropagation()}
                  >
                    <div className="image-canvas-editor__option-popover-items image-canvas-editor__option-popover-items--model">
                      {EDITOR_VIDEO_MODEL_OPTIONS.map((option) => {
                        const checked = currentModel.value === option.value;
                        return (
                          <VideoOptionChoice
                            key={option.value}
                            selected={checked}
                            disabled={isGenerating}
                            className="image-canvas-editor__option-popover-choice--model"
                            ariaLabel={option.label}
                            onClick={() => updateVideoModel(option.value)}
                          >
                            <span
                              className="image-canvas-editor__model-icon"
                              aria-hidden="true"
                            >
                              <Cpu />
                            </span>
                            <span>{option.label}</span>
                            <Check
                              className="image-canvas-editor__option-selected-check"
                              data-visible={checked}
                              aria-hidden="true"
                            />
                          </VideoOptionChoice>
                        );
                      })}
                    </div>
                  </PlatformFloatingMenu>,
                )
              : null}
          </div>
          <PlatformActionButton
            type="submit"
            tone="secondary"
            size="xs"
            shape="pill"
            className="image-canvas-editor__generation-submit"
            disabled={isGenerating}
            aria-label="生成视频"
          >
            {isGenerating ? (
              '生成中'
            ) : (
              <>
                <span>生成</span>
                <span className="image-canvas-editor__mud-point-inline">
                  {price}泥点
                </span>
              </>
            )}
          </PlatformActionButton>
        </div>
      </form>
      {isGenerationReferenceMenuOpen && supportsReferences
        ? renderEditorPortal(
            <PlatformFloatingMenu
              className="image-canvas-editor__spec-menu image-canvas-editor__portal-menu"
              label="参考素材来源"
              placement="top-start"
              style={buildPortalMenuStyle(
                generationReferenceButtonRef.current,
                'above',
              )}
            >
              <PlatformFloatingMenuItem
                onClick={() => {
                  setIsGenerationReferenceMenuOpen(false);
                  setIsPickingGenerationReferenceFromCanvas(true);
                }}
              >
                从画布中选择
              </PlatformFloatingMenuItem>
              <PlatformFloatingMenuItem
                onClick={() => {
                  setIsGenerationReferenceMenuOpen(false);
                  setIsPickingGenerationReferenceFromCanvas(false);
                  onRequestUpload('video-reference-image');
                }}
              >
                上传图片
              </PlatformFloatingMenuItem>
              <PlatformFloatingMenuItem
                onClick={() => {
                  setIsGenerationReferenceMenuOpen(false);
                  setIsPickingGenerationReferenceFromCanvas(false);
                  onRequestUpload('video-reference-video');
                }}
              >
                上传视频
              </PlatformFloatingMenuItem>
              <PlatformFloatingMenuItem
                onClick={() => {
                  setIsGenerationReferenceMenuOpen(false);
                  setIsPickingGenerationReferenceFromCanvas(false);
                  onRequestUpload('video-reference-audio');
                }}
              >
                上传音频
              </PlatformFloatingMenuItem>
            </PlatformFloatingMenu>,
          )
        : null}
    </>
  );
}

function normalizeSoundDuration(value: number | null | undefined) {
  if (typeof value !== 'number' || !Number.isFinite(value)) {
    return DEFAULT_SOUND_EFFECT_DURATION_SECONDS;
  }
  return Math.min(10, Math.max(2, Math.round(value)));
}

function resetFailedAudioDialogStatus(dialog: GenerateDialogState) {
  return {
    ...dialog,
    status: dialog.status === 'failed' ? 'idle' : dialog.status,
    errorMessage: dialog.status === 'failed' ? undefined : dialog.errorMessage,
  };
}

function ImageCanvasAudioGenerationComposerView({
  dialog,
  style,
  setGenerateDialog,
  renderEditorPortal,
  buildPortalMenuStyle,
  onSubmit,
}: {
  dialog: GenerateDialogState;
  style: CSSProperties;
  setGenerateDialog: Dispatch<SetStateAction<GenerateDialogState | null>>;
  renderEditorPortal: (node: ReactNode) => ReactNode;
  buildPortalMenuStyle: (
    anchor: HTMLElement | null,
    placement: 'above' | 'below',
  ) => CSSProperties;
  onSubmit: (dialog: GenerateDialogState) => void;
}) {
  const [isSoundOptionsOpen, setIsSoundOptionsOpen] = useState(false);
  const soundOptionsButtonRef = useRef<HTMLButtonElement | null>(null);
  const soundModelButtonRef = useRef<HTMLButtonElement | null>(null);
  const isSoundEffect = dialog.mode === 'audio-sound-effect';
  const isGenerating = dialog.status === 'generating';
  const soundModel = dialog.soundModel ?? DEFAULT_SOUND_EFFECT_MODEL;
  const currentSoundModel =
    EDITOR_SOUND_EFFECT_MODEL_OPTIONS.find(
      (option) => option.value === soundModel,
    ) ?? EDITOR_SOUND_EFFECT_MODEL_OPTIONS[0];
  const soundDuration = normalizeSoundDuration(dialog.soundDurationSeconds);
  const soundOptionLabel = `${soundDuration}秒`;
  const dialogLabel = isSoundEffect ? '生成游戏音效' : '生成游戏背景音乐';
  const fixedModelLabel = isSoundEffect ? currentSoundModel.label : 'Suno';
  const fixedModelAriaLabel = isSoundEffect
    ? `音效模型 ${fixedModelLabel}`
    : `背景音乐模型 ${fixedModelLabel}`;
  const cost = isSoundEffect
    ? calculateEditorSoundEffectPrice(soundModel)
    : calculateEditorBackgroundMusicPrice(DEFAULT_BACKGROUND_MUSIC_MODEL);

  useImageCanvasFloatingOptionDismiss({
    isOpen: isSoundOptionsOpen,
    boundaryRefs: [soundOptionsButtonRef],
    onDismiss: () => setIsSoundOptionsOpen(false),
  });

  const updateAudioDialog = (patch: Partial<GenerateDialogState>) => {
    setGenerateDialog((currentDialog) =>
      currentDialog?.mode === dialog.mode
        ? {
            ...resetFailedAudioDialogStatus(currentDialog),
            ...patch,
          }
        : currentDialog,
    );
  };

  const updateSoundDuration = (durationSeconds: number) => {
    updateAudioDialog({ soundDurationSeconds: normalizeSoundDuration(durationSeconds) });
  };

  return (
    <form
      className="image-canvas-editor__generation-composer image-canvas-editor__generation-composer--image image-canvas-editor__generation-composer--audio"
      style={style}
      role="dialog"
      aria-label={dialogLabel}
      onPointerDown={(event) => event.stopPropagation()}
      onSubmit={(event) => {
        event.preventDefault();
        if (!isGenerating) {
          onSubmit(dialog);
        }
      }}
    >
      <PlatformTextField
        variant="textarea"
        aria-label={isSoundEffect ? 'prompt' : 'gpt_description_prompt'}
        value={dialog.prompt}
        disabled={isGenerating}
        placeholder={
          isSoundEffect
            ? '你希望生成什么音效？'
            : '你希望生成什么音乐？'
        }
        size="sm"
        density="compact"
        className="image-canvas-editor__generation-prompt"
        onChange={(event) => updateAudioDialog({ prompt: event.target.value })}
      />
      {dialog.status === 'failed' ? (
        <PlatformStatusMessage
          tone="error"
          surface="platform"
          size="xs"
          className="image-canvas-editor__generate-status"
          role="alert"
        >
          {dialog.errorMessage}
        </PlatformStatusMessage>
      ) : null}
      <div className="image-canvas-editor__generation-composer-footer">
        {isSoundEffect ? (
          <div className="image-canvas-editor__option-popover-anchor image-canvas-editor__option-popover-anchor--dimensions">
            <PlatformInlineOptionButton
              ref={soundOptionsButtonRef}
              className="image-canvas-editor__option-cluster image-canvas-editor__option-cluster--dimensions"
              aria-label={`音效时长 ${soundOptionLabel}`}
              aria-expanded={isSoundOptionsOpen}
              disabled={isGenerating}
              trailingIcon={<ChevronDown className="h-3 w-3" />}
              onClick={() => setIsSoundOptionsOpen((isOpen) => !isOpen)}
            >
              {soundOptionLabel}
            </PlatformInlineOptionButton>
            {isSoundOptionsOpen
              ? renderEditorPortal(
                  <PlatformFloatingMenu
                    className="image-canvas-editor__option-popover image-canvas-editor__option-popover--audio-options image-canvas-editor__portal-menu"
                    label="音效时长选项"
                    placement="top-start"
                    style={buildPortalMenuStyle(
                      soundOptionsButtonRef.current,
                      'above',
                    )}
                  >
                    <div className="image-canvas-editor__option-popover-sections">
                      <section className="image-canvas-editor__option-popover-section">
                        <span className="image-canvas-editor__option-popover-title">
                          时长
                        </span>
                        <div className="image-canvas-editor__video-duration-slider">
                          <input
                            type="range"
                            min={2}
                            max={10}
                            step={1}
                            value={soundDuration}
                            disabled={isGenerating}
                            aria-label="音效时长"
                            onChange={(event) =>
                              updateSoundDuration(Number(event.target.value))
                            }
                          />
                          <span>{soundDuration}秒</span>
                        </div>
                      </section>
                    </div>
                  </PlatformFloatingMenu>,
                )
              : null}
          </div>
        ) : null}
        <div className="image-canvas-editor__option-popover-anchor image-canvas-editor__option-popover-anchor--model image-canvas-editor__readonly-generation-option">
          <PlatformInlineOptionButton
            ref={soundModelButtonRef}
            className="image-canvas-editor__option-cluster image-canvas-editor__option-cluster--model"
            aria-label={fixedModelAriaLabel}
            disabled
          >
            <span className="image-canvas-editor__model-trigger-label">
              <span
                className="image-canvas-editor__model-icon"
                aria-hidden="true"
              >
                <Music />
              </span>
              <span>{fixedModelLabel}</span>
            </span>
          </PlatformInlineOptionButton>
        </div>
        <PlatformActionButton
          type="submit"
          tone="secondary"
          size="xs"
          shape="pill"
          className="image-canvas-editor__generation-submit"
          disabled={isGenerating}
          aria-label={dialogLabel}
        >
          {isGenerating ? (
            '生成中'
          ) : (
            <>
              <span>生成</span>
              <span className="image-canvas-editor__mud-point-inline">
                {cost}泥点
              </span>
            </>
          )}
        </PlatformActionButton>
      </div>
    </form>
  );
}

export function ImageCanvasGenerationComposerView({
  specToolWrapRef,
  publicationReferenceButtonRef,
  characterSpecButtonRef,
  characterReferenceButtonRef,
  generationReferenceButtonRef,
  iconSpecButtonRef,
  isSpecMenuOpen,
  isGenerationReferenceMenuOpen,
  isPublicationReferenceMenuOpen,
  isCharacterSpecMenuOpen,
  isCharacterReferenceMenuOpen,
  isIconSpecMenuOpen,
  isUiDesignSpecMenuOpen,
  isPickingGenerationReferenceFromCanvas,
  isPickingQuickEditReferenceFromCanvas,
  isPickingPublicationReferenceFromCanvas,
  isPickingCharacterSpecFromCanvas,
  isPickingCharacterReferenceFromCanvas,
  isPickingIconSpecFromCanvas,
  isPickingUiDesignSpecFromCanvas,
  generateDialog,
  generationComposerStyle,
  iconComposerStyle,
  quickEditPanel,
  quickEditSourceLayer,
  quickEditPanelStyle,
  cropExpandPanel,
  cropExpandSourceLayer,
  cropExpandPanelStyle,
  characterAnimationPanel,
  characterAnimationSourceLayer,
  characterAnimationPanelStyle,
  characterAnimationPrice,
  setGenerateDialog,
  setQuickEditPanel,
  setCropExpandPanel,
  setCharacterAnimationPanel,
  setIsGenerationReferenceMenuOpen,
  setIsPublicationReferenceMenuOpen,
  setIsCharacterSpecMenuOpen,
  setIsCharacterReferenceMenuOpen,
  setIsIconSpecMenuOpen,
  setIsUiDesignSpecMenuOpen,
  setIsPickingGenerationReferenceFromCanvas,
  setIsPickingQuickEditReferenceFromCanvas,
  setIsPickingPublicationReferenceFromCanvas,
  setIsPickingCharacterSpecFromCanvas,
  setIsPickingCharacterReferenceFromCanvas,
  setIsPickingIconSpecFromCanvas,
  setIsPickingUiDesignSpecFromCanvas,
  onOpenSpecDialog,
  onRequestUpload,
  onSubmitImageGeneration,
  onSubmitIconSpritesheetGeneration,
  onSubmitQuickEdit,
  onSubmitCropExpand,
  onSubmitCharacterAnimation,
  onUpdateSpecFormValue,
  onUpdateIconDescriptionText,
  onUpdateCharacterAnimationDuration,
  onRememberImageModel,
  onSpecMenuPointerEnter,
  onSpecMenuPointerLeave,
}: ImageCanvasGenerationComposerViewProps) {
  return (
    <>
      {isSpecMenuOpen
        ? renderEditorPortal(
            <PlatformFloatingMenu
              className="image-canvas-editor__spec-menu image-canvas-editor__portal-menu"
              label="生成规范类型"
              placement="top-start"
              style={buildPortalMenuStyle(specToolWrapRef.current, 'above')}
              onPointerEnter={onSpecMenuPointerEnter}
              onPointerLeave={onSpecMenuPointerLeave}
              onFocus={onSpecMenuPointerEnter}
              onBlur={onSpecMenuPointerLeave}
            >
              {(['character', 'ui', 'custom'] as const).map((specType) => (
                <PlatformFloatingMenuItem
                  key={specType}
                  className="image-canvas-editor__spec-menu-item"
                  onClick={() => onOpenSpecDialog(specType)}
                >
                  {SPEC_TYPE_LABEL[specType]}
                </PlatformFloatingMenuItem>
              ))}
            </PlatformFloatingMenu>,
          )
        : null}

      {(generateDialog?.mode === 'generate' ||
        generateDialog?.mode === 'quick-edit') &&
      generateDialog.composerOpen !== false &&
      generationComposerStyle ? (
        <ImageCanvasBasicGenerationComposerView
          dialog={generateDialog}
          style={generationComposerStyle}
          setGenerateDialog={setGenerateDialog}
          generationReferenceButtonRef={generationReferenceButtonRef}
          isGenerationReferenceMenuOpen={isGenerationReferenceMenuOpen}
          setIsGenerationReferenceMenuOpen={setIsGenerationReferenceMenuOpen}
          setIsPickingGenerationReferenceFromCanvas={
            setIsPickingGenerationReferenceFromCanvas
          }
          renderEditorPortal={renderEditorPortal}
          buildPortalMenuStyle={buildPortalMenuStyle}
          onRequestUpload={onRequestUpload}
          onToggleReferenceMenu={() =>
            setIsGenerationReferenceMenuOpen((open) => !open)
          }
          onRememberImageModel={onRememberImageModel}
          onSubmit={onSubmitImageGeneration}
        />
      ) : null}

      {generateDialog?.mode === 'spec' &&
      generateDialog.composerOpen !== false &&
      generationComposerStyle ? (
        <ImageCanvasSpecGenerationPanelView
          dialog={generateDialog}
          style={generationComposerStyle}
          isGenerationReferenceMenuOpen={isGenerationReferenceMenuOpen}
          generationReferenceButtonRef={generationReferenceButtonRef}
          setIsGenerationReferenceMenuOpen={setIsGenerationReferenceMenuOpen}
          setIsPickingGenerationReferenceFromCanvas={
            setIsPickingGenerationReferenceFromCanvas
          }
          renderEditorPortal={renderEditorPortal}
          buildPortalMenuStyle={buildPortalMenuStyle}
          setGenerateDialog={setGenerateDialog}
          onOpenSpecDialog={onOpenSpecDialog}
          onUpdateSpecFormValue={onUpdateSpecFormValue}
          onRequestUpload={onRequestUpload}
          onSubmit={onSubmitImageGeneration}
        />
      ) : null}

      {generateDialog?.mode === 'publication' &&
      generateDialog.composerOpen !== false &&
      generationComposerStyle ? (
        <ImageCanvasPublicationMaterialsDemoPanelView
          dialog={generateDialog}
          workflow={getPublicationMaterialsWorkflow(
            generateDialog.publicationWorkflowId ?? 'publication-cover-image',
          )}
          style={generationComposerStyle}
          publicationReferenceButtonRef={publicationReferenceButtonRef}
          isPublicationReferenceMenuOpen={isPublicationReferenceMenuOpen}
          setGenerateDialog={setGenerateDialog}
          setIsPublicationReferenceMenuOpen={
            setIsPublicationReferenceMenuOpen
          }
          setIsPickingPublicationReferenceFromCanvas={
            setIsPickingPublicationReferenceFromCanvas
          }
          renderEditorPortal={renderEditorPortal}
          buildPortalMenuStyle={buildPortalMenuStyle}
          onRequestUpload={onRequestUpload}
          onRememberImageModel={onRememberImageModel}
          onSubmit={onSubmitImageGeneration}
        />
      ) : null}

      {generateDialog?.mode === 'ui-design' &&
      generateDialog.composerOpen !== false &&
      generationComposerStyle ? (
        <ImageCanvasSpecGenerationPanelView
          dialog={generateDialog}
          style={generationComposerStyle}
          isGenerationReferenceMenuOpen={isUiDesignSpecMenuOpen}
          generationReferenceButtonRef={generationReferenceButtonRef}
          setIsGenerationReferenceMenuOpen={setIsUiDesignSpecMenuOpen}
          setIsPickingGenerationReferenceFromCanvas={
            setIsPickingUiDesignSpecFromCanvas
          }
          renderEditorPortal={renderEditorPortal}
          buildPortalMenuStyle={buildPortalMenuStyle}
          setGenerateDialog={setGenerateDialog}
          onOpenSpecDialog={onOpenSpecDialog}
          onUpdateSpecFormValue={onUpdateSpecFormValue}
          onRequestUpload={onRequestUpload}
          onRememberImageModel={onRememberImageModel}
          onSubmit={onSubmitImageGeneration}
        />
      ) : null}

      {generateDialog?.mode === 'video' &&
      generateDialog.composerOpen !== false &&
      generationComposerStyle ? (
        <ImageCanvasVideoGenerationComposerView
          dialog={generateDialog}
          style={generationComposerStyle}
          generationReferenceButtonRef={generationReferenceButtonRef}
          isGenerationReferenceMenuOpen={isGenerationReferenceMenuOpen}
          setGenerateDialog={setGenerateDialog}
          setIsGenerationReferenceMenuOpen={setIsGenerationReferenceMenuOpen}
          setIsPickingGenerationReferenceFromCanvas={
            setIsPickingGenerationReferenceFromCanvas
          }
          renderEditorPortal={renderEditorPortal}
          buildPortalMenuStyle={buildPortalMenuStyle}
          onRequestUpload={onRequestUpload}
          onSubmit={onSubmitImageGeneration}
        />
      ) : null}

      {(generateDialog?.mode === 'audio-sound-effect' ||
        generateDialog?.mode === 'audio-background-music') &&
      generateDialog.composerOpen !== false &&
      generationComposerStyle ? (
        <ImageCanvasAudioGenerationComposerView
          dialog={generateDialog}
          style={generationComposerStyle}
          setGenerateDialog={setGenerateDialog}
          renderEditorPortal={renderEditorPortal}
          buildPortalMenuStyle={buildPortalMenuStyle}
          onSubmit={onSubmitImageGeneration}
        />
      ) : null}

      {generateDialog?.mode === 'character' && generationComposerStyle ? (
        <ImageCanvasCharacterGenerationComposerView
          dialog={generateDialog}
          style={generationComposerStyle}
          characterSpecButtonRef={characterSpecButtonRef}
          characterReferenceButtonRef={characterReferenceButtonRef}
          isCharacterSpecMenuOpen={isCharacterSpecMenuOpen}
          isCharacterReferenceMenuOpen={isCharacterReferenceMenuOpen}
          setGenerateDialog={setGenerateDialog}
          setIsCharacterSpecMenuOpen={setIsCharacterSpecMenuOpen}
          setIsCharacterReferenceMenuOpen={setIsCharacterReferenceMenuOpen}
          setIsPickingCharacterSpecFromCanvas={
            setIsPickingCharacterSpecFromCanvas
          }
          setIsPickingCharacterReferenceFromCanvas={
            setIsPickingCharacterReferenceFromCanvas
          }
          renderEditorPortal={renderEditorPortal}
          buildPortalMenuStyle={buildPortalMenuStyle}
          onOpenSpecDialog={onOpenSpecDialog}
          onRequestUpload={onRequestUpload}
          onRememberImageModel={onRememberImageModel}
          onSubmit={onSubmitImageGeneration}
        />
      ) : null}

      {generateDialog?.mode === 'icon' &&
      generateDialog.composerOpen !== false &&
      iconComposerStyle ? (
        <ImageCanvasIconSpritesheetComposerView
          dialog={generateDialog}
          style={iconComposerStyle}
          iconSpecButtonRef={iconSpecButtonRef}
          isIconSpecMenuOpen={isIconSpecMenuOpen}
          setGenerateDialog={setGenerateDialog}
          setIsIconSpecMenuOpen={setIsIconSpecMenuOpen}
          setIsPickingIconSpecFromCanvas={setIsPickingIconSpecFromCanvas}
          renderEditorPortal={renderEditorPortal}
          buildPortalMenuStyle={buildPortalMenuStyle}
          onOpenSpecDialog={onOpenSpecDialog}
          onRequestUpload={onRequestUpload}
          onUpdateIconDescriptionText={onUpdateIconDescriptionText}
          onRememberImageModel={onRememberImageModel}
          onSubmit={onSubmitIconSpritesheetGeneration}
        />
      ) : null}

      {isPickingCharacterSpecFromCanvas ? (
        <div className="image-canvas-editor__canvas-pick-hint">
          请选择画布中的图片作为角色规范，按 Esc 退出
        </div>
      ) : null}
      {isPickingCharacterReferenceFromCanvas ? (
        <div className="image-canvas-editor__canvas-pick-hint">
          请选择画布中的图片作为常规参考图，按 Esc 退出
        </div>
      ) : null}
      {isPickingGenerationReferenceFromCanvas ? (
        <div className="image-canvas-editor__canvas-pick-hint">
          请选择画布中的图片作为参考图，按 Esc 退出
        </div>
      ) : null}
      {isPickingQuickEditReferenceFromCanvas ? (
        <div className="image-canvas-editor__canvas-pick-hint">
          请选择画布中的图片作为参考图，按 Esc 退出
        </div>
      ) : null}
      {isPickingPublicationReferenceFromCanvas ? (
        <div className="image-canvas-editor__canvas-pick-hint">
          请选择画布中的图片作为宣发素材参考图，按 Esc 退出
        </div>
      ) : null}
      {isPickingIconSpecFromCanvas ? (
        <div className="image-canvas-editor__canvas-pick-hint">
          请选择画布中的图标规范，按 Esc 退出
        </div>
      ) : null}
      {isPickingUiDesignSpecFromCanvas ? (
        <div className="image-canvas-editor__canvas-pick-hint">
          请选择画布中的图标规范，按 Esc 退出
        </div>
      ) : null}

      {quickEditPanel && quickEditSourceLayer && quickEditPanelStyle ? (
        <ImageCanvasQuickEditPanelView
          panel={quickEditPanel}
          sourceLayer={quickEditSourceLayer}
          style={quickEditPanelStyle}
          referenceButtonRef={generationReferenceButtonRef}
          isReferenceMenuOpen={isGenerationReferenceMenuOpen}
          setIsReferenceMenuOpen={setIsGenerationReferenceMenuOpen}
          setIsPickingQuickEditReferenceFromCanvas={
            setIsPickingQuickEditReferenceFromCanvas
          }
          renderEditorPortal={renderEditorPortal}
          buildPortalMenuStyle={buildPortalMenuStyle}
          onRequestUpload={onRequestUpload}
          onRememberImageModel={onRememberImageModel}
          setQuickEditPanel={setQuickEditPanel}
          onSubmit={onSubmitQuickEdit}
        />
      ) : null}

      {cropExpandPanel &&
      cropExpandSourceLayer &&
      cropExpandPanelStyle ? (
        <ImageCanvasCropExpandPanelView
          panel={cropExpandPanel}
          style={cropExpandPanelStyle}
          setCropExpandPanel={setCropExpandPanel}
          onSubmit={onSubmitCropExpand}
        />
      ) : null}

      {characterAnimationPanel &&
      characterAnimationSourceLayer &&
      characterAnimationPanelStyle ? (
        <ImageCanvasCharacterAnimationPanelView
          panel={characterAnimationPanel}
          style={characterAnimationPanelStyle}
          price={characterAnimationPrice}
          sourceLayer={characterAnimationSourceLayer}
          setCharacterAnimationPanel={setCharacterAnimationPanel}
          onUpdateDuration={onUpdateCharacterAnimationDuration}
          onSubmit={onSubmitCharacterAnimation}
        />
      ) : null}

      <ImageCanvasEditGenerationModalView
        dialog={generateDialog}
        setGenerateDialog={setGenerateDialog}
        onSubmit={onSubmitImageGeneration}
      />
    </>
  );
}