// Renders the circular brass pet tag with curved engraving + embossed breed silhouette.
// Pure SVG with gradients to fake brushed metal. Three finishes: brass / silver / copper.

const FINISH_STOPS = {
  brass:  { hi: '#F5E2B0', mid: '#E8C98A', base: '#C9A35E', shadow: '#7A5A2A', deep: '#3F2C12', engrave: '#3A2A12' },
  silver: { hi: '#F4F4F4', mid: '#DCDCDC', base: '#B8B8B8', shadow: '#7A7A7A', deep: '#3A3A3A', engrave: '#2A2A2A' },
  copper: { hi: '#F2C9A4', mid: '#D89A6E', base: '#B3754A', shadow: '#7A4424', deep: '#3F2010', engrave: '#3A1A0E' },
  // 24k gold plating — richer chroma, brighter highlight, deeper engraving channel.
  gold:   { hi: '#FFF1B8', mid: '#FBD968', base: '#E0B33B', shadow: '#9A6E14', deep: '#4A3008', engrave: '#3A2208' },
};

// Simple, restrained breed silhouettes — drawn from primitive shapes only.
// Each is a viewBox 100×100 centered glyph the SVG <use>s.
const BREED_SHAPES = {
  labrador: (c) => (
    <g fill={c}>
      {/* head */}
      <ellipse cx="50" cy="54" rx="22" ry="20" />
      {/* ears */}
      <ellipse cx="32" cy="44" rx="7" ry="14" transform="rotate(-20 32 44)" />
      <ellipse cx="68" cy="44" rx="7" ry="14" transform="rotate(20 68 44)" />
      {/* snout */}
      <ellipse cx="50" cy="68" rx="10" ry="9" />
      {/* nose */}
      <ellipse cx="50" cy="68" rx="3.2" ry="2.4" fill="rgba(0,0,0,0.35)" />
    </g>
  ),
  retriever: (c) => (
    <g fill={c}>
      <ellipse cx="50" cy="52" rx="23" ry="21" />
      {/* floppy ears */}
      <ellipse cx="28" cy="52" rx="8" ry="16" transform="rotate(-12 28 52)" />
      <ellipse cx="72" cy="52" rx="8" ry="16" transform="rotate(12 72 52)" />
      <ellipse cx="50" cy="68" rx="11" ry="9" />
      <ellipse cx="50" cy="69" rx="3.2" ry="2.4" fill="rgba(0,0,0,0.35)" />
    </g>
  ),
  terrier: (c) => (
    <g fill={c}>
      <rect x="30" y="38" width="40" height="36" rx="6" />
      {/* pointed ears */}
      <polygon points="30,38 30,22 42,36" />
      <polygon points="70,38 70,22 58,36" />
      <rect x="42" y="64" width="16" height="14" rx="3" />
      <ellipse cx="50" cy="71" rx="2.6" ry="2" fill="rgba(0,0,0,0.35)" />
    </g>
  ),
  shepherd: (c) => (
    <g fill={c}>
      <path d="M 28 70 Q 28 40 50 38 Q 72 40 72 70 Z" />
      {/* ears tall */}
      <polygon points="32,42 28,18 44,36" />
      <polygon points="68,42 72,18 56,36" />
      <ellipse cx="50" cy="68" rx="9" ry="8" />
      <ellipse cx="50" cy="69" rx="2.8" ry="2.2" fill="rgba(0,0,0,0.35)" />
    </g>
  ),
  dachshund: (c) => (
    <g fill={c}>
      {/* long body silhouette side view */}
      <ellipse cx="50" cy="58" rx="32" ry="9" />
      {/* head */}
      <ellipse cx="20" cy="52" rx="10" ry="9" />
      {/* ear */}
      <ellipse cx="22" cy="56" rx="5" ry="9" />
      {/* legs */}
      <rect x="28" y="64" width="4" height="14" />
      <rect x="68" y="64" width="4" height="14" />
      {/* tail */}
      <path d="M 80 56 Q 90 50 88 42" stroke={c} strokeWidth="3" fill="none" strokeLinecap="round" />
    </g>
  ),
  bulldog: (c) => (
    <g fill={c}>
      <rect x="26" y="40" width="48" height="38" rx="10" />
      {/* small ears */}
      <path d="M 30 40 Q 26 30 34 32 Z" />
      <path d="M 70 40 Q 74 30 66 32 Z" />
      {/* jowls suggested */}
      <ellipse cx="50" cy="70" rx="14" ry="8" />
      <ellipse cx="50" cy="68" rx="3" ry="2.2" fill="rgba(0,0,0,0.35)" />
    </g>
  ),
  poodle: (c) => (
    <g fill={c}>
      {/* fluffy head — cluster of circles */}
      <circle cx="50" cy="50" r="20" />
      <circle cx="34" cy="44" r="9" />
      <circle cx="66" cy="44" r="9" />
      <circle cx="38" cy="62" r="8" />
      <circle cx="62" cy="62" r="8" />
      {/* snout */}
      <ellipse cx="50" cy="64" rx="8" ry="7" />
      <ellipse cx="50" cy="64" rx="2.6" ry="2" fill="rgba(0,0,0,0.35)" />
    </g>
  ),
  cat: (c) => (
    <g fill={c}>
      <ellipse cx="50" cy="56" rx="22" ry="20" />
      {/* triangular ears */}
      <polygon points="28,46 26,22 44,40" />
      <polygon points="72,46 74,22 56,40" />
      {/* inner ear */}
      <polygon points="32,40 32,30 40,40" fill="rgba(0,0,0,0.25)" />
      <polygon points="68,40 68,30 60,40" fill="rgba(0,0,0,0.25)" />
      <ellipse cx="50" cy="66" rx="2.4" ry="1.8" fill="rgba(0,0,0,0.4)" />
      {/* whiskers */}
      <line x1="30" y1="62" x2="44" y2="64" stroke={c} strokeWidth="0.8" />
      <line x1="70" y1="62" x2="56" y2="64" stroke={c} strokeWidth="0.8" />
    </g>
  ),
  longhair: (c) => (
    <g fill={c}>
      {/* fluffy round head */}
      <ellipse cx="50" cy="56" rx="26" ry="22" />
      {/* tufted cheek fluff */}
      <circle cx="26" cy="58" r="7" />
      <circle cx="74" cy="58" r="7" />
      {/* small ears, pushed back */}
      <polygon points="32,40 32,26 44,38" />
      <polygon points="68,40 68,26 56,38" />
      <polygon points="34,36 34,30 40,36" fill="rgba(0,0,0,0.22)" />
      <polygon points="66,36 66,30 60,36" fill="rgba(0,0,0,0.22)" />
      {/* flat snub nose */}
      <ellipse cx="50" cy="64" rx="3" ry="2" fill="rgba(0,0,0,0.4)" />
      {/* whiskers */}
      <line x1="24" y1="62" x2="42" y2="64" stroke={c} strokeWidth="0.7" />
      <line x1="76" y1="62" x2="58" y2="64" stroke={c} strokeWidth="0.7" />
    </g>
  ),
  tabby: (c) => (
    <g fill={c}>
      {/* sitting cat side-ish silhouette */}
      {/* head */}
      <ellipse cx="38" cy="38" rx="14" ry="13" />
      {/* ears */}
      <polygon points="26,34 24,18 36,30" />
      <polygon points="50,34 52,18 40,30" />
      {/* body — teardrop sitting */}
      <path d="M 26 50 Q 22 80 44 82 Q 60 82 60 56 Q 56 48 38 48 Z" />
      {/* curled tail */}
      <path d="M 58 70 Q 78 70 78 50 Q 78 38 66 38" stroke={c} strokeWidth="5" fill="none" strokeLinecap="round" />
      {/* face dot */}
      <ellipse cx="38" cy="42" rx="1.6" ry="1.2" fill="rgba(0,0,0,0.4)" />
    </g>
  ),
  paw: (c) => (
    <g fill={c}>
      <ellipse cx="50" cy="62" rx="16" ry="14" />
      <circle cx="32" cy="46" r="6.5" />
      <circle cx="50" cy="38" r="6.5" />
      <circle cx="68" cy="46" r="6.5" />
      <circle cx="40" cy="30" r="4.5" />
      <circle cx="60" cy="30" r="4.5" />
    </g>
  ),
};

const BREEDS = [
  { id: 'labrador',  name: 'Labrador',        kind: 'dog' },
  { id: 'retriever', name: 'Golden Retriever',kind: 'dog' },
  { id: 'shepherd',  name: 'German Shepherd', kind: 'dog' },
  { id: 'terrier',   name: 'Terrier',         kind: 'dog' },
  { id: 'dachshund', name: 'Dachshund',       kind: 'dog' },
  { id: 'bulldog',   name: 'Bulldog',         kind: 'dog' },
  { id: 'poodle',    name: 'Poodle',          kind: 'dog' },
  { id: 'cat',       name: 'Short-haired Cat',kind: 'cat' },
  { id: 'longhair',  name: 'Long-haired Cat', kind: 'cat' },
  { id: 'tabby',     name: 'Sitting Cat',     kind: 'cat' },
  { id: 'paw',       name: 'Generic Paw',     kind: 'either' },
];

function TagPreview({ name = 'BARNABY', phone = '(415) 555-0119', breed = 'labrador', finish = 'brass', size = 360, uid = 'main' }) {
  const stops = FINISH_STOPS[finish] || FINISH_STOPS.brass;
  const r = 180;
  const cx = 200, cy = 200;
  const topRadius = 142;   // path radius for top text
  const botRadius = 142;   // for bottom text
  const Shape = BREED_SHAPES[breed] || BREED_SHAPES.paw;

  const upperName = (name || 'YOUR PET').toUpperCase();
  const phoneTxt = (phone || '').toUpperCase();

  const gid = `tag-${uid}`;

  return (
    <svg viewBox="0 0 400 420" width={size} height={size * 420 / 400} xmlns="http://www.w3.org/2000/svg" style={{ display: 'block' }}>
      <defs>
        {/* brushed metal radial */}
        <radialGradient id={`${gid}-face`} cx="38%" cy="32%" r="80%">
          <stop offset="0%" stopColor={stops.hi} />
          <stop offset="35%" stopColor={stops.mid} />
          <stop offset="75%" stopColor={stops.base} />
          <stop offset="100%" stopColor={stops.shadow} />
        </radialGradient>
        {/* rim shading */}
        <radialGradient id={`${gid}-rim`} cx="50%" cy="50%" r="50%">
          <stop offset="86%" stopColor="rgba(0,0,0,0)" />
          <stop offset="94%" stopColor="rgba(0,0,0,0.18)" />
          <stop offset="100%" stopColor="rgba(0,0,0,0.55)" />
        </radialGradient>
        {/* brushed striations */}
        <pattern id={`${gid}-brush`} patternUnits="userSpaceOnUse" width="3" height="3" patternTransform="rotate(35)">
          <line x1="0" y1="0" x2="0" y2="3" stroke="rgba(255,255,255,0.06)" strokeWidth="0.5" />
          <line x1="1.5" y1="0" x2="1.5" y2="3" stroke="rgba(0,0,0,0.06)" strokeWidth="0.5" />
        </pattern>
        {/* engrave shadow */}
        <filter id={`${gid}-engrave`} x="-20%" y="-20%" width="140%" height="140%">
          <feOffset in="SourceAlpha" dx="0" dy="0.6" />
          <feGaussianBlur stdDeviation="0.4" result="bshadow" />
          <feFlood floodColor="rgba(255,255,255,0.45)" />
          <feComposite in2="bshadow" operator="in" result="hilite" />
          <feMerge>
            <feMergeNode in="hilite" />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>
        {/* drop shadow under tag */}
        <filter id={`${gid}-drop`} x="-20%" y="-20%" width="140%" height="140%">
          <feGaussianBlur in="SourceAlpha" stdDeviation="4" />
          <feOffset dx="0" dy="6" result="off" />
          <feFlood floodColor="rgba(0,0,0,0.35)" />
          <feComposite in2="off" operator="in" />
          <feComposite in2="SourceGraphic" operator="over" />
        </filter>
        {/* text path along top */}
        <path id={`${gid}-top`} d={`M ${cx - topRadius} ${cy} A ${topRadius} ${topRadius} 0 0 1 ${cx + topRadius} ${cy}`} />
        {/* text path along bottom */}
        <path id={`${gid}-bot`} d={`M ${cx - botRadius} ${cy} A ${botRadius} ${botRadius} 0 0 0 ${cx + botRadius} ${cy}`} />
      </defs>

      {/* split ring loop at top */}
      <g transform={`translate(${cx} 24)`}>
        <circle r="14" fill="none" stroke={stops.shadow} strokeWidth="3.5" />
        <circle r="14" fill="none" stroke={stops.mid} strokeWidth="1.5" />
      </g>

      {/* tag body */}
      <g transform={`translate(0 40)`} filter={`url(#${gid}-drop)`}>
        {/* outer shadow disc */}
        <circle cx={cx} cy={cy} r={r} fill={stops.deep} />
        {/* face */}
        <circle cx={cx} cy={cy} r={r - 2} fill={`url(#${gid}-face)`} />
        <circle cx={cx} cy={cy} r={r - 2} fill={`url(#${gid}-brush)`} />
        <circle cx={cx} cy={cy} r={r - 2} fill={`url(#${gid}-rim)`} />

        {/* engraved inner ring */}
        <circle cx={cx} cy={cy} r={r - 18} fill="none" stroke={stops.engrave} strokeWidth="0.8" opacity="0.6" />
        <circle cx={cx} cy={cy} r={r - 22} fill="none" stroke="rgba(255,255,255,0.18)" strokeWidth="0.6" />

        {/* hole for ring at top */}
        <circle cx={cx} cy={cy - r + 22} r="9" fill={stops.deep} />
        <circle cx={cx} cy={cy - r + 22} r="7.5" fill={stops.shadow} />

        {/* top curved name */}
        <text fontFamily="Spectral, serif" fontSize="30" fontWeight="600" letterSpacing="3" fill={stops.engrave} filter={`url(#${gid}-engrave)`}>
          <textPath href={`#${gid}-top`} startOffset="50%" textAnchor="middle">{upperName}</textPath>
        </text>

        {/* center embossed breed silhouette */}
        <g transform={`translate(${cx - 50} ${cy - 50})`} opacity="0.92">
          <g filter={`url(#${gid}-engrave)`}>
            {Shape(stops.engrave)}
          </g>
        </g>

        {/* small ornament divider line */}
        <g stroke={stops.engrave} strokeWidth="0.8" opacity="0.55">
          <line x1={cx - 60} y1={cy + 58} x2={cx - 18} y2={cy + 58} />
          <line x1={cx + 18} y1={cy + 58} x2={cx + 60} y2={cy + 58} />
          <circle cx={cx} cy={cy + 58} r="1.6" fill={stops.engrave} stroke="none" />
        </g>

        {/* bottom curved phone */}
        <text fontFamily="JetBrains Mono, monospace" fontSize="14" letterSpacing="2.5" fill={stops.engrave} filter={`url(#${gid}-engrave)`}>
          <textPath href={`#${gid}-bot`} startOffset="50%" textAnchor="middle">{phoneTxt}</textPath>
        </text>
      </g>
    </svg>
  );
}

window.TagPreview = TagPreview;
window.BREEDS = BREEDS;