/* ============================================================
   AfricaMart — 2D product image enhancer (client-side canvas)
   Real pixel processing: auto-enhance, brightness / contrast /
   saturation / warmth, white-background cleanup, sharpen.
   No external service — runs entirely in the browser.
   ============================================================ */
const ENH_DEFAULTS = { brightness: 100, contrast: 100, saturation: 100, warmth: 0, whiteBg: false, sharpen: false };
const ENH_AUTO = { brightness: 105, contrast: 113, saturation: 116, warmth: 8, whiteBg: true, sharpen: true };
const enhClamp = v => v < 0 ? 0 : v > 255 ? 255 : v;

function enhSharpen(ctx, w, h, amount) {
  const src = ctx.getImageData(0, 0, w, h), out = ctx.createImageData(w, h);
  const sd = src.data, od = out.data, k = [0, -1, 0, -1, 5, -1, 0, -1, 0];
  for (let y = 0; y < h; y++) for (let x = 0; x < w; x++) {
    let r = 0, g = 0, b = 0, ki = 0;
    for (let dy = -1; dy <= 1; dy++) for (let dx = -1; dx <= 1; dx++) {
      const px = Math.min(w - 1, Math.max(0, x + dx)), py = Math.min(h - 1, Math.max(0, y + dy));
      const o = (py * w + px) * 4, kv = k[ki++];
      r += sd[o] * kv; g += sd[o + 1] * kv; b += sd[o + 2] * kv;
    }
    const o = (y * w + x) * 4;
    od[o] = enhClamp(sd[o] + (r - sd[o]) * amount);
    od[o + 1] = enhClamp(sd[o + 1] + (g - sd[o + 1]) * amount);
    od[o + 2] = enhClamp(sd[o + 2] + (b - sd[o + 2]) * amount);
    od[o + 3] = sd[o + 3];
  }
  ctx.putImageData(out, 0, 0);
}

function enhRender(canvas, img, s) {
  if (!canvas || !img) return;
  const maxW = 680;
  const scale = Math.min(1, maxW / img.naturalWidth);
  const w = Math.max(1, Math.round(img.naturalWidth * scale));
  const h = Math.max(1, Math.round(img.naturalHeight * scale));
  canvas.width = w; canvas.height = h;
  const ctx = canvas.getContext("2d");
  ctx.filter = `brightness(${s.brightness}%) contrast(${s.contrast}%) saturate(${s.saturation}%)`;
  ctx.drawImage(img, 0, 0, w, h);
  ctx.filter = "none";
  if (s.warmth !== 0 || s.whiteBg) {
    const id = ctx.getImageData(0, 0, w, h), d = id.data;
    for (let i = 0; i < d.length; i += 4) {
      if (s.warmth) { d[i] = enhClamp(d[i] + s.warmth); d[i + 2] = enhClamp(d[i + 2] - s.warmth); }
      if (s.whiteBg) {
        const lum = 0.299 * d[i] + 0.587 * d[i + 1] + 0.114 * d[i + 2];
        if (lum > 234) { d[i] = 255; d[i + 1] = 255; d[i + 2] = 255; }
        else if (lum > 200) {
          const t = (lum - 200) / 34;
          d[i] = enhClamp(d[i] + (255 - d[i]) * t);
          d[i + 1] = enhClamp(d[i + 1] + (255 - d[i + 1]) * t);
          d[i + 2] = enhClamp(d[i + 2] + (255 - d[i + 2]) * t);
        }
      }
    }
    ctx.putImageData(id, 0, 0);
  }
  if (s.sharpen) enhSharpen(ctx, w, h, 0.6);
}

function ImageEnhancer({ onApply }) {
  const fileRef = useRef(null);
  const canvasRef = useRef(null);
  const imgRef = useRef(null);
  const [loaded, setLoaded] = useState(false);
  const [compare, setCompare] = useState(false);
  const [applied, setApplied] = useState(false);
  const [s, setS] = useState({ ...ENH_DEFAULTS });
  const set = (k, v) => { setS(prev => ({ ...prev, [k]: v })); setApplied(false); };

  useEffect(() => { if (loaded) enhRender(canvasRef.current, imgRef.current, compare ? ENH_DEFAULTS : s); }, [s, loaded, compare]);

  const onFile = e => {
    const file = e.target.files && e.target.files[0];
    if (!file) return;
    const img = new Image();
    img.onload = () => { imgRef.current = img; setS({ ...ENH_DEFAULTS }); setApplied(false); setLoaded(true); };
    img.src = URL.createObjectURL(file);
  };
  const apply = () => {
    const canvas = canvasRef.current; if (!canvas) return;
    setApplied(true);
    onApply && onApply(canvas.toDataURL("image/jpeg", 0.92));
  };

  const dirty = JSON.stringify(s) !== JSON.stringify(ENH_DEFAULTS);

  return (
    <div>
      <label className="field-label">Product image — enhancer</label>
      <input ref={fileRef} type="file" accept="image/*" onChange={onFile} style={{ display: "none" }} />

      {!loaded ? (
        <div onClick={() => fileRef.current.click()} style={{ border: "1.5px dashed var(--border-strong)", borderRadius: 10, padding: 24, textAlign: "center", background: "#fff", cursor: "pointer" }}
          onMouseEnter={e => e.currentTarget.style.borderColor = "var(--gold-500)"} onMouseLeave={e => e.currentTarget.style.borderColor = "var(--border-strong)"}>
          <Icon name="image-plus" size={26} style={{ color: "var(--ink-400)" }} />
          <div style={{ fontSize: 13.5, fontWeight: 600, marginTop: 8 }}>Upload a product photo to enhance</div>
          <div className="muted" style={{ fontSize: 11.5, marginTop: 2 }}>JPG / PNG · auto-enhance, lighting & clean white background</div>
        </div>
      ) : (
        <div style={{ border: "1px solid var(--border)", borderRadius: 12, overflow: "hidden", background: "#fff" }}>
          {/* preview */}
          <div style={{ position: "relative", background: "repeating-conic-gradient(#f3efe9 0% 25%, #fff 0% 50%) 50% / 18px 18px", display: "flex", alignItems: "center", justifyContent: "center", padding: 12 }}>
            <canvas ref={canvasRef} style={{ maxWidth: "100%", maxHeight: 260, borderRadius: 6, boxShadow: "var(--sh-sm)", display: "block" }} />
            {compare && <span className="badge badge-gray" style={{ position: "absolute", top: 10, left: 10 }}>Original</span>}
            <button type="button" onMouseDown={() => setCompare(true)} onMouseUp={() => setCompare(false)} onMouseLeave={() => setCompare(false)}
              className="btn btn-ghost btn-sm" style={{ position: "absolute", top: 8, right: 8, background: "rgba(255,255,255,.9)" }} title="Hold to see original">
              <Icon name="eye" size={14} /> Compare
            </button>
          </div>

          {/* controls */}
          <div style={{ padding: 14, borderTop: "1px solid var(--border)", display: "flex", flexDirection: "column", gap: 12 }}>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
              <button type="button" onClick={() => { setS({ ...ENH_AUTO }); setApplied(false); }} className="btn btn-navy btn-sm"><Icon name="wand-sparkles" size={14} /> Auto-enhance</button>
              <button type="button" onClick={() => { setS({ ...ENH_DEFAULTS }); setApplied(false); }} className="btn btn-ghost btn-sm" disabled={!dirty}><Icon name="rotate-ccw" size={14} /> Reset</button>
              <button type="button" onClick={() => fileRef.current.click()} className="btn btn-ghost btn-sm"><Icon name="repeat" size={14} /> Replace</button>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "10px 18px" }}>
              <EnhSlider label="Brightness" min={70} max={140} value={s.brightness} onChange={v => set("brightness", v)} />
              <EnhSlider label="Contrast" min={70} max={150} value={s.contrast} onChange={v => set("contrast", v)} />
              <EnhSlider label="Saturation" min={0} max={180} value={s.saturation} onChange={v => set("saturation", v)} />
              <EnhSlider label="Warmth" min={-30} max={30} value={s.warmth} onChange={v => set("warmth", v)} />
            </div>
            <div style={{ display: "flex", gap: 16, flexWrap: "wrap" }}>
              <EnhToggle label="Clean white background" checked={s.whiteBg} onChange={v => set("whiteBg", v)} />
              <EnhToggle label="Sharpen" checked={s.sharpen} onChange={v => set("sharpen", v)} />
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <button type="button" onClick={apply} className="btn btn-gold btn-sm">
                <Icon name={applied ? "check" : "download"} size={14} /> {applied ? "Image added" : "Apply to listing"}
              </button>
              {applied && <span className="muted" style={{ fontSize: 12.5, display: "inline-flex", alignItems: "center", gap: 5 }}><Icon name="check-circle-2" size={14} style={{ color: "var(--green-600)" }} /> Enhanced image set as your product photo</span>}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function EnhSlider({ label, min, max, value, onChange }) {
  return (
    <label style={{ display: "block" }}>
      <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, marginBottom: 3 }}>
        <span style={{ color: "var(--ink-600)", fontWeight: 600 }}>{label}</span>
        <span className="muted">{value}</span>
      </div>
      <input type="range" min={min} max={max} value={value} onChange={e => onChange(+e.target.value)} style={{ width: "100%", accentColor: "var(--gold-600)" }} />
    </label>
  );
}

function EnhToggle({ label, checked, onChange }) {
  return (
    <label style={{ display: "inline-flex", alignItems: "center", gap: 8, cursor: "pointer", fontSize: 13, fontWeight: 500 }}>
      <input type="checkbox" checked={checked} onChange={e => onChange(e.target.checked)} style={{ width: 15, height: 15, accentColor: "var(--navy-700)" }} />
      {label}
    </label>
  );
}

Object.assign(window, { ImageEnhancer, EnhSlider, EnhToggle, enhRender, ENH_DEFAULTS, ENH_AUTO });