/* eslint-disable no-undef */
// Telegram Mini App frame — wraps IOSDevice with Telegram chrome
// + the BURGER logo mark (abstract bun glyph)

// The Havakand burger mark — a solid dark "bun" silhouette with
// a slot showing one filling element. Approximated from the PDF logo.
function BurgerMark({ size = 28, color = '#0A0505', accent = '#DA0505' }) {
  const s = size;
  return (
    <svg width={s} height={s * 0.78} viewBox="0 0 100 78" className="tb-mark">
      {/* top bun */}
      <path d="M50 4 C18 4, 4 26, 4 38 L96 38 C96 26, 82 4, 50 4 Z" fill={color}/>
      {/* gap (slot) */}
      <rect x="4" y="38" width="92" height="6" fill="none"/>
      {/* filling — a wedge */}
      <path d="M22 41 L34 36 L46 41 L58 36 L70 41 L82 36" stroke={accent} strokeWidth="3" fill="none" strokeLinejoin="round" strokeLinecap="round"/>
      {/* bottom bun */}
      <path d="M4 44 C4 60, 18 74, 50 74 C82 74, 96 60, 96 44 Z" fill={color}/>
    </svg>
  );
}

// the BURGER wordmark — "the" in rojo, "BURGER" in black/white, "by Havakand" sub
function BurgerLogo({ size = 18, light = false, onRed = false, sub = true }) {
  const main = onRed ? '#FAFAFA' : (light ? '#FAFAFA' : '#0A0505');
  const theColor = onRed ? '#FAFAFA' : '#DA0505';
  const subColor = onRed
    ? 'rgba(250,250,250,0.85)'
    : (light ? 'rgba(250,250,250,0.7)' : 'rgba(10,5,5,0.6)');
  return (
    <div style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'flex-start', lineHeight: 1 }}>
      <div style={{
        fontFamily: 'var(--font-display)', fontWeight: 600,
        fontSize: size, letterSpacing: '-0.02em', whiteSpace: 'nowrap',
        display: 'flex', alignItems: 'baseline', gap: size * 0.18,
      }}>
        <span style={{ color: theColor, textTransform: 'lowercase' }}>the</span>
        <span style={{ color: main, textTransform: 'uppercase' }}>BURGER</span>
      </div>
      {sub && (
        <div style={{
          fontFamily: 'var(--font-display)', fontWeight: 300,
          fontSize: size * 0.34, letterSpacing: '0.32em',
          color: subColor,
          textTransform: 'lowercase', marginTop: size * 0.18, marginLeft: size * 0.05,
        }}>
          by&nbsp;Havakand
        </div>
      )}
    </div>
  );
}

// Telegram top sheet — replaces iOS navbar inside the IOSDevice
// (close × on left, channel/bot identity in center, ⋯ on right)
function TelegramHeader({ dark = false, botName = '@theburger_bot', subtitle = 'mini app · bot' }) {
  const fg = dark ? '#FAFAFA' : '#0A0505';
  const muted = dark ? 'rgba(250,250,250,0.55)' : 'rgba(10,5,5,0.5)';
  const border = dark ? 'rgba(255,255,255,0.08)' : 'rgba(10,5,5,0.08)';
  const bg = dark ? '#0A0505' : '#FAFAFA';
  return (
    <div style={{
      position: 'relative', zIndex: 30,
      paddingTop: 54, // status bar space
      background: bg,
      borderBottom: `0.5px solid ${border}`,
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '6px 16px 10px',
      }}>
        {/* close */}
        <button style={{
          all: 'unset', cursor: 'pointer',
          width: 30, height: 30, display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width="14" height="14" viewBox="0 0 14 14" stroke={fg} strokeWidth="2" strokeLinecap="round">
            <path d="M2 2 L12 12 M12 2 L2 12"/>
          </svg>
        </button>
        {/* identity */}
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}>
          <div style={{
            fontFamily: 'var(--font-display)', fontWeight: 500,
            fontSize: 14, color: fg, letterSpacing: '-0.005em',
          }}>{botName}</div>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 9, color: muted,
            letterSpacing: '0.12em', textTransform: 'uppercase',
          }}>{subtitle}</div>
        </div>
        {/* menu */}
        <button style={{
          all: 'unset', cursor: 'pointer',
          width: 30, height: 30, display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width="18" height="4" viewBox="0 0 18 4" fill={fg}>
            <circle cx="2" cy="2" r="1.6"/><circle cx="9" cy="2" r="1.6"/><circle cx="16" cy="2" r="1.6"/>
          </svg>
        </button>
      </div>
    </div>
  );
}

// MainButton — Telegram's signature CTA at the bottom of mini apps.
function TelegramMainButton({ label, color = '#DA0505', textColor = '#FAFAFA', subtle = false }) {
  return (
    <div style={{
      position: 'absolute', left: 0, right: 0, bottom: 0,
      paddingBottom: 34, // home indicator
      background: subtle ? 'transparent' : 'linear-gradient(to top, rgba(0,0,0,0.04), transparent)',
      zIndex: 40,
    }}>
      <div style={{
        margin: '0 12px', height: 50, borderRadius: 12,
        background: color, color: textColor,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'var(--font-display)', fontWeight: 600,
        fontSize: 15, letterSpacing: '0.04em', textTransform: 'uppercase',
      }}>
        {label}
      </div>
    </div>
  );
}

// Convenience wrapper: a Telegram-style phone with our header baked in
function TelegramPhone({ children, dark = false, botName, subtitle, mainButton }) {
  return (
    <IOSDevice width={402} height={874} dark={dark}>
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
        <TelegramHeader dark={dark} botName={botName} subtitle={subtitle} />
        <div style={{ flex: 1, position: 'relative', overflow: 'hidden', minHeight: 0 }}>
          {children}
        </div>
        {mainButton}
      </div>
    </IOSDevice>
  );
}

Object.assign(window, {
  BurgerMark, BurgerLogo,
  TelegramHeader, TelegramMainButton, TelegramPhone,
});