/* Placeholder imagery for The Handify.
   We never fake real artwork — instead a tinted, hatched block with a mono caption.
   Exposes ArtImage and Portrait on window. */

// Resolve current palette accent/ink-awareness from CSS vars at render time is
// overkill; placeholders tint themselves from an hsl hue passed in.
function hueToTones(hue, dark) {
  // gallery-soft tints; keep saturation low so it reads as "placeholder, not art"
  if (dark) {
    return {
      base: `hsl(${hue} 22% 16%)`,
      hatch: `hsl(${hue} 24% 24%)`,
      ink: `hsl(${hue} 18% 70%)`,
      edge: `hsl(${hue} 20% 30%)`,
    };
  }
  return {
    base: `hsl(${hue} 32% 88%)`,
    hatch: `hsl(${hue} 30% 80%)`,
    ink: `hsl(${hue} 28% 34%)`,
    edge: `hsl(${hue} 28% 72%)`,
  };
}

// A tinted, diagonally-hatched placeholder with a centered monospace caption.
function ArtImage({ work, label, ratio, dark, className, style, captionVisible = true }) {
  const w = (work && work.w) || 4;
  const h = (work && work.h) || 5;
  const hue = (work && work.hue) != null ? work.hue : 40;
  const tones = hueToTones(hue, dark);
  const aspect = ratio || `${w} / ${h}`;

  // Real uploaded image (from the admin) takes precedence over the placeholder.
  const src = work && work.imageUrl;
  if (src) {
    return (
      <div
        className={"art-ph " + (className || "")}
        style={Object.assign({ position: "relative", aspectRatio: aspect, overflow: "hidden", width: "100%", background: tones.base }, style || {})}
      >
        <img src={src} alt={label || (work && work.title) || ""} loading="lazy"
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
      </div>
    );
  }
  const caption = label || (work ? `${work.medium}` : "image");
  const tag = "ART";
  const patternId = "hatch-" + (work ? work.id : Math.random().toString(36).slice(2, 7));

  return (
    <div
      className={"art-ph " + (className || "")}
      style={Object.assign(
        {
          position: "relative",
          aspectRatio: aspect,
          background: tones.base,
          overflow: "hidden",
          width: "100%",
        },
        style || {}
      )}
    >
      <svg
        width="100%"
        height="100%"
        viewBox="0 0 100 100"
        preserveAspectRatio="none"
        style={{ position: "absolute", inset: 0, display: "block" }}
        aria-hidden="true"
      >
        <defs>
          <pattern id={patternId} width="7" height="7" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
            <line x1="0" y1="0" x2="0" y2="7" stroke={tones.hatch} strokeWidth="2.5" />
          </pattern>
        </defs>
        <rect x="0" y="0" width="100" height="100" fill={`url(#${patternId})`} opacity="0.55" />
      </svg>
      {captionVisible && (
        <div
          style={{
            position: "absolute",
            inset: 0,
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
            gap: "6px",
            padding: "12px",
            textAlign: "center",
          }}
        >
          <span
            style={{
              fontFamily: "var(--mono)",
              fontSize: "10px",
              letterSpacing: "0.18em",
              textTransform: "uppercase",
              color: tones.ink,
              border: `1px solid ${tones.ink}`,
              borderRadius: "999px",
              padding: "3px 9px",
              opacity: 0.85,
            }}
          >
            {tag}
          </span>
          <span
            style={{
              fontFamily: "var(--mono)",
              fontSize: "11px",
              lineHeight: 1.35,
              letterSpacing: "0.02em",
              color: tones.ink,
              maxWidth: "80%",
              opacity: 0.9,
            }}
          >
            {caption}
          </span>
        </div>
      )}
      {/* thin inner edge */}
      <div style={{ position: "absolute", inset: 0, boxShadow: `inset 0 0 0 1px ${tones.edge}` }} />
    </div>
  );
}

// Circular / rect portrait placeholder for artists.
function Portrait({ artist, round = false, dark, style, className }) {
  const hue = artist ? artist.hue : 40;
  const tones = hueToTones(hue, dark);
  const initials = artist
    ? artist.name.split(" ").map((s) => s[0]).slice(0, 2).join("")
    : "··";

  // Real uploaded portrait takes precedence over the initials placeholder.
  const src = artist && artist.portraitUrl;
  if (src) {
    return (
      <div className={className || ""}
        style={Object.assign({ position: "relative", overflow: "hidden", borderRadius: round ? "999px" : "0", background: tones.base }, style || {})}>
        <img src={src} alt={artist.name} loading="lazy"
          style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
      </div>
    );
  }
  return (
    <div
      className={className || ""}
      style={Object.assign(
        {
          position: "relative",
          background: tones.base,
          borderRadius: round ? "999px" : "0",
          overflow: "hidden",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          boxShadow: `inset 0 0 0 1px ${tones.edge}`,
        },
        style || {}
      )}
    >
      <span
        style={{
          fontFamily: "var(--display)",
          fontSize: "clamp(28px, 5vw, 64px)",
          color: tones.ink,
          opacity: 0.55,
          lineHeight: 1,
        }}
      >
        {initials}
      </span>
      <span
        style={{
          position: "absolute",
          bottom: 8,
          left: 0,
          right: 0,
          textAlign: "center",
          fontFamily: "var(--mono)",
          fontSize: "9px",
          letterSpacing: "0.18em",
          textTransform: "uppercase",
          color: tones.ink,
          opacity: 0.7,
        }}
      >
        portrait
      </span>
    </div>
  );
}

Object.assign(window, { ArtImage, Portrait, hueToTones });