src/features/ecommerce/panels/WatermarkToolPage.tsx

import {
  CloudUploadOutlined,
  FileImageOutlined,
  FolderOpenOutlined,
  FrownOutlined,
  LoadingOutlined,
  QuestionCircleOutlined,
} from "@ant-design/icons";
import type { ChangeEvent, DragEvent, KeyboardEvent, RefObject } from "react";
import { toast } from "../../../components/toast/toastStore";

export interface WatermarkImageItem {
  src: string;
  name: string;
  format: string;
}

export type WatermarkStatus = "idle" | "processing" | "done" | "failed";

interface WatermarkToolPageProps {
  inputRef: RefObject<HTMLInputElement>;
  urlInputRef: RefObject<HTMLInputElement>;
  image: WatermarkImageItem | null;
  isDragging: boolean;
  status: WatermarkStatus;
  progress: number;
  resultUrl: string | null;
  onUpload: (event: ChangeEvent<HTMLInputElement>) => void;
  onDrop: (event: DragEvent<HTMLDivElement>) => void;
  onDraggingChange: (dragging: boolean) => void;
  onRemoveImage: () => void;
  onUrlImport: () => void;
  onGenerate: () => void;
  onDownload: () => void;
  onClose: () => void;
}

// 去水印工具页面：上传含水印图片 → AI 清理 → 预览/下载结果。
// 从 EcommercePage 的 watermarkPreview 抽出，状态与处理逻辑仍在父组件，本组件纯展示 + 回调。
export default function WatermarkToolPage({
  inputRef,
  urlInputRef,
  image,
  isDragging,
  status,
  progress,
  resultUrl,
  onUpload,
  onDrop,
  onDraggingChange,
  onRemoveImage,
  onUrlImport,
  onGenerate,
  onDownload,
  onClose,
}: WatermarkToolPageProps) {
  return (
    <main key="watermark" className="ecom-watermark-page ecom-tool-page-enter" aria-label="去水印">
      <input
        ref={inputRef}
        type="file"
        accept="image/*"
        className="ecom-command-hidden-file"
        onChange={onUpload}
        aria-label="上传去水印图片"
      />
      <aside className="ecom-watermark-side">
        <header className="ecom-quick-set-panel-head ecom-watermark-panel-head">
          <strong className="ecom-quick-set-page-title">去水印</strong>
          <button type="button" className="ecom-quick-set-back" onClick={onClose}>首页</button>
          <button type="button" className="ecom-quick-set-back" onClick={onClose}>上一页</button>
        </header>
        <p className="ecom-watermark-intro">上传商品素材，快速清理画面中的水印、文字和瑕疵。</p>
        <section className="ecom-watermark-panel">
          <header>
            <strong>上传素材</strong>
            <span>{image ? "已上传" : "待上传"}</span>
          </header>
          <div
            className={`ecom-watermark-upload-card${isDragging ? " is-dragging" : ""}${image ? " has-image" : ""}`}
            role="button"
            tabIndex={0}
            onClick={() => inputRef.current?.click()}
            onKeyDown={(event: KeyboardEvent) => {
              if (event.key === "Enter" || event.key === " ") {
                event.preventDefault();
                inputRef.current?.click();
              }
            }}
            onDragEnter={(event) => {
              event.preventDefault();
              onDraggingChange(true);
            }}
            onDragOver={(event) => event.preventDefault()}
            onDragLeave={() => onDraggingChange(false)}
            onDrop={onDrop}
          >
            {image ? (
              <>
                <button
                  type="button"
                  className="ecom-watermark-remove"
                  onClick={(event) => {
                    event.preventDefault();
                    event.stopPropagation();
                    onRemoveImage();
                  }}
                  aria-label="删除素材"
                >
                  ×
                </button>
                <figure>
                  <img src={image.src} alt={image.name} />
                </figure>
                <div>
                  <strong>{image.name}</strong>
                  <span>{image.format || "PNG / JPG / WebP"}</span>
                </div>
              </>
            ) : (
              <>
                <CloudUploadOutlined />
                <strong>上传含水印图片</strong>
                <span>支持 PNG / JPG / WebP，拖拽或点击上传</span>
              </>
            )}
          </div>
          <div className="ecom-watermark-url-row">
            <input
              ref={urlInputRef}
              placeholder="粘贴图片 URL"
              aria-label="粘贴图片 URL"
              onKeyDown={(event) => {
                if (event.key === "Enter") void onUrlImport();
              }}
            />
            <button type="button" onClick={() => void onUrlImport()}>导入</button>
          </div>
        </section>

        <section className="ecom-watermark-panel">
          <strong>处理说明</strong>
          <p>优先保留商品主体、材质和边缘细节，适合电商主图、详情图和社媒素材清理。</p>
        </section>

        <button
          type="button"
          className="ecom-watermark-primary"
          onClick={onGenerate}
          disabled={!image || status === "processing"}
        >
          {status === "processing" ? <LoadingOutlined /> : <FileImageOutlined />}
          {status === "processing" ? "处理中" : "开始去水印"}
        </button>
      </aside>

      <section className="ecom-watermark-workspace">
        {!image ? (
          <div
            className={`ecom-watermark-dropzone${isDragging ? " is-dragging" : ""}`}
            role="button"
            tabIndex={0}
            onClick={() => inputRef.current?.click()}
            onKeyDown={(event: KeyboardEvent) => {
              if (event.key === "Enter" || event.key === " ") {
                event.preventDefault();
                inputRef.current?.click();
              }
            }}
            onDragEnter={(event) => {
              event.preventDefault();
              onDraggingChange(true);
            }}
            onDragOver={(event) => event.preventDefault()}
            onDragLeave={() => onDraggingChange(false)}
            onDrop={onDrop}
          >
            <CloudUploadOutlined />
            <strong>点击或拖拽上传图片</strong>
            <span>支持 PNG / JPG / WebP，上传含水印图片后点击开始去水印</span>
          </div>
        ) : (
          <div className="ecom-watermark-grid">
            <article className="ecom-watermark-preview-card">
              <span>原图</span>
              <img src={image.src} alt="原图" />
            </article>

            <article className="ecom-watermark-preview-card">
              <span>去水印结果</span>
              {status === "processing" ? (
                <div className="ecom-watermark-processing" role="status" aria-live="polite">
                  <LoadingOutlined />
                  <strong>正在去水印</strong>
                  <em>AI 正在清理图片中的水印和文字</em>
                  <div className="ecom-quick-set-progress">
                    <div className="ecom-quick-set-progress-bar" style={{ width: `${Math.round(progress)}%` }} />
                  </div>
                  <em className="ecom-quick-set-progress-text">{Math.round(progress)}%</em>
                </div>
              ) : status === "done" && resultUrl ? (
                <>
                  <img src={resultUrl} alt="去水印结果" />
                  <button type="button" className="ecom-watermark-zoom" aria-label="查看大图">
                    <QuestionCircleOutlined />
                  </button>
                </>
              ) : status === "failed" ? (
                <div className="ecom-watermark-empty">
                  <FrownOutlined />
                  <strong>去水印失败</strong>
                  <em>请检查网络或重试，如余额不足请先充值</em>
                </div>
              ) : (
                <div className="ecom-watermark-empty">
                  <FileImageOutlined />
                  <strong>等待处理</strong>
                  <em>点击开始去水印后显示结果</em>
                </div>
              )}
              <div className="ecom-watermark-actions">
                <button type="button" onClick={() => toast.success("已加入资产库")} disabled={status !== "done"}>
                  <FolderOpenOutlined />
                  加入资产库
                </button>
                <button type="button" onClick={onDownload} disabled={status !== "done"}>
                  <CloudUploadOutlined />
                  下载图片
                </button>
              </div>
            </article>
          </div>
        )}
      </section>
    </main>
  );
}