import { ClipboardList, Cpu, ImagePlus } from 'lucide-react';
import {
  type CSSProperties,
  type Dispatch,
  type ReactNode,
  type RefObject,
  type SetStateAction,
} from 'react';

import { AutoGrowTextArea } from '../common/AutoGrowTextArea';
import { PlatformActionButton } from '../common/PlatformActionButton';
import { PlatformFieldLabel } from '../common/PlatformFieldLabel';
import {
  PlatformFloatingMenu,
  PlatformFloatingMenuItem,
} from '../common/PlatformFloatingMenu';
import { PlatformInlineOptionButton } from '../common/PlatformInlineOptionButton';
import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
import {
  PlatformSelectField,
  PlatformTextField,
} from '../common/PlatformTextField';
import type {
  GenerateDialogState,
  SpecFormValues,
  SpecGenerationType,
  UploadTarget,
} from './ImageCanvasEditorTypes';
import { ImageCanvasGenerationImageOptionsView } from './ImageCanvasGenerationImageOptionsView';
import {
  calculateEditorSpecGenerationPrice,
  calculateEditorUiDesignPrice,
  CHARACTER_SPEC_VIEW_OPTIONS,
  getEditorImageModelDisplayName,
  IMAGE_MODEL_GPT_IMAGE_2,
  resolveEditorImageSizeLabel,
  SPEC_GENERATION_ASPECT_RATIO,
  SPEC_GENERATION_IMAGE_SIZE,
  SPEC_GENERATION_MODEL,
} from './ImageCanvasGenerationModel';
import { ImageCanvasReferenceSlot } from './ImageCanvasReferenceSlot';
import { useImageCanvasFloatingOptionDismiss } from './useImageCanvasFloatingOptionDismiss';

type ImageCanvasSpecGenerationPanelViewProps = {
  dialog: GenerateDialogState;
  style: CSSProperties;
  isGenerationReferenceMenuOpen?: boolean;
  generationReferenceButtonRef?: RefObject<HTMLButtonElement | null>;
  setIsGenerationReferenceMenuOpen?: Dispatch<SetStateAction<boolean>>;
  setIsPickingGenerationReferenceFromCanvas?: Dispatch<SetStateAction<boolean>>;
  setGenerateDialog?: Dispatch<SetStateAction<GenerateDialogState | null>>;
  renderEditorPortal?: (node: ReactNode) => ReactNode;
  buildPortalMenuStyle?: (
    anchor: HTMLElement | null,
    placement: 'above' | 'below',
  ) => CSSProperties;
  onOpenSpecDialog?: (specType: SpecGenerationType) => void;
  onUpdateSpecFormValue: (key: keyof SpecFormValues, value: string) => void;
  onRequestUpload: (target: UploadTarget) => void;
  onRememberImageModel?: (model: string) => void;
  hasPendingImageReferenceUploads?: boolean;
  onSubmit: (dialog: GenerateDialogState) => void;
};

function shouldShowSpecInputPlaceholders(dialog: GenerateDialogState) {
  return dialog.specType === 'character' || dialog.specType === 'ui';
}

export function ImageCanvasSpecGenerationPanelView({
  dialog,
  style,
  isGenerationReferenceMenuOpen = false,
  generationReferenceButtonRef,
  setIsGenerationReferenceMenuOpen,
  setIsPickingGenerationReferenceFromCanvas,
  setGenerateDialog,
  renderEditorPortal = (node) => node,
  buildPortalMenuStyle = () => ({}),
  onOpenSpecDialog,
  onUpdateSpecFormValue,
  onRequestUpload,
  onRememberImageModel = () => {},
  hasPendingImageReferenceUploads = false,
  onSubmit,
}: ImageCanvasSpecGenerationPanelViewProps) {
  const isUiDesignDialog = dialog.mode === 'ui-design';
  const showSpecInputPlaceholders = shouldShowSpecInputPlaceholders(dialog);
  const specSizeLabel = resolveEditorImageSizeLabel({
    aspectRatio: SPEC_GENERATION_ASPECT_RATIO,
    imageSize: SPEC_GENERATION_IMAGE_SIZE,
  });
  const specModelLabel = getEditorImageModelDisplayName(SPEC_GENERATION_MODEL);
  const referenceLabel = isUiDesignDialog ? 'UI设计图标规范' : '参考图';
  const referenceSlotLabel = isUiDesignDialog
    ? '图标规范'
    : dialog.specType === 'character'
      ? '角色规范'
      : '参考图';
  const uploadTarget: UploadTarget = isUiDesignDialog
    ? 'ui-design-icon-spec'
    : 'spec-reference';
  const reference = isUiDesignDialog
    ? dialog.uiDesignSpecReference
    : dialog.specReference;
  const isGenerating = dialog.status === 'generating';
  const specGenerationCost = calculateEditorSpecGenerationPrice(
    SPEC_GENERATION_MODEL,
  );
  useImageCanvasFloatingOptionDismiss({
    isOpen: isGenerationReferenceMenuOpen,
    boundaryRefs: [generationReferenceButtonRef],
    onDismiss: () => setIsGenerationReferenceMenuOpen?.(false),
  });

  const openReferenceMenu = () => {
    if (setIsGenerationReferenceMenuOpen) {
      setIsGenerationReferenceMenuOpen((open) => !open);
      return;
    }
    onRequestUpload(uploadTarget);
  };

  return (
    <>
      <form
        className="image-canvas-editor__generation-composer image-canvas-editor__generation-composer--image image-canvas-editor__spec-composer"
        style={style}
        role="dialog"
        aria-label={isUiDesignDialog ? '生成UI设计图' : '生成规范'}
        onPointerDown={(event) => event.stopPropagation()}
        onSubmit={(event) => {
          event.preventDefault();
          if (dialog.status !== 'generating') {
            onSubmit(dialog);
          }
        }}
      >
        <div className="image-canvas-editor__reference-strip">
          {isUiDesignDialog || dialog.specType ? (
            <ImageCanvasReferenceSlot
              buttonRef={generationReferenceButtonRef}
              tone={isUiDesignDialog ? 'ui' : 'spec'}
              icon={
                isUiDesignDialog ? (
                  <ImagePlus className="h-4 w-4" aria-hidden="true" />
                ) : (
                  <ClipboardList className="h-4 w-4" aria-hidden="true" />
                )
              }
              imageSrc={reference?.src}
              objectKey={reference?.objectKey}
              label={referenceSlotLabel}
              ariaLabel={referenceLabel}
              title={reference?.label ?? referenceLabel}
              disabled={isGenerating}
              isAdd={!reference}
              onClick={openReferenceMenu}
              onRemove={
                reference && setGenerateDialog
                  ? () =>
                      setGenerateDialog((currentDialog) => {
                        if (isUiDesignDialog) {
                          return currentDialog?.mode === 'ui-design'
                            ? {
                                ...currentDialog,
                                status:
                                  currentDialog.status === 'failed'
                                    ? 'idle'
                                    : currentDialog.status,
                                errorMessage:
                                  currentDialog.status === 'failed'
                                    ? undefined
                                    : currentDialog.errorMessage,
                                uiDesignSpecReference: null,
                              }
                            : currentDialog;
                        }
                        return currentDialog?.mode === 'spec'
                          ? {
                              ...currentDialog,
                              status:
                                currentDialog.status === 'failed'
                                  ? 'idle'
                                  : currentDialog.status,
                              errorMessage:
                                currentDialog.status === 'failed'
                                  ? undefined
                                  : currentDialog.errorMessage,
                              specReference: null,
                            }
                          : currentDialog;
                      })
                  : undefined
              }
              removeLabel={`删除${referenceLabel}`}
            />
          ) : null}
          {isUiDesignDialog
            ? (dialog.generationReferences ?? []).map((item, index) => (
                <ImageCanvasReferenceSlot
                  key={item.id}
                  tone="default"
                  icon={<ImagePlus className="h-4 w-4" aria-hidden="true" />}
                  imageSrc={item.src}
                  objectKey={item.objectKey}
                  label={`参考图${index + 1}`}
                  ariaLabel={item.label || `参考图${index + 1}`}
                  title={item.label}
                  disabled={isGenerating}
                  onRemove={
                    setGenerateDialog
                      ? () =>
                          setGenerateDialog((currentDialog) =>
                            currentDialog?.mode === 'ui-design'
                              ? {
                                  ...currentDialog,
                                  status:
                                    currentDialog.status === 'failed'
                                      ? 'idle'
                                      : currentDialog.status,
                                  errorMessage:
                                    currentDialog.status === 'failed'
                                      ? undefined
                                      : currentDialog.errorMessage,
                                  generationReferences: (
                                    currentDialog.generationReferences ?? []
                                  ).filter(
                                    (referenceItem) =>
                                      referenceItem.id !== item.id,
                                  ),
                                }
                              : currentDialog,
                          )
                      : undefined
                  }
                  removeLabel={`删除${item.label || `参考图${index + 1}`}`}
                />
              ))
            : null}
          {isUiDesignDialog ? (
            <ImageCanvasReferenceSlot
              tone="default"
              icon={<ImagePlus className="h-4 w-4" aria-hidden="true" />}
              label="参考图"
              ariaLabel="上传UI设计参考图"
              disabled={isGenerating}
              isAdd
              onClick={() => onRequestUpload('generation-reference')}
            />
          ) : null}
        </div>
        <div className="image-canvas-editor__spec-fields">
          {isUiDesignDialog ? (
            <label className="image-canvas-editor__field-block image-canvas-editor__field-block--single">
              <AutoGrowTextArea
                aria-label="UI设计要求"
                value={dialog.prompt}
                disabled={isGenerating}
                placeholder="你希望这个 UI 长什么样？"
                className="image-canvas-editor__generation-prompt"
                onChange={(event) => {
                  const nextPrompt = event.target.value;
                  if (setGenerateDialog) {
                    setGenerateDialog((currentDialog) =>
                      currentDialog?.mode === 'ui-design'
                        ? {
                            ...currentDialog,
                            prompt: nextPrompt,
                            status:
                              currentDialog.status === 'failed'
                                ? 'idle'
                                : currentDialog.status,
                            errorMessage:
                              currentDialog.status === 'failed'
                                ? undefined
                                : currentDialog.errorMessage,
                          }
                        : currentDialog,
                    );
                    return;
                  }
                  onUpdateSpecFormValue('customPrompt', nextPrompt);
                }}
              />
            </label>
          ) : dialog.specType === 'custom' ? (
            <label className="image-canvas-editor__field-block">
              <PlatformFieldLabel
                variant="form"
                className="image-canvas-editor__field-title"
              >
                自定义规范提示词
              </PlatformFieldLabel>
              <AutoGrowTextArea
                aria-label="自定义规范提示词"
                value={dialog.specValues?.customPrompt ?? ''}
                placeholder="写下你想要的任何内容，陶泥儿帮你形成新的约束"
                disabled={isGenerating}
                className="image-canvas-editor__generation-prompt image-canvas-editor__spec-textarea"
                onChange={(event) =>
                  onUpdateSpecFormValue('customPrompt', event.target.value)
                }
              />
            </label>
          ) : (
            <>
              <label className="image-canvas-editor__field-block">
                <PlatformFieldLabel
                  variant="form"
                  className="image-canvas-editor__field-title"
                >
                  玩法设定
                </PlatformFieldLabel>
                <PlatformTextField
                  aria-label="玩法设定"
                  value={dialog.specValues?.playSetting ?? ''}
                  placeholder={
                    showSpecInputPlaceholders
                      ? '这是什么类型的游戏？'
                      : undefined
                  }
                  disabled={isGenerating}
                  size="sm"
                  density="compact"
                  className="image-canvas-editor__spec-input"
                  onChange={(event) =>
                    onUpdateSpecFormValue('playSetting', event.target.value)
                  }
                />
              </label>
              <label className="image-canvas-editor__field-block">
                <PlatformFieldLabel
                  variant="form"
                  className="image-canvas-editor__field-title"
                >
                  美术风格
                </PlatformFieldLabel>
                <PlatformTextField
                  aria-label="美术风格"
                  value={dialog.specValues?.artStyle ?? ''}
                  placeholder={
                    showSpecInputPlaceholders
                      ? '游戏的画风是怎样的？'
                      : undefined
                  }
                  disabled={isGenerating}
                  size="sm"
                  density="compact"
                  className="image-canvas-editor__spec-input"
                  onChange={(event) =>
                    onUpdateSpecFormValue('artStyle', event.target.value)
                  }
                />
              </label>
              {dialog.specType === 'character' ? (
                <>
                  <label className="image-canvas-editor__field-block">
                    <PlatformFieldLabel
                      variant="form"
                      className="image-canvas-editor__field-title"
                    >
                      头身比
                    </PlatformFieldLabel>
                    <PlatformSelectField
                      aria-label="头身比"
                      value={dialog.specValues?.bodyRatio ?? '3'}
                      disabled={isGenerating}
                      size="sm"
                      density="compact"
                      className="image-canvas-editor__spec-input"
                      onChange={(event) =>
                        onUpdateSpecFormValue('bodyRatio', event.target.value)
                      }
                    >
                      {['2', '3', '4', '5', '6'].map((value) => (
                        <option key={value} value={value}>
                          {value}
                        </option>
                      ))}
                    </PlatformSelectField>
                  </label>
                  <label className="image-canvas-editor__field-block">
                    <PlatformFieldLabel
                      variant="form"
                      className="image-canvas-editor__field-title"
                    >
                      角色视角
                    </PlatformFieldLabel>
                    <PlatformSelectField
                      aria-label="角色视角"
                      value={dialog.specValues?.characterView ?? ''}
                      disabled={isGenerating}
                      size="sm"
                      density="compact"
                      className="image-canvas-editor__spec-input"
                      onChange={(event) =>
                        onUpdateSpecFormValue(
                          'characterView',
                          event.target.value,
                        )
                      }
                    >
                      {CHARACTER_SPEC_VIEW_OPTIONS.map((value) => (
                        <option key={value} value={value}>
                          {value}
                        </option>
                      ))}
                    </PlatformSelectField>
                  </label>
                </>
              ) : null}
            </>
          )}
        </div>
        {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 image-canvas-editor__spec-footer">
          {isUiDesignDialog ? (
            <ImageCanvasGenerationImageOptionsView
              dialog={dialog}
              setGenerateDialog={setGenerateDialog ?? (() => undefined)}
              includeDimensions
              onRememberImageModel={onRememberImageModel}
              hasPendingImageReferenceUploads={hasPendingImageReferenceUploads}
              lockedModel={IMAGE_MODEL_GPT_IMAGE_2}
              cost={calculateEditorUiDesignPrice(
                IMAGE_MODEL_GPT_IMAGE_2,
                dialog.imageSize,
              )}
              submitLabel="生成"
              submitAriaLabel="生成UI设计图"
              optionLabelPrefix="生成图片"
              renderEditorPortal={renderEditorPortal}
              buildPortalMenuStyle={buildPortalMenuStyle}
            />
          ) : (
            <>
              <div className="image-canvas-editor__option-popover-anchor image-canvas-editor__option-popover-anchor--dimensions image-canvas-editor__readonly-generation-option">
                <PlatformInlineOptionButton
                  className="image-canvas-editor__option-cluster image-canvas-editor__option-cluster--dimensions"
                  aria-label={`生成图片尺寸 ${specSizeLabel}`}
                  disabled
                >
                  {specSizeLabel}
                </PlatformInlineOptionButton>
              </div>
              <div className="image-canvas-editor__option-popover-anchor image-canvas-editor__option-popover-anchor--model image-canvas-editor__readonly-generation-option">
                <PlatformInlineOptionButton
                  className="image-canvas-editor__option-cluster image-canvas-editor__option-cluster--model"
                  aria-label={`生成图片模型 ${specModelLabel}`}
                  disabled
                >
                  <span className="image-canvas-editor__model-trigger-label">
                    <span
                      className="image-canvas-editor__model-icon"
                      aria-hidden="true"
                    >
                      <Cpu />
                    </span>
                    <span>{specModelLabel}</span>
                  </span>
                </PlatformInlineOptionButton>
              </div>
              <PlatformActionButton
                type="submit"
                tone="secondary"
                size="xs"
                shape="pill"
                className="image-canvas-editor__generation-submit image-canvas-editor__spec-submit"
                disabled={isGenerating || hasPendingImageReferenceUploads}
                aria-label="提交生成规范"
              >
                {isGenerating ? (
                  '生成中'
                ) : (
                  <>
                    <span>生成</span>
                    <span className="image-canvas-editor__mud-point-inline">
                      {specGenerationCost}泥点
                    </span>
                  </>
                )}
              </PlatformActionButton>
            </>
          )}
        </div>
      </form>
      {isGenerationReferenceMenuOpen && generationReferenceButtonRef
        ? 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>
              {isUiDesignDialog ? (
                <PlatformFloatingMenuItem
                  onClick={() => {
                    setIsGenerationReferenceMenuOpen?.(false);
                    onOpenSpecDialog?.('icon');
                  }}
                >
                  新建图标规范
                </PlatformFloatingMenuItem>
              ) : null}
              <PlatformFloatingMenuItem
                onClick={() => {
                  setIsGenerationReferenceMenuOpen?.(false);
                  setIsPickingGenerationReferenceFromCanvas?.(false);
                  onRequestUpload(uploadTarget);
                }}
              >
                上传图片
              </PlatformFloatingMenuItem>
            </PlatformFloatingMenu>,
          )
        : null}
    </>
  );
}