/* global React, Icon, Button, Check, DeleteRowBtn, ChangePill, IMG_SLOTS, HoverPreview */
// WSCellThumb + ExpandedFieldRow + WorksheetRow

// ── WSCellThumb ─────────────────────────────────────────────────────────────
const WSCellThumb = ({ slot, oldUrl, draft, status, onClick }) => {
  const hasDraft  = draft !== undefined;
  const isCleared = hasDraft && draft === "";
  const isChanged = hasDraft && draft !== "" && draft !== oldUrl;

  let cls = "img-thumb-wrap img-thumb-wrap--sm";
  if (isChanged) cls += " img-thumb-wrap--changed";
  if (isCleared) cls += " img-thumb-wrap--cleared";

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

  return (
    <HoverPreview src={displaySrc}>
      <div className={cls} style={{ cursor: "pointer" }} onClick={onClick} title={slot.label}>
        {status === "loading" && (
          <div className="img-thumb-empty"><div className="img-spinner" /></div>
        )}
        {status === "err" && (
          <div className="img-thumb-empty" style={{ background: "#FEE2E2" }}>
            <Icon name="alertCircle" size={16} style={{ color: "var(--danger)" }} />
          </div>
        )}
        {status !== "loading" && status !== "err" && displaySrc && (
          <img src={displaySrc} alt={slot.label} loading="lazy" />
        )}
        {status !== "loading" && status !== "err" && !displaySrc && (
          <div className="img-thumb-empty">
            {isCleared ? <Icon name="trash" size={16} /> : <Icon name="image" size={16} />}
          </div>
        )}
      </div>
    </HoverPreview>
  );
};

// ── ExpandedFieldRow ────────────────────────────────────────────────────────
const ExpandedFieldRow = ({ row, sku, onUrlBlur, onRevertSku }) => {
  const changeCount = Object.keys(row.drafts).length;
  const inputRefs = React.useRef({});

  return (
    <div className="ws-panel">
      <div className="ws-panel__head">
        <span className="ws-panel__id">{sku?.barcode ?? row.skuId}</span>
        <span className="ws-panel__sep">·</span>
        <span className="ws-panel__name">{sku?.name ?? "—"}</span>
        {changeCount > 0 && (
          <Button variant="text" size="sm" onClick={onRevertSku}>還原此品項</Button>
        )}
      </div>
      <div className="ws-panel__sub">
        輸入新 URL → 移出欄位後自動載入預覽。送出整批時這些變更才會更新到商品主檔。
      </div>

      {IMG_SLOTS.map(slot => {
        const draft    = row.drafts[slot.key];
        const oldUrl   = sku ? sku[slot.key] : "";
        const hasDraft = draft !== undefined;
        const curUrl   = hasDraft ? draft : (oldUrl || "");
        const status   = row.statuses[slot.key];
        const errMsg   = row.errMsgs[slot.key];

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

        let statusLabel = null;
        let statusCls   = "";
        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"; }
        else                { statusLabel = "未上傳";   statusCls = "--none"; }

        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">
                  {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(row.uid, 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(row.uid, 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>
  );
};

// ── WorksheetRow ────────────────────────────────────────────────────────────
const WorksheetRow = ({
  row, sku, expanded, selected,
  onToggleExpand, onToggleSelect, onRemove, onUrlBlur, onRevertSku,
}) => {
  const changeCount = Object.keys(row.drafts).length;
  const hasErr      = Object.values(row.statuses).some(s => s === "err");


  const TOTAL_COLS = 13;

  return (
    <>
      <tr
        className={"ws-row" + (expanded ? " ws-row--expanded" : "")}
        onClick={e => {
          if (e.target.closest("input, button, .cb, .img-thumb-wrap")) return;
          onToggleExpand();
        }}
        style={{ cursor: "pointer" }}
      >
        <td onClick={e => e.stopPropagation()} style={{ textAlign: "center" }}>
          <Check checked={selected} onChange={onToggleSelect} />
        </td>
        <td>
          <div className="ws-sku-cell">
            <svg
              width="14" height="14" viewBox="0 0 24 24"
              fill="none" stroke="#6B6B6B" strokeWidth="2"
              strokeLinecap="round" strokeLinejoin="round"
              className={"ws-chevron" + (expanded ? " ws-chevron--open" : "")}
            >
              <path d="M9 6l6 6-6 6"/>
            </svg>
            <span style={{ fontFamily: "var(--font-mono)" }}>{sku?.barcode ?? row.skuId}</span>
          </div>
        </td>
        <td>
          {sku
            ? <>
                <div style={{ color: "var(--fg-1)" }}>{sku.name}</div>
                <div style={{ font: "400 11.5px var(--font-mono)", color: "var(--fg-3)", marginTop: 2 }}>
                  {sku.brand} · {sku.mainCat}
                </div>
              </>
            : <span style={{ color: "var(--danger)", font: "400 12px var(--font-sans)" }}>查無品號</span>
          }
        </td>
        <td>
          {sku?.promoType
            ? <span className="promo-tag">{sku.promoType}</span>
            : <span style={{ color: "var(--fg-4)" }}>—</span>
          }
        </td>
        {IMG_SLOTS.map(slot => (
          <td key={slot.key} style={{ padding: "10px 6px", textAlign: "center" }}>
            <WSCellThumb
              slot={slot}
              oldUrl={sku ? sku[slot.key] : ""}
              draft={row.drafts[slot.key]}
              status={row.statuses[slot.key]}
              onClick={onToggleExpand}
            />
          </td>
        ))}
        <td><ChangePill count={changeCount} hasErr={hasErr} /></td>
        <td style={{ textAlign: "center" }} onClick={e => e.stopPropagation()}>
          <DeleteRowBtn onClick={onRemove} />
        </td>
      </tr>
      {expanded && (
        <tr className="ws-panel-row">
          <td colSpan={TOTAL_COLS}>
            <ExpandedFieldRow row={row} sku={sku} onUrlBlur={onUrlBlur} onRevertSku={onRevertSku} />
          </td>
        </tr>
      )}
    </>
  );
};

Object.assign(window, { WSCellThumb, ExpandedFieldRow, WorksheetRow });