// components/shared.jsx — illustrated panels, reveal, tweaks

/* Abstract decorative SVGs — evoke cloth, carrying, holding without literal photography */
function ArtCloth({ stroke = "currentColor" }) {
  return (
    <svg className="ph-art" viewBox="0 0 400 400" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
      <g fill="none" stroke={stroke} strokeWidth="1.5" strokeLinecap="round" opacity="0.55">
        <path d="M-20 120 Q 100 60 200 130 T 420 110" />
        <path d="M-20 160 Q 100 100 200 170 T 420 150" />
        <path d="M-20 200 Q 100 140 200 210 T 420 190" />
        <path d="M-20 240 Q 100 180 200 250 T 420 230" />
        <path d="M-20 280 Q 100 220 200 290 T 420 270" />
        <path d="M-20 320 Q 100 260 200 330 T 420 310" />
      </g>
    </svg>);
}

function ArtArch({ stroke = "currentColor", fill = "none" }) {
  return (
    <svg className="ph-art" viewBox="0 0 400 400" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
      <g stroke={stroke} strokeWidth="1.5" fill={fill} opacity="0.6">
        <path d="M120 360 L120 200 Q120 120 200 120 Q280 120 280 200 L280 360" />
        <line x1="120" y1="360" x2="280" y2="360" />
      </g>
      <circle cx="200" cy="80" r="22" fill={stroke} opacity="0.4" />
    </svg>);
}

function ArtConcentric({ stroke = "currentColor" }) {
  return (
    <svg className="ph-art" viewBox="0 0 400 400" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
      <g fill="none" stroke={stroke} strokeWidth="1.4" opacity="0.5">
        <circle cx="200" cy="220" r="40" />
        <circle cx="200" cy="220" r="80" />
        <circle cx="200" cy="220" r="120" />
        <circle cx="200" cy="220" r="160" />
        <circle cx="200" cy="220" r="200" />
      </g>
    </svg>);
}

function ArtKnot({ stroke = "currentColor" }) {
  return (
    <svg className="ph-art" viewBox="0 0 400 400" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
      <g fill="none" stroke={stroke} strokeWidth="2" strokeLinecap="round" opacity="0.55">
        <path d="M80 140 Q 200 60 320 140 Q 380 200 320 260 Q 200 340 80 260 Q 20 200 80 140 Z" />
        <path d="M120 200 Q 200 130 280 200 Q 200 270 120 200 Z" />
      </g>
    </svg>);
}

function ArtSun({ stroke = "currentColor" }) {
  return (
    <svg className="ph-art" viewBox="0 0 400 400" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
      <g fill="none" stroke={stroke} strokeWidth="1.5" opacity="0.5">
        <circle cx="200" cy="220" r="60" />
        {Array.from({ length: 16 }).map((_, i) => {
          const a = (i / 16) * Math.PI * 2;
          const x1 = 200 + Math.cos(a) * 80;
          const y1 = 220 + Math.sin(a) * 80;
          const x2 = 200 + Math.cos(a) * 130;
          const y2 = 220 + Math.sin(a) * 130;
          return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} />;
        })}
      </g>
    </svg>);
}

const ART_MAP = { cloth: ArtCloth, arch: ArtArch, concentric: ArtConcentric, knot: ArtKnot, sun: ArtSun };

function Ph({ variant = "cream", art = "cloth", mono, monoStyle = "fill", label, tag, style, className = "", children, hideArt = false }) {
  const ArtComp = ART_MAP[art] || ArtCloth;
  const isCorner = monoStyle === "corner";
  return (
    <div className={`ph v-${variant} ${className}`} style={style}>
      {!hideArt && <ArtComp stroke="var(--ph-accent)" />}
      {tag && <div className="ph-tag">{tag}</div>}
      {mono && !isCorner && <div className="ph-mono">{mono}</div>}
      {mono && isCorner && (
        <div className="ph-mono-corner">
          <span className="ph-mono-prefix">№</span>
          <span className="ph-mono-num">{mono}</span>
        </div>
      )}
      {children}
      {label && <div className="ph-label"><span>{label}</span></div>}
    </div>);
}

function Reveal({ children, delay = 0, as: Tag = "div", className = "", ...rest }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          setTimeout(() => el.classList.add("in"), delay);
          obs.unobserve(el);
        }
      });
    }, { threshold: 0.12 });
    obs.observe(el);
    return () => obs.disconnect();
  }, [delay]);
  return <Tag ref={ref} className={`reveal ${className}`} {...rest}>{children}</Tag>;
}

function TweaksPanel({ tweaks, setTweak }) {
  const [on, setOn] = React.useState(false);
  React.useEffect(() => {
    const handler = (e) => {
      if (e.data?.type === "__activate_edit_mode") setOn(true);
      if (e.data?.type === "__deactivate_edit_mode") setOn(false);
    };
    window.addEventListener("message", handler);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", handler);
  }, []);

  return (
    <div className={`tweaks-panel ${on ? "on" : ""}`}>
      <h4>Tweaks</h4>
      <div className="tweaks-row">
        <label>Palette</label>
        <select value={tweaks.palette} onChange={(e) => setTweak("palette", e.target.value)}>
          <option value="default">Walnut &amp; Moss (default)</option>
          <option value="clay">Clay &amp; Moss</option>
          <option value="moss">Deep Forest</option>
        </select>
      </div>
      <div className="tweaks-row">
        <label>Title style</label>
        <select value={tweaks.titleStyle} onChange={(e) => setTweak("titleStyle", e.target.value)}>
          <option value="editorial">Editorial cover</option>
          <option value="stamp">Stamped + giant italic</option>
        </select>
      </div>
      <div className="tweaks-row">
        <label>Promise section</label>
        <select value={tweaks.values} onChange={(e) => setTweak("values", e.target.value)}>
          <option value="manifesto">Editorial manifesto</option>
          <option value="contrast">A/B contrast list</option>
          <option value="marquee">Marquee of welcomes</option>
          <option value="qa">Q&amp;A</option>
          <option value="ledger">Hand-written ledger</option>
          <option value="grid">Original 4-column grid</option>
        </select>
      </div>
      <div className="tweaks-row">
        <label>Display font</label>
        <select value={tweaks.font} onChange={(e) => setTweak("font", e.target.value)}>
          <option value="fraunces">Fraunces (warm serif)</option>
          <option value="dmserif">DM Serif Display</option>
          <option value="playfair">Playfair Display</option>
        </select>
      </div>
      <div className="tweaks-row">
        <label>Newsletter color</label>
        <select value={tweaks.newsletter} onChange={(e) => setTweak("newsletter", e.target.value)}>
          <option value="walnut">Walnut (warm brown)</option>
          <option value="moss">Moss (sage green)</option>
          <option value="ink">Ink (deep cocoa)</option>
          <option value="oat">Oat (peachy cream)</option>
          <option value="cream">Cream (paper card)</option>
          <option value="clay">Clay (original orange)</option>
        </select>
      </div>
      <div className="tweaks-row">
        <label>Newsletter title</label>
        <select value={tweaks.nlTitle} onChange={(e) => setTweak("nlTitle", e.target.value)}>
          <option value="rug">Notes from the rug.</option>
          <option value="shop">Letters from the shop.</option>
          <option value="tea">Things I'd tell you over tea or cocoa.</option>
          <option value="slow">Slow notes, soft news.</option>
          <option value="monthly">A little something monthly.</option>
          <option value="inbox">From my rug to your inbox.</option>
          <option value="small">Small things, sent gently.</option>
          <option value="wins">Tea, notes, and small wins.</option>
        </select>
      </div>
      <div className="tweaks-row">
        <label>Washi tape color</label>
        <select value={tweaks.tape} onChange={(e) => setTweak("tape", e.target.value)}>
          <option value="oat">Oat (peachy cream)</option>
          <option value="marigold">Marigold (yellow-gold)</option>
          <option value="sage">Sage (soft green)</option>
          <option value="peach">Peach (warm pink)</option>
          <option value="clay">Clay (terracotta)</option>
          <option value="cream">Cream (off-white)</option>
        </select>
      </div>
    </div>);
}

function useTweaks() {
  const DEFAULTS = {
    palette: "default",
    font: "fraunces",
    values: "ledger",
    newsletter: "walnut",
    nlTitle: "tea",
    tape: "oat",
    titleStyle: "editorial"
  };
  const [tweaks, setTweaks] = React.useState(DEFAULTS);

  React.useEffect(() => {
    document.body.classList.remove("palette-clay", "palette-moss");
    if (tweaks.palette !== "default") document.body.classList.add(`palette-${tweaks.palette}`);

    const fontMap = {
      fraunces: '"Fraunces", Georgia, serif',
      dmserif: '"DM Serif Display", Georgia, serif',
      playfair: '"Playfair Display", Georgia, serif'
    };
    document.documentElement.style.setProperty("--serif", fontMap[tweaks.font] || fontMap.fraunces);

    document.body.dataset.newsletter = tweaks.newsletter || "walnut";
    document.body.dataset.tape = tweaks.tape || "oat";
  }, [tweaks]);

  const setTweak = (k, v) => {
    setTweaks((t) => {
      const next = { ...t, [k]: v };
      window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { [k]: v } }, "*");
      return next;
    });
  };

  return [tweaks, setTweak];
}

window.Ph = Ph;
window.Reveal = Reveal;
window.TweaksPanel = TweaksPanel;
window.useTweaks = useTweaks;