// Carousel slide renderer + thumbnail. Used in dashboard, posts list, preview.
// Slides are 1080×1350 portrait Instagram. We render them at any size via aspect-ratio + scale.
// Export to window.Carousel.

function pickFont(brand, role) {
  // role: 'display' uses first font, 'body' uses second (or first if only one)
  if (!brand || !brand.fonts || brand.fonts.length === 0) return 'Manrope';
  if (role === 'display') return brand.fonts[0];
  return brand.fonts[brand.fonts.length > 1 ? 1 : 0];
}

function isSerif(name = '') {
  return /Serif|Playfair|Instrument|DM Serif/i.test(name);
}

function SlideFrame({ slide, brand, scale = 1, interactive = false }) {
  const { fg, bg, accent, label, kind } = slide;
  const display = pickFont(brand, 'display');
  const body = pickFont(brand, 'body');
  const W = 540, H = 675; // 4:5 portrait base

  const wrap = {
    width: W * scale, height: H * scale,
    background: bg, color: fg,
    fontFamily: body,
    transition: 'background 240ms ease, color 240ms ease',
    overflow: 'hidden',
  };

  const inner = (children) => (
    <div className="relative w-full h-full" style={{ padding: 32 * scale }}>
      {/* top label */}
      <div className="absolute left-0 right-0 top-0 px-8 pt-6 flex items-center justify-between"
        style={{ padding: `${24*scale}px ${32*scale}px 0`, fontFamily: body }}>
        <span className="font-mono uppercase tracking-[0.18em]" style={{ fontSize: 11 * scale, opacity: 0.7 }}>
          {label}
        </span>
        <span className="font-mono uppercase tracking-[0.18em]" style={{ fontSize: 11 * scale, opacity: 0.7 }}>
          OMNEEE
        </span>
      </div>
      {children}
      {/* bottom accent line */}
      <div className="absolute left-0 right-0 bottom-0 flex items-center justify-between" style={{ padding: `0 ${32*scale}px ${24*scale}px` }}>
        <div style={{ height: 2*scale, width: 32*scale, background: accent }}/>
        <span className="font-mono uppercase tracking-[0.2em]" style={{ fontSize: 10*scale, opacity: 0.5 }}>@brand</span>
      </div>
    </div>
  );

  const fontDisplay = { fontFamily: display, fontWeight: isSerif(display) ? 600 : 700, letterSpacing: isSerif(display) ? -0.5 : -1 };
  const fontBody = { fontFamily: body, fontWeight: 400 };

  if (kind === 'cover') {
    return (
      <div style={wrap}>
        {inner(
          <div className="absolute inset-0 flex flex-col justify-end" style={{ padding: 32*scale, paddingBottom: 60*scale }}>
            <div style={{ height: 4*scale, width: 56*scale, background: accent, marginBottom: 16*scale }}/>
            <h1 style={{ ...fontDisplay, fontSize: 56*scale, lineHeight: 1.02 }}>{slide.title}</h1>
            {slide.subtitle && <p style={{ ...fontBody, fontSize: 18*scale, lineHeight: 1.4, marginTop: 16*scale, maxWidth: 380*scale, opacity: 0.85 }}>{slide.subtitle}</p>}
          </div>
        )}
      </div>
    );
  }
  if (kind === 'header') {
    return (
      <div style={wrap}>
        {inner(
          <div className="absolute inset-0 flex flex-col justify-center" style={{ padding: 36*scale }}>
            <div style={{ fontFamily: body, fontSize: 13*scale, opacity: 0.6, marginBottom: 12*scale, letterSpacing: 1*scale, textTransform: 'uppercase' }}>раздел</div>
            <h2 style={{ ...fontDisplay, fontSize: 44*scale, lineHeight: 1.05 }}>{slide.title}</h2>
            {slide.body && <p style={{ ...fontBody, fontSize: 17*scale, lineHeight: 1.5, marginTop: 18*scale, maxWidth: 420*scale, opacity: 0.85 }}>{slide.body}</p>}
          </div>
        )}
      </div>
    );
  }
  if (kind === 'number') {
    return (
      <div style={wrap}>
        {inner(
          <div className="absolute inset-0 flex flex-col justify-center" style={{ padding: 36*scale }}>
            <div style={{ ...fontDisplay, color: accent, fontSize: 180*scale, lineHeight: 0.9, letterSpacing: -4*scale }}>
              {slide.number || '3×'}
            </div>
            <p style={{ ...fontBody, fontSize: 18*scale, lineHeight: 1.4, marginTop: 20*scale, maxWidth: 420*scale, opacity: 0.85 }}>{slide.body}</p>
          </div>
        )}
      </div>
    );
  }
  if (kind === 'quote') {
    return (
      <div style={wrap}>
        {inner(
          <div className="absolute inset-0 flex flex-col justify-center" style={{ padding: 40*scale }}>
            <div style={{ ...fontDisplay, color: accent, fontSize: 96*scale, lineHeight: 0.7, marginBottom: 4*scale }}>"</div>
            <p style={{ ...fontDisplay, fontSize: 28*scale, lineHeight: 1.25, fontWeight: 500 }}>{slide.body}</p>
            {slide.author && <p style={{ ...fontBody, fontSize: 14*scale, opacity: 0.7, marginTop: 20*scale }}>{slide.author}</p>}
          </div>
        )}
      </div>
    );
  }
  if (kind === 'body') {
    return (
      <div style={wrap}>
        {inner(
          <div className="absolute inset-0 flex flex-col justify-center" style={{ padding: 36*scale }}>
            <h3 style={{ ...fontDisplay, fontSize: 32*scale, lineHeight: 1.1, marginBottom: 20*scale }}>{slide.title}</h3>
            <ul style={{ ...fontBody, fontSize: 17*scale, lineHeight: 1.5 }}>
              {(slide.items || []).map((t, i) => (
                <li key={i} style={{ display: 'flex', alignItems: 'baseline', gap: 12*scale, marginBottom: 12*scale }}>
                  <span style={{ width: 6*scale, height: 6*scale, borderRadius: 999, background: accent, flexShrink: 0, transform: `translateY(${-2*scale}px)` }}/>
                  <span>{t}</span>
                </li>
              ))}
            </ul>
          </div>
        )}
      </div>
    );
  }
  return <div style={wrap}>{inner(<div/>)}</div>;
}

// Cover-only mini renderer for thumbnails (no chrome, very compact)
function SlideThumb({ cover, brand, w = 120, h = 150 }) {
  const { fg, bg, accent, kind, label } = cover;
  const display = pickFont(brand || { fonts: ['Manrope', 'Manrope'] }, 'display');
  const isCover = kind === 'cover';
  const isQuote = kind === 'quote';
  const isNumber = kind === 'number';
  const isHeader = kind === 'header';
  return (
    <div style={{ width: w, height: h, background: bg, color: fg, position: 'relative', overflow: 'hidden', borderRadius: 10 }}>
      <div style={{ position: 'absolute', top: 8, left: 10, fontSize: 7, letterSpacing: 1, opacity: 0.6, textTransform: 'uppercase', fontFamily: 'JetBrains Mono, monospace' }}>{label}</div>
      <div style={{ position: 'absolute', top: 8, right: 10, fontSize: 7, letterSpacing: 1.5, opacity: 0.6, fontFamily: 'JetBrains Mono, monospace' }}>OMNEEE</div>
      {isCover && (
        <div style={{ position: 'absolute', bottom: 14, left: 10, right: 14, fontFamily: display, fontWeight: 700, fontSize: 14, lineHeight: 1.05, letterSpacing: -0.3 }}>
          <div style={{ width: 18, height: 2, background: accent, marginBottom: 6 }}/>
          {cover.title || 'Заголовок'}
        </div>
      )}
      {isQuote && (
        <div style={{ position: 'absolute', inset: 16, display: 'flex', alignItems: 'center', fontFamily: display, fontStyle: 'italic', fontSize: 11, lineHeight: 1.25 }}>
          <span style={{ color: accent, fontSize: 28, lineHeight: 0.6, marginRight: 4, alignSelf: 'flex-start' }}>"</span>
          {cover.title || 'Цитата дня'}
        </div>
      )}
      {isNumber && (
        <div style={{ position: 'absolute', left: 10, top: '40%', fontFamily: display, fontWeight: 800, color: accent, fontSize: 56, lineHeight: 0.8 }}>
          3×
        </div>
      )}
      {isHeader && (
        <div style={{ position: 'absolute', left: 10, right: 12, top: '38%', fontFamily: display, fontWeight: 700, fontSize: 13, lineHeight: 1.05 }}>
          {cover.title || 'Раздел'}
        </div>
      )}
      <div style={{ position: 'absolute', bottom: 6, left: 10, height: 1, width: 14, background: accent }}/>
    </div>
  );
}

window.Carousel = { SlideFrame, SlideThumb, pickFont };