import { useEffect, useState } from "react";
import { ArrowLeft, Sparkles, Trash2, Upload, WandSparkles } from "lucide-react";
import type { Page } from "./route-config";

export function QuickCreatePage({ onBack }: { onBack: () => void; navigate?: (page: Page) => void }) {
  const [name, setName] = useState("");
  const [images, setImages] = useState<File[]>([]);
  const [preview, setPreview] = useState("");

  useEffect(() => {
    if (!images[0]) {
      setPreview("");
      return;
    }
    const url = URL.createObjectURL(images[0]);
    setPreview(url);
    return () => URL.revokeObjectURL(url);
  }, [images]);

  function selectImages(files: FileList | null) {
    setImages(Array.from(files || []).slice(0, 9));
  }

  return (
    <div className="quick-create-page">
      <header className="project-builder-header quick-create-header">
        <div className="project-builder-title">
          <button type="button" className="image-back-button" onClick={onBack} aria-label="返回工作台"><ArrowLeft /></button>
          <div><h1>极速成片</h1><p>输入商品名称并上传图片，系统将自动完成从商品理解到视频生成的全部流程</p></div>
        </div>
        <div className="project-builder-status"><strong>AI 自动编排</strong><span>· 无需逐步配置</span></div>
      </header>

      <div className="quick-create-shell" id="quickCreateShell">
        <section className="quick-create-panel quick-form-panel">
          <div className="quick-form-copy">
            <h2>告诉我们这是什么商品</h2>
            <p>系统会识别商品信息，自动选择带货结构、表现形式、模特和场景，并完成15秒竖屏视频。</p>
          </div>

          <label className="quick-field">
            <span className="quick-field-label"><span>商品名称</span><small>必填</small></span>
            <input className="quick-name-input" autoComplete="off" value={name} onChange={(event) => setName(event.target.value)} placeholder="例如：净颜精华、轻醒咖啡" />
          </label>

          <div className="quick-field">
            <span className="quick-field-label"><span>商品图片</span><small>必填 · 最多9张</small></span>
            <label className={`quick-upload${preview ? " has-image" : ""}`}>
              <input type="file" accept="image/jpeg,image/png,image/webp" multiple onChange={(event) => selectImages(event.target.files)} />
              <span className="quick-upload-copy"><span className="quick-upload-icon"><Upload /></span><strong>上传商品图片</strong><small>建议包含清晰主图、包装和使用细节</small></span>
              <span className="quick-upload-preview">
                <img src={preview} alt="极速成片商品预览" />
                <span className="quick-image-count">{images.length}张图片</span>
                <button type="button" className="quick-image-clear" onClick={(event) => { event.preventDefault(); setImages([]); }} aria-label="删除已上传图片"><Trash2 /></button>
              </span>
            </label>
          </div>

          <div className="quick-auto-note" aria-label="系统自动完成内容"><span>识别商品与卖点</span><span>推荐脚本方向</span><span>匹配模特与场景</span><span>生成故事板与视频</span></div>

          <div className="quick-form-footer">
            <div className="quick-cost"><span>仅在视频生成成功后扣费</span><strong>预计 240 积分</strong></div>
            <button type="button" className="quick-generate-button" disabled><WandSparkles /><span>立即生成视频</span></button>
          </div>
        </section>

        <section className="quick-create-panel quick-status-panel" aria-live="polite">
          <div className="quick-state quick-state-ready">
            <div className="quick-ready-orbit"><span className="quick-ready-icon"><Sparkles /></span></div>
            <h2>系统会替你完成所有选择</h2>
            <p>上传商品后，AI 将根据品类、图片信息和适用场景自动编排完整视频，不需要理解复杂的制作参数。</p>
            <div className="quick-ready-tags"><span>自动推荐结构</span><span>自动选择表现形式</span><span>自动匹配资产</span><span>自动质量检查</span></div>
          </div>
        </section>
      </div>
    </div>
  );
}