// Custom phone chrome for Himma — iOS status bar, home indicator, tab bar

const PHONE_W = 390;
const PHONE_H = 844;

function StatusBar({ theme, time = '9:41' }) {
  const c = theme.text;
  return (
    <div style={{
      position: 'absolute', top: 0, left: 0, right: 0,
      height: 54, padding: '16px 30px 0',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      zIndex: 40, pointerEvents: 'none',
      color: c,
    }}>
      <span style={{ fontFamily: FONTS.ui, fontWeight: 600, fontSize: 15 }}>{time}</span>
      <div style={{ width: 90 }} />{/* island spacer */}
      <div style={{ display: 'flex', gap: 6, alignItems: 'center', opacity: 0.95 }}>
        <svg width="17" height="11" viewBox="0 0 17 11"><rect x="0" y="6" width="3" height="5" rx="0.6" fill={c}/><rect x="4.5" y="4" width="3" height="7" rx="0.6" fill={c}/><rect x="9" y="2" width="3" height="9" rx="0.6" fill={c}/><rect x="13.5" y="0" width="3" height="11" rx="0.6" fill={c}/></svg>
        <svg width="15" height="11" viewBox="0 0 15 11"><path d="M7.5 3c1.8 0 3.5.7 4.8 2l1-1a8 8 0 00-11.5 0l1 1A6.7 6.7 0 017.5 3zM7.5 6a3.8 3.8 0 012.6 1l1-1a5.2 5.2 0 00-7.2 0l1 1A3.8 3.8 0 017.5 6z" fill={c}/><circle cx="7.5" cy="9" r="1.2" fill={c}/></svg>
        <svg width="24" height="11" viewBox="0 0 24 11"><rect x="0.5" y="0.5" width="20" height="10" rx="2.5" stroke={c} strokeOpacity="0.4" fill="none"/><rect x="2" y="2" width="15" height="7" rx="1.2" fill={c}/><rect x="21" y="3.5" width="1.5" height="4" rx="0.5" fill={c} opacity="0.4"/></svg>
      </div>
    </div>
  );
}

function DynamicIsland() {
  return (
    <div style={{
      position: 'absolute', top: 9, left: '50%', transform: 'translateX(-50%)',
      width: 120, height: 35, borderRadius: 20, background: '#000',
      zIndex: 50,
    }} />
  );
}

function HomeIndicator({ theme }) {
  return (
    <div style={{
      position: 'absolute', bottom: 8, left: 0, right: 0,
      display: 'flex', justifyContent: 'center',
      pointerEvents: 'none', zIndex: 50,
    }}>
      <div style={{ width: 134, height: 5, borderRadius: 100, background: theme.text, opacity: 0.4 }} />
    </div>
  );
}

function TabBar({ current, onNav, theme, accent }) {
  const tabs = [
    { key: 'home',   label: 'Home',    icon: 'home' },
    { key: 'assets', label: 'Wealth',  icon: 'assets' },
    { key: 'chat',   label: 'Himma',   icon: 'sparkles' },
    { key: 'tx',     label: 'Activity',icon: 'tx' },
    { key: 'recs',   label: 'Insights',icon: 'star' },
  ];
  return (
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0,
      paddingBottom: 24, paddingTop: 8,
      background: `linear-gradient(to top, ${theme.bg} 55%, ${theme.bg}00)`,
      zIndex: 30,
    }}>
      <div style={{
        margin: '0 12px',
        background: theme.surface,
        border: `0.5px solid ${theme.line}`,
        borderRadius: 22,
        padding: '10px 6px',
        display: 'flex', justifyContent: 'space-around',
        backdropFilter: 'blur(20px)',
      }}>
        {tabs.map(t => {
          const Icon = Ico[t.icon];
          const active = current === t.key;
          return (
            <button key={t.key} onClick={() => onNav(t.key)} style={{
              background: 'transparent', border: 'none',
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
              padding: '4px 10px', cursor: 'pointer',
              color: active ? accent : theme.textMute,
              transition: 'color 140ms',
            }}>
              <Icon size={21} sw={active ? 1.8 : 1.5} />
              <span style={{ fontFamily: FONTS.ui, fontSize: 9.5, fontWeight: 500, letterSpacing: 0.2 }}>{t.label}</span>
            </button>
          );
        })}
      </div>
    </div>
  );
}

// Phone frame (bezel + screen)
function Phone({ children, theme, dark = true }) {
  return (
    <div style={{
      width: PHONE_W, height: PHONE_H,
      borderRadius: 52,
      padding: 7,
      background: 'linear-gradient(145deg, #1a1a1a, #0a0a0a)',
      boxShadow: '0 40px 80px rgba(11,18,32,0.45), 0 0 0 1px rgba(0,0,0,0.4), inset 0 0 0 2px #333',
      position: 'relative',
      flexShrink: 0,
    }}>
      <div style={{
        width: '100%', height: '100%',
        borderRadius: 46,
        background: theme.bg,
        overflow: 'hidden',
        position: 'relative',
      }}>
        <DynamicIsland />
        <StatusBar theme={theme} />
        <div style={{
          position: 'absolute', inset: 0,
          paddingTop: 54,
          paddingBottom: 0,
          overflow: 'hidden',
        }}>
          {children}
        </div>
        <HomeIndicator theme={theme} />
      </div>
    </div>
  );
}

// Scrollable screen container (with bottom space for tab bar)
function Screen({ children, theme, scrollRef, padBottom = 100, padTop = 0, style = {} }) {
  return (
    <div ref={scrollRef} style={{
      height: '100%',
      overflowY: 'auto',
      overflowX: 'hidden',
      paddingTop: padTop,
      paddingBottom: padBottom,
      color: theme.text,
      ...style,
    }}>
      {children}
    </div>
  );
}

// Screen header
function ScreenHeader({ title, subtitle, theme, accent, action }) {
  return (
    <div style={{ padding: '14px 22px 18px', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 12 }}>
      <div>
        {subtitle && <div style={{ fontFamily: FONTS.mono, fontSize: 10, letterSpacing: 1.5, textTransform: 'uppercase', color: theme.textMute, marginBottom: 4 }}>{subtitle}</div>}
        <div style={{ fontFamily: FONTS.display, fontSize: 32, fontWeight: 400, letterSpacing: -0.8, color: theme.text, lineHeight: 1 }}>{title}</div>
      </div>
      {action}
    </div>
  );
}

Object.assign(window, { Phone, TabBar, Screen, ScreenHeader, StatusBar, HomeIndicator, PHONE_W, PHONE_H });