/* ============================================================
   LF CONCEITO — Upload via Edge Function (seguro)
   A chave secreta fica no servidor — nunca exposta no browser
   ============================================================ */

const EDGE_URL = "https://gwbiccrzoeppvfzpaqji.supabase.co/functions/v1/upload-image";
const ANON_KEY = window._ANON_KEY; // definida no index.html — sem duplicata

// Comprime imagem no browser antes do upload
// Reduz fotos de celular de 4-8MB para ~200-400KB sem perda visual perceptível
async function compressImage(file, { maxWidth = 800, quality = 0.75 } = {}) {
  return new Promise((resolve) => {
    const img = new Image();
    const url = URL.createObjectURL(file);
    img.onload = () => {
      URL.revokeObjectURL(url);
      // Calcular dimensões mantendo proporção
      let { width, height } = img;
      if (width > maxWidth) {
        height = Math.round(height * maxWidth / width);
        width = maxWidth;
      }
      const canvas = document.createElement("canvas");
      canvas.width = width;
      canvas.height = height;
      const ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0, width, height);
      canvas.toBlob(
        (blob) => resolve(blob || file), // fallback para o original se falhar
        "image/jpeg",
        quality
      );
    };
    img.onerror = () => { URL.revokeObjectURL(url); resolve(file); }; // fallback
    img.src = url;
  });
}

async function uploadImage(file) {
  if (file.size > 15 * 1024 * 1024) {
    throw new Error("Imagem muito grande. Máximo 15MB.");
  }

  // Comprimir antes de enviar — só para imagens (não SVG/GIF)
  let fileToUpload = file;
  if (file.type.startsWith("image/") && file.type !== "image/gif" && file.type !== "image/svg+xml") {
    try {
      const compressed = await compressImage(file);
      // Só usa comprimido se ficou menor
      if (compressed.size < file.size) {
        fileToUpload = new File([compressed], file.name.replace(/\.[^.]+$/, ".jpg"), { type: "image/jpeg" });
      }
    } catch(e) {} // fallback para original
  }

  // Usar token da sessão atual se disponível, fallback para anon key
  let authToken = ANON_KEY;
  try {
    const { data: { session } } = await window._sb.auth.getSession();
    if (session?.access_token) authToken = session.access_token;
  } catch(e) {}

  const res = await fetch(EDGE_URL, {
    method: "POST",
    headers: {
      "Authorization": `Bearer ${authToken}`,
      "apikey": ANON_KEY,
      "x-file-name": fileToUpload.name,
      "x-file-type": fileToUpload.type,
      "Content-Type": fileToUpload.type,
    },
    body: fileToUpload,
  });

  if (!res.ok) {
    const err = await res.json().catch(() => ({ error: "Erro no upload" }));
    throw new Error(err.error || "Erro no upload. Status: " + res.status);
  }

  const data = await res.json();
  return data.url;
}
/* ---------- Componente: múltiplas fotos ---------- */
// value: lista de objetos { url, color, sizes }. Aceita formato antigo (array de strings) por compatibilidade.
function MultiImageUploader({ value = [], onChange, max = 5, allSizes = [] }) {
  const [uploading, setUploading] = useState(false);
  const [error, setError]         = useState("");
  const inputRef = useRef(null);

  // Normaliza formato antigo (string) para o novo ({url, color, sizes})
  const items = value.map(v => typeof v === "string" ? { url: v, color: "", sizes: [] } : { sizes: [], ...v });

  async function handleFiles(e) {
    const files = Array.from(e.target.files || []);
    if (!files.length) return;
    const toUpload = files.slice(0, max - items.length);
    setError("");
    setUploading(true);
    try {
      const urls = await Promise.all(toUpload.map(f => uploadImage(f)));
      onChange([...items, ...urls.map(url => ({ url, color: "", sizes: [] }))]);
    } catch (err) {
      setError(err.message || "Erro no upload. Tente novamente.");
    } finally {
      setUploading(false);
    }
  }

  function removeAt(i) { onChange(items.filter((_, idx) => idx !== i)); }

  function moveLeft(i) {
    if (i === 0) return;
    const arr = [...items];
    [arr[i-1], arr[i]] = [arr[i], arr[i-1]];
    onChange(arr);
  }

  function setColorAt(i, color) {
    const arr = [...items];
    arr[i] = { ...arr[i], color };
    onChange(arr);
  }

  function toggleSizeAt(i, sz) {
    const arr = [...items];
    const cur = arr[i].sizes || [];
    arr[i] = { ...arr[i], sizes: cur.includes(sz) ? cur.filter(s=>s!==sz) : [...cur, sz] };
    onChange(arr);
  }

  function toggleSoldOutAt(i) {
    const arr = [...items];
    arr[i] = { ...arr[i], soldOut: !arr[i].soldOut };
    onChange(arr);
  }

  return (
    <div className="multi-uploader">
      <label className="ff-label">
        Fotos do produto <span className="cell-dim">({items.length}/{max})</span>
      </label>
      <div className="multi-grid">
        {items.map((it, i) => (
          <div key={it.url + i} className={"multi-item" + (i === 0 ? " main" : "")}>
            <img src={it.url} alt={`Foto ${i+1}`} />
            {i === 0 && <span className="multi-main-badge">Principal</span>}
            <div className="multi-item-actions">
              {i > 0 && (
                <button type="button" title="Mover para principal"
                  onClick={() => moveLeft(i)}>⭐</button>
              )}
              <button type="button" title="Remover"
                onClick={() => removeAt(i)}>✕</button>
            </div>
            <input className="multi-item-color" type="text" placeholder="Cor desta foto"
              value={it.color||""} onChange={e=>setColorAt(i, e.target.value)}/>
            {allSizes.length>0 && (
              <div className="multi-item-sizes">
                {allSizes.map(sz=>
                  <button key={sz} type="button"
                    className={"multi-size-chip"+((it.sizes||[]).includes(sz)?" on":"")}
                    onClick={()=>toggleSizeAt(i, sz)}>{sz}</button>)}
              </div>
            )}
            <button type="button" className={"multi-soldout-toggle"+(it.soldOut?" on":"")}
              onClick={()=>toggleSoldOutAt(i)}>{it.soldOut?"✕ Esgotado":"Marcar como esgotado"}</button>
          </div>
        ))}
        {items.length < max && (
          <div
            className={"multi-add" + (uploading ? " uploading" : "")}
            onClick={() => !uploading && inputRef.current?.click()}
          >
            {uploading
              ? <div className="img-spinner"></div>
              : <><div style={{fontSize:28}}>+</div><span>Adicionar foto</span></>
            }
          </div>
        )}
      </div>
      <p className="cell-dim" style={{fontSize:12,marginTop:6}}>Preencha a cor de cada foto e marque os tamanhos disponíveis para aquela cor.</p>
      <input
        ref={inputRef}
        type="file"
        accept="image/jpeg,image/png,image/webp,image/gif"
        multiple
        onChange={handleFiles}
        style={{ display: "none" }}
      />
      {error && <div className="img-error">{error}</div>}
    </div>
  );
}

Object.assign(window, { MultiImageUploader, uploadImage });