/* ============================================================
   CanchApp UI Kit — app chrome: phone frame, header, tab bar
   ============================================================ */

// Centered mobile-first frame. On desktop it shows a soft device
// frame; the content column is capped at --app-max.
function AppShell({ children }) {
  const embed = typeof location !== 'undefined' && (location.hash.includes('embed') || location.search.includes('embed'));
  if (embed) {
    return (
      <div style={{ width: '100%', height: '100vh', background: 'var(--bg)', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        {children}
      </div>
    );
  }
  return (
    <div style={{
      minHeight: '100vh', background: '#E9EBEF',
      display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24,
    }}>
      <div style={{
        width: 'var(--app-max)', maxWidth: '100%', height: 860, maxHeight: '94vh',
        background: 'var(--bg)', borderRadius: 28, overflow: 'hidden', position: 'relative',
        boxShadow: '0 12px 48px rgba(17,24,39,0.18)', border: '1px solid var(--border)',
        display: 'flex', flexDirection: 'column',
      }}>
        {children}
      </div>
    </div>
  );
}

// Top header. Two modes: home (logo + bell) and detail (back + title).
function TopHeader({ mode = 'home', title, onBack, right }) {
  return (
    <header style={{
      height: 'var(--header-h)', flex: '0 0 auto', background: 'var(--surface)',
      borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center',
      gap: 12, padding: '0 16px', position: 'relative', zIndex: 5,
    }}>
      {mode === 'home' ? (
        <>
          <Logo />
          <div style={{ flex: 1 }} />
          <button style={iconBtn} aria-label="Notificaciones"><Icon name="bell" size={20} color="var(--ink)" /></button>
        </>
      ) : (
        <>
          <button style={iconBtn} onClick={onBack} aria-label="Volver"><Icon name="arrowLeft" size={22} color="var(--ink)" /></button>
          <span className="cc-h3" style={{ font: 'var(--text-h3)', flex: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{title}</span>
          {right}
        </>
      )}
    </header>
  );
}

const iconBtn = {
  width: 44, height: 44, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
  background: 'transparent', border: 'none', borderRadius: 10, cursor: 'pointer', margin: '0 -10px',
};

function Logo({ size = 19 }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
      <span style={{
        width: 30, height: 30, borderRadius: 9, background: 'var(--primary)',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <Icon name="navigation" size={17} color="#fff" fill="#fff" />
      </span>
      <span style={{ font: `800 ${size}px/1 var(--font-display)`, letterSpacing: '-0.03em', color: 'var(--ink)' }}>
        Canch<span style={{ color: 'var(--primary)' }}>App</span>
      </span>
    </span>
  );
}

// Bottom tab bar
const TABS = [
  { id: 'home', label: 'Inicio', icon: 'home' },
  { id: 'explore', label: 'Canchas', icon: 'search' },
  { id: 'lobo', label: 'Lobo', icon: 'zap' },
  { id: 'reservas', label: 'Reservas', icon: 'ticket' },
  { id: 'perfil', label: 'Perfil', icon: 'user' },
];
function TabBar({ active, onChange }) {
  return (
    <nav style={{
      height: 'var(--tabbar-h)', flex: '0 0 auto', background: 'var(--surface)',
      borderTop: '1px solid var(--border)', display: 'grid',
      gridTemplateColumns: `repeat(${TABS.length}, 1fr)`, paddingBottom: 'env(safe-area-inset-bottom)',
    }}>
      {TABS.map(t => {
        const on = active === t.id;
        return (
          <button key={t.id} onClick={() => onChange(t.id)} style={{
            border: 'none', background: 'transparent', cursor: 'pointer',
            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 3,
            color: on ? 'var(--primary)' : 'var(--muted)',
          }}>
            <Icon name={t.icon} size={22} fill={on && t.id === 'lobo' ? 'var(--primary)' : 'none'} />
            <span style={{ font: 'var(--text-micro)', letterSpacing: '0.01em', textTransform: 'none', color: 'inherit' }}>{t.label}</span>
          </button>
        );
      })}
    </nav>
  );
}

// Scrollable content region between header and tab bar
function Scroll({ children, pad = 16, gap = 16, style = {} }) {
  return (
    <div style={{ flex: 1, overflowY: 'auto', WebkitOverflowScrolling: 'touch', ...style }}>
      <div style={{ padding: pad, display: 'flex', flexDirection: 'column', gap, paddingBottom: pad + 8 }}>
        {children}
      </div>
    </div>
  );
}

Object.assign(window, { AppShell, TopHeader, Logo, TabBar, Scroll });