// App shell: phone frame, status bar, tab bar

const StatusBar = ({ dark = false }) => {
  const color = dark ? '#fff' : '#fff';
  return (
    <div className="statusbar" style={{ color }}>
      <span className="mono" style={{ fontSize: 15, fontWeight: 600, letterSpacing: 0 }}>9:41</span>
      <div className="icons">
        <StatusSignal />
        <StatusWifi />
        <StatusBattery />
      </div>
    </div>
  );
};

const TabBar = ({ active, onChange, messageBadge = 0 }) => {
  const tabs = [
    { id: 'home', label: 'Feed', Icon: IconHome },
    { id: 'agenda', label: 'Agenda', Icon: IconCalendar },
    { id: 'quiz', label: 'Quiz', Icon: IconTrophy },
    { id: 'messages', label: 'Chat', Icon: IconMessage, badge: messageBadge },
    { id: 'profile', label: 'Você', Icon: IconUser },
  ];
  return (
    <div className="tabbar">
      {tabs.map(t => (
        <button key={t.id}
          className={(active === t.id ? 'active ' : '')}
          onClick={() => onChange(t.id)}>
          <span style={{ position: 'relative', display: 'inline-flex' }}>
            <t.Icon size={22} stroke={active === t.id ? 2 : 1.7} />
            {t.badge > 0 && (
              <span style={{
                position: 'absolute', top: -4, right: -6,
                minWidth: 14, height: 14, padding: '0 4px', borderRadius: 999,
                background: 'var(--amber)', color: '#05080F',
                fontSize: 9, fontWeight: 700,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                border: '1.5px solid #05080F',
              }}>{t.badge}</span>
            )}
          </span>
          <span>{t.label}</span>
        </button>
      ))}
    </div>
  );
};

// Floating action button used on tabs where we want a quick "+" (Feed).
const FabCreate = ({ onClick }) => (
  <button onClick={onClick} style={{
    position: 'absolute', right: 20, bottom: 104,
    width: 54, height: 54, borderRadius: 18,
    background: 'var(--amber)', color: '#05080F',
    border: 'none', cursor: 'pointer',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    boxShadow: '0 14px 32px -8px rgba(245,166,35,0.5), 0 0 0 1px rgba(255,255,255,0.06)',
    zIndex: 15,
  }}>
    <IconPlus size={24} stroke={2.4} />
  </button>
);

// Screen header used across inner screens
const ScreenHeader = ({ title, onBack, right }) => (
  <div style={{
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    padding: '8px 20px 16px',
  }}>
    <button className="btn btn-nav" onClick={onBack} aria-label="Voltar">
      <IconChevronLeft size={20} />
    </button>
    <div style={{ fontSize: 16, fontWeight: 600 }}>{title}</div>
    <div style={{ minWidth: 40, display: 'flex', justifyContent: 'flex-end' }}>{right}</div>
  </div>
);

const Avatar = ({ user, size = 40, ring = false }) => (
  <div style={{
    width: size, height: size, borderRadius: '50%',
    background: user.color || '#3A56B0',
    color: '#0A1028',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    fontSize: size * 0.38, fontWeight: 700,
    flexShrink: 0,
    boxShadow: ring ? '0 0 0 2px #05080F, 0 0 0 4px #F5A623' : 'none',
    letterSpacing: 0,
  }}>{user.avatar}</div>
);

const Placeholder = ({ gradient, label, height = 'auto', aspect = '1/1', rounded = 0, striped = true }) => (
  <div className={gradient} style={{
    aspectRatio: height === 'auto' ? aspect : undefined,
    height: height !== 'auto' ? height : undefined,
    borderRadius: rounded,
    position: 'relative',
    overflow: 'hidden',
    display: 'flex',
    alignItems: 'flex-end',
    padding: 12,
  }}>
    {striped && (
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 14px)',
        pointerEvents: 'none',
      }} />
    )}
    {label && (
      <span className="mono" style={{
        fontSize: 10,
        color: 'rgba(255,255,255,0.8)',
        background: 'rgba(0,0,0,0.35)',
        padding: '4px 8px',
        borderRadius: 6,
        letterSpacing: 0.02,
        position: 'relative',
      }}>{label}</span>
    )}
  </div>
);

const Phone = ({ children }) => (
  <div className="stage">
    <div className="phone">{children}</div>
  </div>
);

// Toast
const Toast = ({ message, visible }) => (
  <div style={{
    position: 'absolute',
    bottom: visible ? 104 : 60,
    left: 20, right: 20,
    background: 'rgba(245,166,35,0.95)',
    color: '#05080F',
    padding: '12px 16px',
    borderRadius: 14,
    fontSize: 14,
    fontWeight: 600,
    opacity: visible ? 1 : 0,
    transition: 'all .3s cubic-bezier(.2,.8,.2,1)',
    pointerEvents: 'none',
    zIndex: 20,
    display: 'flex', alignItems: 'center', gap: 10,
    boxShadow: '0 14px 32px -8px rgba(0,0,0,0.5)',
  }}>
    <IconCheck size={18} stroke={2.4} />
    {message}
  </div>
);

Object.assign(window, { StatusBar, TabBar, FabCreate, ScreenHeader, Avatar, Placeholder, Phone, Toast });