/* garment.jsx — recolorable SVG garment mockups (tee / ladies / long-sleeve / hoodie / hat)
   with fabric shading + a chest/front print area for the user's uploaded artwork. */

// luminance helper — decide light vs dark fabric treatment
function chLuminance(hex) {
  const h = hex.replace('#', '');
  const r = parseInt(h.substr(0, 2), 16) / 255;
  const g = parseInt(h.substr(2, 2), 16) / 255;
  const b = parseInt(h.substr(4, 2), 16) / 255;
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

// ---- garment outline paths (viewBox 0 0 600 720) ----
const CH_GARMENTS = {
  tee: {
    body: 'M226,118 L116,154 C98,178 84,216 78,256 L176,272 L160,648 L440,648 L424,272 L522,256 C516,216 502,178 484,154 L374,118 L350,104 C325,134 275,134 250,104 Z',
    collar: 'M250,104 C275,134 325,134 350,104',
    print: { x: 222, y: 196, w: 156, h: 198 },
  },
  ladies: {
    body: 'M232,118 L126,152 C106,176 92,210 86,246 L174,266 C174,350 160,504 138,648 L462,648 C440,504 426,350 426,266 L514,246 C508,210 494,176 474,152 L368,118 L348,104 C324,130 276,130 252,104 Z',
    collar: 'M252,104 C276,130 324,130 348,104',
    print: { x: 222, y: 194, w: 156, h: 198 },
  },
  long: {
    body: 'M226,118 L116,154 C92,182 70,250 52,360 C46,396 40,452 36,520 L118,540 C132,452 150,360 176,290 L160,648 L440,648 L424,290 C450,360 468,452 482,540 L564,520 C560,452 554,396 548,360 C530,250 508,182 484,154 L374,118 L350,104 C325,134 275,134 250,104 Z',
    collar: 'M250,104 C275,134 325,134 350,104',
    print: { x: 222, y: 196, w: 156, h: 198 },
  },
  hoodie: {
    body: 'M226,150 L112,188 C94,212 80,250 74,292 L172,308 L160,648 L440,648 L428,308 L526,292 C520,250 506,212 488,188 L374,150 Z',
    collar: 'M226,150 C232,118 246,96 300,96 C354,96 368,118 374,150',
    hood: 'M222,156 C214,96 250,52 300,52 C350,52 386,96 378,156 C350,128 250,128 222,156 Z',
    pocket: 'M212,452 L388,452 L408,560 L192,560 Z',
    print: { x: 224, y: 232, w: 152, h: 176 },
  },
  hat: {
    isHat: true,
    crown: 'M152,440 C152,256 212,196 300,196 C388,196 448,256 448,440 Z',
    bill: 'M118,452 C210,440 390,440 482,452 C440,486 360,498 300,498 C240,498 160,486 118,452 Z',
    body: 'M152,440 C152,256 212,196 300,196 C388,196 448,256 448,440 Z M118,452 C210,440 390,440 482,452 C440,486 360,498 300,498 C240,498 160,486 118,452 Z',
    print: { x: 226, y: 248, w: 148, h: 124 },
  },
};

function chArtwork(artwork, pr, scale, offsetY, seam, printId) {
  const aw = pr.w * scale;
  const ah = pr.h * scale;
  const ax = pr.x + (pr.w - aw) / 2;
  const ay = pr.y + (pr.h - ah) / 2 + offsetY;
  if (artwork) {
    return (
      <g clipPath={`url(#${printId})`}>
        <image href={artwork} x={ax} y={ay} width={aw} height={ah} preserveAspectRatio="xMidYMid meet" />
      </g>
    );
  }
  return (
    <g>
      <rect x={pr.x} y={pr.y} width={pr.w} height={pr.h} rx="6" fill="none" stroke={seam} strokeWidth="2" strokeDasharray="7 8" opacity="0.7" />
      <text x={pr.x + pr.w / 2} y={pr.y + pr.h / 2} textAnchor="middle" fontFamily="Oswald, sans-serif" fontWeight="600" fontSize="15" letterSpacing="0.08em" fill={seam} style={{ textTransform: 'uppercase' }}>
        <tspan x={pr.x + pr.w / 2} dy="-6">Your design</tspan>
        <tspan x={pr.x + pr.w / 2} dy="22">goes here</tspan>
      </text>
    </g>
  );
}

function Garment({ type = 'tee', color = '#ffffff', artwork, scale = 1, offsetY = 0 }) {
  const g = CH_GARMENTS[type] || CH_GARMENTS.tee;
  const lum = chLuminance(color);
  const isLight = lum > 0.55;
  const isVeryLight = lum > 0.85;
  const clipId = 'gclip-' + type;
  const shadeId = 'gshade-' + type;
  const hiId = 'ghi-' + type;
  const printId = 'gprint-' + type;
  const pr = g.print;

  const seam = isLight ? 'rgba(0,0,0,0.16)' : 'rgba(255,255,255,0.16)';
  const outline = isLight ? (isVeryLight ? 'rgba(0,0,0,0.18)' : 'rgba(0,0,0,0.12)') : 'rgba(0,0,0,0.28)';

  const defs = (
    <defs>
      <clipPath id={clipId}>
        <path d={g.body} />
        {g.hood && <path d={g.hood} />}
      </clipPath>
      <linearGradient id={shadeId} x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor="#000" stopOpacity="0" />
        <stop offset="0.55" stopColor="#000" stopOpacity="0" />
        <stop offset="1" stopColor="#000" stopOpacity={isLight ? 0.14 : 0.34} />
      </linearGradient>
      <radialGradient id={hiId} cx="0.42" cy="0.32" r="0.5">
        <stop offset="0" stopColor="#fff" stopOpacity={isLight ? 0.35 : 0.16} />
        <stop offset="1" stopColor="#fff" stopOpacity="0" />
      </radialGradient>
      <clipPath id={printId}>
        <rect x={pr.x} y={pr.y} width={pr.w} height={pr.h} />
      </clipPath>
    </defs>
  );

  // ---------------- HAT ----------------
  if (g.isHat) {
    return (
      <svg viewBox="0 0 600 720" width="100%" height="100%" style={{ display: 'block' }}>
        {defs}
        <ellipse cx="300" cy="512" rx="150" ry="14" fill="rgba(0,0,0,0.10)" />
        {/* bill */}
        <path d={g.bill} fill={color} stroke={outline} strokeWidth="2" />
        {/* brim top-surface highlight (faces up, reads as projecting forward) */}
        <path d="M132,452 C212,442 388,442 468,452 C418,462 182,462 132,452 Z" fill="#fff" opacity={isLight ? 0.18 : 0.1} />
        {/* crown */}
        <path d={g.crown} fill={color} stroke={outline} strokeWidth="2" />
        {/* shading clipped to crown + bill */}
        <g clipPath={`url(#${clipId})`}>
          <rect x="0" y="0" width="600" height="720" fill={`url(#${shadeId})`} />
          <rect x="0" y="0" width="600" height="720" fill={`url(#${hiId})`} />
          {/* shadow where crown meets bill */}
          <path d="M152,420 C200,452 400,452 448,420 C448,448 152,448 152,420 Z" fill="#000" opacity={isLight ? 0.08 : 0.18} />
        </g>
        {/* panel seams */}
        <g fill="none" stroke={seam} strokeWidth="2.5" strokeLinecap="round">
          <path d="M300,200 L300,432" />
          <path d="M300,200 C236,214 200,312 206,432" />
          <path d="M300,200 C364,214 400,312 394,432" />
        </g>
        {/* headband seam separating crown from brim */}
        <path d="M158,430 C220,446 380,446 442,430" fill="none" stroke={seam} strokeWidth="3" strokeLinecap="round" />
        {/* top button */}
        <circle cx="300" cy="200" r="9" fill={color} stroke={seam} strokeWidth="2" />
        {chArtwork(artwork, pr, scale, offsetY, seam, printId)}
      </svg>
    );
  }

  // ---------------- APPAREL ----------------
  return (
    <svg viewBox="0 0 600 720" width="100%" height="100%" style={{ display: 'block' }}>
      {defs}
      <ellipse cx="300" cy="668" rx="180" ry="22" fill="rgba(0,0,0,0.10)" />
      {g.hood && <path d={g.hood} fill={color} stroke={outline} strokeWidth="2" />}
      <path d={g.body} fill={color} stroke={outline} strokeWidth="2" />

      <g clipPath={`url(#${clipId})`}>
        <rect x="0" y="0" width="600" height="720" fill={`url(#${shadeId})`} />
        <rect x="0" y="0" width="600" height="720" fill={`url(#${hiId})`} />
        <path d="M176,272 C188,360 184,520 168,648 L120,648 C140,500 150,360 150,300 Z" fill="#000" opacity={isLight ? 0.05 : 0.12} />
        <path d="M424,272 C412,360 416,520 432,648 L480,648 C460,500 450,360 450,300 Z" fill="#000" opacity={isLight ? 0.05 : 0.12} />
        {g.hood && <path d="M222,156 C250,128 350,128 378,156 C360,176 240,176 222,156 Z" fill="#000" opacity={isLight ? 0.12 : 0.3} />}
        {g.pocket && <path d={g.pocket} fill="#000" opacity={isLight ? 0.06 : 0.14} />}
      </g>

      <path d={g.collar} fill="none" stroke={seam} strokeWidth={type === 'hoodie' ? 9 : 7} strokeLinecap="round" />
      {g.pocket && <path d={g.pocket} fill="none" stroke={seam} strokeWidth="2.5" />}
      {g.hood && (
        <g stroke={seam} strokeWidth="4" strokeLinecap="round">
          <line x1="282" y1="150" x2="278" y2="232" />
          <line x1="318" y1="150" x2="322" y2="232" />
        </g>
      )}
      <g fill="none" stroke={seam} strokeWidth="2" opacity="0.8">
        <path d="M176,272 C176,300 168,330 160,360" />
        <path d="M424,272 C424,300 432,330 440,360" />
      </g>

      {chArtwork(artwork, pr, scale, offsetY, seam, printId)}
    </svg>
  );
}

Object.assign(window, { Garment, chLuminance, CH_GARMENTS });

/* PhotoTee — real product-photo mockup with the artwork composited onto the chest.
   Print zone is expressed as % of the square photo (collar-down chest placement). */
const CH_TEE_PRINT = { left: '34%', top: '19%', width: '32%', height: '33%' };

function PhotoTee({ src, artwork, light, printZone, strings, artScale = 1, artOffsetY = 0 }) {
  const ph = light ? 'rgba(0,0,0,0.42)' : 'rgba(255,255,255,0.78)';
  const zone = printZone || CH_TEE_PRINT;
  return (
    <div style={{ position: 'relative', height: '100%', aspectRatio: '1 / 1', margin: '0 auto' }}>
      <img src={src} alt="" style={{ position: 'relative', width: '100%', height: '100%', objectFit: 'contain', display: 'block', zIndex: 1 }} />
      <div style={{ position: 'absolute', ...zone, zIndex: 2, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        {artwork ? (
          /* translateY% is relative to this wrapper (= the print zone), matching
             the offset math in composeMockup */
          <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', transform: 'translateY(' + (artOffsetY * 100) + '%) scale(' + artScale + ')' }}>
            <img src={artwork} alt="" style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain', display: 'block' }} />
          </div>
        ) : (
          <div style={{ width: '100%', height: '100%', border: `2px dashed ${ph}`, borderRadius: 6, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', lineHeight: 1.3, fontFamily: 'Oswald, sans-serif', fontWeight: 600, fontSize: 13, letterSpacing: '.06em', textTransform: 'uppercase', color: ph }}>
            <span>Your design</span><span>goes here</span>
          </div>
        )}
      </div>
      {strings && <img src={strings} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'contain', display: 'block', zIndex: 3, pointerEvents: 'none' }} />}
    </div>
  );
}

Object.assign(window, { PhotoTee, CH_TEE_PRINT });

/* PhotoHoodie — layered hoodie mockup: base photo (no strings) → artwork → drawstrings
   on top, so the print realistically falls behind the hanging strings. */
const CH_HOODIE_PRINT = { left: '34%', top: '34%', width: '32%', height: '25%' };

function PhotoHoodie({ base, strings, artwork, light, printZone, artScale = 1, artOffsetY = 0 }) {
  const ph = light ? 'rgba(0,0,0,0.42)' : 'rgba(255,255,255,0.78)';
  const zone = printZone || CH_HOODIE_PRINT;
  return (
    <div style={{ position: 'relative', height: '100%', aspectRatio: '1 / 1', margin: '0 auto' }}>
      <img src={base} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'contain', display: 'block' }} />
      <div style={{ position: 'absolute', ...zone, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        {artwork ? (
          <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', transform: 'translateY(' + (artOffsetY * 100) + '%) scale(' + artScale + ')' }}>
            <img src={artwork} alt="" style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain', display: 'block' }} />
          </div>
        ) : (
          <div style={{ width: '100%', height: '100%', border: `2px dashed ${ph}`, borderRadius: 6, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', lineHeight: 1.3, fontFamily: 'Oswald, sans-serif', fontWeight: 600, fontSize: 13, letterSpacing: '.06em', textTransform: 'uppercase', color: ph }}>
            <span>Your design</span><span>goes here</span>
          </div>
        )}
      </div>
      {strings && <img src={strings} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'contain', display: 'block', pointerEvents: 'none' }} />}
    </div>
  );
}

Object.assign(window, { PhotoHoodie, CH_HOODIE_PRINT });