/* =========================================================================
   골라주 — building-block components  (window-exported for app.jsx)
   ========================================================================= */
const DS = window.MarginaliaDesignSystem_fe27e0;
const { Button, Card, Badge, DoodleIcon } = DS;

/* ----- A few scattered hand-drawn stars as brand sparkle ----- */
function StarScatter({ items = [] }) {
  return (
    <React.Fragment>
      {items.map((s, i) =>
        <DoodleIcon
          key={i}
          name={s.name || 'star'}
          size={s.size || 26}
          tilt={s.tilt || 0}
          aria-hidden="true"
          style={{ position: 'absolute', left: s.left, right: s.right, top: s.top, bottom: s.bottom, opacity: s.opacity ?? 0.9, pointerEvents: 'none', zIndex: 0 }} />
      )}
    </React.Fragment>
  );
}

/* ----- Section header: handwritten eyebrow + marker title ----- */
function SectionHead({ eyebrow, title, sub, align = 'left', doodle, headingId }) {
  return (
    <div className={align === 'center' ? 'section-head--center' : ''}>
      {eyebrow &&
        <div className="section-head-eyebrow">
          {doodle && <DoodleIcon name={doodle} size={24} tilt={-8} aria-hidden="true" />}
          <span className="section-head-eyebrow-text">{eyebrow}</span>
        </div>
      }
      <h2 className="section-head-title" id={headingId}>{title}</h2>
      {sub && <p className="section-head-sub">{sub}</p>}
    </div>
  );
}

/* ----- Mood chip: doodle + label, ink outline, tint wash when active ----- */
function MoodChip({ mood, active, onClick }) {
  return (
    <button
      type="button"
      onClick={onClick}
      aria-pressed={active}
      className={`mood-chip mood-chip--${mood.tone}${active ? ' mood-chip--active' : ''}`}>
      <DoodleIcon name={mood.doodle} size={34} tilt={active ? -6 : 0} aria-hidden="true" />
      <span className="mood-label">{mood.label}</span>
      <span className="mood-sub">{mood.sub}</span>
    </button>
  );
}

/* ----- Small toggle pill row (time / company refiners) ----- */
function PillRow({ label, options, value, onChange }) {
  return (
    <div className="pill-row">
      <span className="pill-row-label" id={`pill-label-${label}`}>{label}</span>
      <div className="pill-row-options" role="group" aria-labelledby={`pill-label-${label}`}>
        {options.map((o) => {
          const active = o.id === value;
          return (
            <button key={o.id} type="button" onClick={() => onChange(o.id)} aria-pressed={active}
              className={`pill-btn${active ? ' pill-btn--active' : ''}`}>{o.label}</button>
          );
        })}
      </div>
    </div>
  );
}

/* ----- Poster thumbnail with paper frame + washi tape ----- */
function PosterThumb({ pick, width = 200, tilt = -2 }) {
  return (
    <div className="poster-thumb" style={{ width, transform: `rotate(${tilt}deg)` }}>
      <div aria-hidden="true" className="poster-washi" />
      <div className="poster-frame">
        {pick.poster ? (
          <img
            className="poster-image poster-image--photo"
            src={pick.poster}
            alt={`${pick.title} 포스터`}
          />
        ) : (
          <div
            className="poster-image"
            role="img"
            aria-label={`${pick.title} 포스터`}
            style={{ background: `linear-gradient(150deg, ${pick.color} 0%, rgba(0,0,0,0.45) 130%)` }}>
            <div aria-hidden="true" className="poster-grain" />
            <div aria-hidden="true" className="poster-vignette" />
            <div className="poster-caption" aria-hidden="true">
              <div className="poster-genre">{pick.genre}</div>
              <div className="poster-title" style={{ fontSize: width > 180 ? '1.35rem' : '1.1rem' }}>{pick.title}</div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

/* ----- "어디서 봐" platform badge ----- */
function PlatformBadge({ name }) {
  return (
    <span className="platform-badge">
      <span aria-hidden="true" className="platform-badge-dot" />
      {name}
    </span>
  );
}

/* ----- Gollage Card region (the AI-collage placeholder, "영역 표시") ----- */
function GollageCard({ pick, mood, copy, onShare, hideShare = false }) {
  const kw = pick.kw || [];
  const shareLabels = { '인스타': '인스타그램으로 공유', 'X': 'X(트위터)로 공유', '카톡': '카카오톡으로 공유', '저장': '카드 이미지 저장' };
  return (
    <div className="gollage-card-wrap">
      <div className="gollage-card">
        <div className="gollage-header">
          <Badge stamp tone="coral">Gollage Card</Badge>
          <span className="gollage-date">{new Date().toLocaleDateString('ko-KR', { month: 'long', day: 'numeric' })}</span>
        </div>
        <div
          className="gollage-placeholder"
          role="img"
          aria-label={`${pick.title} — ${mood.label} 무드 AI 콜라주`}
          style={{ background: `repeating-linear-gradient(45deg, ${pick.color}22 0 12px, transparent 12px 24px), ${pick.color}14` }}>
          <DoodleIcon name={mood.doodle} size={40} tilt={-6} aria-hidden="true" />
          <span className="gollage-placeholder-label" aria-hidden="true">AI 콜라주 비주얼</span>
          <span className="gollage-placeholder-sub" aria-hidden="true">무드·색감·키워드로 생성되는 자리</span>
        </div>
        <div className="gollage-caption">
          <div className="gollage-title">{pick.title}</div>
          <div className="gollage-sub">{pick.genre} · {mood.label}</div>
          <div className="gollage-kw">
            {kw.map((k) => <Badge key={k} tone={mood.tone} size="sm">#{k}</Badge>)}
          </div>
        </div>
        <div className="gollage-watermark" aria-hidden="true">
          <DoodleIcon name="star" size={16} aria-hidden="true" />
          <span className="gollage-brand">gollage</span>
          <span className="gollage-url">gollage.app</span>
        </div>
      </div>
      {!hideShare && <div className="gollage-share" role="group" aria-label="공유 및 저장">
        {['인스타', 'X', '카톡', '저장'].map((s) =>
          <button key={s} type="button" onClick={() => onShare && onShare(s)}
            className="gollage-share-btn" aria-label={shareLabels[s]}>{s}</button>
        )}
      </div>}
    </div>
  );
}

Object.assign(window, { StarScatter, SectionHead, MoodChip, PillRow, PosterThumb, PlatformBadge, GollageCard });