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

import { ResolvedAssetImage } from '../ResolvedAssetImage';

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;
  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;

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,
  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 mainImageInputRef = 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;

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

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

  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]';

  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' : ''
              }`}
            >
              <div className="mb-2 shrink-0 text-sm font-black text-[var(--platform-text-strong)]">
                {labels.imageField}
              </div>
              <div className={imageFrameClassName}>
                <div 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 ? (
                    <label
                      htmlFor={mainImageInputId}
                      className={`absolute inset-0 z-0 cursor-pointer ${disabled ? 'cursor-not-allowed' : ''}`}
                      title={
                        uploadedImageSrc
                          ? labels.replaceImage
                          : labels.uploadImage
                      }
                    >
                      <span className="sr-only">
                        {uploadedImageSrc
                          ? labels.replaceImage
                          : labels.uploadImage}
                      </span>
                    </label>
                  ) : 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))]">
                      <span className="flex h-14 w-14 items-center justify-center rounded-full border border-[var(--platform-subpanel-border)] bg-white/92 text-[var(--platform-text-strong)] shadow-sm sm:h-20 sm:w-20">
                        <ImagePlus className="h-6 w-6 sm:h-8 sm:w-8" />
                      </span>
                    </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 ? (
                    <button
                      type="button"
                      disabled={disabled}
                      onClick={() => mainImageInputRef.current?.click()}
                      className="absolute bottom-3 right-3 z-10 inline-flex h-10 w-10 items-center justify-center rounded-full border border-white/80 bg-white/94 text-[var(--platform-text-strong)] shadow-sm backdrop-blur transition hover:text-[var(--platform-accent)] disabled:cursor-not-allowed disabled:opacity-55"
                      aria-label={labels.replaceImage}
                      title={labels.replaceImage}
                    >
                      <ImagePlus className="h-4 w-4" />
                    </button>
                  ) : null}
                  {shouldShowHistoryButton ? (
                    <button
                      type="button"
                      disabled={disabled}
                      onClick={onHistoryClick}
                      className={`absolute right-3 top-3 z-10 inline-flex items-center gap-1.5 rounded-full border border-white/80 bg-white/94 px-3 py-2 text-[11px] font-black text-[var(--platform-text-strong)] shadow-sm backdrop-blur transition hover:text-[var(--platform-accent)] ${
                        disabled ? 'cursor-not-allowed opacity-55' : ''
                      }`}
                      aria-label={labels.history ?? '选择历史图片'}
                      title={labels.history ?? '选择历史图片'}
                    >
                      <History className="h-3.5 w-3.5" />
                      <span>历史</span>
                    </button>
                  ) : null}
                  {canEditMainImage && uploadedImageSrc && canToggleAiRedraw ? (
                    <label className="absolute bottom-3 left-3 z-10 inline-flex cursor-pointer items-center gap-2 rounded-full border border-white/80 bg-white/94 px-3 py-2 text-xs font-black text-[var(--platform-text-strong)] shadow-sm backdrop-blur">
                      <span>AI重绘</span>
                      <input
                        role="switch"
                        type="checkbox"
                        checked={aiRedraw}
                        disabled={disabled}
                        onChange={(event) => onAiRedrawChange(event.target.checked)}
                        className="sr-only"
                        aria-label="AI重绘"
                      />
                      <span
                        aria-hidden="true"
                        className={`relative h-5 w-9 rounded-full transition ${
                          aiRedraw ? 'bg-[var(--platform-accent)]' : 'bg-zinc-300'
                        }`}
                      >
                        <span
                          className={`absolute top-0.5 h-4 w-4 rounded-full bg-white shadow-sm transition ${
                            aiRedraw ? 'left-[1.125rem]' : 'left-0.5'
                          }`}
                        />
                      </span>
                    </label>
                  ) : null}
                  {canEditMainImage && uploadedImageSrc && canRemoveMainImage ? (
                    <button
                      type="button"
                      disabled={disabled}
                      onClick={() => setIsRemoveImageConfirmOpen(true)}
                      className="absolute left-3 top-3 z-10 inline-flex h-10 w-10 items-center justify-center rounded-full border border-white/80 bg-white/94 text-[var(--platform-text-strong)] shadow-sm backdrop-blur transition hover:text-[var(--platform-accent)] disabled:cursor-not-allowed disabled:opacity-55"
                      aria-label={labels.removeImage}
                      title={labels.removeImage}
                    >
                      <Trash2 className="h-4 w-4" />
                    </button>
                  ) : isMainImageUploadEnabled && !uploadedImageSrc ? (
                    <label
                      htmlFor={mainImageInputId}
                      className={`absolute bottom-9 left-1/2 z-10 -translate-x-1/2 whitespace-nowrap 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}
                    </label>
                  ) : 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 text-sm font-black text-[var(--platform-text-strong)]"
                >
                  {promptLabel}
                </label>
                <div className="relative">
                  <textarea
                    id={promptTextareaId}
                    value={prompt}
                    disabled={disabled}
                    rows={promptRows}
                    placeholder=""
                    onChange={(event) => onPromptChange(event.target.value)}
                    className="h-[6rem] min-h-[6rem] w-full resize-none rounded-[1.15rem] border border-[var(--platform-subpanel-border)] bg-white/90 px-4 py-3 pb-14 text-base leading-6 text-[var(--platform-text-strong)] outline-none 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 ? (
                    <label
                      className={`absolute bottom-3 right-3 z-10 inline-flex h-8 w-8 items-center justify-center rounded-full border border-[var(--platform-subpanel-border)] bg-white/96 text-[var(--platform-text-strong)] shadow-sm transition hover:bg-[var(--platform-subpanel-fill)] hover:text-[var(--platform-accent)] ${
                        promptReferenceUploadDisabled
                          ? 'cursor-not-allowed opacity-55'
                          : 'cursor-pointer'
                      }`}
                      aria-label={labels.promptReferenceUpload}
                      title={labels.promptReferenceUpload}
                    >
                      <ImagePlus className="h-4 w-4" />
                      <input
                        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"
                      />
                    </label>
                  ) : null}
                </div>
                {shouldShowPromptReferences && promptReferenceImages.length > 0 ? (
                  <div className="mt-2 flex flex-wrap gap-2">
                    {promptReferenceImages.map((reference) => (
                      <div
                        key={reference.id}
                        className="relative h-12 w-12 overflow-hidden rounded-[0.75rem] border border-[var(--platform-subpanel-border)] bg-white/90 shadow-sm"
                      >
                        <button
                          type="button"
                          disabled={disabled}
                          onClick={() => setPreviewReferenceImage(reference)}
                          className="block h-full w-full"
                          aria-label={`预览参考图 ${reference.label}`}
                          title={reference.label}
                        >
                          <ResolvedAssetImage
                            src={reference.imageSrc}
                            alt=""
                            aria-hidden="true"
                            className="h-full w-full object-cover"
                          />
                        </button>
                        {onPromptReferenceRemove ? (
                          <button
                            type="button"
                            disabled={disabled}
                            onClick={() => onPromptReferenceRemove(reference.id)}
                            className="absolute right-0.5 top-0.5 inline-flex h-5 w-5 items-center justify-center rounded-full bg-white/94 text-[var(--platform-text-strong)] shadow-sm transition hover:text-[var(--platform-accent)] disabled:opacity-55"
                            aria-label={`移除参考图 ${reference.label}`}
                            title="移除参考图"
                          >
                            <X className="h-3 w-3" />
                          </button>
                        ) : null}
                      </div>
                    ))}
                  </div>
                ) : null}
              </div>
            ) : null}
          </div>

          <div className="mt-2 shrink-0 space-y-3">
            {inputError ? (
              <div className="platform-banner platform-banner--danger rounded-2xl text-sm leading-6">
                {inputError}
              </div>
            ) : null}
            {error ? (
              <div className="platform-banner platform-banner--danger rounded-2xl text-sm leading-6">
                {error}
              </div>
            ) : 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">
          <button
            type="button"
            disabled={disabled || submitDisabled}
            onClick={onSubmit}
            className={`platform-button platform-button--primary min-h-10 px-4 py-2 text-sm 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 ? (
                <span className="rounded-full bg-white/24 px-2 py-0.5 text-[11px] font-bold">
                  {submitCostLabel}
                </span>
              ) : null}
            </span>
          </button>
        </div>
      ) : null}

      {previewReferenceImage ? (
        <div
          className="platform-modal-backdrop fixed inset-0 z-[80] flex items-center justify-center px-4 py-6"
          onClick={() => setPreviewReferenceImage(null)}
        >
          <div
            role="dialog"
            aria-modal="true"
            aria-labelledby="creative-image-reference-preview-title"
            className="platform-modal-shell platform-remap-surface w-full max-w-2xl rounded-[1.35rem] p-3 shadow-[0_24px_70px_rgba(15,23,42,0.22)]"
            onClick={(event) => event.stopPropagation()}
          >
            <div className="mb-3 flex items-center justify-between gap-3 px-1">
              <div
                id="creative-image-reference-preview-title"
                className="min-w-0 truncate text-sm font-black text-[var(--platform-text-strong)]"
              >
                {previewReferenceImage.label}
              </div>
              <button
                type="button"
                aria-label={labels.closePromptReferencePreview}
                onClick={() => setPreviewReferenceImage(null)}
                className="platform-profile-icon-button flex h-8 w-8 shrink-0 items-center justify-center rounded-full"
              >
                <X className="h-4 w-4" />
              </button>
            </div>
            <div className="max-h-[72vh] overflow-hidden rounded-[1rem] bg-black/5">
              <ResolvedAssetImage
                src={previewReferenceImage.imageSrc}
                alt={labels.promptReferencePreviewAlt}
                className="h-full max-h-[72vh] w-full object-contain"
              />
            </div>
          </div>
        </div>
      ) : null}

      {isMainImagePreviewOpen && uploadedImageSrc ? (
        <div
          className="platform-modal-backdrop fixed inset-0 z-[82] flex items-center justify-center px-4 py-6"
          onClick={() => setIsMainImagePreviewOpen(false)}
        >
          <div
            role="dialog"
            aria-modal="true"
            aria-labelledby="creative-image-main-preview-title"
            className="platform-modal-shell platform-remap-surface w-full max-w-4xl rounded-[1.35rem] p-3 shadow-[0_24px_70px_rgba(15,23,42,0.22)]"
            onClick={(event) => event.stopPropagation()}
          >
            <div className="mb-3 flex items-center justify-between gap-3 px-1">
              <div
                id="creative-image-main-preview-title"
                className="min-w-0 truncate text-sm font-black text-[var(--platform-text-strong)]"
              >
                {labels.previewMainImage ?? uploadedImageAlt}
              </div>
              <button
                type="button"
                aria-label={
                  labels.closeMainImagePreview ?? labels.closePromptReferencePreview
                }
                onClick={() => setIsMainImagePreviewOpen(false)}
                className="platform-profile-icon-button flex h-8 w-8 shrink-0 items-center justify-center rounded-full"
              >
                <X className="h-4 w-4" />
              </button>
            </div>
            <div className="max-h-[82vh] overflow-hidden rounded-[1rem] bg-black/5">
              <ResolvedAssetImage
                src={uploadedImageSrc}
                refreshKey={uploadedImageRefreshKey}
                alt={uploadedImageAlt}
                className="h-full max-h-[82vh] w-full object-contain"
              />
            </div>
          </div>
        </div>
      ) : null}

      {isRemoveImageConfirmOpen ? (
        <div className="platform-modal-backdrop fixed inset-0 z-[80] flex items-center justify-center px-4 py-6">
          <div
            role="dialog"
            aria-modal="true"
            aria-labelledby="creative-image-remove-confirm-title"
            className="platform-modal-shell platform-remap-surface w-full max-w-xs rounded-[1.35rem] p-5 shadow-[0_24px_70px_rgba(15,23,42,0.22)]"
          >
            <div
              id="creative-image-remove-confirm-title"
              className="text-base font-black text-[var(--platform-text-strong)]"
            >
              {labels.removeImageConfirmTitle}
            </div>
            <div className="mt-2 text-sm leading-6 text-[var(--platform-text-base)]">
              {labels.removeImageConfirmBody}
            </div>
            <div className="mt-5 grid grid-cols-2 gap-3">
              <button
                type="button"
                onClick={() => setIsRemoveImageConfirmOpen(false)}
                className="platform-button platform-button--secondary justify-center"
              >
                取消
              </button>
              <button
                type="button"
                onClick={() => {
                  onMainImageRemove();
                  setIsRemoveImageConfirmOpen(false);
                }}
                className="platform-button platform-button--primary justify-center"
              >
                移除
              </button>
            </div>
          </div>
        </div>
      ) : null}
    </div>
  );
}

export default CreativeImageInputPanel;