// 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: 'investments', label: 'Portfolio', icon: 'lineChart' },
    { key: 'tx',     label: 'Spending',icon: 'wallet' },
    { 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>
  );
}

function TopbarIconButton({ icon, theme, onClick, badge, title }) {
  const Icon = Ico[icon];
  return (
    <button
      onClick={onClick}
      title={title}
      aria-label={title}
      style={{
        width: 34,
        height: 34,
        borderRadius: 17,
        background: "transparent",
        border: `0.5px solid ${theme.line2}`,
        color: theme.text,
        cursor: "pointer",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        position: "relative",
        flexShrink: 0,
      }}
    >
      <Icon size={15} />
      {badge > 0 && (
        <span
          style={{
            position: "absolute",
            top: -2,
            right: -2,
            minWidth: 16,
            height: 16,
            padding: "0 4px",
            borderRadius: 8,
            background: theme.negative,
            color: "#fff",
            fontFamily: FONTS.mono,
            fontSize: 9.5,
            fontWeight: 600,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            border: `1.5px solid ${theme.bg}`,
            letterSpacing: 0,
          }}
        >
          {badge}
        </span>
      )}
    </button>
  );
}

function AppTopbar({ theme, accent, onNav, onAskHimma }) {
  const unread =
    typeof NOTIFICATIONS !== "undefined"
      ? NOTIFICATIONS.filter((n) => n.unread).length
      : 0;
  const openChat = onAskHimma || (() => onNav && onNav("chat"));

  return (
    <div
      style={{
        position: "sticky",
        top: 0,
        zIndex: 35,
        padding: "10px 22px 10px",
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        gap: 12,
        background: `linear-gradient(to bottom, ${theme.bg} 82%, ${theme.bg}00)`,
        backdropFilter: "blur(16px)",
      }}
    >
      <button
        onClick={() => onNav && onNav("settings")}
        aria-label="Open profile settings"
        style={{
          width: 38,
          height: 38,
          borderRadius: 19,
          background: `linear-gradient(135deg, ${accent}, ${accent}90)`,
          border: "none",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          cursor: "pointer",
          color: "#fff",
          fontFamily: FONTS.display,
          fontSize: 16,
          fontWeight: 600,
          flexShrink: 0,
          padding: 0,
        }}
      >
        {(USER.firstName || USER.name || "H").charAt(0)}
      </button>
      <button
        onClick={openChat}
        style={{
          display: "flex",
          alignItems: "center",
          gap: 9,
          flex: 1,
          minWidth: 0,
          background: theme.surface2,
          border: `0.5px solid ${theme.line2}`,
          borderRadius: 999,
          padding: "9px 13px",
          cursor: "pointer",
          color: theme.text,
          textAlign: "left",
        }}
      >
        <div
          style={{
            width: 22,
            height: 22,
            borderRadius: 11,
            background: `${accent}18`,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            color: accent,
            flexShrink: 0,
          }}
        >
          <Ico.sparkles size={13} />
        </div>
        <span
          style={{
            fontFamily: FONTS.ui,
            fontSize: 13,
            fontWeight: 500,
            color: theme.textDim,
            whiteSpace: "nowrap",
          }}
        >
          Ask Himma
        </span>
      </button>
      <TopbarIconButton
        icon="bell"
        theme={theme}
        onClick={() => onNav && onNav("notifications")}
        badge={unread}
        title="Open notifications"
      />
    </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, AppTopbar, StatusBar, HomeIndicator, PHONE_W, PHONE_H });