// Reusable placeholder components — used until real ChatGPT-generated samples arrive.
// All visuals are CSS/SVG, no external images required.

// A "person portrait" placeholder — gradient + abstract face silhouette.
// `seed` (0-11) gives different gradient palettes so a wall of these looks varied
// instead of identical, while still suggesting "same person, different scenes".
const PORTRAIT_PALETTES = [
  ['#FFE4F1', '#FCA5A5', '#F472B6'],   // sunset pink
  ['#FEF3C7', '#FCD34D', '#F59E0B'],   // golden
  ['#DBEAFE', '#93C5FD', '#3B82F6'],   // pool blue
  ['#E0E7FF', '#A5B4FC', '#6366F1'],   // dusk lavender
  ['#FEE2E2', '#F87171', '#DC2626'],   // crimson studio
  ['#D1FAE5', '#6EE7B7', '#10B981'],   // forest
  ['#FED7AA', '#FB923C', '#EA580C'],   // amber
  ['#E9D5FF', '#C084FC', '#9333EA'],   // purple
  ['#CFFAFE', '#67E8F9', '#06B6D4'],   // cyan
  ['#FFD9C9', '#FF9A8B', '#FF6B6B'],   // peach
  ['#F5F3FF', '#DDD6FE', '#A78BFA'],   // soft lilac
  ['#FCE7F3', '#F9A8D4', '#EC4899'],   // hot pink
];

const SCENE_TAGS = [
  'Beach',  'Café',   'Studio', 'Evening',
  'Travel', 'Gym',    'Casual', 'Fashion',
  'Bedroom','Sunset', 'Urban',  'Editorial',
];

function PortraitPlaceholder({ seed = 0, label, ratio = '3 / 4', tag = true, sample = false }) {
  const [a, b, c] = PORTRAIT_PALETTES[seed % PORTRAIT_PALETTES.length];
  const t = SCENE_TAGS[seed % SCENE_TAGS.length];
  return (
    <div style={{
      position: 'relative', width: '100%', aspectRatio: ratio,
      borderRadius: 14, overflow: 'hidden',
      background: `linear-gradient(135deg, ${a} 0%, ${b} 50%, ${c} 100%)`,
      boxShadow: '0 1px 2px rgba(10,14,39,.04), 0 8px 24px rgba(10,14,39,.06)',
    }}>
      {/* Abstract silhouette of a person */}
      <svg viewBox="0 0 100 130" preserveAspectRatio="xMidYMid slice"
           style={{ position:'absolute', inset:0, width:'100%', height:'100%' }}>
        <defs>
          <radialGradient id={`pg${seed}`} cx="50%" cy="35%" r="55%">
            <stop offset="0%" stopColor="rgba(255,255,255,.55)" />
            <stop offset="100%" stopColor="rgba(255,255,255,0)" />
          </radialGradient>
          <linearGradient id={`pf${seed}`} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="rgba(0,0,0,.0)" />
            <stop offset="100%" stopColor="rgba(0,0,0,.18)" />
          </linearGradient>
        </defs>
        <rect width="100" height="130" fill={`url(#pg${seed})`} />
        {/* Shoulders */}
        <path d="M 5 130 Q 5 95 30 88 Q 50 84 50 84 Q 50 84 70 88 Q 95 95 95 130 Z"
              fill="rgba(255,255,255,.35)" />
        {/* Head */}
        <ellipse cx="50" cy="58" rx="18" ry="22" fill="rgba(255,255,255,.55)" />
        {/* Hair */}
        <path d="M 32 50 Q 30 36 50 34 Q 70 36 68 50 Q 70 60 68 64 Q 64 52 50 50 Q 36 52 32 64 Q 30 60 32 50 Z"
              fill="rgba(0,0,0,.25)" />
        <rect width="100" height="130" fill={`url(#pf${seed})`} />
      </svg>

      {tag && (
        <div style={{
          position:'absolute', left:10, top:10,
          padding:'4px 9px', borderRadius:999,
          background:'rgba(255,255,255,.85)', backdropFilter:'blur(8px)',
          fontSize:10.5, fontWeight:600, color:'#0A0E27', letterSpacing:'.02em',
        }}>{label || t}</div>
      )}
      {sample && (
        <div style={{
          position:'absolute', right:10, top:10,
          padding:'3px 8px', borderRadius:6,
          background:'rgba(10,14,39,.7)', color:'#fff',
          fontSize:9.5, fontWeight:600, letterSpacing:'.08em',
        }}>SAMPLE</div>
      )}
    </div>
  );
}

// Video placeholder — same vibe but with a play button overlay
function VideoPlaceholder({ seed = 0, label, ratio = '9 / 16' }) {
  const [a, b, c] = PORTRAIT_PALETTES[(seed + 3) % PORTRAIT_PALETTES.length];
  return (
    <div style={{
      position: 'relative', width: '100%', aspectRatio: ratio,
      borderRadius: 14, overflow: 'hidden',
      background: `linear-gradient(160deg, ${a} 0%, ${b} 55%, ${c} 100%)`,
      boxShadow: '0 1px 2px rgba(10,14,39,.04), 0 12px 30px rgba(10,14,39,.10)',
    }}>
      <svg viewBox="0 0 100 178" preserveAspectRatio="xMidYMid slice"
           style={{ position:'absolute', inset:0, width:'100%', height:'100%' }}>
        <ellipse cx="50" cy="78" rx="20" ry="24" fill="rgba(255,255,255,.55)" />
        <path d="M 22 178 Q 22 130 50 120 Q 78 130 78 178 Z" fill="rgba(255,255,255,.45)" />
        <path d="M 30 70 Q 28 50 50 48 Q 72 50 70 70 Q 72 86 70 92 Q 64 76 50 74 Q 36 76 30 92 Q 28 86 30 70 Z"
              fill="rgba(0,0,0,.32)" />
      </svg>
      {/* Play button */}
      <div style={{
        position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center',
      }}>
        <div style={{
          width:54, height:54, borderRadius:'50%',
          background:'rgba(255,255,255,.92)', display:'flex',
          alignItems:'center', justifyContent:'center',
          boxShadow:'0 8px 30px rgba(0,0,0,.25)',
        }}>
          <svg width="18" height="20" viewBox="0 0 18 20" fill="#0A0E27">
            <path d="M2 1 L16 10 L2 19 Z" />
          </svg>
        </div>
      </div>
      {/* Bottom gradient + label */}
      <div style={{
        position:'absolute', left:0, right:0, bottom:0, height:'40%',
        background:'linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0))',
      }}/>
      <div style={{
        position:'absolute', left:12, bottom:10, color:'#fff',
        fontSize:11, fontWeight:600, letterSpacing:'.02em',
      }}>{label || 'AI Video'}</div>
      <div style={{
        position:'absolute', right:12, bottom:10, color:'#fff',
        fontSize:10, fontWeight:600, fontVariantNumeric:'tabular-nums',
        background:'rgba(0,0,0,.4)', padding:'2px 6px', borderRadius:4,
      }}>0:19</div>
    </div>
  );
}

// "Selfie input" — a small chunky portrait used for the upload-3-photos visual
function SelfiePlaceholder({ seed = 0 }) {
  const [a, b, c] = PORTRAIT_PALETTES[seed % PORTRAIT_PALETTES.length];
  return (
    <div style={{
      width:'100%', aspectRatio:'1/1', borderRadius:12, overflow:'hidden',
      background:`linear-gradient(135deg, ${a}, ${c})`,
      border:'2px solid #fff',
      boxShadow:'0 4px 16px rgba(10,14,39,.08)',
      position:'relative',
    }}>
      <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"
           style={{ width:'100%', height:'100%' }}>
        <ellipse cx="50" cy="44" rx="16" ry="20" fill="rgba(255,255,255,.55)" />
        <path d="M 18 100 Q 18 70 50 64 Q 82 70 82 100 Z" fill="rgba(255,255,255,.45)" />
        <path d="M 32 38 Q 30 22 50 20 Q 70 22 68 38 Q 70 50 68 56 Q 64 42 50 40 Q 36 42 32 56 Q 30 50 32 38 Z"
              fill="rgba(0,0,0,.28)" />
      </svg>
    </div>
  );
}

Object.assign(window, { PortraitPlaceholder, VideoPlaceholder, SelfiePlaceholder, PORTRAIT_PALETTES, SCENE_TAGS });