/* global React */
// Shared primitives + cross-file state for DAVA'S prototype.

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

/* ─────────────────────────── PLACEHOLDER ──────────────────────────── */
function Placeholder({ label, ratio = "4/5", tone = "bone", corner, ring, fill = false, style, children }) {
  const cls = `ph ${tone}${fill ? " fill" : ""}`;
  const aspect = fill ? undefined : ratio;

  // Si label apunta a una foto real de producto, intenta mostrar la imagen
  // Acepta "assets/productos/XX.jpg", "/assets/productos/XX.jpg", o cualquier ruta absoluta a una imagen
  // PERO ignora el PLACEHOLDER genérico (que no existe en disco) para evitar 404s
  const looksLikePhoto = label && typeof label === "string" &&
    /assets\/productos\/[A-Za-z0-9_-]+\.(jpg|jpeg|png|webp)/i.test(label) &&
    !/PLACEHOLDER/i.test(label);

  const [imgFailed, setImgFailed] = useState(false);

  if (looksLikePhoto && !imgFailed) {
    // Normaliza la ruta: quita el "/" inicial si lo tiene para que sea relativa
    const src = label.replace(/^\//, "");
    return (
      <div className={cls} style={{ aspectRatio: aspect, position: "relative", ...style, overflow: "hidden" }}>
        <img
          src={src}
          alt={corner || ""}
          onError={() => setImgFailed(true)}
          style={{
            position: fill ? "absolute" : "relative",
            inset: fill ? 0 : "auto",
            width: "100%",
            height: "100%",
            objectFit: "contain",
            padding: "2%",
            display: "block",
            background: "var(--bone, #F5F0E6)"
          }}
        />
        {corner ? <div className="corner" style={{ position: "absolute", zIndex: 2 }}>{corner}</div> : null}
        {children}
      </div>
    );
  }

  // Fallback: placeholder original (cuadros decorativos para fotos del taller, hero, etc.)
  return (
    <div className={cls} style={{ aspectRatio: aspect, ...style }}>
      {label ? <div className="label">{label}</div> : null}
      {ring ? <div className="ring">{ring}</div> : null}
      {corner ? <div className="corner">{corner}</div> : null}
      {children}
    </div>
  );
}

/* ─────────────────────────── EYEBROW ──────────────────────────── */
function Eyebrow({ children, onDark = false, accent = "var(--accent)" }) {
  return (
    <div className={`eyebrow ${onDark ? "on-dark" : ""}`}>
      <span className="dot" style={{ background: accent }} />
      {children}
    </div>
  );
}

/* ─────────────────────────── HEART ICON ──────────────────────────── */
function HeartIcon({ filled = false, size = 14, stroke = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={filled ? stroke : "none"} stroke={stroke} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
    </svg>
  );
}

/* ─────────────────────────── ARROW ──────────────────────────── */
function Arr({ size = 12 }) {
  return (
    <svg className="arr" width={size} height={size} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6" aria-hidden="true">
      <path d="M3 8h10M9 4l4 4-4 4" />
    </svg>
  );
}

/* ─────────────────────────── SCROLL REVEAL HOOK ──────────────────────────── */
function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el || typeof IntersectionObserver === "undefined") return;
    if (!el.classList.contains("reveal")) el.classList.add("reveal");
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("is-in");
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12, rootMargin: "0px 0px -40px 0px" }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return ref;
}

function Reveal({ as: Tag = "div", className = "", delay = 0, children, ...rest }) {
  const ref = useReveal();
  return (
    <Tag ref={ref} className={`reveal ${delay ? `delay-${delay}` : ""} ${className}`} {...rest}>
      {children}
    </Tag>
  );
}

/* ─────────────────────────── WISHLIST STORE (window-shared) ──────────────────────────── */
const WL_KEY = "davas.wishlist.v1";

const wlStore = (() => {
  const listeners = new Set();
  let state = [];
  try {
    const raw = localStorage.getItem(WL_KEY);
    if (raw) state = JSON.parse(raw);
  } catch {}
  const persist = () => { try { localStorage.setItem(WL_KEY, JSON.stringify(state)); } catch {} };
  return {
    getSnapshot: () => state,
    subscribe: (fn) => { listeners.add(fn); return () => listeners.delete(fn); },
    add: (p) => { if (!state.find((x) => x.id === p.id)) { state = [...state, p]; persist(); listeners.forEach((l) => l()); } },
    remove: (id) => { state = state.filter((x) => x.id !== id); persist(); listeners.forEach((l) => l()); },
    toggle: (p) => { const has = state.find((x) => x.id === p.id); if (has) { state = state.filter((x) => x.id !== p.id); } else { state = [...state, p]; } persist(); listeners.forEach((l) => l()); },
    has: (id) => !!state.find((x) => x.id === id),
    clear: () => { state = []; persist(); listeners.forEach((l) => l()); },
  };
})();

function useWishlist() {
  const items = useSyncExternalStore(wlStore.subscribe, wlStore.getSnapshot, wlStore.getSnapshot);
  return {
    items,
    count: items.length,
    add: wlStore.add,
    remove: wlStore.remove,
    toggle: wlStore.toggle,
    has: (id) => !!items.find((x) => x.id === id),
    clear: wlStore.clear,
  };
}

/* ─────────────────────────── UI STORE (drawers, modals) ──────────────────────────── */
const uiStore = (() => {
  const listeners = new Set();
  let state = { wlOpen: false, modal: null };
  return {
    getSnapshot: () => state,
    subscribe: (fn) => { listeners.add(fn); return () => listeners.delete(fn); },
    set: (patch) => { state = { ...state, ...patch }; listeners.forEach((l) => l()); },
  };
})();

function useUI() {
  const s = useSyncExternalStore(uiStore.subscribe, uiStore.getSnapshot, uiStore.getSnapshot);
  return {
    ...s,
    openWl: () => uiStore.set({ wlOpen: true }),
    closeWl: () => uiStore.set({ wlOpen: false }),
    openModal: (p) => uiStore.set({ modal: p }),
    closeModal: () => uiStore.set({ modal: null }),
  };
}

/* ─────────────────────────── WHATSAPP HELPER ──────────────────────────── */
function waLink(text) {
  return `https://wa.me/573005260637?text=${encodeURIComponent(text)}`;
}
function waMessageForWishlist(items) {
  if (!items.length) return "Hola DAVA'S, quiero ver opciones.";
  const lines = items.map((p, i) => `${i + 1}. ${p.model || p.name}${p.pattern ? ` · patrón ${p.pattern}` : ""}${p.price ? ` · $${p.price}` : ""}`).join("\n");
  return `Hola DAVA'S, quiero pedir estas piezas:\n\n${lines}\n\n¿Me confirman disponibilidad y tiempos?`;
}

Object.assign(window, {
  Placeholder, Eyebrow, HeartIcon, Arr,
  useReveal, Reveal,
  useWishlist, wlStore,
  useUI, uiStore,
  waLink, waMessageForWishlist,
});