// Abstract anonymous donor "portrait" — gradient + soft silhouette mark.
// Donors are anonymous in real sperm banks; we use coded ID-driven gradients
// so each donor has a unique visual fingerprint without showing a face.

const TONES = {
  "warm-1":  ["#3a2418", "#7a4a2c", "#E8B57A"],
  "warm-2":  ["#2a1a12", "#9a5a30", "#F0C892"],
  "cool-1":  ["#161e2a", "#3a4a6a", "#9BAAD6"],
  "cool-2":  ["#0e1820", "#2a4858", "#7FB0C2"],
  "earth-1": ["#1f1812", "#5c4326", "#C9A977"],
  "earth-2": ["#15201a", "#2f5040", "#8FB89C"],
};

// deterministic hash for a string -> 0..1
function h(s, salt = 0) {
  let x = salt;
  for (let i = 0; i < s.length; i++) x = (x * 31 + s.charCodeAt(i)) >>> 0;
  return (x % 1000) / 1000;
}

function DonorAvatar({ donor, style = "abstract" }) {
  // If donor has a real photo, use it (with fade-in)
  if (donor.photo) {
    return (
      <img
        src={donor.photo}
        alt={`Donor ${donor.id}`}
        style={{
          width: "100%",
          height: "100%",
          objectFit: "cover",
          display: "block",
        }}
      />
    );
  }

  const [c0, c1, c2] = TONES[donor.tone] || TONES["warm-1"];
  const gid = `g-${donor.id}`;
  const sid = `s-${donor.id}`;
  const r = h(donor.id);
  const cx = 30 + r * 40;       // 30-70
  const cy = 25 + h(donor.id, 7) * 25;  // 25-50

  if (style === "monogram") {
    const initial = donor.alias[0];
    return (
      <svg viewBox="0 0 100 125" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id={gid} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor={c1} />
            <stop offset="100%" stopColor={c0} />
          </linearGradient>
        </defs>
        <rect width="100" height="125" fill={`url(#${gid})`} />
        <text x="50" y="78" textAnchor="middle"
          fontFamily="Instrument Serif, serif"
          fontStyle="italic"
          fontSize="58" fill={c2} opacity="0.85">{initial}</text>
      </svg>
    );
  }

  if (style === "halftone") {
    // grid of dots, opacity radial-falloff based on distance from cx,cy
    const dots = [];
    for (let y = 0; y < 26; y++) {
      for (let x = 0; x < 20; x++) {
        const px = x * 5 + 2.5;
        const py = y * 5 + 2.5;
        const dx = (px - cx);
        const dy = (py - cy * 1.25);
        const d = Math.sqrt(dx*dx + dy*dy);
        const o = Math.max(0, 1 - d / 70);
        const rr = 0.6 + o * 1.6;
        dots.push(<circle key={`${x}-${y}`} cx={px} cy={py} r={rr} fill={c2} opacity={o * 0.9} />);
      }
    }
    return (
      <svg viewBox="0 0 100 125" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
        <rect width="100" height="125" fill={c0} />
        {dots}
      </svg>
    );
  }

  // default: abstract — silhouette suggestion + soft radial gradient
  return (
    <svg viewBox="0 0 100 125" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <radialGradient id={gid} cx={`${cx}%`} cy={`${cy}%`} r="80%">
          <stop offset="0%" stopColor={c1} />
          <stop offset="55%" stopColor={c0} />
          <stop offset="100%" stopColor="#0A0A0A" />
        </radialGradient>
        <linearGradient id={sid} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={c2} stopOpacity="0.0" />
          <stop offset="100%" stopColor={c2} stopOpacity="0.18" />
        </linearGradient>
      </defs>
      <rect width="100" height="125" fill={`url(#${gid})`} />
      {/* soft shoulders/head silhouette suggestion — very subtle */}
      <ellipse cx="50" cy="55" rx="18" ry="22" fill="#000" opacity="0.18" />
      <path d="M10 125 Q 10 92 28 84 Q 50 78 72 84 Q 90 92 90 125 Z" fill="#000" opacity="0.22" />
      <rect width="100" height="125" fill={`url(#${sid})`} />
      {/* film-grain dots */}
      {Array.from({length: 40}).map((_, i) => {
        const x = h(donor.id, i+1) * 100;
        const y = h(donor.id, i+50) * 125;
        return <circle key={i} cx={x} cy={y} r="0.4" fill="#fff" opacity="0.04" />;
      })}
    </svg>
  );
}

window.DonorAvatar = DonorAvatar;