// SVG medicine illustrations as data URIs
// Each SVG is a clean, modern illustration for a drug category

function svgToDataUri(svg: string): string {
  const encoded = svg
    .replace(/\n/g, '')
    .replace(/\s+/g, ' ')
    .replace(/>\s+</g, '><')
    .trim();
  return 'data:image/svg+xml,' + encodeURIComponent(encoded);
}

// Pill/Capsule — for 抗生素, 解热镇痛, 消化系统, 抗过敏
const pillSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs><linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#5B8DEF"/><stop offset="100%" stop-color="#3B6FD4"/></linearGradient></defs>
  <circle cx="50" cy="50" r="46" fill="url(#g)"/>
  <rect x="28" y="42" width="44" height="16" rx="8" fill="#fff" opacity="0.9"/>
  <rect x="72" y="42" width="10" height="16" rx="5" fill="#fff" opacity="0.6"/>
  <rect x="18" y="42" width="10" height="16" rx="5" fill="#fff" opacity="0.6"/>
</svg>`;

// Syringe — for 降糖药, 注射液
const syringeSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs><linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#FF7B42"/><stop offset="100%" stop-color="#E85D3A"/></linearGradient></defs>
  <circle cx="50" cy="50" r="46" fill="url(#g)"/>
  <rect x="42" y="18" width="16" height="40" rx="4" fill="#fff" opacity="0.9"/>
  <rect x="46" y="58" width="8" height="20" rx="2" fill="#fff" opacity="0.7"/>
  <polygon points="44,76 40,82 60,82 56,76" fill="#fff" opacity="0.5"/>
  <line x1="50" y1="22" x2="50" y2="18" stroke="#fff" stroke-width="2" opacity="0.6"/>
</svg>`;

// Heart — for 心血管
const heartSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs><linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#E85D75"/><stop offset="100%" stop-color="#D4405A"/></linearGradient></defs>
  <circle cx="50" cy="50" r="46" fill="url(#g)"/>
  <path d="M50 72 C30 58 22 44 26 34 C30 26 38 24 44 28 C48 30 50 34 50 34 C50 34 52 30 56 28 C62 24 70 26 74 34 C78 44 70 58 50 72Z" fill="#fff" opacity="0.9"/>
</svg>`;

// Leaf — for 中成药
const leafSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs><linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4CAF84"/><stop offset="100%" stop-color="#2E8B5E"/></linearGradient></defs>
  <circle cx="50" cy="50" r="46" fill="url(#g)"/>
  <path d="M50 22 C35 35 22 55 30 70 C32 74 36 76 40 74 C44 72 50 64 54 56 C50 52 48 44 52 36 C60 40 70 44 78 42 C72 32 60 24 50 22Z" fill="#fff" opacity="0.9"/>
</svg>`;

// Vitamin / Sun — for 维生素
const vitaminSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs><linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#FFB347"/><stop offset="100%" stop-color="#F0982E"/></linearGradient></defs>
  <circle cx="50" cy="50" r="46" fill="url(#g)"/>
  <circle cx="50" cy="50" r="14" fill="#fff" opacity="0.9"/>
  <line x1="50" y1="28" x2="50" y2="18" stroke="#fff" stroke-width="3" stroke-linecap="round" opacity="0.7"/>
  <line x1="50" y1="72" x2="50" y2="82" stroke="#fff" stroke-width="3" stroke-linecap="round" opacity="0.7"/>
  <line x1="28" y1="50" x2="18" y2="50" stroke="#fff" stroke-width="3" stroke-linecap="round" opacity="0.7"/>
  <line x1="72" y1="50" x2="82" y2="50" stroke="#fff" stroke-width="3" stroke-linecap="round" opacity="0.7"/>
  <line x1="34" y1="34" x2="27" y2="27" stroke="#fff" stroke-width="3" stroke-linecap="round" opacity="0.5"/>
  <line x1="66" y1="66" x2="73" y2="73" stroke="#fff" stroke-width="3" stroke-linecap="round" opacity="0.5"/>
  <line x1="66" y1="34" x2="73" y2="27" stroke="#fff" stroke-width="3" stroke-linecap="round" opacity="0.5"/>
  <line x1="34" y1="66" x2="27" y2="73" stroke="#fff" stroke-width="3" stroke-linecap="round" opacity="0.5"/>
</svg>`;

// Bandage — for 外用
const bandageSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs><linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#8E99A4"/><stop offset="100%" stop-color="#6B7785"/></linearGradient></defs>
  <circle cx="50" cy="50" r="46" fill="url(#g)"/>
  <rect x="18" y="42" width="64" height="16" rx="4" fill="#fff" opacity="0.9"/>
  <rect x="28" y="42" width="8" height="16" fill="#E8ECF0" opacity="0.6"/>
  <rect x="44" y="42" width="8" height="16" fill="#E8ECF0" opacity="0.6"/>
  <rect x="60" y="42" width="8" height="16" fill="#E8ECF0" opacity="0.6"/>
</svg>`;

// Encyclopedia book — for education center items
const educationSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs><linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#FF8C42"/><stop offset="100%" stop-color="#FF6B35"/></linearGradient></defs>
  <circle cx="50" cy="50" r="46" fill="url(#g)"/>
  <rect x="30" y="26" width="40" height="48" rx="3" fill="#fff" opacity="0.9"/>
  <line x1="36" y1="36" x2="64" y2="36" stroke="#FF8C42" stroke-width="2.5" stroke-linecap="round" opacity="0.6"/>
  <line x1="36" y1="44" x2="64" y2="44" stroke="#FF8C42" stroke-width="2.5" stroke-linecap="round" opacity="0.6"/>
  <line x1="36" y1="52" x2="58" y2="52" stroke="#FF8C42" stroke-width="2.5" stroke-linecap="round" opacity="0.6"/>
  <line x1="36" y1="60" x2="54" y2="60" stroke="#FF8C42" stroke-width="2.5" stroke-linecap="round" opacity="0.6"/>
</svg>`;

// Insulin pen / syringe detail — for education center 胰岛素
const insulinSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs><linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#FF7B42"/><stop offset="100%" stop-color="#E85D3A"/></linearGradient></defs>
  <circle cx="50" cy="50" r="46" fill="url(#g)"/>
  <rect x="36" y="22" width="12" height="56" rx="6" fill="#fff" opacity="0.9"/>
  <rect x="38" y="22" width="8" height="56" rx="4" fill="#fff" opacity="0.5"/>
  <rect x="40" y="60" width="4" height="14" rx="2" fill="#fff" opacity="0.7"/>
  <circle cx="42" cy="24" r="3" fill="#E85D3A" opacity="0.8"/>
</svg>`;

// BP monitor heart — for education center 高血压
const heartMonitorSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs><linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#E85D75"/><stop offset="100%" stop-color="#D4405A"/></linearGradient></defs>
  <circle cx="50" cy="50" r="46" fill="url(#g)"/>
  <path d="M22 54 L34 54 L38 44 L42 64 L46 36 L50 54 L78 54" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round" opacity="0.9"/>
  <circle cx="46" cy="36" r="3" fill="#fff" opacity="0.9"/>
  <rect x="20" y="68" width="60" height="10" rx="5" fill="#fff" opacity="0.2"/>
</svg>`;

// Generate data URIs
export const pillImg = svgToDataUri(pillSvg);
export const syringeImg = svgToDataUri(syringeSvg);
export const heartImg = svgToDataUri(heartSvg);
export const leafImg = svgToDataUri(leafSvg);
export const vitaminImg = svgToDataUri(vitaminSvg);
export const bandageImg = svgToDataUri(bandageSvg);
export const educationImg = svgToDataUri(educationSvg);
export const insulinImg = svgToDataUri(insulinSvg);
export const heartMonitorImg = svgToDataUri(heartMonitorSvg);

// Get image for drug category
export function getDrugImage(category: string): string {
  const map: Record<string, string> = {
    '抗生素': pillImg,
    '解热镇痛': pillImg,
    '消化系统': pillImg,
    '抗过敏': pillImg,
    '降糖药': syringeImg,
    '心血管': heartImg,
    '中成药': leafImg,
    '维生素': vitaminImg,
    '外用': bandageImg,
  };
  return map[category] || pillImg;
}
