/* shared.jsx — contexts + reusable presentational components.
   Loads first: exports React hooks to window so every other Babel
   script can use bare useState/useEffect/etc without re-destructuring. */

const { useState, useEffect, useMemo, useRef, useCallback, useContext } = React;
Object.assign(window, { useState, useEffect, useMemo, useRef, useCallback, useContext });

const AppCtx = React.createContext(null);
const useApp = () => React.useContext(AppCtx);

/* ---------- placeholder / photo renderer ----------
   Coins render as a struck medallion, notes as a framed bill.
   Tones map to metal/paper palettes. Real uploaded photos render directly. */
const TONES = {
  gold:   { a: "#e9cf8e", b: "#b9923f", c: "#7d5e1f", ink: "#5c4413" },
  silver: { a: "#e7ebef", b: "#aab4bd", c: "#7c878f", ink: "#4f585e" },
  copper: { a: "#e3b48c", b: "#bd7b4c", c: "#8a5128", ink: "#5e3318" },
  bronze: { a: "#d9b487", b: "#a9793f", c: "#79511f", ink: "#523713" },
  paper:  { a: "#f3ece0", b: "#e3d6bf", c: "#cbb893", ink: "#7c6c49" },
};

function Placeholder({ img, ratio = "1", rounded }) {
  if (img && img.type === "photo") {
    return (
      <div className="ph-wrap" style={{ aspectRatio: ratio }}>
        <img src={img.src} alt="" className="ph-photo" />
      </div>
    );
  }
  const tone = TONES[(img && img.tone) || "gold"] || TONES.gold;
  const label = (img && img.label) || "image";
  const isNote = img && (img.shape === "note");
  const gid = "g_" + Math.random().toString(36).slice(2, 7);

  return (
    <div className="ph-wrap" style={{ aspectRatio: ratio }}>
      <svg viewBox="0 0 400 400" className="ph-svg" preserveAspectRatio="xMidYMid slice" role="img" aria-label={label}>
        <defs>
          <radialGradient id={gid} cx="38%" cy="32%" r="78%">
            <stop offset="0%" stopColor={tone.a} />
            <stop offset="55%" stopColor={tone.b} />
            <stop offset="100%" stopColor={tone.c} />
          </radialGradient>
          <pattern id={gid + "p"} width="9" height="9" patternTransform="rotate(45)" patternUnits="userSpaceOnUse">
            <line x1="0" y1="0" x2="0" y2="9" stroke={tone.ink} strokeOpacity="0.08" strokeWidth="1" />
          </pattern>
        </defs>
        <rect x="0" y="0" width="400" height="400" fill={tone.a} fillOpacity="0.35" />
        {isNote ? (
          <g>
            <rect x="34" y="96" width="332" height="208" rx="8" fill={`url(#${gid})`} />
            <rect x="34" y="96" width="332" height="208" rx="8" fill={`url(#${gid}p)`} />
            <rect x="48" y="110" width="304" height="180" rx="5" fill="none" stroke={tone.ink} strokeOpacity="0.5" strokeWidth="1.5" />
            <ellipse cx="296" cy="200" rx="40" ry="52" fill="none" stroke={tone.ink} strokeOpacity="0.45" strokeWidth="1.5" />
            <circle cx="296" cy="200" r="6" fill={tone.ink} fillOpacity="0.4" />
            <line x1="70" y1="170" x2="210" y2="170" stroke={tone.ink} strokeOpacity="0.35" strokeWidth="3" />
            <line x1="70" y1="200" x2="180" y2="200" stroke={tone.ink} strokeOpacity="0.25" strokeWidth="2" />
            <line x1="70" y1="222" x2="160" y2="222" stroke={tone.ink} strokeOpacity="0.25" strokeWidth="2" />
          </g>
        ) : (
          <g>
            <circle cx="200" cy="200" r="150" fill={`url(#${gid})`} />
            <circle cx="200" cy="200" r="150" fill={`url(#${gid}p)`} />
            <circle cx="200" cy="200" r="150" fill="none" stroke={tone.ink} strokeOpacity="0.35" strokeWidth="2" />
            <circle cx="200" cy="200" r="124" fill="none" stroke={tone.ink} strokeOpacity="0.45" strokeWidth="3" strokeDasharray="2 6" />
            <circle cx="200" cy="200" r="96" fill="none" stroke={tone.ink} strokeOpacity="0.4" strokeWidth="1.5" />
            <path d="M200 132 L222 196 L200 268 L178 196 Z" fill={tone.ink} fillOpacity="0.28" />
            <circle cx="200" cy="200" r="14" fill={tone.ink} fillOpacity="0.35" />
          </g>
        )}
      </svg>
      <span className="ph-tag">{label}</span>
    </div>
  );
}

/* ---------- buttons ---------- */
function Btn({ children, variant = "solid", size, className = "", ...rest }) {
  return (
    <button className={`btn btn-${variant} ${size ? "btn-" + size : ""} ${className}`} {...rest}>
      {children}
    </button>
  );
}

/* ---------- status badge ---------- */
const STATUS_TONE = {
  pending_payment: "warn",
  awaiting_approval: "info",
  paid: "good",
  shipped: "accent",
  completed: "muted",
  rejected: "bad",
};
function StatusBadge({ status, lang }) {
  const label = I18N.t("st_" + status, lang);
  return <span className={`status status-${STATUS_TONE[status] || "muted"}`}>{label}</span>;
}

/* ---------- small labelled field ---------- */
function Field({ label, children }) {
  return (
    <label className="field">
      <span className="field-label">{label}</span>
      {children}
    </label>
  );
}

/* ---------- section heading with rule ---------- */
function Kicker({ children }) {
  return <div className="kicker">{children}</div>;
}

Object.assign(window, { AppCtx, useApp, Placeholder, Btn, StatusBadge, Field, Kicker, TONES });