/* ============================================================
   Glafia Dex — sprites
   Roux the one-eyed calico cat + recipe portrait tiles.
   Exports: MascotCat, Portrait, typeColor
============================================================ */

function typeColor(recipe){
  const t = (recipe.types && recipe.types[0]) || 'cosy';
  const map = window.DEX.types;
  return (map[t] && map[t].color) || '#e8896b';
}
function hexTint(hex, amt){
  // mix hex toward white by amt (0..1)
  const n = parseInt(hex.slice(1),16);
  const r = n>>16, g=(n>>8)&255, b=n&255;
  const mix = (c)=>Math.round(c+(255-c)*amt);
  return `rgb(${mix(r)},${mix(g)},${mix(b)})`;
}

/* ---- Recipe portrait tile (emoji sprite or photo) ---- */
function Portrait({ recipe, big }){
  const c = typeColor(recipe);
  const bg = `radial-gradient(circle at 50% 38%, ${hexTint(c,0.55)}, ${hexTint(c,0.78)})`;
  return (
    <div className="portrait" style={{ background: bg }}>
      <div className="dots"></div>
      {recipe.photo
        ? <div className="ph-photo" style={{ backgroundImage:`url(${recipe.photo})` }}></div>
        : <span className="emoji" style={ big ? { fontSize:120 } : null }>{recipe.emoji}</span>}
    </div>
  );
}

/* ---- Nedi, the winking calico cat ---- */
function MascotCat({ size = 64, mood = 'idle' }){
  const ink = '#3a2e26';
  const openEye = (
    <g>
      <circle cx="37" cy="59" r="11" fill="#f4b62b" stroke={ink} strokeWidth="2.6" />
      <circle cx="37" cy="60" r="5" fill="#2a221d" />
      <circle cx="33.2" cy="55.4" r="2.5" fill="#fff" />
    </g>
  );
  const winkRight = <path d="M58 58 Q66 64 74 57" fill="none" stroke={ink} strokeWidth="3.2" strokeLinecap="round" />;
  const winkLeft  = <path d="M27 58 Q37 64 47 57" fill="none" stroke={ink} strokeWidth="3.2" strokeLinecap="round" />;
  const leftEye = mood === 'happy' ? winkLeft : openEye;
  const facePath = "M15,34 L20,7 L37,24 Q50,18 63,24 L80,7 L85,34 Q88,46 87,58 Q83,78 62,88 Q50,93 38,88 Q17,78 13,58 Q10,46 15,34 Z";
  return (
    <svg viewBox="0 0 100 100" width={size} height={size} role="img" aria-label="Nedi the cat" style={{ display:'block', overflow:'visible' }}>
      <defs><clipPath id="nediFace"><path d={facePath} /></clipPath></defs>
      <path d="M21,30 L24,11 L36,25 Q28,27 21,30 Z" fill="#f2a79a" />
      <path d="M79,30 L76,11 L64,25 Q72,27 79,30 Z" fill="#f2a79a" />
      <path d={facePath} fill="#fdf8f0" stroke="#cbb199" strokeWidth="2" />
      <g clipPath="url(#nediFace)">
        <path d="M11,54 Q11,38 16,32 L20,8 L37,24 Q50,18 63,24 L80,8 L84,32 Q89,40 89,54 Q80,47 72,50 Q61,40 50,53 Q39,40 28,50 Q20,47 11,54 Z" fill="#f0a24a" />
        <path d="M11,54 Q11,70 22,82 Q17,66 25,57 Q17,53 11,54 Z" fill="#f0a24a" />
        <path d="M89,54 Q89,70 78,82 Q83,66 75,57 Q83,53 89,54 Z" fill="#f0a24a" />
        <path d="M41,28 Q50,23 59,28 Q57,40 50,36 Q43,40 41,28 Z" fill="#4a3a30" />
        <path d="M48,33 Q52,33 51,46 Q50,50 49,46 Q47,38 48,33 Z" fill="#4a3a30" />
        <path d="M19,28 Q29,28 31,40 Q24,43 19,38 Q17,32 19,28 Z" fill="#4a3a30" />
        <path d="M81,28 Q71,28 69,40 Q76,43 81,38 Q83,32 81,28 Z" fill="#4a3a30" />
      </g>
      {leftEye}
      {winkRight}
      <path d="M45,67 L55,67 L50,73 Z" fill="#ef9f8f" />
      <path d="M50,73 L50,79 M50,79 Q45,84 41,80 M50,79 Q55,84 59,80" stroke="#ef9f8f" strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

Object.assign(window, { MascotCat, Portrait, typeColor, hexTint });