/* global React, Icon, Button, Tag, Dialog, SlideDrawer, useToast, IMG_SLOTS, IMG_SKUS, HoverPreview, InfoNote */
// L2-B — 單筆編輯抽屜

const { useState, useCallback, useEffect, useRef } = React;

const ImageEditDrawer = ({ sku, readOnly, onClose, onSave }) => {
  const toast = useToast();

  const [drafts,   setDrafts]   = useState({});
  const [statuses, setStatuses] = useState({});
  const [errMsgs,  setErrMsgs]  = useState({});
  const [showSave, setShowSave] = useState(false);
  const inputRefs = useRef({});

  const changeCount = Object.keys(drafts).length;
  const hasErr      = Object.values(statuses).some(s => s === "err");
  const hasLoading  = Object.values(statuses).some(s => s === "loading");

  // ── URL blur handler ────────────────────────────────────────────
  const onUrlBlur = useCallback((slotKey, value, oldUrl) => {
    setDrafts(prev => {
      const d = { ...prev };
      const s = { ...statuses };
      const e = { ...errMsgs };

      if (!value) {
        if (oldUrl) { d[slotKey] = ""; s[slotKey] = null; delete e[slotKey]; }
        else { delete d[slotKey]; delete s[slotKey]; delete e[slotKey]; }
        setStatuses(s); setErrMsgs(e);
        return d;
      }

      if (!/^https?:\/\//.test(value) && !/^data:/.test(value)) {
        d[slotKey] = value; s[slotKey] = "err"; e[slotKey] = "URL 需以 http(s):// 開頭";
        setStatuses(s); setErrMsgs(e);
        return d;
      }

      if (value === oldUrl) {
        delete d[slotKey]; delete s[slotKey]; delete e[slotKey];
        setStatuses(s); setErrMsgs(e);
        return d;
      }

      d[slotKey] = value; s[slotKey] = "loading"; delete e[slotKey];
      setStatuses(s); setErrMsgs(e);

      setTimeout(() => {
        setStatuses(prev2 => {
          const s2 = { ...prev2 };
          setErrMsgs(prev3 => {
            const e2 = { ...prev3 };
            if (/broken|404|fail/i.test(value)) {
              s2[slotKey] = "err"; e2[slotKey] = "圖片連結無法載入(404 / 連線錯誤)";
            } else { s2[slotKey] = "ok"; delete e2[slotKey]; }
            return e2;
          });
          return s2;
        });
      }, 700);

      return d;
    });
  }, [statuses, errMsgs]);

  // ── save ─────────────────────────────────────────────────────────
  const trySave = () => {
    if (changeCount === 0 || hasErr || hasLoading) return;
    setShowSave(true);
  };

  const confirmSave = () => {
    setShowSave(false);
    onSave(sku.skuId, drafts);
    toast.push({ type: "success", msg: `已更新 ${sku.barcode} 共 ${changeCount} 張圖片` });
    onClose();
  };


  const barcodeChip = (
    <span style={{ font: "500 12px var(--font-mono)", background: "var(--gray-100)", padding: "2px 8px", borderRadius: 4, color: "var(--fg-1)", flexShrink: 0 }}>
      {sku.barcode}
    </span>
  );

  // ── 唯讀模式 ──────────────────────────────────────────────────────────
  if (readOnly) {
    return (
      <SlideDrawer
        title="檢視圖片"
        meta={barcodeChip}
        isDirty={false}
        wide
        onClose={onClose}
        foot={(tryClose) => (
          <Button variant="default" onClick={tryClose}>關閉</Button>
        )}
      >
        <div className="drawer__sub" style={{ margin: "-10px 0 12px", fontSize: 12, color: "var(--fg-3)", fontFamily: "var(--font-mono)" }}>{sku.name}</div>
        <div className="img-drawer__meta-strip">
          {[
            ["品牌 · 主類別", `${sku.brand} · ${sku.mainCat}`, false],
            ["促銷類型",   sku.promoType || "—", false],
            ["最後更新",   `${sku.lastUpdated} / ${sku.updatedBy}`, false],
          ].map(([label, value]) => (
            <div key={label}>
              <div className="img-edit-meta__label">{label}</div>
              <div className="img-edit-meta__value">{value}</div>
            </div>
          ))}
        </div>
        <div className="img-fields-card">
          <div className="img-fields-card__head">
            <div style={{ flex: 1 }}>
              <div className="img-fields-card__title">商品圖片</div>
              <div className="img-fields-card__sub">目前各圖片欄位現況。如需調整，請聯繫圖檔處理人員。</div>
            </div>
          </div>
          <div className="img-fields-card__body">
            {IMG_SLOTS.map(slot => {
              const url = sku[slot.key] || "";
              return (
                <div key={slot.key} className="img-row">
                  <div className="img-row__label">
                    <div className="img-row__label-name">
                      {slot.label}
                      {slot.required && <span className="img-row__label-req">*</span>}
                    </div>
                    <div className="img-row__label-en">{slot.en}</div>
                    <div className="img-row__label-hint">{slot.hint}</div>
                  </div>
                  <div className="img-row__preview">
                    <HoverPreview src={url || null}>
                      <div className="img-thumb-wrap img-thumb-wrap--lg">
                        {url
                          ? <img src={url} alt={slot.label} />
                          : <div className="img-thumb-empty"><Icon name="image" size={24} /></div>
                        }
                      </div>
                    </HoverPreview>
                  </div>
                  <div className="img-row__input">
                    {url
                      ? <a href={url} target="_blank" rel="noopener noreferrer" style={{ display: "inline-flex", alignItems: "center", gap: 4, font: "400 13px var(--font-sans)", color: "var(--brand-primary)", textDecoration: "none" }}>
                          <Icon name="image" size={13} />
                          圖片 URL 連結
                        </a>
                      : <span style={{ font: "400 12px var(--font-sans)", color: "var(--fg-4)" }}>—</span>
                    }
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </SlideDrawer>
    );
  }

  return (
    <>
    <SlideDrawer
      title="編輯圖片"
      meta={barcodeChip}
      isDirty={changeCount > 0}
      dirtyCount={changeCount}
      dirtyMsg={`這支 SKU 有 ${changeCount} 項變更尚未儲存。關閉後變更會遺失。`}
      wide
      onClose={onClose}
      foot={(tryClose) => (
        <>
          <div className="img-drawer__foot-left">
            {changeCount > 0 ? <>已調整 <b>{changeCount}</b> 張圖片</> : "尚未編輯任何欄位"}
          </div>
          <Button variant="text" onClick={tryClose}>取消</Button>
          <Button
            variant="primary"
            disabled={changeCount === 0 || hasErr || hasLoading}
            onClick={trySave}
          >儲存{changeCount > 0 ? `(${changeCount})` : ""}</Button>
        </>
      )}
    >
      <div className="drawer__sub" style={{ margin: "-10px 0 12px", fontSize: 12, color: "var(--fg-3)", fontFamily: "var(--font-mono)" }}>{sku.name}</div>
      {/* Meta strip */}
      <div className="img-drawer__meta-strip">
            {[
              ["品牌 · 主類別", `${sku.brand} · ${sku.mainCat}`, false],
              ["促銷類型",   sku.promoType || "—", false],
              ["最後更新",   `${sku.lastUpdated} / ${sku.updatedBy}`, false],
            ].map(([label, value, mono]) => (
              <div key={label}>
                <div className="img-edit-meta__label">{label}</div>
                <div className={mono ? "img-edit-meta__value--mono" : "img-edit-meta__value"}>{value}</div>
              </div>
            ))}
          </div>

          {/* 圖片欄位卡 */}
          <div className="img-fields-card">
            <div className="img-fields-card__head">
              <div style={{ flex: 1 }}>
                <div className="img-fields-card__title">商品圖片</div>
                <div className="img-fields-card__sub">輸入新 URL → 移出欄位後自動載入預覽。儲存後立即生效於商品主檔。</div>
              </div>
              {changeCount > 0 && (
                <Button
                  variant="text"
                  size="sm"
                  onClick={() => { setDrafts({}); setStatuses({}); setErrMsgs({}); }}
                >還原所有變更</Button>
              )}
            </div>
            <div className="img-fields-card__body">
              {IMG_SLOTS.map(slot => {
                const draft    = drafts[slot.key];
                const oldUrl   = sku[slot.key] || "";
                const hasDraft = draft !== undefined;
                const curUrl   = hasDraft ? draft : oldUrl;
                const status   = statuses[slot.key];
                const errMsg   = errMsgs[slot.key];

                const isChanged = hasDraft && draft !== "" && draft !== oldUrl;
                const isCleared = hasDraft && draft === "" && !!oldUrl;
                const isLoading = status === "loading";
                const isErr     = status === "err";

                let statusLabel = "未上傳"; let statusCls = "--none";
                if (isLoading) { statusLabel = "載入中"; statusCls = "--loading"; }
                else if (isErr)     { statusLabel = errMsg || "無法載入"; statusCls = "--err"; }
                else if (isChanged) { statusLabel = "已變更"; statusCls = "--changed"; }
                else if (isCleared) { statusLabel = "將移除"; statusCls = "--cleared"; }
                else if (oldUrl)    { statusLabel = "現有圖片"; statusCls = "--ok"; }

                const displaySrc = hasDraft ? (draft || null) : (oldUrl || null);

                return (
                  <div key={slot.key} className="img-row">
                    <div className="img-row__label">
                      <div className="img-row__label-name">
                        {slot.label}
                        {slot.required && <span className="img-row__label-req">*</span>}
                      </div>
                      <div className="img-row__label-en">{slot.en}</div>
                      <div className="img-row__label-hint">{slot.hint}</div>
                    </div>
                    <div className="img-row__preview">
                      <HoverPreview src={displaySrc}>
                        <div className={
                          "img-thumb-wrap img-thumb-wrap--lg" +
                          (isChanged ? " img-thumb-wrap--changed" : "") +
                          (isCleared ? " img-thumb-wrap--cleared" : "")
                        }>
                          {isLoading && <div className="img-thumb-empty"><div className="img-spinner" /></div>}
                          {isErr && <div className="img-thumb-empty" style={{ background: "#FEE2E2" }}>
                            <Icon name="alertCircle" size={24} style={{ color: "var(--danger)" }} />
                          </div>}
                          {!isLoading && !isErr && displaySrc && <img src={displaySrc} alt={slot.label} />}
                          {!isLoading && !isErr && !displaySrc && <div className="img-thumb-empty">
                            <Icon name="image" size={24} />
                          </div>}
                        </div>
                      </HoverPreview>
                    </div>
                    <div className="img-row__input">
                      <div className="img-input-wrap">
                        <input
                          ref={el => { inputRefs.current[slot.key] = el; }}
                          type="text"
                          className={isErr ? "is-err" : ""}
                          defaultValue={curUrl}
                          placeholder="https://cdn.example.com/img.jpg"
                          onBlur={e => onUrlBlur(slot.key, e.target.value.trim(), oldUrl)}
                        />
                        {isLoading && (
                          <div className="img-input-loading"><div className="img-spinner" /></div>
                        )}
                        {!isLoading && curUrl && (
                          <button
                            className="img-input-clear"
                            title="移除"
                            onMouseDown={e => e.preventDefault()}
                            onClick={() => {
                              if (inputRefs.current[slot.key]) inputRefs.current[slot.key].value = "";
                              onUrlBlur(slot.key, "", oldUrl);
                            }}
                          >
                            <Icon name="close" size={12} />
                          </button>
                        )}
                      </div>
                      <div className={`img-row__status img-row__status${statusCls}`}>
                        {isLoading
                          ? <><div className="img-spinner" /><span>載入中</span></>
                          : statusLabel
                        }
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          {/* 備註 */}
          <InfoNote style={{ marginTop: 14 }}>單筆編輯送出後立即更新商品主檔，無審核流程。若要一次調整多筆品項，請改用「批次調整圖片」。</InfoNote>
    </SlideDrawer>

      {/* 儲存確認（drawer 外層，需蓋過 drawer panel） */}
      <Dialog
        open={showSave}
        title="儲存圖片變更"
        onClose={() => setShowSave(false)}
        maskStyle={{ zIndex: 200 }}
        footer={<>
          <Button variant="text" onClick={() => setShowSave(false)}>再檢查一次</Button>
          <Button variant="primary" onClick={confirmSave}>確認儲存</Button>
        </>}
      >
        <p style={{ font: "400 13px var(--font-sans)", color: "var(--fg-1)", margin: "0 0 8px" }}>
          將更新 <b>{sku.barcode}</b> 共 <b>{changeCount}</b> 張圖片。
        </p>
        <InfoNote variant="warning" style={{ marginTop: 8 }}>
          儲存後立即生效於商品主檔。使用者於 Uber Eats App 將於下次菜單同步後看到新圖。
        </InfoNote>
      </Dialog>
    </>
  );
};

Object.assign(window, { ImageEditDrawer });