// Tablet (iPad) primitives — device frame, status bar, layout chrome
// Reuses mobile color tokens (M_BG, M_SURFACE, etc.) and icon set (MIc).

// iPad Pro 11" logical dimensions
const TABLET_LANDSCAPE = { w: 1180, h: 820 };
const TABLET_PORTRAIT  = { w: 820,  h: 1180 };

// Device frame — outer aluminum bezel + screen
function TDevice({ orientation = 'landscape', children }) {
  const dim = orientation === 'landscape' ? TABLET_LANDSCAPE : TABLET_PORTRAIT;
  const bezel = 18;
  return (
    <div style={{
      width: dim.w + bezel * 2,
      height: dim.h + bezel * 2,
      borderRadius: 42,
      padding: bezel,
      background: 'linear-gradient(160deg, #2a2c30 0%, #15161a 60%, #0c0d10 100%)',
      boxShadow: '0 40px 120px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06), inset 0 0 0 2px #1e1f23',
      flexShrink: 0, position: 'relative',
    }}>
      {/* tiny camera */}
      <div style={{
        position: 'absolute',
        ...(orientation === 'landscape'
          ? { left: 10, top: '50%', transform: 'translateY(-50%)' }
          : { top: 10, left: '50%', transform: 'translateX(-50%)' }),
        width: 6, height: 6, borderRadius: 3,
        background: '#000', boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.06)',
      }}/>
      <div style={{
        width: dim.w, height: dim.h,
        borderRadius: 28, overflow: 'hidden',
        background: M_BG, position: 'relative',
      }}>{children}</div>
    </div>
  );
}

// iPadOS status bar — slim, time left, status icons right
function TStatusBar({ time = '16:13', dark = true }) {
  const fg = dark ? M_FG : '#0B0C0F';
  return (
    <div style={{
      height: 28, padding: '0 22px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      flexShrink: 0, color: fg, fontFamily: 'SF Pro, -apple-system, system-ui',
      fontSize: 13, fontWeight: 600, letterSpacing: '0.01em',
    }}>
      <span>{time}</span>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <span style={{ fontSize: 11, opacity: 0.85 }}>5G</span>
        <svg width="16" height="11" viewBox="0 0 16 11" style={{ opacity: 0.95 }}>
          <rect x="0" y="7" width="2.5" height="4" rx="0.5" fill="currentColor"/>
          <rect x="4" y="5" width="2.5" height="6" rx="0.5" fill="currentColor"/>
          <rect x="8" y="3" width="2.5" height="8" rx="0.5" fill="currentColor"/>
          <rect x="12" y="0" width="2.5" height="11" rx="0.5" fill="currentColor"/>
        </svg>
        <svg width="26" height="12" viewBox="0 0 26 12">
          <rect x="0.5" y="0.5" width="22" height="11" rx="3" fill="none" stroke="currentColor" strokeOpacity="0.5"/>
          <rect x="2" y="2" width="14" height="8" rx="1.5" fill="currentColor"/>
          <rect x="23" y="3.5" width="1.5" height="4" rx="0.5" fill="currentColor" opacity="0.5"/>
        </svg>
        <span style={{ fontSize: 11, opacity: 0.85, marginLeft: 2 }}>72%</span>
      </div>
    </div>
  );
}

// iPad home indicator (landscape: thin centered; portrait: same)
function THomeIndicator() {
  return (
    <div style={{
      height: 16, display: 'flex', justifyContent: 'center', alignItems: 'flex-end',
      paddingBottom: 5, flexShrink: 0,
    }}>
      <div style={{ width: 160, height: 4, borderRadius: 2, background: 'rgba(255,255,255,0.75)' }}/>
    </div>
  );
}

// Tab pill — single tab in the iPad browser tab strip
function TTabPill({ active, fav, favBg = M_SURFACE_2, favColor = '#fff', title, url, onClick, onClose, conn }) {
  return (
    <button onClick={onClick} style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      padding: '7px 10px 7px 8px', minWidth: 0, maxWidth: 220,
      background: active ? M_SURFACE : 'transparent',
      border: '1px solid ' + (active ? M_BORDER : 'transparent'),
      borderRadius: 10, color: active ? M_FG : M_FG_MUTED,
      cursor: 'pointer', fontFamily: 'inherit', flexShrink: 1,
      position: 'relative',
    }}>
      <span style={{
        width: 16, height: 16, borderRadius: 4, background: favBg, color: favColor,
        display: 'grid', placeItems: 'center', fontSize: 9, fontWeight: 700, flexShrink: 0,
      }}>{fav}</span>
      <span style={{
        fontSize: 12, fontWeight: 500, whiteSpace: 'nowrap',
        overflow: 'hidden', textOverflow: 'ellipsis', minWidth: 0,
      }}>{title}</span>
      {conn && <MConnChip type={conn}/>}
      {active && (
        <span onClick={e => { e.stopPropagation(); onClose && onClose(); }} style={{
          color: M_FG_DIM, marginLeft: 2, width: 14, height: 14,
          display: 'grid', placeItems: 'center', borderRadius: 4,
        }}>
          <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
        </span>
      )}
    </button>
  );
}

// URL pill (center of tab strip)
function TAddressPill({ url = 'ajna://newtab', secure = true, onClick }) {
  return (
    <div onClick={onClick} style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      padding: '7px 14px', minWidth: 0, flex: 1, maxWidth: 520,
      background: M_SURFACE, border: '1px solid ' + M_BORDER_SOFT,
      borderRadius: 10, color: M_FG, cursor: 'pointer',
    }}>
      <span style={{ color: M_FG_DIM }}>{MIc.shield({ s: 13 })}</span>
      <span style={{
        flex: 1, fontSize: 12.5, color: M_FG_MUTED,
        whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
        fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.01em',
      }}>{url}</span>
      <span style={{ fontSize: 10, color: M_FG_DIM, fontFamily: 'JetBrains Mono, monospace' }}>⌘L</span>
    </div>
  );
}

// Tab strip — iPad browser top chrome with sidebar toggle + tabs + actions
// `compact` (driven by page scroll) collapses to a single domain pill so content
// can claim the vertical space back.
function TTabStrip({ tabs, activeId, onActivate, onClose, onNewTab, onToggleSidebar, sidebarOpen, onUrlClick, currentUrl, compact = false, onExpand, onMore, onBack, onForward, canBack = true, canForward = false }) {
  const moreRef = React.useRef(null);
  const handleMore = (e) => {
    e.stopPropagation();
    if (onMore && moreRef.current) onMore(moreRef.current.getBoundingClientRect());
  };
  if (compact) {
    return (
      <div
        onClick={onExpand}
        style={{
          display: 'flex', alignItems: 'center', gap: 8,
          padding: '6px 14px', borderBottom: '1px solid ' + M_BORDER_SOFT,
          background: 'rgba(11,12,15,0.78)', backdropFilter: 'blur(14px)',
          flexShrink: 0, minHeight: 36, cursor: 'pointer',
          transition: 'min-height 220ms ease, padding 220ms ease',
        }}
      >
        <button onClick={(e) => { e.stopPropagation(); onToggleSidebar && onToggleSidebar(); }} style={{ ...tIconBtn(false), width: 26, height: 26 }} aria-label="Toggle sidebar">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
            <rect x="3" y="4" width="18" height="16" rx="2"/>
            <path d="M9 4v16"/>
          </svg>
        </button>
        <button style={{ ...tIconBtn(false), width: 26, height: 26 }} aria-label="Back">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m15 18-6-6 6-6"/></svg>
        </button>
        <button style={{ ...tIconBtn(false), width: 26, height: 26 }} aria-label="Forward">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m9 18 6-6-6-6"/></svg>
        </button>
        <div style={{ flex: 1, display: 'flex', justifyContent: 'center' }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 7,
            maxWidth: 360, padding: '4px 14px 4px 8px',
            background: M_SURFACE, border: '1px solid ' + M_BORDER_SOFT,
            borderRadius: 999,
          }}>
            <span style={{ color: M_FG_DIM, display: 'grid', placeItems: 'center' }}>{MIc.shield({ s: 11 })}</span>
            <span style={{
              fontSize: 12, fontWeight: 500, color: M_FG,
              whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
              fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.01em', maxWidth: 280,
            }}>{currentUrl}</span>
          </div>
        </div>
        <button ref={moreRef} onClick={handleMore} style={{ ...tIconBtn(false), width: 26, height: 26 }} aria-label="More">{MIc.more({ s: 14 })}</button>
      </div>
    );
  }

  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 8,
      padding: '8px 14px', borderBottom: '1px solid ' + M_BORDER_SOFT,
      background: M_BG, flexShrink: 0, minHeight: 50,
      transition: 'min-height 220ms ease, padding 220ms ease',
    }}>
      {/* sidebar toggle */}
      <button onClick={onToggleSidebar} style={tIconBtn(sidebarOpen)} aria-label="Toggle sidebar">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <rect x="3" y="4" width="18" height="16" rx="2"/>
          <path d="M9 4v16"/>
        </svg>
      </button>
      <button onClick={onBack} disabled={!canBack} style={{ ...tIconBtn(false), opacity: canBack ? 1 : 0.4, cursor: canBack ? 'pointer' : 'default' }} aria-label="Back">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m15 18-6-6 6-6"/></svg>
      </button>
      <button onClick={onForward} disabled={!canForward} style={{ ...tIconBtn(false), opacity: canForward ? 1 : 0.4, cursor: canForward ? 'pointer' : 'default' }} aria-label="Forward">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m9 18 6-6-6-6"/></svg>
      </button>

      {/* tabs scroller */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 4, flex: 1,
        overflowX: 'auto', overflowY: 'hidden', minWidth: 0,
        scrollbarWidth: 'none',
      }}>
        {tabs.map(t => (
          <TTabPill key={t.id}
            active={t.id === activeId}
            fav={t.fav} favBg={t.favBg} favColor={t.favColor}
            title={t.title} url={t.url} conn={t.conn}
            onClick={() => onActivate && onActivate(t.id)}
            onClose={() => onClose && onClose(t.id)}
          />
        ))}
        <button onClick={onNewTab} style={{
          ...tIconBtn(false),
          width: 28, height: 28, marginLeft: 4, flexShrink: 0,
        }} aria-label="New tab">{MIc.plus({ s: 14 })}</button>
      </div>

      {/* URL pill (compact) */}
      <TAddressPill url={currentUrl} onClick={onUrlClick}/>

      {/* right actions */}
      <button style={tIconBtn(false)} aria-label="Share">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M4 12v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-6"/><path d="m16 6-4-4-4 4"/><path d="M12 2v14"/></svg>
      </button>
      <button ref={moreRef} onClick={handleMore} style={tIconBtn(false)} aria-label="More">{MIc.more({ s: 18 })}</button>
    </div>
  );
}

// Sidebar item — used in tablet left rail
function TSidebarItem({ icon, label, active, onClick, badge, hint, compact }) {
  return (
    <button onClick={onClick} style={{
      display: 'flex', alignItems: 'center', gap: compact ? 0 : 12,
      padding: compact ? '10px' : '9px 11px',
      width: '100%', justifyContent: compact ? 'center' : 'flex-start',
      borderRadius: 10, border: 0, cursor: 'pointer',
      background: active ? 'rgba(255,255,255,0.07)' : 'transparent',
      color: active ? M_FG : M_FG_MUTED,
      fontFamily: 'inherit', textAlign: 'left',
    }}>
      <span style={{ color: active ? M_ACCENT_B : M_FG_MUTED, display: 'grid', placeItems: 'center', flexShrink: 0 }}>{icon}</span>
      {!compact && <span style={{ flex: 1, fontSize: 13, fontWeight: 500 }}>{label}</span>}
      {!compact && badge != null && (
        <span style={{
          minWidth: 18, height: 18, padding: '0 5px', borderRadius: 9,
          background: M_ACCENT_B, color: '#0B0C0F',
          fontSize: 10, fontWeight: 700, display: 'grid', placeItems: 'center',
        }}>{badge}</span>
      )}
      {!compact && hint && (
        <span style={{ fontSize: 10, color: M_FG_DIM, fontFamily: 'JetBrains Mono, monospace' }}>{hint}</span>
      )}
    </button>
  );
}

const tIconBtn = (active) => ({
  width: 32, height: 32, borderRadius: 8,
  background: active ? 'rgba(255,255,255,0.08)' : 'transparent',
  border: 0, color: active ? M_FG : M_FG_MUTED,
  display: 'grid', placeItems: 'center', cursor: 'pointer', flexShrink: 0,
});

Object.assign(window, {
  TABLET_LANDSCAPE, TABLET_PORTRAIT,
  TDevice, TStatusBar, THomeIndicator,
  TTabPill, TAddressPill, TTabStrip,
  TSidebarItem, tIconBtn,
});