// App shell — header, bottom nav, view transitions

const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React;

function BottomNav({ active, onNav, T }) {
  const items = [
    { id: 'home', label: 'Início', icon: 'home' },
    { id: 'triagem', label: 'Triagem', icon: 'scan' },
    { id: 'biblioteca', label: 'Biblioteca', icon: 'book' },
    { id: 'mais', label: 'Mais', icon: 'more' },
  ];
  return (
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0,
      paddingBottom: 18, paddingLeft: 14, paddingRight: 14, paddingTop: 10,
      zIndex: 30, pointerEvents: 'none',
    }}>
      <div style={{
        background: 'rgba(255,255,255,0.7)',
        backdropFilter: 'blur(24px) saturate(180%)',
        WebkitBackdropFilter: 'blur(24px) saturate(180%)',
        borderRadius: 28, padding: '10px 8px',
        border: `1px solid ${T.hair}`,
        boxShadow: '0 14px 40px -10px rgba(15,30,28,0.12)',
        display: 'flex', justifyContent: 'space-around',
        pointerEvents: 'auto',
      }}>
        {items.map(item => {
          const on = active === item.id || (item.id === 'biblioteca' && active === 'parasite');
          return (
            <button key={item.id} onClick={() => onNav(item.id)} style={{
              all: 'unset', cursor: 'pointer',
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
              padding: '6px 14px', borderRadius: 20, position: 'relative',
              minHeight: 48,
            }}>
              <div style={{
                width: 36, height: 28, borderRadius: 99,
                background: on ? T.forestDeep : 'transparent',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                transition: 'all 0.25s cubic-bezier(0.22, 1, 0.36, 1)',
              }}>
                <Icon name={item.icon} size={20} color={on ? T.acid : T.inkSoft} stroke={on ? 2 : 1.7}/>
              </div>
              <div style={{
                fontSize: 10.5, fontWeight: on ? 600 : 500,
                color: on ? T.forestDeep : T.inkSoft,
                letterSpacing: 0.2,
              }}>{item.label}</div>
            </button>
          );
        })}
      </div>
    </div>
  );
}

function StatusBar({ dark = false, time = '9:41' }) {
  const c = dark ? '#fff' : '#000';
  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: '21px 24px 16px', boxSizing: 'border-box',
      position: 'relative', zIndex: 20, width: '100%', height: 54,
    }}>
      <div style={{
        position: 'absolute', left: 32, top: 19,
        fontFamily: '-apple-system, "SF Pro", system-ui', fontWeight: 590,
        fontSize: 17, lineHeight: '22px', color: c,
      }}>{time}</div>
      <div style={{ position: 'absolute', right: 24, top: 19, display: 'flex', alignItems: 'center', gap: 7 }}>
        <svg width="19" height="12" viewBox="0 0 19 12">
          <rect x="0" y="7.5" width="3.2" height="4.5" rx="0.7" fill={c}/>
          <rect x="4.8" y="5" width="3.2" height="7" rx="0.7" fill={c}/>
          <rect x="9.6" y="2.5" width="3.2" height="9.5" rx="0.7" fill={c}/>
          <rect x="14.4" y="0" width="3.2" height="12" rx="0.7" fill={c}/>
        </svg>
        <svg width="17" height="12" viewBox="0 0 17 12">
          <path d="M8.5 3.2C10.8 3.2 12.9 4.1 14.4 5.6L15.5 4.5C13.7 2.7 11.2 1.5 8.5 1.5C5.8 1.5 3.3 2.7 1.5 4.5L2.6 5.6C4.1 4.1 6.2 3.2 8.5 3.2Z" fill={c}/>
          <path d="M8.5 6.8C9.9 6.8 11.1 7.3 12 8.2L13.1 7.1C11.8 5.9 10.2 5.1 8.5 5.1C6.8 5.1 5.2 5.9 3.9 7.1L5 8.2C5.9 7.3 7.1 6.8 8.5 6.8Z" fill={c}/>
          <circle cx="8.5" cy="10.5" r="1.5" fill={c}/>
        </svg>
        <svg width="27" height="13" viewBox="0 0 27 13">
          <rect x="0.5" y="0.5" width="23" height="12" rx="3.5" stroke={c} strokeOpacity="0.35" fill="none"/>
          <rect x="2" y="2" width="20" height="9" rx="2" fill={c}/>
          <path d="M25 4.5V8.5C25.8 8.2 26.5 7.2 26.5 6.5C26.5 5.8 25.8 4.8 25 4.5Z" fill={c} fillOpacity="0.4"/>
        </svg>
      </div>
    </div>
  );
}

function RouteContent({ children }) {
  const [mounted, setMounted] = useStateA(false);
  useEffectA(() => {
    const id = requestAnimationFrame(() => {
      requestAnimationFrame(() => setMounted(true));
    });
    return () => cancelAnimationFrame(id);
  }, []);
  return (
    <div style={{
      opacity: mounted ? 1 : 0,
      transform: mounted ? 'translateY(0)' : 'translateY(8px)',
      transition: 'opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1), transform 0.42s cubic-bezier(0.22, 1, 0.36, 1)',
    }}>{children}</div>
  );
}

window.App = function App() {
  const [gestante, setGestante] = useStateA(false);
  const [route, setRoute] = useStateA({ name: 'home' });
  const [savedProbs, setSavedProbs] = useStateA(null);
  const [animKey, setAnimKey] = useStateA(0);

  const T = gestante ? GESTANTE_TOKENS : TOKENS;

  const navigate = (name, arg) => {
    setRoute({ name, arg });
    setAnimKey(k => k + 1);
  };

  // sync bottom nav active
  const activeTab =
    route.name === 'home' || route.name === 'prevencao' || route.name === 'hemograma' || route.name === 'resultado' ? 'home' :
    route.name === 'triagem' ? 'triagem' :
    route.name === 'biblioteca' || route.name === 'parasite' ? 'biblioteca' :
    route.name === 'mais' ? 'mais' : 'home';

  let screen;
  switch (route.name) {
    case 'home':
      screen = <HomeScreen T={T} onNavigate={navigate} gestante={gestante} setGestante={setGestante} lastProbs={savedProbs}/>;
      break;
    case 'triagem':
      screen = <TriagemScreen T={T} onNavigate={navigate} gestante={gestante} savedProbs={savedProbs} setSavedProbs={setSavedProbs}/>;
      break;
    case 'resultado':
      screen = <ResultadoScreen T={T} onNavigate={navigate} probs={savedProbs} gestante={gestante}/>;
      break;
    case 'biblioteca':
      screen = <BibliotecaScreen T={T} onNavigate={navigate}/>;
      break;
    case 'gestante':
      screen = <GestanteScreen T={T} onNavigate={navigate}/>;
      break;
    case 'parasite':
      screen = <ParasiteDetailScreen T={T} onNavigate={navigate} parasiteId={route.arg} gestante={gestante}/>;
      break;
    case 'mais':
      screen = <MaisScreen T={T} onNavigate={navigate} gestante={gestante} setGestante={setGestante}/>;
      break;
    case 'prevencao':
      screen = <PrevencaoScreen T={T} onNavigate={navigate}/>;
      break;
    case 'hemograma':
      screen = <HemogramaScreen T={T} onNavigate={navigate}/>;
      break;
    default:
      screen = <HomeScreen T={T} onNavigate={navigate}/>;
  }

  const hideNav = route.name === 'triagem';

  return (
    <div style={{
      width: 402, height: 874, borderRadius: 54, overflow: 'hidden',
      position: 'relative', background: T.paper,
      boxShadow: '0 40px 80px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.12)',
      fontFamily: 'system-ui, -apple-system, sans-serif',
      WebkitFontSmoothing: 'antialiased',
    }}>
      {/* Background gradient layer */}
      <div style={{
        position: 'absolute', inset: 0,
        background: `linear-gradient(180deg, ${T.paperWarm} 0%, ${T.paper} 30%)`,
        pointerEvents: 'none',
      }}/>

      {/* Dynamic island */}
      <div style={{
        position: 'absolute', top: 11, left: '50%', transform: 'translateX(-50%)',
        width: 126, height: 37, borderRadius: 24, background: '#000', zIndex: 50,
      }}/>

      {/* Status bar */}
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, zIndex: 10 }}>
        <StatusBar/>
      </div>

      {/* Content */}
      <div style={{
        position: 'absolute', top: 54, left: 0, right: 0, bottom: 0,
        overflow: 'auto',
      }}>
        {screen}
      </div>

      {/* Bottom nav */}
      {!hideNav && <BottomNav active={activeTab} onNav={navigate} T={T}/>}

      {/* Home indicator */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0, zIndex: 60,
        height: 24, display: 'flex', justifyContent: 'center', alignItems: 'flex-end',
        paddingBottom: 8, pointerEvents: 'none',
      }}>
        <div style={{ width: 139, height: 5, borderRadius: 100, background: 'rgba(0,0,0,0.28)' }}/>
      </div>
    </div>
  );
};