/* Mobile shell · iOS status bar + dark theme + bottom tab bar
 * Shared by all 5 mobile screens.
 */

function MobileShell({ children, tab = 'field', pad = true, statusOnly = false, fullBleed = false }) {
  return (
    <div style={{
      width: 402, height: 874, position: 'relative',
      background: 'var(--bg-1)', borderRadius: 48, overflow: 'hidden',
      boxShadow: '0 40px 80px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05)',
      fontFamily: 'var(--f-body)', color: 'var(--ink)',
    }}>
      {/* dynamic island */}
      <div style={{
        position: 'absolute', top: 11, left: '50%', transform: 'translateX(-50%)',
        width: 126, height: 37, borderRadius: 24, background: '#000', zIndex: 50,
      }} />
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, zIndex: 10 }}>
        <IOSStatusBar dark={true} />
      </div>
      {/* content area */}
      <div className="ga-scroll" style={{
        position: 'absolute', top: 0, left: 0, right: 0, bottom: tab === false ? 0 : 92,
        paddingTop: fullBleed ? 0 : 62,
        overflow: 'auto',
      }}>
        {children}
      </div>
      {/* tab bar */}
      {tab !== false && <MobileTabBar active={tab} />}
      {/* home indicator */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0, zIndex: 60,
        height: 34, display: 'flex', justifyContent: 'center', alignItems: 'flex-end',
        paddingBottom: 8, pointerEvents: 'none',
      }}>
        <div style={{ width: 139, height: 5, borderRadius: 100, background: 'rgba(255,255,255,0.7)' }} />
      </div>
    </div>
  );
}

function MobileTabBar({ active }) {
  const tabs = [
    { id: 'field',    label: 'Field',    icon: TabIconField },
    { id: 'map',      label: 'Map',      icon: TabIconMap   },
    { id: 'alerts',   label: 'Alerts',   icon: TabIconBell  },
    { id: 'ai',       label: 'AI',       icon: TabIconAI    },
    { id: 'passport', label: 'Passport', icon: TabIconPassport },
  ];
  return (
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0, height: 92,
      background: 'rgba(10,10,11,0.85)',
      backdropFilter: 'blur(20px) saturate(180%)',
      WebkitBackdropFilter: 'blur(20px) saturate(180%)',
      borderTop: '0.5px solid var(--line-2)',
      display: 'flex', alignItems: 'flex-start', justifyContent: 'space-around',
      padding: '12px 8px 0', zIndex: 40,
    }}>
      {tabs.map((tb) => {
        const isActive = tb.id === active;
        const Icon = tb.icon;
        return (
          <div key={tb.id} style={{
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5,
            flex: 1, paddingTop: 4, position: 'relative',
          }}>
            {isActive && (
              <span style={{ position: 'absolute', top: -4, width: 22, height: 2,
                background: 'var(--yellow)' }} />
            )}
            <Icon active={isActive} />
            <span style={{ fontFamily: 'var(--f-mono)', fontSize: 9.5, fontWeight: 500,
              letterSpacing: '0.08em', textTransform: 'uppercase',
              color: isActive ? 'var(--yellow)' : 'var(--ink-3)' }}>{tb.label}</span>
          </div>
        );
      })}
    </div>
  );
}

const TabIconField = ({ active }) => (
  <svg width="22" height="22" viewBox="0 0 22 22" fill="none"
    stroke={active ? 'var(--yellow)' : 'var(--ink-3)'} strokeWidth="1.4">
    <rect x="3" y="3" width="7" height="7"/>
    <rect x="12" y="3" width="7" height="7"/>
    <rect x="3" y="12" width="7" height="7"/>
    <rect x="12" y="12" width="7" height="7"/>
  </svg>
);
const TabIconMap = ({ active }) => (
  <svg width="22" height="22" viewBox="0 0 22 22" fill="none"
    stroke={active ? 'var(--yellow)' : 'var(--ink-3)'} strokeWidth="1.4">
    <path d="M2 6l5-2 4 2 5-2 4 2v12l-4-2-5 2-4-2-5 2z"/>
    <path d="M7 4v14M11 6v14M16 4v14"/>
  </svg>
);
const TabIconBell = ({ active }) => (
  <svg width="22" height="22" viewBox="0 0 22 22" fill="none"
    stroke={active ? 'var(--yellow)' : 'var(--ink-3)'} strokeWidth="1.4">
    <path d="M5 16h12l-1.6-2.5V9.5a4.4 4.4 0 0 0-8.8 0V13.5z" strokeLinejoin="round"/>
    <path d="M9 18.5a2 2 0 0 0 4 0"/>
  </svg>
);
const TabIconAI = ({ active }) => (
  <svg width="22" height="22" viewBox="0 0 22 22" fill="none"
    stroke={active ? 'var(--yellow)' : 'var(--ink-3)'} strokeWidth="1.4">
    <circle cx="11" cy="11" r="7"/>
    <path d="M8 9.5h6M8 12.5h4"/>
  </svg>
);
const TabIconPassport = ({ active }) => (
  <svg width="22" height="22" viewBox="0 0 22 22" fill="none"
    stroke={active ? 'var(--yellow)' : 'var(--ink-3)'} strokeWidth="1.4">
    <rect x="4" y="3" width="14" height="16" rx="1"/>
    <circle cx="11" cy="10" r="2.4"/>
    <path d="M8 14.5h6"/>
  </svg>
);

// Mobile header — kicker + title + KA/RU subtitle
function MobileHeader({ kicker, en, ka, ru, right, sticky = true }) {
  const { lang } = useGA();
  const primary = lang === 'en' ? en : (lang === 'ka' ? ka : ru);
  const secondary = lang === 'en' ? ka : (lang === 'ka' ? en : en);
  return (
    <div style={{
      padding: '14px 22px 14px',
      position: sticky ? 'sticky' : 'relative', top: 0, zIndex: 8,
      background: 'rgba(17,17,19,0.85)',
      backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
      borderBottom: '0.5px solid var(--line)',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
        <div>
          {kicker && <div className="ga-kicker" style={{ marginBottom: 6 }}>{kicker}</div>}
          <div className="ga-disp" style={{ fontSize: 26, fontWeight: 600, lineHeight: 1.05,
            letterSpacing: '-0.02em' }}>{primary}</div>
          {secondary && secondary !== primary && (
            <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 3, fontFamily: 'var(--f-body)' }}>{secondary}</div>
          )}
        </div>
        {right}
      </div>
    </div>
  );
}

// Inset list row, dark-themed
function MobileRow({ children, divider = true, onClick, style = {} }) {
  return (
    <div onClick={onClick} style={{
      display: 'flex', alignItems: 'center', gap: 12,
      padding: '14px 18px',
      borderBottom: divider ? '0.5px solid var(--line)' : 'none',
      cursor: onClick ? 'pointer' : 'default',
      ...style,
    }}>{children}</div>
  );
}

Object.assign(window, { MobileShell, MobileTabBar, MobileHeader, MobileRow });