// ==========================================================
// itooth — shared UI pieces (logo, icons, product illustrations)
// ==========================================================

const ToothLogo = ({ size = 28, color = "currentColor" }) => (
  <svg width={size} height={size} viewBox="0 0 64 64" fill="none" aria-hidden="true">
    <path
      d="M32 6c-8 0-13 2-18 2-4 0-6 4-6 10 0 6 2 10 4 16 2 5 3 10 4 16 1 6 4 8 6 8 3 0 4-4 5-9 1-4 2-7 5-7s4 3 5 7c1 5 2 9 5 9 2 0 5-2 6-8 1-6 2-11 4-16 2-6 4-10 4-16 0-6-2-10-6-10-5 0-10-2-18-2z"
      fill={color}
    />
  </svg>
);

const Icon = {
  Search: () => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
      <circle cx="11" cy="11" r="7" />
      <path d="m20 20-3.5-3.5" strokeLinecap="round" />
    </svg>
  ),
  User: () => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
      <circle cx="12" cy="8" r="4" />
      <path d="M4 21c1.5-4.5 5-6.5 8-6.5s6.5 2 8 6.5" strokeLinecap="round" />
    </svg>
  ),
  Bag: () => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
      <path d="M5 8h14l-1 12H6L5 8z" strokeLinejoin="round" />
      <path d="M9 8V6a3 3 0 0 1 6 0v2" strokeLinecap="round" />
    </svg>
  ),
  Arrow: ({ flip }) => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ transform: flip ? "scaleX(-1)" : "none" }}>
      <path d="M5 12h14M13 6l6 6-6 6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  ),
  ArrowLeft: () => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <path d="M19 12H5M11 6l-6 6 6 6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  ),
  ArrowRight: () => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <path d="M5 12h14M13 6l6 6-6 6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  ),
  Close: () => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <path d="M6 6l12 12M18 6 6 18" strokeLinecap="round" />
    </svg>
  ),
  Plus: () => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2">
      <path d="M12 5v14M5 12h14" strokeLinecap="round" />
    </svg>
  ),
  Minus: () => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2">
      <path d="M5 12h14" strokeLinecap="round" />
    </svg>
  ),
  Check: () => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4">
      <path d="M5 12.5l4.5 4.5L20 6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  ),
  Leaf: () => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
      <path d="M20 4c-9 0-14 5-14 12 0 2 1 4 2 4 7 0 12-5 12-12V4z" strokeLinejoin="round" />
      <path d="M8 20c2-5 6-9 12-12" strokeLinecap="round" />
    </svg>
  ),
  Shield: () => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
      <path d="M12 3l8 3v6c0 5-3 8-8 9-5-1-8-4-8-9V6l8-3z" strokeLinejoin="round" />
      <path d="m9 12 2 2 4-4" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  ),
  Sparkle: () => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
      <path d="M12 3v6M12 15v6M3 12h6M15 12h6" strokeLinecap="round" />
      <path d="m6 6 3 3M15 15l3 3M18 6l-3 3M9 15l-3 3" strokeLinecap="round" />
    </svg>
  ),
  Clock: () => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
      <circle cx="12" cy="12" r="9" />
      <path d="M12 7v5l3 2" strokeLinecap="round" />
    </svg>
  ),
  SoundOn: () => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
      <path d="M11 5L6 9H3v6h3l5 4V5z" strokeLinejoin="round" />
      <path d="M15 9a4 4 0 0 1 0 6M18 6a8 8 0 0 1 0 12" strokeLinecap="round" />
    </svg>
  ),
  SoundOff: () => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
      <path d="M11 5L6 9H3v6h3l5 4V5z" strokeLinejoin="round" />
      <path d="M22 9l-6 6M16 9l6 6" strokeLinecap="round" />
    </svg>
  ),
  Whatsapp: () => (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor">
      <path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.76.46 3.45 1.32 4.95L2 22l5.25-1.38c1.45.79 3.08 1.21 4.79 1.21 5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2zm0 18.15c-1.48 0-2.93-.4-4.2-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.2 8.2 0 0 1-1.26-4.37c0-4.54 3.69-8.23 8.23-8.23 4.54 0 8.23 3.69 8.23 8.23 0 4.54-3.69 8.23-8.23 8.23zm4.52-6.16c-.25-.12-1.46-.72-1.69-.8-.23-.08-.39-.12-.56.12-.17.25-.64.8-.79.97-.15.17-.29.18-.54.06-.25-.12-1.05-.39-2-1.23-.74-.66-1.23-1.47-1.38-1.72-.15-.25-.02-.38.11-.51.11-.11.25-.29.37-.43.12-.15.17-.25.25-.42.08-.17.04-.31-.02-.43-.06-.12-.56-1.34-.77-1.84-.2-.48-.41-.42-.56-.42-.14-.01-.31-.01-.48-.01-.17 0-.43.06-.66.31-.23.25-.87.85-.87 2.08s.89 2.41 1.02 2.57c.12.17 1.75 2.67 4.23 3.75.59.25 1.05.4 1.41.52.59.19 1.13.16 1.56.1.48-.07 1.46-.6 1.67-1.18.21-.58.21-1.07.14-1.18-.06-.1-.23-.17-.48-.29z" />
    </svg>
  ),
};

// Product illustration — used when product has no real photo
const ProductIllustration = ({ product, className = "" }) => {
  const key = product?.illus_key || product?.slug || "";
  const bgMap = {
    "brush-soft": { bg: "#E9F6EE", accent: "#1B7A4B" },
    "paste-mint": { bg: "#EEF7F1", accent: "#2D8F5F" },
    "whitening-strips": { bg: "#F0F8F3", accent: "#0F5132" },
    "whitening-kit": { bg: "#111111", accent: "#34C27A", dark: true },
    "tongue-scraper": { bg: "#F2F6F2", accent: "#444" },
    "interdental": { bg: "#E9F6EE", accent: "#1B7A4B" },
    "eraser": { bg: "#F7FAF5", accent: "#1B7A4B" },
    "brush-case": { bg: "#EEF7F1", accent: "#2D8F5F" },
  };
  const theme = bgMap[key] || { bg: "#F2F6F2", accent: "#1B7A4B" };
  return (
    <div className={`pill-illus ${className}`} style={{ background: theme.bg }}>
      {renderIllus(key, theme)}
    </div>
  );
};

function renderIllus(id, { accent, dark }) {
  const stroke = dark ? "#fff" : "#111";
  switch (id) {
    case "brush-soft":
      return (
        <svg viewBox="0 0 200 200" className="pill-illus__svg">
          <rect x="35" y="85" width="130" height="28" rx="14" fill="#fff" stroke={stroke} strokeWidth="1.5" />
          <rect x="45" y="75" width="55" height="12" rx="3" fill={accent} />
          {Array.from({ length: 22 }).map((_, i) => (
            <line key={i} x1={50 + i * 2.5} y1={70} x2={50 + i * 2.5} y2={76} stroke="#eee" strokeWidth="1.4" />
          ))}
          <circle cx="165" cy="99" r="6" fill={accent} />
        </svg>
      );
    case "paste-mint":
      return (
        <svg viewBox="0 0 200 200" className="pill-illus__svg">
          <rect x="50" y="35" width="50" height="130" rx="10" fill="#fff" stroke={stroke} strokeWidth="1.5" />
          <rect x="45" y="25" width="60" height="14" rx="4" fill={accent} />
          <text x="75" y="105" textAnchor="middle" fontSize="14" fontWeight="700" fill={accent}>itooth</text>
          <text x="75" y="125" textAnchor="middle" fontSize="9" fill="#555">WHITE MINT</text>
          <path d="M110 80 C 140 80, 150 110, 130 130 C 120 140, 130 155, 150 150" fill="none" stroke={accent} strokeWidth="10" strokeLinecap="round" />
        </svg>
      );
    case "whitening-strips":
      return (
        <svg viewBox="0 0 200 200" className="pill-illus__svg">
          <rect x="40" y="60" width="120" height="80" rx="6" fill="#fff" stroke={stroke} strokeWidth="1.5" />
          <rect x="50" y="70" width="100" height="14" rx="3" fill={accent} opacity="0.2" />
          <rect x="50" y="90" width="100" height="14" rx="3" fill={accent} opacity="0.35" />
          <rect x="50" y="110" width="100" height="14" rx="3" fill={accent} opacity="0.6" />
          <text x="100" y="52" textAnchor="middle" fontSize="10" fontWeight="700" fill={accent}>WHITENING</text>
        </svg>
      );
    case "whitening-kit":
      return (
        <svg viewBox="0 0 200 200" className="pill-illus__svg">
          <rect x="35" y="55" width="130" height="90" rx="16" fill="#222" stroke="#fff" strokeWidth="1" />
          <path d="M70 95 q30 -15 60 0 l-3 18 q-27 10 -54 0 Z" fill={accent} />
          <circle cx="85" cy="100" r="3" fill="#fff" />
          <circle cx="100" cy="97" r="3" fill="#fff" />
          <circle cx="115" cy="100" r="3" fill="#fff" />
          <text x="100" y="135" textAnchor="middle" fontSize="9" fill="#fff" fontWeight="700" letterSpacing="2">PRO</text>
        </svg>
      );
    case "tongue-scraper":
      return (
        <svg viewBox="0 0 200 200" className="pill-illus__svg">
          <path d="M60 80 q40 -20 80 0 l-6 18 q-34 14 -68 0 Z" fill="#d4d9d4" stroke={stroke} strokeWidth="1.2" />
          <rect x="85" y="100" width="30" height="60" rx="4" fill={accent} />
          <rect x="90" y="110" width="20" height="40" rx="2" fill="#fff" opacity="0.3" />
        </svg>
      );
    case "interdental":
      return (
        <svg viewBox="0 0 200 200" className="pill-illus__svg">
          <rect x="40" y="95" width="90" height="8" rx="4" fill={accent} />
          {Array.from({ length: 18 }).map((_, i) => (
            <line key={i} x1={135} y1={99} x2={155 + (i % 2) * 3} y2={80 + i * 2} stroke={accent} strokeWidth="1.2" />
          ))}
          <circle cx="40" cy="99" r="6" fill="#fff" stroke={stroke} strokeWidth="1.2" />
        </svg>
      );
    case "eraser":
      return (
        <svg viewBox="0 0 200 200" className="pill-illus__svg">
          <rect x="70" y="40" width="18" height="120" rx="4" fill="#fff" stroke={stroke} strokeWidth="1.2" />
          <rect x="70" y="40" width="18" height="20" rx="4" fill={accent} />
          <circle cx="130" cy="100" r="30" fill="#fff" stroke={stroke} strokeWidth="1.2" />
          <path d="M120 95 q5 5 10 0 M130 95 q5 5 10 0" stroke={accent} strokeWidth="2" fill="none" strokeLinecap="round" />
        </svg>
      );
    case "brush-case":
      return (
        <svg viewBox="0 0 200 200" className="pill-illus__svg">
          <rect x="45" y="60" width="110" height="80" rx="18" fill={accent} />
          <rect x="55" y="70" width="90" height="60" rx="12" fill="#fff" opacity="0.15" />
          <circle cx="60" cy="100" r="3" fill="#fff" opacity="0.5" />
          <circle cx="75" cy="100" r="3" fill="#fff" opacity="0.5" />
          <circle cx="140" cy="100" r="3" fill="#fff" opacity="0.5" />
        </svg>
      );
    default:
      return (
        <svg viewBox="0 0 200 200" className="pill-illus__svg">
          <path
            d="M100 40c-24 0-40 5-56 5-12 0-18 12-18 32 0 18 6 32 12 48 6 16 10 32 14 48 4 16 12 20 18 20 10 0 12-12 14-26 2-14 6-22 16-22s14 8 16 22c2 14 4 26 14 26 6 0 14-4 18-20 4-16 8-32 14-48 6-16 12-30 12-48 0-20-6-32-18-32-16 0-32-5-56-5z"
            fill={accent}
            opacity="0.6"
          />
        </svg>
      );
  }
}

// Helper: get localized field value
const tr = (row, field, lang) => row?.[`${field}_${lang}`] ?? row?.[`${field}_en`] ?? "";

// Helper: prepend base path to an asset URL
const asset = (u) => {
  if (!u) return u;
  if (/^https?:\/\//.test(u) || u.startsWith('data:')) return u;
  const base = window.ITOOTH_BASE || '';
  return base + (u.startsWith('/') ? u : '/' + u);
};

// Money formatter
const fmt = (n, lang) => {
  try { return Number(n || 0).toLocaleString(lang === "ar" ? "ar-IQ" : "en-US"); }
  catch { return String(n || 0); }
};

Object.assign(window, {
  ToothLogo,
  Icon,
  ProductIllustration,
  fmt,
  tr,
  asset,
});
