// icons.jsx — 圖示系統：優先載入 assets/*.png（你生成的插畫），找不到才用內建 SVG 備援。
// 全系統不使用 emoji。鈴鐺維持向量（需動態變色發亮），其餘皆可用圖片替換。

// 圖片載入器：assets/<id>.png，載入失敗自動退回 fallback
function Art({ id, size, w, h, round, fit = 'contain', style = {}, fallback = null, alt = '' }) {
  const [err, setErr] = React.useState(false);
  const W = w || size || 48, H = h || size || 48;
  if (err) return fallback || <span style={{ display: 'inline-block', width: W, height: H }} />;
  return <img src={'assets/' + id + '.png'} alt={alt} onError={() => setErr(true)}
    style={{ width: W, height: H, objectFit: fit, borderRadius: round ? '50%' : 0, display: 'block', ...style }} />;
}

// 手搖鈴（遊戲用，需動態變色發亮 → 維持向量）
function Bell({ color = '#E5392F', filled = false, size = 44 }) {
  const fill = filled ? color : '#FFFFFF';
  const detail = filled ? '#FFFFFF' : color;
  return (
    <svg viewBox="0 0 48 54" width={size} height={size} style={{ display: 'block' }}>
      <rect x="20.5" y="4.5" width="7" height="9" rx="3.5" fill={color} />
      <circle cx="24" cy="5" r="4.2" fill={color} />
      <path d="M11 42 C11 24 15.5 13 24 13 C32.5 13 37 24 37 42 Z" fill={fill} stroke={color} strokeWidth="2.6" strokeLinejoin="round" />
      <rect x="8.5" y="40.5" width="31" height="6.6" rx="3.3" fill={fill} stroke={color} strokeWidth="2.6" />
      <circle cx="24" cy="50.6" r="3.4" fill={color} />
      <path d="M18.5 19 C16.6 25 16.6 33 18 39.5" stroke={detail} strokeWidth="2.6" fill="none" strokeLinecap="round" opacity={filled ? 0.75 : 0.45} />
    </svg>
  );
}

// ---- 樂器（備援 SVG）----
function MaracasSVG({ size = 60, color = '#3C8FC0' }) {
  return (
    <svg viewBox="0 0 64 64" width={size} height={size} style={{ display: 'block' }}>
      <rect x="29" y="33" width="7" height="24" rx="3.5" fill="#C8915C" transform="rotate(8 32 45)" />
      <ellipse cx="32" cy="24" rx="16" ry="18" fill={color} />
      <ellipse cx="26" cy="16" rx="4" ry="6.5" fill="#fff" opacity="0.28" />
      <circle cx="28" cy="21" r="2" fill="#fff" opacity="0.85" /><circle cx="37" cy="18" r="1.6" fill="#fff" opacity="0.8" />
      <circle cx="35" cy="28" r="1.8" fill="#fff" opacity="0.8" /><circle cx="28" cy="29" r="1.4" fill="#fff" opacity="0.7" />
      <path d="M52 13 q5 5 0 10 M56 19 q4 4 0 8" stroke={color} strokeWidth="2.6" fill="none" strokeLinecap="round" opacity="0.55" />
    </svg>
  );
}
function FootChimeSVG({ size = 60, color = '#E07B2A' }) {
  return (
    <svg viewBox="0 0 64 64" width={size} height={size} style={{ display: 'block' }}>
      <rect x="22" y="12" width="13" height="18" rx="6" fill={color} opacity="0.92" />
      <path d="M12 40 C12 32 16 28 24 28 L41 28 C49 28 53 33 53 40 L53 43 L12 43 Z" fill={color} />
      <rect x="10" y="43" width="45" height="5.5" rx="2.7" fill="#8A5A2A" />
      <circle cx="21" cy="53" r="4" fill="#F2C200" stroke="#B98A00" strokeWidth="1.6" />
      <circle cx="33" cy="54" r="4" fill="#3FA64B" stroke="#27702F" strokeWidth="1.6" />
      <circle cx="45" cy="53" r="4" fill="#E5392F" stroke="#9E2018" strokeWidth="1.6" />
      <path d="M54 16 q6 7 0 16 M59 14 q8 10 0 22" stroke={color} strokeWidth="2.6" fill="none" strokeLinecap="round" opacity="0.5" />
    </svg>
  );
}
function InstrumentSVG({ name, size = 60, color }) {
  if (name === 'maracas') return <MaracasSVG size={size} color={color} />;
  if (name === 'foot') return <FootChimeSVG size={size} color={color} />;
  return <Bell filled color={color} size={size * 0.86} />;
}
function Instrument({ name, size = 60, color }) {
  return <Art id={'act-' + name} size={size} fallback={<InstrumentSVG name={name} size={size} color={color} />} />;
}

// ---- 主選單圖示（備援 SVG）----
function Ic({ d, color = 'currentColor', size = 34 }) {
  return <svg viewBox="0 0 32 32" width={size} height={size} style={{ display: 'block' }}><path d={d} fill={color} strokeLinejoin="round" strokeLinecap="round" /></svg>;
}
function IcPlaySVG({ color, size }) { return <Ic color={color} size={size} d="M10 7.5 C10 6.4 11.2 5.8 12.1 6.4 L24.5 14.3 C25.3 14.8 25.3 16 24.5 16.5 L12.1 24.4 C11.2 25 10 24.4 10 23.3 Z" />; }
function IcCheckinSVG({ color, size }) {
  return (<svg viewBox="0 0 32 32" width={size || 34} height={size || 34} style={{ display: 'block' }}>
    <rect x="5" y="7" width="22" height="20" rx="4" fill={color} opacity="0.25" /><rect x="5" y="7" width="22" height="20" rx="4" fill="none" stroke={color} strokeWidth="2.4" />
    <line x1="5" y1="13" x2="27" y2="13" stroke={color} strokeWidth="2.4" /><path d="M12 20 l3 3 l6 -7" fill="none" stroke={color} strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" /></svg>);
}
function IcStarSVG({ color, size }) { return <Ic color={color} size={size} d="M16 4 L19.6 11.5 L27.8 12.6 L21.9 18.4 L23.3 26.6 L16 22.7 L8.7 26.6 L10.1 18.4 L4.2 12.6 L12.4 11.5 Z" />; }
function IcTrophySVG({ color, size }) {
  return (<svg viewBox="0 0 32 32" width={size || 34} height={size || 34} style={{ display: 'block' }}>
    <path d="M9 5 H23 V12 C23 17 19.5 20 16 20 C12.5 20 9 17 9 12 Z" fill={color} />
    <path d="M9 7 H5 V10 C5 13 7 14 9.5 14 M23 7 H27 V10 C27 13 25 14 22.5 14" fill="none" stroke={color} strokeWidth="2.4" />
    <rect x="13" y="19" width="6" height="5" fill={color} /><rect x="9" y="24" width="14" height="4" rx="2" fill={color} /></svg>);
}
function IcFestivalSVG({ color, size }) {
  return (<svg viewBox="0 0 32 32" width={size || 34} height={size || 34} style={{ display: 'block' }}>
    <rect x="6" y="14" width="20" height="13" rx="2.5" fill={color} opacity="0.3" /><rect x="6" y="14" width="20" height="13" rx="2.5" fill="none" stroke={color} strokeWidth="2.4" />
    <rect x="4" y="10" width="24" height="6" rx="2" fill={color} /><line x1="16" y1="10" x2="16" y2="27" stroke={color} strokeWidth="2.4" />
    <path d="M16 10 C16 10 12 4 9 6 C6 8 11 10 16 10 M16 10 C16 10 20 4 23 6 C26 8 21 10 16 10" fill={color} /></svg>);
}
function IcMusicSVG({ color, size }) {
  return (<svg viewBox="0 0 32 32" width={size || 34} height={size || 34} style={{ display: 'block' }}>
    <path d="M13 6 L24 4 V19 C24 21 22.5 22.5 20.5 22.5 C18.5 22.5 17 21 17 19.3 C17 17.6 18.5 16.5 20.5 16.5 C21 16.5 21.5 16.6 22 16.8 V9 L15 10.2 V22 C15 24 13.5 25.5 11.5 25.5 C9.5 25.5 8 24 8 22.3 C8 20.6 9.5 19.5 11.5 19.5 C12 19.5 12.5 19.6 13 19.8 Z" fill={color} />
    <path d="M26 6 l1 2.6 l2.6 1 l-2.6 1 l-1 2.6 l-1 -2.6 l-2.6 -1 l2.6 -1 Z" fill={color} opacity="0.8" /></svg>);
}
const MENU_SVG = { play: IcPlaySVG, checkin: IcCheckinSVG, star: IcStarSVG, trophy: IcTrophySVG, festival: IcFestivalSVG, musicAI: IcMusicSVG };
function MenuIcon({ name, color, size }) {
  const C = MENU_SVG[name] || IcPlaySVG;
  return <Art id={'menu-' + name} size={size || 34} fallback={<C color={color} size={size} />} />;
}

// ---- 難度表情（備援 SVG）----
function FaceSVG({ mood = 'easy', size = 56 }) {
  const ink = '#5A4632';
  const eyes = mood === 'hard'
    ? <g><path d="M19 23 l8 2" stroke={ink} strokeWidth="3" strokeLinecap="round" /><path d="M45 25 l-8 2" stroke={ink} strokeWidth="3" strokeLinecap="round" /><circle cx="23" cy="30" r="3.4" fill={ink} /><circle cx="41" cy="30" r="3.4" fill={ink} /></g>
    : <g><circle cx="23" cy="27" r="3.6" fill={ink} /><circle cx="41" cy="27" r="3.6" fill={ink} /></g>;
  const mouth = mood === 'easy'
    ? <path d="M24 39 q8 6 16 0" stroke={ink} strokeWidth="3.2" fill="none" strokeLinecap="round" />
    : mood === 'mid' ? <path d="M22 38 q10 11 20 0 q-10 4 -20 0 Z" fill={ink} />
      : <path d="M23 40 q9 9 18 0 q-9 7 -18 0 Z" fill={ink} />;
  return (<svg viewBox="0 0 64 64" width={size} height={size} style={{ display: 'block' }}>
    <circle cx="32" cy="32" r="26" fill="#fff" />{mood === 'hard' && <circle cx="44" cy="44" r="5.5" fill="#F2C9A0" opacity="0.7" />}{eyes}{mouth}</svg>);
}
function Face({ mood = 'easy', size = 56 }) { return <Art id={'face-' + mood} size={size} fallback={<FaceSVG mood={mood} size={size} />} />; }

// ---- 長者頭像（備援 SVG；avatar 給檔名則優先用圖片）----
const HAIR = { mint: '#B9B2A6', sky: '#C9C3B7', sun: '#B0A89A', rose: '#C7B9A6', grape: '#BDB5A8', coral: '#B5A693' };
function ElderAvatarSVG({ tone = 'mint', size = 64, glasses = true }) {
  const c = window.tone(tone), hair = HAIR[tone] || '#B9B2A6';
  return (<svg viewBox="0 0 64 64" width={size} height={size} style={{ display: 'block', borderRadius: '50%', background: c.soft }}>
    <path d="M13 33 C13 17 23 11 32 11 C41 11 51 17 51 33 C51 26 45 24 45 24 C45 24 44 20 32 20 C20 20 19 24 19 24 C19 24 13 26 13 33 Z" fill={hair} />
    <circle cx="32" cy="35" r="15" fill="#F2C9A0" />
    <path d="M44 30 C49 30 49 38 45 40" fill="none" stroke={hair} strokeWidth="3" strokeLinecap="round" /><path d="M20 30 C15 30 15 38 19 40" fill="none" stroke={hair} strokeWidth="3" strokeLinecap="round" />
    {glasses && <g><circle cx="26" cy="34" r="5" fill="#fff" fillOpacity="0.45" stroke="#5A4632" strokeWidth="2" /><circle cx="38" cy="34" r="5" fill="#fff" fillOpacity="0.45" stroke="#5A4632" strokeWidth="2" /><line x1="31" y1="34" x2="33" y2="34" stroke="#5A4632" strokeWidth="2" /></g>}
    <path d="M27 43 q5 4 10 0" stroke="#5A4632" strokeWidth="2.2" fill="none" strokeLinecap="round" />
    <circle cx="22" cy="40" r="2.6" fill="#F2A98C" opacity="0.5" /><circle cx="42" cy="40" r="2.6" fill="#F2A98C" opacity="0.5" /></svg>);
}
function ElderAvatar({ avatar, tone = 'mint', size = 64, glasses = true }) {
  const fb = <ElderAvatarSVG tone={tone} size={size} glasses={glasses} />;
  return avatar ? <Art id={avatar} size={size} round fit="cover" fallback={fb} /> : fb;
}

// ---- 長者半身（遊戲鏡頭佔位；最終會換成真影片）----
function ElderBustSVG({ size = 210 }) {
  return (<svg viewBox="0 0 160 132" width={size} height={size * 132 / 160} style={{ display: 'block' }}>
    <path d="M18 132 C18 96 40 82 80 82 C120 82 142 96 142 132 Z" fill="#7E2A37" />
    <path d="M64 80 h32 v12 a16 16 0 0 1 -32 0 Z" fill="#F2C9A0" /><ellipse cx="80" cy="52" rx="30" ry="34" fill="#F2C9A0" />
    <path d="M49 50 C49 23 66 17 80 17 C94 17 111 23 111 50 C111 37 100 33 100 33 C100 33 98 27 80 27 C62 27 60 33 60 33 C60 33 49 37 49 50 Z" fill="#7C746A" />
    <circle cx="69" cy="53" r="8" fill="#fff" fillOpacity="0.4" stroke="#3A2E22" strokeWidth="2.4" /><circle cx="91" cy="53" r="8" fill="#fff" fillOpacity="0.4" stroke="#3A2E22" strokeWidth="2.4" /><line x1="77" y1="53" x2="83" y2="53" stroke="#3A2E22" strokeWidth="2.4" />
    <path d="M71 68 q9 7 18 0" stroke="#9E5B4A" strokeWidth="2.6" fill="none" strokeLinecap="round" /></svg>);
}
function ElderBust({ size = 210 }) { return <Art id="elder-bust" w={size} h={size * 132 / 160} fallback={<ElderBustSVG size={size} />} />; }

// ---- 機構（備援 SVG）----
function IcClinicSVG({ size = 60, color = '#3C8FC0' }) {
  return (<svg viewBox="0 0 64 64" width={size} height={size} style={{ display: 'block' }}>
    <rect x="14" y="16" width="36" height="38" rx="4" fill={color} opacity="0.18" /><rect x="14" y="16" width="36" height="38" rx="4" fill="none" stroke={color} strokeWidth="3" />
    <rect x="28" y="10" width="8" height="10" rx="2" fill={color} /><rect x="30" y="6" width="4" height="14" rx="2" fill="#fff" /><rect x="26" y="12" width="12" height="4" rx="2" fill="#fff" />
    <rect x="22" y="42" width="8" height="12" rx="1.5" fill={color} /><rect x="36" y="24" width="7" height="7" rx="1.5" fill={color} opacity="0.7" /><rect x="22" y="24" width="7" height="7" rx="1.5" fill={color} opacity="0.7" /></svg>);
}
function IcClinic({ size = 60, color = '#3C8FC0' }) { return <Art id="clinic" size={size} fallback={<IcClinicSVG size={size} color={color} />} />; }

// ---- 介面小圖示（取代 emoji，純向量）----
function IcHome({ size = 20, color = 'currentColor' }) {
  return <svg viewBox="0 0 24 24" width={size} height={size} style={{ display: 'block' }}><path d="M12 3 L21 11 H18.5 V20 H14 V14 H10 V20 H5.5 V11 H3 Z" fill={color} /></svg>;
}
function IcReplay({ size = 20, color = 'currentColor' }) {
  return <svg viewBox="0 0 24 24" width={size} height={size} style={{ display: 'block' }}><path d="M12 5 V2 L7 6 L12 10 V7 a5 5 0 1 1 -5 5 H4 a8 8 0 1 0 8 -8 Z" fill={color} /></svg>;
}
function IcPause({ size = 20, color = 'currentColor' }) {
  return <svg viewBox="0 0 24 24" width={size} height={size} style={{ display: 'block' }}><rect x="6" y="5" width="4.5" height="14" rx="1.6" fill={color} /><rect x="13.5" y="5" width="4.5" height="14" rx="1.6" fill={color} /></svg>;
}
function IcSearch({ size = 20, color = 'currentColor' }) {
  return <svg viewBox="0 0 24 24" width={size} height={size} style={{ display: 'block' }}><circle cx="11" cy="11" r="6.5" fill="none" stroke={color} strokeWidth="2.4" /><line x1="16" y1="16" x2="21" y2="21" stroke={color} strokeWidth="2.6" strokeLinecap="round" /></svg>;
}
function IcCheck({ size = 18, color = 'currentColor' }) {
  return <svg viewBox="0 0 24 24" width={size} height={size} style={{ display: 'block' }}><path d="M5 13 l4 4 L19 6" fill="none" stroke={color} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" /></svg>;
}

Object.assign(window, {
  Art, Bell, Instrument, MenuIcon, Face, ElderAvatar, ElderBust, IcClinic,
  IcHome, IcReplay, IcPause, IcSearch, IcCheck,
});