import {
  Camera,
  History,
  ImagePlus,
  Loader2,
  Sparkles,
  Trash2,
} from 'lucide-react';
import { type ReactNode, useEffect, useRef, useState } from 'react';

import {
  canUseNativeHostCapability,
  captureHostImageFile,
  type HostFileImportImageResult,
  importHostImageFile,
  subscribeHostImageDrop,
} from '../../services/host-bridge/hostBridge';
import { puzzleReferenceImageDataUrlToFile } from '../../services/puzzleReferenceImage';
import { ResolvedAssetImage } from '../ResolvedAssetImage';
import { PlatformActionButton } from './PlatformActionButton';
import { PlatformFieldLabel } from './PlatformFieldLabel';
import { PlatformIconBadge } from './PlatformIconBadge';
import { PlatformIconButton } from './PlatformIconButton';
import { PlatformImagePreviewModal } from './PlatformImagePreviewModal';
import { PlatformPillBadge } from './PlatformPillBadge';
import { PlatformPillSwitch } from './PlatformPillSwitch';
import { PlatformStatusMessage } from './PlatformStatusMessage';
import { PlatformTextField } from './PlatformTextField';
import { PlatformUploadPreviewCard } from './PlatformUploadPreviewCard';
import { UnifiedConfirmDialog } from './UnifiedConfirmDialog';

export type CreativeImageInputReferenceImage = {
  id: string;
  label: string;
  imageSrc: string;
  assetObjectId?: string | null;
};

export type CreativeImageInputPanelLabels = {
  imageField: string;
  uploadImage: string;
  replaceImage: string;
  emptyImageHint: string;
  removeImage: string;
  removeImageConfirmTitle: string;
  removeImageConfirmBody: string;
  promptReferenceUpload: string;
  promptReferencePreviewAlt: string;
  closePromptReferencePreview: string;
  previewMainImage?: string;
  closeMainImagePreview?: string;
  history?: string;
};

export type CreativeImageInputPanelProps = {
  className?: string;
  fillHeight?: boolean;
  disabled?: boolean;
  isSubmitting?: boolean;
  mainImageMode?: 'edit' | 'preview';
  mainImageClickMode?: 'upload' | 'preview';
  canUploadMainImage?: boolean;
  canUseImageHistory?: boolean;
  canRemoveMainImage?: boolean;
  canToggleAiRedraw?: boolean;
  canUploadPromptReferences?: boolean;
  uploadedImageSrc: string;
  uploadedImageAlt: string;
  uploadedImageRefreshKey?: string | number | null;
  mainImagePreviewZIndexClassName?: string;
  mainImageMeta?: ReactNode;
  mainImageInputId: string;
  mainImageAccept?: string;
  promptTextareaId: string;
  prompt: string;
  promptLabel: string;
  promptAriaLabel?: string;
  promptRows?: number;
  aiRedraw: boolean;
  promptReferenceImages: CreativeImageInputReferenceImage[];
  promptReferenceLimit?: number;
  imageLimitHint?: string | null;
  imageModelPicker?: ReactNode;
  error?: string | null;
  inputError?: string | null;
  showSubmitButton?: boolean;
  submitLabel: string;
  submitCostLabel?: string | null;
  submitDisabled: boolean;
  labels: CreativeImageInputPanelLabels;
  onMainImageFileSelect: (file: File) => void;
  onMainImageRemove: () => void;
  onAiRedrawChange: (enabled: boolean) => void;
  onPromptChange: (value: string) => void;
  onPromptReferenceFilesSelect?: (files: File[]) => void;
  onPromptReferenceRemove?: (referenceId: string) => void;
  onHistoryClick?: () => void;
  onSubmit: () => void;
};

const DEFAULT_IMAGE_ACCEPT = 'image/png,image/jpeg,image/webp';
const DEFAULT_PROMPT_REFERENCE_LIMIT = 5;

function hostImageImportResultToFile(result: HostFileImportImageResult) {
  return puzzleReferenceImageDataUrlToFile(
    `data:${result.mimeType};base64,${result.base64Data}`,
    result.fileName,
  );
}

export function CreativeImageInputPanel({
  className = '',
  fillHeight = true,
  disabled = false,
  isSubmitting = false,
  mainImageMode = 'edit',
  mainImageClickMode = 'preview',
  canUploadMainImage = true,
  canUseImageHistory = true,
  canRemoveMainImage = true,
  canToggleAiRedraw = true,
  canUploadPromptReferences,
  uploadedImageSrc,
  uploadedImageAlt,
  uploadedImageRefreshKey = null,
  mainImagePreviewZIndexClassName = 'z-[82]',
  mainImageMeta = null,
  mainImageInputId,
  mainImageAccept = DEFAULT_IMAGE_ACCEPT,
  promptTextareaId,
  prompt,
  promptLabel,
  promptAriaLabel,
  promptRows = 2,
  aiRedraw,
  promptReferenceImages,
  promptReferenceLimit = DEFAULT_PROMPT_REFERENCE_LIMIT,
  imageLimitHint = null,
  imageModelPicker = null,
  error = null,
  inputError = null,
  showSubmitButton = true,
  submitLabel,
  submitCostLabel = null,
  submitDisabled,
  labels,
  onMainImageFileSelect,
  onMainImageRemove,
  onAiRedrawChange,
  onPromptChange,
  onPromptReferenceFilesSelect,
  onPromptReferenceRemove,
  onHistoryClick,
  onSubmit,
}: CreativeImageInputPanelProps) {
  const mainImageCardRef = useRef<HTMLDivElement | null>(null);
  const mainImageInputRef = useRef<HTMLInputElement | null>(null);
  const promptReferenceInputRef = useRef<HTMLInputElement | null>(null);
  const [previewReferenceImage, setPreviewReferenceImage] =
    useState<CreativeImageInputReferenceImage | null>(null);
  const [isMainImagePreviewOpen, setIsMainImagePreviewOpen] = useState(false);
  const [isRemoveImageConfirmOpen, setIsRemoveImageConfirmOpen] =
    useState(false);
  const showPrompt =
    mainImageMode === 'preview' || !uploadedImageSrc || aiRedraw;
  const shouldShowPromptReferences =
    canUploadPromptReferences ?? !uploadedImageSrc;
  const promptReferenceUploadDisabled =
    disabled || promptReferenceImages.length >= promptReferenceLimit;
  const canEditMainImage = mainImageMode === 'edit';
  const isMainImageUploadEnabled = canEditMainImage && canUploadMainImage;
  const shouldShowHistoryButton =
    canEditMainImage && canUseImageHistory && Boolean(onHistoryClick);
  const shouldPreviewMainImage =
    mainImageClickMode === 'preview' && Boolean(uploadedImageSrc);
  const shouldShowMainImageUploadButton =
    isMainImageUploadEnabled && shouldPreviewMainImage;
  const canImportHostImage = canUseNativeHostCapability('file.importImage');
  const canCaptureHostImage = canUseNativeHostCapability('file.captureImage');
  const canReceiveHostImageDrop =
    canUseNativeHostCapability('file.imageDropped');
  const promptReferenceInputId = `${mainImageInputId}-prompt-reference`;

  useEffect(() => {
    if (uploadedImageSrc) {
      setPreviewReferenceImage(null);
    } else {
      setIsMainImagePreviewOpen(false);
    }
  }, [uploadedImageSrc]);

  useEffect(() => {
    if (
      previewReferenceImage &&
      !promptReferenceImages.some(
        (reference) => reference.id === previewReferenceImage.id,
      )
    ) {
      setPreviewReferenceImage(null);
    }
  }, [previewReferenceImage, promptReferenceImages]);

  useEffect(() => {
    if (!canReceiveHostImageDrop || disabled || !isMainImageUploadEnabled) {
      return undefined;
    }

    return subscribeHostImageDrop((payload) => {
      const card = mainImageCardRef.current;
      const position = payload.position;
      if (!card || !position) {
        return;
      }

      const bounds = card.getBoundingClientRect();
      const isInsideCard =
        position.x >= bounds.left &&
        position.x <= bounds.right &&
        position.y >= bounds.top &&
        position.y <= bounds.bottom;
      if (!isInsideCard) {
        return;
      }

      const topElement =
        typeof document.elementFromPoint === 'function'
          ? document.elementFromPoint(position.x, position.y)
          : null;
      // 中文注释：桌面拖入是窗口级事件；只让坐标命中的最上层主图槽位消费，避免多个创作面板同时接收同一张图。
      if (topElement && !card.contains(topElement)) {
        return;
      }

      try {
        onMainImageFileSelect(hostImageImportResultToFile(payload));
      } catch {
        // 中文注释：宿主已校验图片类型和体积；这里仅兜住浏览器 File 构造异常，保持当前表单状态。
      }
    });
  }, [
    canReceiveHostImageDrop,
    disabled,
    isMainImageUploadEnabled,
    onMainImageFileSelect,
  ]);

  const bodyClassName = fillHeight
    ? 'creative-image-input-panel__body puzzle-creation-form-body flex min-h-0 flex-1 flex-col overflow-hidden pr-0 lg:overflow-y-auto lg:pr-1'
    : 'creative-image-input-panel__body puzzle-creation-form-body flex flex-none flex-col overflow-visible pr-0 lg:pr-1';
  const sectionClassName = fillHeight
    ? 'creative-image-input-panel__section puzzle-creation-form-section flex min-h-0 flex-1 flex-col overflow-hidden lg:overflow-visible'
    : 'creative-image-input-panel__section puzzle-creation-form-section flex flex-none flex-col overflow-visible';
  const gridSizeClassName = fillHeight ? 'min-h-0 flex-1' : 'flex-none';
  const imageFieldClassName = fillHeight
    ? 'creative-image-input-panel__image-field puzzle-image-field flex min-h-0 min-w-0 flex-1 flex-col'
    : 'creative-image-input-panel__image-field puzzle-image-field flex min-w-0 flex-none flex-col';
  const imageFrameClassName = fillHeight
    ? 'creative-image-input-panel__image-frame puzzle-image-card-frame flex min-h-0 flex-1 items-center justify-center'
    : 'creative-image-input-panel__image-frame puzzle-image-card-frame flex flex-none items-center justify-center';
  const imageCardClassName = fillHeight
    ? 'creative-image-input-panel__image-card puzzle-image-upload-card relative aspect-square h-full min-h-[14rem] max-h-full max-w-full overflow-hidden rounded-[1.25rem] border border-[var(--platform-subpanel-border)] bg-white/90 shadow-[0_12px_28px_rgba(15,23,42,0.08)] transition sm:min-h-[18rem] lg:h-auto lg:w-full'
    : 'creative-image-input-panel__image-card puzzle-image-upload-card relative aspect-square w-full min-h-[14rem] max-w-full overflow-hidden rounded-[1.25rem] border border-[var(--platform-subpanel-border)] bg-white/90 shadow-[0_12px_28px_rgba(15,23,42,0.08)] transition sm:min-h-[18rem]';

  const importHostImageAsFile = async () => {
    const result = await importHostImageFile();
    if (!result) {
      return null;
    }
    return hostImageImportResultToFile(result);
  };

  const captureHostImageAsFile = async () => {
    const result = await captureHostImageFile();
    if (!result) {
      return null;
    }
    return hostImageImportResultToFile(result);
  };

  const handleMainImageUploadClick = () => {
    if (disabled || !isMainImageUploadEnabled) {
      return;
    }
    if (!canImportHostImage) {
      mainImageInputRef.current?.click();
      return;
    }

    void (async () => {
      try {
        const file = await importHostImageAsFile();
        if (file) {
          onMainImageFileSelect(file);
        }
      } catch {
        // 中文注释：宿主导入失败时不再弹浏览器文件框，避免权限失败后重复打扰用户。
      }
    })();
  };

  const handleMainImageCaptureClick = () => {
    if (disabled || !isMainImageUploadEnabled || !canCaptureHostImage) {
      return;
    }

    void (async () => {
      try {
        const file = await captureHostImageAsFile();
        if (file) {
          onMainImageFileSelect(file);
        }
      } catch {
        // 中文注释：相机拍摄失败或用户取消时保持当前表单状态，不回落到相册或文件框。
      }
    })();
  };

  const handlePromptReferenceUploadClick = () => {
    if (
      promptReferenceUploadDisabled ||
      !shouldShowPromptReferences ||
      !onPromptReferenceFilesSelect
    ) {
      return;
    }
    if (!canImportHostImage) {
      promptReferenceInputRef.current?.click();
      return;
    }

    void (async () => {
      try {
        const file = await importHostImageAsFile();
        if (file) {
          onPromptReferenceFilesSelect([file]);
        }
      } catch {
        // 中文注释：宿主导入失败时保持当前表单状态，由外层错误通道继续承接后续重试。
      }
    })();
  };

  const handlePromptReferenceCaptureClick = () => {
    if (
      promptReferenceUploadDisabled ||
      !shouldShowPromptReferences ||
      !onPromptReferenceFilesSelect ||
      !canCaptureHostImage
    ) {
      return;
    }

    void (async () => {
      try {
        const file = await captureHostImageAsFile();
        if (file) {
          onPromptReferenceFilesSelect([file]);
        }
      } catch {
        // 中文注释：相机拍摄失败不打断当前创作输入，用户可继续选择上传或重试拍摄。
      }
    })();
  };

  return (
    <div
      className={`creative-image-input-panel flex min-h-0 flex-col ${
        fillHeight ? 'flex-1' : 'flex-none'
      } ${className}`}
    >
      <div className={bodyClassName}>
        <section className={sectionClassName}>
          <div
            className={`creative-image-input-panel__grid puzzle-creation-form-grid ${gridSizeClassName} gap-2.5 sm:gap-4 ${
              showPrompt
                ? 'flex flex-col lg:grid lg:grid-cols-[minmax(15rem,0.9fr)_minmax(0,1.15fr)]'
                : 'flex flex-col lg:grid lg:grid-cols-1'
            }`}
          >
            <div
              className={`${imageFieldClassName} ${
                disabled ? 'opacity-55' : ''
              }`}
            >
              <PlatformFieldLabel variant="form" className="shrink-0">
                {labels.imageField}
              </PlatformFieldLabel>
              <div className={imageFrameClassName}>
                <div ref={mainImageCardRef} className={imageCardClassName}>
                  {isMainImageUploadEnabled ? (
                    <input
                      ref={mainImageInputRef}
                      id={mainImageInputId}
                      type="file"
                      accept={mainImageAccept}
                      disabled={disabled}
                      aria-label={labels.uploadImage}
                      onChange={(event) => {
                        const file = event.currentTarget.files?.[0] ?? null;
                        event.currentTarget.value = '';
                        if (file) {
                          onMainImageFileSelect(file);
                        }
                      }}
                      className="sr-only"
                    />
                  ) : null}
                  {shouldPreviewMainImage ? (
                    <button
                      type="button"
                      className="absolute inset-0 z-[2] cursor-zoom-in"
                      aria-label={labels.previewMainImage ?? uploadedImageAlt}
                      title={labels.previewMainImage ?? uploadedImageAlt}
                      onClick={() => setIsMainImagePreviewOpen(true)}
                    />
                  ) : isMainImageUploadEnabled ? (
                    <button
                      type="button"
                      className={`absolute inset-0 z-0 border-0 bg-transparent p-0 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`}
                      disabled={disabled}
                      aria-label={
                        uploadedImageSrc
                          ? labels.replaceImage
                          : labels.uploadImage
                      }
                      title={
                        uploadedImageSrc
                          ? labels.replaceImage
                          : labels.uploadImage
                      }
                      onClick={handleMainImageUploadClick}
                    >
                      <span className="sr-only">
                        {uploadedImageSrc
                          ? labels.replaceImage
                          : labels.uploadImage}
                      </span>
                    </button>
                  ) : null}
                  {uploadedImageSrc ? (
                    <ResolvedAssetImage
                      src={uploadedImageSrc}
                      refreshKey={uploadedImageRefreshKey}
                      alt={uploadedImageAlt}
                      className="pointer-events-none absolute inset-0 h-full w-full object-cover"
                    />
                  ) : (
                    <span className="pointer-events-none flex h-full items-center justify-center bg-[radial-gradient(circle_at_50%_28%,rgba(255,255,255,0.9),transparent_38%),linear-gradient(135deg,rgba(255,255,255,0.96),rgba(255,241,229,0.86))]">
                      <PlatformIconBadge
                        icon={<ImagePlus className="h-6 w-6 sm:h-8 sm:w-8" />}
                        size="xl"
                        tone="soft"
                        className="border border-[var(--platform-subpanel-border)] bg-white/92 sm:h-20 sm:w-20"
                      />
                    </span>
                  )}
                  <div className="pointer-events-none absolute inset-0 z-[1] bg-[linear-gradient(180deg,rgba(255,255,255,0.12)_0%,rgba(255,255,255,0.04)_42%,rgba(255,255,255,0.18)_100%)]" />
                  {shouldShowMainImageUploadButton ? (
                    <PlatformIconButton
                      variant="surfaceFloating"
                      label={labels.replaceImage}
                      title={labels.replaceImage}
                      disabled={disabled}
                      onClick={handleMainImageUploadClick}
                      icon={<ImagePlus className="h-4 w-4" />}
                      className="absolute bottom-3 right-3 z-10 h-10 w-10"
                    />
                  ) : null}
                  {shouldShowHistoryButton ? (
                    <PlatformIconButton
                      variant="surfaceFloating"
                      label={labels.history ?? '选择历史图片'}
                      title={labels.history ?? '选择历史图片'}
                      disabled={disabled}
                      onClick={onHistoryClick}
                      icon={<History className="h-3.5 w-3.5" />}
                      className="absolute right-3 top-3 z-10 gap-1.5 px-3 py-2 text-[11px] font-black"
                    >
                      <span>历史</span>
                    </PlatformIconButton>
                  ) : null}
                  {isMainImageUploadEnabled && canCaptureHostImage ? (
                    <PlatformIconButton
                      variant="surfaceFloating"
                      label="拍摄图片"
                      title="拍摄图片"
                      disabled={disabled}
                      onClick={handleMainImageCaptureClick}
                      icon={<Camera className="h-3.5 w-3.5" />}
                      className={`absolute top-3 z-10 h-10 w-10 ${
                        shouldShowHistoryButton ? 'right-[4.75rem]' : 'right-3'
                      }`}
                    />
                  ) : null}
                  {canEditMainImage && uploadedImageSrc && canToggleAiRedraw ? (
                    <PlatformPillSwitch
                      label="AI重绘"
                      aria-label="AI重绘"
                      checked={aiRedraw}
                      disabled={disabled}
                      onChange={(event) =>
                        onAiRedrawChange(event.target.checked)
                      }
                      className="absolute bottom-3 left-3 z-10"
                    />
                  ) : null}
                  {canEditMainImage &&
                  uploadedImageSrc &&
                  canRemoveMainImage ? (
                    <PlatformIconButton
                      variant="surfaceFloating"
                      label={labels.removeImage}
                      title={labels.removeImage}
                      disabled={disabled}
                      onClick={() => setIsRemoveImageConfirmOpen(true)}
                      icon={<Trash2 className="h-4 w-4" />}
                      className="absolute left-3 top-3 z-10 h-10 w-10"
                    />
                  ) : isMainImageUploadEnabled && !uploadedImageSrc ? (
                    <button
                      type="button"
                      disabled={disabled}
                      onClick={handleMainImageUploadClick}
                      className={`absolute bottom-9 left-1/2 z-10 -translate-x-1/2 whitespace-nowrap border-0 bg-transparent p-0 text-center text-sm font-black text-[var(--platform-text-strong)] drop-shadow-[0_1px_0_rgba(255,255,255,0.82)] transition hover:text-[var(--platform-accent)] sm:bottom-10 ${
                        disabled
                          ? 'cursor-not-allowed opacity-55'
                          : 'cursor-pointer'
                      }`}
                    >
                      {labels.emptyImageHint}
                    </button>
                  ) : null}
                </div>
              </div>
              {mainImageMeta ? (
                <div className="mt-3 shrink-0">{mainImageMeta}</div>
              ) : null}
              {imageLimitHint ? (
                <div className="mt-2 shrink-0 text-center text-[11px] font-semibold text-[var(--platform-text-soft)]">
                  {imageLimitHint}
                </div>
              ) : null}
            </div>

            {showPrompt ? (
              <div className="block shrink-0 lg:min-h-0">
                <label htmlFor={promptTextareaId} className="mb-2 block">
                  <PlatformFieldLabel variant="form" className="mb-0">
                    {promptLabel}
                  </PlatformFieldLabel>
                </label>
                <div className="relative">
                  <PlatformTextField
                    variant="textarea"
                    id={promptTextareaId}
                    value={prompt}
                    disabled={disabled}
                    rows={promptRows}
                    placeholder=""
                    onChange={(event) => onPromptChange(event.target.value)}
                    size="lg"
                    density="roomy"
                    className="h-[6rem] min-h-[6rem] rounded-[1.15rem] pb-14 font-normal placeholder:text-zinc-400 sm:h-[7.5rem] sm:min-h-[7.5rem] lg:h-[9.25rem] lg:min-h-[9.25rem]"
                    aria-label={promptAriaLabel ?? promptLabel}
                  />
                  {imageModelPicker}
                  {shouldShowPromptReferences &&
                  onPromptReferenceFilesSelect ? (
                    <>
                      <input
                        ref={promptReferenceInputRef}
                        id={promptReferenceInputId}
                        type="file"
                        accept={mainImageAccept}
                        multiple
                        aria-label={labels.promptReferenceUpload}
                        disabled={promptReferenceUploadDisabled}
                        onChange={(event) => {
                          const files = Array.from(
                            event.currentTarget.files ?? [],
                          );
                          event.currentTarget.value = '';
                          if (files.length > 0) {
                            onPromptReferenceFilesSelect(files);
                          }
                        }}
                        className="sr-only"
                      />
                      <div className="absolute bottom-3 right-3 z-10 flex gap-2">
                        {canCaptureHostImage ? (
                          <PlatformIconButton
                            variant="surfaceFloating"
                            label="拍摄图片"
                            title="拍摄图片"
                            disabled={promptReferenceUploadDisabled}
                            onClick={handlePromptReferenceCaptureClick}
                            icon={<Camera className="h-3.5 w-3.5" />}
                            className="h-8 w-8 border-[var(--platform-subpanel-border)] bg-white/96 hover:bg-[var(--platform-subpanel-fill)]"
                          />
                        ) : null}
                        {canImportHostImage ? (
                          <PlatformIconButton
                            variant="surfaceFloating"
                            label={labels.promptReferenceUpload}
                            title={labels.promptReferenceUpload}
                            disabled={promptReferenceUploadDisabled}
                            onClick={handlePromptReferenceUploadClick}
                            icon={<ImagePlus className="h-4 w-4" />}
                            className="h-8 w-8 border-[var(--platform-subpanel-border)] bg-white/96 hover:bg-[var(--platform-subpanel-fill)]"
                          />
                        ) : (
                          <PlatformIconButton
                            asChild="label"
                            htmlFor={promptReferenceInputId}
                            variant="surfaceFloating"
                            label={labels.promptReferenceUpload}
                            title={labels.promptReferenceUpload}
                            icon={<ImagePlus className="h-4 w-4" />}
                            className={`h-8 w-8 border-[var(--platform-subpanel-border)] bg-white/96 hover:bg-[var(--platform-subpanel-fill)] ${
                              promptReferenceUploadDisabled
                                ? 'cursor-not-allowed opacity-55'
                                : 'cursor-pointer'
                            }`}
                          />
                        )}
                      </div>
                    </>
                  ) : null}
                </div>
                {shouldShowPromptReferences &&
                promptReferenceImages.length > 0 ? (
                  <div className="mt-2 flex flex-wrap gap-2">
                    {promptReferenceImages.map((reference) => (
                      <PlatformUploadPreviewCard
                        key={reference.id}
                        imageSrc={reference.imageSrc}
                        imageAlt=""
                        previewLabel={`预览参考图 ${reference.label}`}
                        removeLabel={`移除参考图 ${reference.label}`}
                        onPreview={() => setPreviewReferenceImage(reference)}
                        onRemove={
                          onPromptReferenceRemove
                            ? () => onPromptReferenceRemove(reference.id)
                            : undefined
                        }
                        disabled={disabled}
                        resolveAsset
                        className="h-12 w-12 rounded-[0.75rem] bg-white/90 shadow-sm"
                        previewButtonProps={{ title: reference.label }}
                        removeButtonProps={{
                          title: '移除参考图',
                          className:
                            'right-0.5 top-0.5 bg-white/94 text-[var(--platform-text-strong)] shadow-sm hover:bg-white hover:text-[var(--platform-accent)]',
                        }}
                      />
                    ))}
                  </div>
                ) : null}
              </div>
            ) : null}
          </div>

          <div className="mt-2 shrink-0 space-y-3">
            {inputError ? (
              <PlatformStatusMessage
                tone="error"
                surface="profile"
                size="md"
                className="rounded-2xl"
              >
                {inputError}
              </PlatformStatusMessage>
            ) : null}
            {error ? (
              <PlatformStatusMessage
                tone="error"
                surface="profile"
                size="md"
                className="rounded-2xl"
              >
                {error}
              </PlatformStatusMessage>
            ) : null}
          </div>
        </section>
      </div>

      {showSubmitButton ? (
        <div className="mt-2 flex shrink-0 justify-center pb-[max(0.25rem,env(safe-area-inset-bottom))] sm:mt-3">
          <PlatformActionButton
            disabled={disabled || submitDisabled}
            onClick={onSubmit}
            className={`min-h-10 px-4 sm:min-h-11 sm:px-5 ${
              submitDisabled ? 'cursor-not-allowed opacity-55' : ''
            }`}
          >
            <span className="inline-flex flex-wrap items-center justify-center gap-1.5 sm:gap-2">
              {isSubmitting ? (
                <Loader2 className="h-4 w-4 animate-spin" />
              ) : null}
              <Sparkles className="h-4 w-4" />
              <span>{submitLabel}</span>
              {submitCostLabel ? (
                <PlatformPillBadge
                  tone="lightOverlay"
                  size="xs"
                  className="px-2 font-bold"
                >
                  {submitCostLabel}
                </PlatformPillBadge>
              ) : null}
            </span>
          </PlatformActionButton>
        </div>
      ) : null}

      <PlatformImagePreviewModal
        open={Boolean(previewReferenceImage)}
        title={previewReferenceImage?.label ?? labels.promptReferencePreviewAlt}
        imageSrc={previewReferenceImage?.imageSrc ?? null}
        imageAlt={labels.promptReferencePreviewAlt}
        closeLabel={labels.closePromptReferencePreview}
        zIndexClassName="z-[80]"
        onClose={() => setPreviewReferenceImage(null)}
      />

      <PlatformImagePreviewModal
        open={isMainImagePreviewOpen && Boolean(uploadedImageSrc)}
        title={labels.previewMainImage ?? uploadedImageAlt}
        imageSrc={uploadedImageSrc}
        imageAlt={uploadedImageAlt}
        refreshKey={uploadedImageRefreshKey}
        closeLabel={
          labels.closeMainImagePreview ?? labels.closePromptReferencePreview
        }
        zIndexClassName={mainImagePreviewZIndexClassName}
        onClose={() => setIsMainImagePreviewOpen(false)}
      />

      <UnifiedConfirmDialog
        open={isRemoveImageConfirmOpen}
        title={labels.removeImageConfirmTitle}
        description={labels.removeImageConfirmBody}
        onClose={() => setIsRemoveImageConfirmOpen(false)}
        confirmLabel="移除"
        cancelLabel="取消"
        showCancel
        onConfirm={() => {
          onMainImageRemove();
          setIsRemoveImageConfirmOpen(false);
        }}
        size="sm"
        zIndexClassName="z-[80]"
        overlayClassName="px-4 py-6"
        panelClassName="platform-remap-surface max-w-xs rounded-[1.35rem] shadow-[0_24px_70px_rgba(15,23,42,0.22)]"
      />
    </div>
  );
}

export default CreativeImageInputPanel;