/* Portrait — three swappable styles: silhouette+aura, sigil+heraldry, placeholder slot. */

const Portrait = ({ clade, species, style, name }) => {
  const cladeId = clade?.id || "canidae";
  const speciesId = species?.id;

  const cladeColor = {
    canidae: "#8b6a3a", felidae: "#c08a3a", mustelidae: "#74552c",
    ursidae: "#5a3a1c", cervidae: "#a07840", bovidae: "#6a4a2a", leporidae: "#b89863",
  }[cladeId] || "#8b6a3a";

  if (style === "silhouette") {
    return (
      <div className="portrait-frame" style={{position: "relative"}}>
        <SilhouetteSVG cladeId={cladeId} speciesId={speciesId} accent={cladeColor} />
        <div style={{position: "absolute", bottom: 12, left: 12, right: 12, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--ink-mute)", textAlign: "center"}}>
          {species?.name || "—"} · {clade?.name || "—"}
        </div>
      </div>
    );
  }

  if (style === "heraldry") {
    return (
      <div className="portrait-frame" style={{position: "relative"}}>
        <svg viewBox="0 0 100 110" style={{width: "85%", height: "auto"}}>
          {/* Heraldic shield */}
          <defs>
            <linearGradient id="hg" x1="0" x2="0" y1="0" y2="1">
              <stop offset="0" stopColor="rgba(255,250,235,0.16)" />
              <stop offset="1" stopColor="rgba(0,0,0,0.18)" />
            </linearGradient>
          </defs>
          <path d="M10 15 L90 15 L90 60 Q90 95 50 105 Q10 95 10 60 Z" fill={cladeColor} stroke="var(--ink)" strokeWidth="0.8" opacity="0.9"/>
          <path d="M10 15 L90 15 L90 60 Q90 95 50 105 Q10 95 10 60 Z" fill="url(#hg)" />
          {/* Quarter divisions */}
          <path d="M50 15 V105 M10 55 H90" stroke="var(--ink)" strokeWidth="0.4" opacity="0.5" />
          {/* Center sigil */}
          <g transform="translate(34, 38) scale(1.0)" style={{color: "var(--bg)"}}>
            <Sigil id={cladeId} size={32}/>
          </g>
        </svg>
        <div style={{position: "absolute", bottom: 12, left: 12, right: 12, fontFamily: "var(--serif-display)", fontSize: 14, fontStyle: "italic", color: "var(--ink-soft)", textAlign: "center"}}>
          House of {clade?.name || "—"}
        </div>
      </div>
    );
  }

  // placeholder
  return (
    <div className="portrait-frame">
      <div style={{
        width: "82%", aspectRatio: "1 / 1",
        border: "1.5px dashed var(--rule)",
        display: "grid", placeItems: "center", textAlign: "center",
        fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.2em",
        textTransform: "uppercase", color: "var(--ink-mute)",
        background: "repeating-linear-gradient(45deg, transparent 0 8px, rgba(0,0,0,0.04) 8px 9px)",
      }}>
        <div>
          <div style={{fontFamily: "var(--serif-display)", fontSize: 24, color: "var(--ink-soft)", marginBottom: 6, textTransform: "none", letterSpacing: 0, fontStyle: "italic"}}>portrait</div>
          {clade?.name || "—"} / {species?.name || "—"}
          <div style={{marginTop: 4, opacity: 0.7}}>tbd · art ticket</div>
        </div>
      </div>
    </div>
  );
};

const SilhouetteSVG = ({ cladeId, speciesId, accent }) => {
  // Stylized side-profile silhouette per clade family.
  // Each ~ figurative anthro-bust suggested through tonal shapes only.
  const head = SILHOUETTES[cladeId] || SILHOUETTES.canidae;
  return (
    <svg viewBox="0 0 100 110" style={{width: "85%", height: "auto"}}>
      <defs>
        <radialGradient id={"aura-"+cladeId} cx="0.5" cy="0.4" r="0.7">
          <stop offset="0" stopColor={accent} stopOpacity="0.35" />
          <stop offset="0.6" stopColor={accent} stopOpacity="0.08" />
          <stop offset="1" stopColor={accent} stopOpacity="0" />
        </radialGradient>
        <linearGradient id={"sil-"+cladeId} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="var(--ink)" />
          <stop offset="1" stopColor="var(--ink-soft)" />
        </linearGradient>
      </defs>
      {/* aura */}
      <circle cx="50" cy="55" r="48" fill={"url(#aura-"+cladeId+")"} />
      {/* silhouette */}
      <g fill={"url(#sil-"+cladeId+")"}>{head}</g>
      {/* scent particles */}
      <g fill={accent} opacity="0.5">
        <circle cx="22" cy="40" r="0.9"><animate attributeName="cy" values="40;28;40" dur="4s" repeatCount="indefinite" /><animate attributeName="opacity" values="0.5;0;0.5" dur="4s" repeatCount="indefinite" /></circle>
        <circle cx="78" cy="46" r="1.1"><animate attributeName="cy" values="46;30;46" dur="5s" repeatCount="indefinite" /><animate attributeName="opacity" values="0.4;0;0.4" dur="5s" repeatCount="indefinite" /></circle>
        <circle cx="50" cy="22" r="0.7"><animate attributeName="cy" values="22;6;22" dur="6s" repeatCount="indefinite" /><animate attributeName="opacity" values="0.5;0;0.5" dur="6s" repeatCount="indefinite" /></circle>
      </g>
    </svg>
  );
};

// Hand-shaped silhouette paths per clade — abstract anthropomorphic busts
const SILHOUETTES = {
  canidae: <>
    {/* shoulders */}
    <path d="M20 105 Q22 80 35 75 L65 75 Q78 80 80 105 Z" />
    {/* neck */}
    <path d="M42 78 L58 78 L57 65 L43 65 Z" />
    {/* head */}
    <path d="M30 50 Q30 30 50 28 Q70 30 70 50 Q70 62 60 65 L40 65 Q30 62 30 50 Z" />
    {/* ears */}
    <path d="M32 38 L26 22 L36 33 Z" />
    <path d="M68 38 L74 22 L64 33 Z" />
    {/* muzzle */}
    <path d="M50 45 Q60 48 60 55 Q55 60 50 60 Q45 60 40 55 Q40 48 50 45 Z" fill="rgba(0,0,0,0.25)" />
  </>,
  felidae: <>
    <path d="M20 105 Q22 80 35 75 L65 75 Q78 80 80 105 Z" />
    <path d="M42 78 L58 78 L57 65 L43 65 Z" />
    <path d="M28 52 Q28 30 50 28 Q72 30 72 52 Q72 62 62 65 L38 65 Q28 62 28 52 Z" />
    {/* triangular ears */}
    <path d="M32 36 L28 18 L40 30 Z" />
    <path d="M68 36 L72 18 L60 30 Z" />
    <path d="M50 50 Q56 52 56 56 Q53 60 50 60 Q47 60 44 56 Q44 52 50 50 Z" fill="rgba(0,0,0,0.25)" />
  </>,
  mustelidae: <>
    <path d="M22 105 Q24 82 36 78 L64 78 Q76 82 78 105 Z" />
    <path d="M44 80 L56 80 L55 68 L45 68 Z" />
    {/* long narrow head */}
    <path d="M32 52 Q32 32 50 30 Q68 32 68 52 Q68 64 60 68 L40 68 Q32 64 32 52 Z" />
    <path d="M34 38 L30 26 L40 34 Z" />
    <path d="M66 38 L70 26 L60 34 Z" />
    <path d="M50 48 Q58 51 58 56 Q53 60 50 60 Q47 60 42 56 Q42 51 50 48 Z" fill="rgba(0,0,0,0.25)" />
  </>,
  ursidae: <>
    <path d="M14 105 Q18 78 32 72 L68 72 Q82 78 86 105 Z" />
    <path d="M40 76 L60 76 L58 64 L42 64 Z" />
    {/* round large head */}
    <path d="M22 50 Q22 26 50 24 Q78 26 78 50 Q78 64 66 68 L34 68 Q22 64 22 50 Z" />
    {/* small round ears */}
    <circle cx="28" cy="26" r="6" />
    <circle cx="72" cy="26" r="6" />
    <path d="M50 48 Q60 52 60 58 Q54 62 50 62 Q46 62 40 58 Q40 52 50 48 Z" fill="rgba(0,0,0,0.25)" />
  </>,
  cervidae: <>
    <path d="M22 105 Q24 82 36 76 L64 76 Q76 82 78 105 Z" />
    <path d="M44 78 L56 78 L55 64 L45 64 Z" />
    <path d="M32 52 Q32 30 50 28 Q68 30 68 52 Q68 62 60 64 L40 64 Q32 62 32 52 Z" />
    {/* antlers */}
    <path d="M40 32 L34 14 M34 14 L28 18 M34 14 L36 8" stroke="var(--ink)" strokeWidth="1.6" fill="none" strokeLinecap="round"/>
    <path d="M60 32 L66 14 M66 14 L72 18 M66 14 L64 8" stroke="var(--ink)" strokeWidth="1.6" fill="none" strokeLinecap="round"/>
    <path d="M40 32 L36 26 M60 32 L64 26" stroke="var(--ink)" strokeWidth="1.4" fill="none" strokeLinecap="round" />
    <path d="M50 48 Q56 51 56 55 Q53 58 50 58 Q47 58 44 55 Q44 51 50 48 Z" fill="rgba(0,0,0,0.25)" />
  </>,
  bovidae: <>
    <path d="M16 105 Q20 80 34 74 L66 74 Q80 80 84 105 Z" />
    <path d="M42 78 L58 78 L57 64 L43 64 Z" />
    <path d="M26 52 Q26 28 50 26 Q74 28 74 52 Q74 64 64 66 L36 66 Q26 64 26 52 Z" />
    {/* curved horns */}
    <path d="M28 32 Q12 28 14 18" stroke="var(--ink)" strokeWidth="2" fill="none" strokeLinecap="round" />
    <path d="M72 32 Q88 28 86 18" stroke="var(--ink)" strokeWidth="2" fill="none" strokeLinecap="round" />
    <path d="M50 48 Q58 51 58 56 Q53 60 50 60 Q47 60 42 56 Q42 51 50 48 Z" fill="rgba(0,0,0,0.25)" />
  </>,
  leporidae: <>
    <path d="M22 105 Q24 84 36 78 L64 78 Q76 84 78 105 Z" />
    <path d="M44 80 L56 80 L55 66 L45 66 Z" />
    <path d="M32 56 Q32 38 50 36 Q68 38 68 56 Q68 64 60 66 L40 66 Q32 64 32 56 Z" />
    {/* long ears */}
    <ellipse cx="42" cy="20" rx="3.5" ry="14" />
    <ellipse cx="58" cy="20" rx="3.5" ry="14" />
    <ellipse cx="42" cy="22" rx="1.6" ry="9" fill={"rgba(0,0,0,0.25)"} />
    <ellipse cx="58" cy="22" rx="1.6" ry="9" fill={"rgba(0,0,0,0.25)"} />
    <path d="M50 52 Q55 54 55 58 Q52 60 50 60 Q48 60 45 58 Q45 54 50 52 Z" fill="rgba(0,0,0,0.25)" />
  </>,
};

window.Portrait = Portrait;
