// Monospace-labeled striped placeholders used wherever we don't have real imagery.
// The labels tell the viewer what should be dropped into each slot.

function StripePlaceholder({ label, w = '100%', h = '100%', tone = 'warm', rounded = 0, style = {} }) {
  const palette = {
    warm:  { a: '#e8dfc8', b: '#dbcfb1', ink: '#6b5a3a' },
    cool:  { a: '#d9d9d9', b: '#cccccc', ink: '#555' },
    photo: { a: '#8a7c66', b: '#746651', ink: '#f4ecdc' },
    ink:   { a: '#221d18', b: '#2d2720', ink: '#d6c9a8' },
    paper: { a: '#efe6cf', b: '#e6dcc3', ink: '#72623e' },
  }[tone] || { a: '#e8dfc8', b: '#dbcfb1', ink: '#6b5a3a' };

  return (
    <div style={{
      width: w, height: h, borderRadius: rounded,
      background: `repeating-linear-gradient(135deg, ${palette.a} 0 8px, ${palette.b} 8px 16px)`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: palette.ink, fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
      fontSize: 10, letterSpacing: 0.6, textTransform: 'uppercase',
      overflow: 'hidden', position: 'relative', ...style,
    }}>
      <span style={{
        padding: '2px 6px', background: `${palette.a}cc`,
        border: `1px dashed ${palette.ink}`,
      }}>{label}</span>
    </div>
  );
}

// Illustrations for the three sample subjects — still simple shapes, not tracings.
// Rendered via repeating-gradient patterns + a flat silhouette.
function SubjectIllustration({ which, size = 140 }) {
  const common = {
    width: size, height: size, display: 'block',
  };
  // 実写真 (data URL or URL) の場合はそのまま表示
  if (typeof which === 'string' && (which.startsWith('data:') || which.startsWith('http'))) {
    return <img src={which} style={{ ...common, objectFit: 'cover', background: '#1a1612' }} alt=""/>;
  }
  if (which === 'teapot') {
    return (
      <svg viewBox="0 0 140 140" style={common}>
        <defs>
          <pattern id="pT" width="6" height="6" patternUnits="userSpaceOnUse">
            <path d="M0 6 L6 0" stroke="#8b2920" strokeWidth="0.6" opacity="0.35"/>
          </pattern>
        </defs>
        <rect width="140" height="140" fill="#f4ecdc"/>
        {/* body */}
        <ellipse cx="70" cy="82" rx="38" ry="28" fill="#8b2920"/>
        <ellipse cx="70" cy="82" rx="38" ry="28" fill="url(#pT)"/>
        {/* lid */}
        <ellipse cx="70" cy="54" rx="22" ry="6" fill="#6b1f18"/>
        <circle cx="70" cy="48" r="3.5" fill="#3a100c"/>
        {/* spout */}
        <path d="M108 78 Q124 68 120 56" stroke="#8b2920" strokeWidth="8" fill="none" strokeLinecap="round"/>
        {/* handle (yokote) */}
        <rect x="30" y="72" width="18" height="6" rx="2" fill="#6b1f18"/>
        {/* base shadow */}
        <ellipse cx="70" cy="112" rx="34" ry="3" fill="#1a1612" opacity="0.2"/>
      </svg>
    );
  }
  if (which === 'fern') {
    return (
      <svg viewBox="0 0 140 140" style={common}>
        <rect width="140" height="140" fill="#f4ecdc"/>
        <g stroke="#5a6b4a" strokeWidth="1.2" fill="none">
          <path d="M70 128 C 70 80 70 40 70 18"/>
          {[...Array(9)].map((_, i) => {
            const y = 120 - i * 12;
            const len = 14 + i * 2;
            return (
              <g key={i}>
                <path d={`M70 ${y} Q ${70 - len/2} ${y - 4} ${70 - len} ${y - 8}`}/>
                <path d={`M70 ${y} Q ${70 + len/2} ${y - 4} ${70 + len} ${y - 8}`}/>
              </g>
            );
          })}
        </g>
        {/* sori dots on back */}
        <g fill="#3a4830" opacity="0.6">
          {[...Array(14)].map((_, i) => (
            <circle key={i} cx={40 + (i % 7) * 10} cy={40 + Math.floor(i/7) * 8} r="0.9"/>
          ))}
        </g>
      </svg>
    );
  }
  if (which === 'coin') {
    return (
      <svg viewBox="0 0 140 140" style={common}>
        <rect width="140" height="140" fill="#f4ecdc"/>
        <defs>
          <radialGradient id="cG" cx="0.35" cy="0.3">
            <stop offset="0" stopColor="#c9a94a"/>
            <stop offset="1" stopColor="#8a6f2a"/>
          </radialGradient>
        </defs>
        <circle cx="70" cy="70" r="46" fill="url(#cG)"/>
        <circle cx="70" cy="70" r="46" fill="none" stroke="#5a4818" strokeWidth="1"/>
        <circle cx="70" cy="70" r="8" fill="#f4ecdc"/>
        <circle cx="70" cy="70" r="8" fill="none" stroke="#5a4818" strokeWidth="1"/>
        {/* rice stalks */}
        <g stroke="#5a4818" strokeWidth="0.8" fill="none">
          <path d="M70 106 Q 60 90 55 82"/>
          <path d="M70 106 Q 80 90 85 82"/>
          <path d="M58 96 L 52 94 M60 92 L 54 90 M62 88 L 56 86"/>
          <path d="M82 96 L 88 94 M80 92 L 86 90 M78 88 L 84 86"/>
        </g>
        <text x="70" y="44" textAnchor="middle" fontFamily="serif" fontSize="11" fill="#5a4818">五</text>
      </svg>
    );
  }
  return <StripePlaceholder label={which || 'IMG'} w={size} h={size}/>;
}

window.StripePlaceholder = StripePlaceholder;
window.SubjectIllustration = SubjectIllustration;