// === 수동 상품 등록 ===
// ISVM 없이 사용자가 직접 정보 입력 → 네이버 스토어에 등록.
// 기존 naverRegisterFromTemplate 재사용 (카테고리/원산지/인증 메타는 매장 라이브 상품에서 자동 참조).

function ManualRegisterScreen({ products }) {
  const isConfigured = window.API.naverConfigured();

  // 폼 state
  const [name, setName] = useState("");
  const [salePrice, setSalePrice] = useState("");
  const [stock, setStock] = useState("");
  const [sellerCode, setSellerCode] = useState("");
  const [leafCategoryId, setLeafCategoryId] = useState("");
  const [descText, setDescText] = useState("");
  // 이미지: [{ file, preview, naverUrl? }]
  const [images, setImages] = useState([]);
  const [mainIdx, setMainIdx] = useState(0);

  // 등록 진행
  const [registering, setRegistering] = useState(false);
  const [progress, setProgress] = useState(null);  // { done, total, label }
  const [result, setResult] = useState(null);
  const [confirmOpen, setConfirmOpen] = useState(false);

  // template 자동 선택 (카테고리/원산지/인증 메타용)
  const templateProductId = products.find(p => p.originProductNo)?.originProductNo;

  const fileInputRef = useRef(null);

  const handleFiles = (fileList) => {
    if (!fileList || fileList.length === 0) return;
    const next = [];
    Array.from(fileList).forEach(file => {
      if (!file.type.startsWith("image/")) return;
      next.push({
        id: Date.now() + "-" + Math.random().toString(36).slice(2, 8),
        file,
        preview: URL.createObjectURL(file),
      });
    });
    setImages(prev => [...prev, ...next].slice(0, 10));  // 최대 10장 (대표 1 + 추가 9)
  };

  const removeImage = (id) => {
    setImages(prev => {
      const next = prev.filter(it => it.id !== id);
      const removedIdx = prev.findIndex(it => it.id === id);
      // 메인 이미지 인덱스 조정
      if (removedIdx === mainIdx) setMainIdx(0);
      else if (removedIdx < mainIdx) setMainIdx(i => Math.max(0, i - 1));
      return next;
    });
  };

  const setAsMain = (idx) => setMainIdx(idx);

  const resetForm = () => {
    images.forEach(it => URL.revokeObjectURL(it.preview));
    setName(""); setSalePrice(""); setStock(""); setSellerCode("");
    setLeafCategoryId(""); setDescText(""); setImages([]); setMainIdx(0);
    setProgress(null); setResult(null);
  };

  const validate = () => {
    if (!name.trim()) return "상품명을 입력하세요";
    if (!parseInt(salePrice)) return "판매가를 입력하세요";
    if (parseInt(salePrice) % 10 !== 0) return "판매가는 10원 단위여야 합니다";
    if (!parseInt(stock) && parseInt(stock) !== 0) return "재고를 입력하세요 (0 이상)";
    if (images.length === 0) return "이미지를 1장 이상 추가하세요";
    if (!templateProductId) return "매장에 라이브 상품이 1개 이상 있어야 등록 가능 (카테고리/원산지 참조용)";
    return null;
  };

  const doRegister = async () => {
    const err = validate();
    if (err) { toast(err); return; }
    setConfirmOpen(false);
    setRegistering(true);
    setResult(null);

    try {
      // 메인 이미지를 첫 번째로 정렬
      const ordered = [images[mainIdx], ...images.filter((_, i) => i !== mainIdx)];
      // 순차 업로드
      const uploadedUrls = [];
      setProgress({ done: 0, total: ordered.length, label: "이미지 업로드 중" });
      for (let i = 0; i < ordered.length; i++) {
        try {
          const url = await window.API.naverUploadImageFile(ordered[i].file);
          uploadedUrls.push(url);
        } catch (e) {
          console.warn("[manual upload " + (i + 1) + "/" + ordered.length + " 실패]", e.message);
        }
        setProgress({ done: i + 1, total: ordered.length, label: "이미지 업로드 중" });
      }
      if (uploadedUrls.length === 0) throw new Error("모든 이미지 업로드 실패");

      // 상세설명 HTML — 사용자 입력 텍스트 + 모든 이미지를 SmartEditor 형식으로
      let detailHtml = "";
      const cleanedDesc = (descText || "").replace(/[<>]/g, "").trim();
      if (cleanedDesc) {
        const escaped = cleanedDesc.split("\n").map(line => `<p>${line || "&nbsp;"}</p>`).join("");
        detailHtml = `<div class="se-viewer se-theme-default" lang="ko-KR"><div class="se-main-container"><div class="se-component se-text"><div class="se-component-content"><div class="se-section se-section-text"><div class="se-module se-module-text">${escaped}</div></div></div></div></div></div>`;
      }
      // 이미지 HTML 추가
      const imgHtml = window.API.buildSmartEditorImagesHtml(uploadedUrls);
      if (imgHtml) {
        // 두 HTML 합치기 — 텍스트 + 이미지 컴포넌트
        if (detailHtml) {
          // 두 viewer를 합쳐서 하나로 (네이버는 single viewer 안에 component들이 있는 구조 선호)
          detailHtml = imgHtml.replace("</div></div>",
            cleanedDesc
              ? `<div class="se-component se-text"><div class="se-component-content"><div class="se-section se-section-text"><div class="se-module se-module-text">${cleanedDesc.split("\n").map(line => `<p>${line || "&nbsp;"}</p>`).join("")}</div></div></div></div></div></div>`
              : "</div></div>"
          );
        } else {
          detailHtml = imgHtml;
        }
      }

      // 등록
      setProgress({ done: 0, total: 1, label: "네이버에 등록 중" });
      const overrides = {
        name: name.trim(),
        salePrice: parseInt(salePrice) || 0,
        stockQuantity: parseInt(stock) || 0,
        imageUrl: uploadedUrls[0],
        optionalImageUrls: uploadedUrls.slice(1, 10),
        detailContent: detailHtml || undefined,
      };
      if (sellerCode.trim()) overrides.sellerCode = sellerCode.trim();
      if (leafCategoryId.trim()) overrides.leafCategoryId = leafCategoryId.trim();

      const r = await window.API.naverRegisterFromTemplate(parseInt(templateProductId), overrides);
      setProgress(null);
      setResult({ ok: true, response: r });
      toast(`'${name.slice(0, 24)}…' 네이버에 등록되었습니다`);
    } catch (e) {
      console.error("[manual register]", e);
      setResult({ ok: false, error: e.message });
      toast("등록 실패: " + e.message);
      setProgress(null);
    } finally {
      setRegistering(false);
    }
  };

  const onDrop = (e) => {
    e.preventDefault();
    if (e.dataTransfer?.files) handleFiles(e.dataTransfer.files);
  };

  return (
    <div className="page" style={{ maxWidth: 1100 }}>
      <div className="page-header" style={{ display: "flex", alignItems: "flex-end", gap: 16 }}>
        <div style={{ flex: 1 }}>
          <h1 className="page-title">수동 상품 등록</h1>
          <p className="page-desc">
            ISVM 없이 직접 정보 입력해서 네이버 스마트스토어에 등록합니다 ·
            카테고리/원산지/인증 메타는 매장의 라이브 상품에서 자동 참조 ·
            배송/A&S는 API 설정의 기본값 사용
          </p>
        </div>
        {result?.ok && (
          <button className="btn btn-primary" onClick={resetForm}>
            <window.I.Plus size={14} /> 새 상품 등록
          </button>
        )}
      </div>

      {!isConfigured && (
        <div style={{
          padding: "10px 14px", marginBottom: 12, borderRadius: 8,
          background: "rgba(239, 68, 68, 0.08)", border: "1px solid rgba(239, 68, 68, 0.35)",
          fontSize: 13, color: "var(--danger)",
        }}>
          <window.I.AlertCircle size={14} stroke="var(--danger)" style={{ verticalAlign: "middle", marginRight: 6 }} />
          API 자격증명이 설정되지 않았습니다. <strong>API 설정</strong> 메뉴에서 입력하세요.
        </div>
      )}

      {!templateProductId && isConfigured && (
        <div style={{
          padding: "10px 14px", marginBottom: 12, borderRadius: 8,
          background: "rgba(245, 158, 11, 0.08)", border: "1px solid rgba(245, 158, 11, 0.35)",
          fontSize: 13, color: "var(--warning)",
        }}>
          <window.I.AlertCircle size={14} stroke="var(--warning)" style={{ verticalAlign: "middle", marginRight: 6 }} />
          매장에 라이브 상품이 0개라 카테고리 참조 불가. 먼저 1개 이상 등록되어야 합니다.
        </div>
      )}

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, alignItems: "flex-start" }} className="dash-grid">
        {/* 왼쪽: 기본 정보 */}
        <div className="card">
          <div className="card-header">
            <div className="card-title">1. 기본 정보</div>
            {templateProductId && (
              <span className="right text-xs muted">기준상품 #{templateProductId}</span>
            )}
          </div>
          <div className="card-body" style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <Field label="상품명 *">
              <input className="input" placeholder="예: LED 사각 직부등 25W 주광색"
                     value={name} onChange={e => setName(e.target.value)} />
              <div className="text-xs muted" style={{ marginTop: 4 }}>
                금지 문자(\\ * ? " &lt; &gt;)는 자동 정리됩니다 · 글자수: {name.length}
              </div>
            </Field>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
              <Field label="판매가 (원) *">
                <input className="input tabular" type="number" step="10" placeholder="29000"
                       value={salePrice} onChange={e => setSalePrice(e.target.value)} />
                <div className="text-xs muted" style={{ marginTop: 4 }}>10원 단위</div>
              </Field>
              <Field label="재고 수량 *">
                <input className="input tabular" type="number" placeholder="100"
                       value={stock} onChange={e => setStock(e.target.value)} />
              </Field>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
              <Field label="셀러 코드 (선택)">
                <input className="input font-mono" placeholder="자체 관리 코드"
                       value={sellerCode} onChange={e => setSellerCode(e.target.value)} />
              </Field>
              <Field label="leafCategoryId (선택)">
                <input className="input font-mono" placeholder="기준상품과 다를 때만"
                       value={leafCategoryId} onChange={e => setLeafCategoryId(e.target.value)} />
                <div className="text-xs muted" style={{ marginTop: 4 }}>
                  비우면 기준상품 카테고리 사용
                </div>
              </Field>
            </div>
            <Field label="상세 설명 (텍스트)">
              <textarea className="input" rows={5}
                        style={{ height: "auto", minHeight: 120, padding: "10px 12px", lineHeight: 1.5, fontSize: 13, resize: "vertical" }}
                        value={descText} onChange={e => setDescText(e.target.value)}
                        placeholder="제품 설명, 사용법, 주의사항 등 자유 입력. 추가한 이미지 위에 텍스트로 들어갑니다." />
            </Field>
          </div>
        </div>

        {/* 오른쪽: 이미지 */}
        <div className="card">
          <div className="card-header">
            <div className="card-title">2. 이미지 (대표 1장 + 추가 9장)</div>
            <span className="right text-xs muted">{images.length} / 10</span>
          </div>
          <div className="card-body">
            <div
              onDragOver={e => e.preventDefault()}
              onDrop={onDrop}
              onClick={() => fileInputRef.current?.click()}
              style={{
                border: "2px dashed var(--border)",
                borderRadius: 8,
                padding: 24,
                textAlign: "center",
                cursor: "pointer",
                marginBottom: 12,
                background: "var(--bg-elev)",
              }}
            >
              <window.I.Image size={28} className="empty-icon" />
              <div style={{ marginTop: 8, fontSize: 13 }}>이미지 파일 드래그 또는 클릭해서 선택</div>
              <div className="text-xs muted" style={{ marginTop: 4 }}>JPG, PNG, WebP · 최대 10장 · 20MB/장</div>
              <input ref={fileInputRef} type="file" multiple accept="image/*"
                     style={{ display: "none" }}
                     onChange={e => handleFiles(e.target.files)} />
            </div>

            {images.length > 0 && (
              <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(110px, 1fr))", gap: 8 }}>
                {images.map((it, idx) => (
                  <div key={it.id} style={{
                    position: "relative",
                    border: idx === mainIdx ? "2px solid var(--accent)" : "1px solid var(--border)",
                    borderRadius: 6,
                    overflow: "hidden",
                    background: "var(--bg-elev)",
                  }}>
                    <img src={it.preview} alt="" style={{ display: "block", width: "100%", height: 100, objectFit: "cover" }} />
                    {idx === mainIdx && (
                      <div style={{
                        position: "absolute", top: 4, left: 4,
                        background: "var(--accent)", color: "white",
                        fontSize: 10, fontWeight: 700, padding: "2px 6px", borderRadius: 3,
                      }}>대표</div>
                    )}
                    <div style={{ display: "flex", gap: 4, padding: 4, fontSize: 11 }}>
                      {idx !== mainIdx && (
                        <button className="btn btn-sm" style={{ flex: 1, padding: "2px 4px", fontSize: 10 }}
                                onClick={() => setAsMain(idx)} title="대표 이미지로 설정">대표로</button>
                      )}
                      <button className="btn btn-sm btn-danger" style={{ padding: "2px 6px" }}
                              onClick={() => removeImage(it.id)} title="삭제">
                        <window.I.X size={10} />
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      </div>

      {/* 등록 버튼 */}
      <div style={{
        marginTop: 16, padding: "14px 18px",
        background: "var(--bg-elev)", border: "1px solid var(--border)", borderRadius: 8,
        display: "flex", alignItems: "center", gap: 12,
      }}>
        <div style={{ flex: 1, fontSize: 13 }}>
          {validate() ? (
            <span className="muted"><window.I.AlertCircle size={14} stroke="var(--warning)" style={{ verticalAlign: "middle", marginRight: 4 }} /> {validate()}</span>
          ) : (
            <span><strong>{name}</strong> · {formatKRW(parseInt(salePrice) || 0)} · 재고 {stock}개 · 이미지 {images.length}장</span>
          )}
        </div>
        <button className="btn btn-primary btn-lg"
                disabled={!!validate() || registering}
                onClick={() => setConfirmOpen(true)}>
          <window.I.Check size={14} /> 네이버에 등록...
        </button>
      </div>

      {/* 등록 확인 모달 */}
      <window.Modal open={confirmOpen} onClose={() => !registering && setConfirmOpen(false)}
                    size="lg" title="네이버 스토어 등록 확인"
                    footer={
                      result?.ok ? (
                        <button className="btn btn-primary" onClick={() => { setConfirmOpen(false); resetForm(); }}>새 상품 등록하기</button>
                      ) : result && !result.ok ? (
                        <button className="btn" onClick={() => setConfirmOpen(false)}>닫기</button>
                      ) : (
                        <>
                          <button className="btn" onClick={() => setConfirmOpen(false)} disabled={registering}>취소</button>
                          <button className="btn btn-primary" onClick={doRegister} disabled={registering}>
                            <window.I.Check size={14} /> {registering ? "처리 중..." : "네이버에 등록"}
                          </button>
                        </>
                      )
                    }>
        {progress ? (
          <div style={{ padding: "16px 8px" }}>
            <div style={{ marginBottom: 8, fontSize: 13 }}>
              {progress.label} ({progress.done}/{progress.total})
            </div>
            <div style={{ height: 8, background: "var(--border)", borderRadius: 4, overflow: "hidden" }}>
              <div style={{
                height: "100%",
                width: `${progress.total ? (progress.done / progress.total * 100) : 0}%`,
                background: "var(--accent)",
                transition: "width 0.3s",
              }} />
            </div>
          </div>
        ) : result?.ok ? (
          <div style={{ padding: "16px 8px", textAlign: "center" }}>
            <window.I.Check size={48} stroke="var(--success)" style={{ marginBottom: 12 }} />
            <div style={{ fontSize: 16, fontWeight: 600, marginBottom: 4 }}>등록 완료</div>
            <div className="text-sm muted">상품이 네이버 스마트스토어에 등록되었습니다.</div>
            {result.response?.originProductNo && (
              <div className="text-xs muted" style={{ marginTop: 8 }}>
                originProductNo: <code>{result.response.originProductNo}</code>
              </div>
            )}
          </div>
        ) : result && !result.ok ? (
          <div style={{ padding: 12, background: "rgba(239,68,68,0.08)", border: "1px solid rgba(239,68,68,0.35)", borderRadius: 6 }}>
            <div style={{ fontWeight: 600, marginBottom: 6, color: "var(--danger)" }}>등록 실패</div>
            <div className="text-sm" style={{ whiteSpace: "pre-wrap", wordBreak: "break-word" }}>{result.error}</div>
          </div>
        ) : (
          <>
            <div style={{ padding: "12px 14px", background: "var(--accent-soft)", border: "1px solid var(--accent)", borderRadius: 6, marginBottom: 12 }}>
              <div style={{ fontWeight: 600, marginBottom: 6 }}>등록 정보 확인</div>
              <div style={{ fontSize: 13, lineHeight: 1.8 }}>
                <div><strong>상품명:</strong> {name}</div>
                <div><strong>판매가:</strong> {formatKRW(parseInt(salePrice) || 0)}</div>
                <div><strong>재고:</strong> {stock}개</div>
                <div><strong>이미지:</strong> {images.length}장 (대표: {mainIdx + 1}번)</div>
                {sellerCode && <div><strong>셀러 코드:</strong> {sellerCode}</div>}
                {leafCategoryId && <div><strong>카테고리 ID:</strong> {leafCategoryId}</div>}
              </div>
            </div>
            <div style={{ padding: "10px 12px", background: "rgba(245,158,11,0.08)", border: "1px solid rgba(245,158,11,0.35)", borderRadius: 6, fontSize: 12 }}>
              <window.I.AlertCircle size={14} stroke="var(--warning)" style={{ verticalAlign: "middle", marginRight: 6 }} />
              <strong style={{ color: "var(--text)" }}>주의:</strong> 등록은 즉시 네이버 스토어에 반영됩니다.
              카테고리/원산지/인증 정보는 기준상품(#{templateProductId})에서 자동 복사.
              배송(50,000원 이상 무료)/A&S는 API 설정 기본값 사용.
            </div>
          </>
        )}
      </window.Modal>
    </div>
  );
}

window.ManualRegisterScreen = ManualRegisterScreen;
