// Pau Fit — root app: navigation, theme, tweaks integration

const { useState: useSt, useEffect: useEf, useMemo } = React;

// ─────────────────────────────────────────────────────────────
// Palettes
// ─────────────────────────────────────────────────────────────
const PALETTES = {
  rose: {
    accent: '#D14C7A', bg: '#FCF1ED', card: '#FFFFFF',
    text: '#3A2D33', muted: '#B5A0A6', subtle: '#F3DCE0',
    border: '0.5px solid rgba(58,45,51,0.05)', dark: false,
  },
  peach: {
    accent: '#D9477E', bg: '#FDF0EB', card: '#FFFFFF',
    text: '#3A2D34', muted: '#B7A2A8', subtle: '#F5D7DC',
    border: '0.5px solid rgba(58,45,52,0.05)', dark: false,
  },
  sand: {
    accent: '#C9956B', bg: '#F4ECE0', card: '#FFFFFF',
    text: '#3A302A', muted: '#B0A090', subtle: '#EFE4D6',
    border: '0.5px solid rgba(58,48,42,0.05)', dark: false,
  },
  azul: {
    accent: '#6C8FBF', bg: '#F0F2F5', card: '#FFFFFF',
    text: '#2D2F3A', muted: '#9CA3B5', subtle: '#DDE3EC',
    border: '0.5px solid rgba(45,47,58,0.05)', dark: false,
  },
  morado: {
    accent: '#9479B7', bg: '#F4F0F8', card: '#FFFFFF',
    text: '#322C3E', muted: '#A89DB8', subtle: '#E6DDEE',
    border: '0.5px solid rgba(50,44,62,0.05)', dark: false,
  },
  verde: {
    accent: '#7AA487', bg: '#F0F4EE', card: '#FFFFFF',
    text: '#2D3530', muted: '#9DA89F', subtle: '#DAE3DC',
    border: '0.5px solid rgba(45,53,48,0.05)', dark: false,
  },
  dark: {
    accent: '#E68AA8', bg: '#171318', card: '#211C22',
    text: '#F5EAEF', muted: '#8C7E84', subtle: '#2C2329',
    border: '0.5px solid rgba(255,255,255,0.05)', dark: true,
  },
};

const PALETTE_META = [
  { id: 'peach',  name: 'Peach',  hint: 'Rosa cálido (predeterminado)', free: true,  swatches: ['#D9477E','#F5D7DC','#FDF0EB'] },
  { id: 'rose',   name: 'Rose',   hint: 'Rosa profundo',                 free: false, swatches: ['#D14C7A','#F3DCE0','#FCF1ED'] },
  { id: 'sand',   name: 'Sand',   hint: 'Beige champagne',               free: false, swatches: ['#C9956B','#EFE4D6','#F4ECE0'] },
  { id: 'azul',   name: 'Azul',   hint: 'Azul polvo suave',              free: false, swatches: ['#6C8FBF','#DDE3EC','#F0F2F5'] },
  { id: 'morado', name: 'Morado', hint: 'Lavanda romántico',             free: false, swatches: ['#9479B7','#E6DDEE','#F4F0F8'] },
  { id: 'verde',  name: 'Verde',  hint: 'Sage natural',                  free: false, swatches: ['#7AA487','#DAE3DC','#F0F4EE'] },
];
window.PALETTE_META = PALETTE_META;

// ─────────────────────────────────────────────────────────────
// App root
// ─────────────────────────────────────────────────────────────
function App() {
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "palette": "peach",
    "isPremium": false,
    "darkMode": false,
    "isPau": false
  }/*EDITMODE-END*/;

  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [tab, setTab] = useSt('home');
  const [stack, setStack] = useSt([]); // [{ kind, id }]
  const [transition, setTransition] = useSt(null); // 'push' | 'pop' | null
  const [modal, setModalEl] = useSt(null); // ReactElement rendered at device-root level
  const [toast, setToast] = useSt(null);

  const theme = useMemo(() => {
    if (tweaks.darkMode) return PALETTES.dark;
    return PALETTES[tweaks.palette] || PALETTES.rose;
  }, [tweaks.palette, tweaks.darkMode]);

  const nav = useMemo(() => ({
    go: (kind, id) => {
      setTransition('push');
      setStack(s => [...s, { kind, id }]);
      setTimeout(() => setTransition(null), 340);
    },
    back: () => {
      setTransition('pop');
      setTimeout(() => {
        setStack(s => s.slice(0, -1));
        setTransition(null);
      }, 280);
    },
    tab: (t) => {
      setStack([]);
      setTab(t);
    },
    openModal: (el) => setModalEl(el),
    closeModal: () => setModalEl(null),
    toast: (msg, opts = {}) => {
      setToast({ msg, ...opts });
      setTimeout(() => setToast(t => (t && t.msg === msg ? null : t)), 2200);
    },
  }), []);
  // Expose nav globally so deep components can show toasts without prop-drilling
  useEf(() => { window.__pauNav = nav; }, [nav]);

  function renderTab() {
    switch (tab) {
      case 'home': return <HomeScreen theme={theme} isPremium={tweaks.isPremium} nav={nav}/>;
      case 'retos': return <RetosScreen theme={theme} isPremium={tweaks.isPremium} nav={nav}/>;
      case 'recetas': return <RecetasScreen theme={theme} nav={nav}/>;
      case 'comunidad': return <ComunidadScreen theme={theme} nav={nav}/>;
      case 'perfil': return <PerfilScreen theme={theme} isPremium={tweaks.isPremium} isPau={tweaks.isPau} nav={nav}/>;
      default: return null;
    }
  }

  const top = stack[stack.length - 1];
  function renderDetail(item) {
    if (!item) return null;
    if (item.kind === 'reto') return <DetalleRetoScreen retoId={item.id} theme={theme} isPremium={tweaks.isPremium} nav={nav} onComplete={() => setTweak('isPremium', true)}/>;
    if (item.kind === 'receta') return <DetalleRecetaScreen recetaId={item.id} theme={theme} nav={nav}/>;
    if (item.kind === 'plan') return <PlanDetailScreen planId={item.id} theme={theme} isPremium={tweaks.isPremium} nav={nav} onComplete={() => setTweak('isPremium', true)}/>;
    if (item.kind === 'rutina') return <RutinaDetailScreen rutinaId={item.id} theme={theme} isPremium={tweaks.isPremium} nav={nav}/>;
    if (item.kind === 'logros') return <LogrosScreen theme={theme} nav={nav}/>;
    if (item.kind === 'progreso') return <ProgresoScreen theme={theme} nav={nav}/>;
    if (item.kind === 'historial') return <HistorialScreen theme={theme} nav={nav}/>;
    if (item.kind === 'login') return <LoginScreen theme={theme} nav={nav}/>;
    if (item.kind === 'onboarding') return <OnboardingScreen theme={theme} nav={nav}/>;
    if (item.kind === 'chat') return <ChatScreen theme={theme} nav={nav}/>;
    if (item.kind === 'notif') return <NotificacionesScreen theme={theme} nav={nav}/>;
    if (item.kind === 'admin') return <AdminScreen theme={theme} nav={nav}/>;
    if (item.kind === 'ajustes') return <AjustesScreen theme={theme} nav={nav} tweaks={tweaks} setTweak={setTweak}/>;
    if (item.kind === 'editarPerfil') return <EditarPerfilScreen theme={theme} nav={nav}/>;
    if (item.kind === 'paywall') return <PaywallScreen theme={theme} nav={nav} onComplete={() => setTweak('isPremium', true)}/>;
    return null;
  }

  const fullScreenKinds = ['paywall', 'login', 'onboarding', 'chat'];

  return (
    <IOSDevice dark={theme.dark} width={402} height={874}>
      <div style={{
        position: 'absolute', inset: 0, background: theme.bg,
        overflow: 'hidden', display: 'flex', flexDirection: 'column',
      }}>
        {/* Status bar already inside IOSDevice */}
        <div style={{
          flex: 1, position: 'relative', overflow: 'hidden',
        }}>
          {/* Tab screen */}
          <div style={{
            position: 'absolute', inset: 0, paddingTop: 50,
            overflowY: 'auto', overflowX: 'hidden',
            WebkitOverflowScrolling: 'touch',
          }} className="scroll-area" key={tab}>
            {renderTab()}
          </div>

          {/* Detail stack — slide in from right */}
          {top && (
            <div style={{
              position: 'absolute', inset: 0,
              background: theme.bg,
              overflowY: fullScreenKinds.includes(top.kind) ? 'hidden' : 'auto',
              overflowX: 'hidden',
              paddingTop: fullScreenKinds.includes(top.kind) ? 0 : 50,
              animation: transition === 'pop' ? 'slide-out-right 280ms cubic-bezier(.4,0,.2,1) forwards' :
                         'slide-in-right 340ms cubic-bezier(.2,.8,.2,1)',
              boxShadow: '-10px 0 30px rgba(0,0,0,0.08)',
              zIndex: 30,
            }} className="scroll-area" key={`${top.kind}-${top.id}-${stack.length}`}>
              {renderDetail(top)}
            </div>
          )}
        </div>

        {/* Tab bar — hide on full-screen routes or modal */}
        {!(top && fullScreenKinds.includes(top.kind)) && !modal && (
          <TabBar active={tab} onChange={(t) => nav.tab(t)} dark={theme.dark} accent={theme.accent}/>
        )}

        {/* Modal slot — full device area, above tab bar */}
        {modal && (
          <div style={{
            position: 'absolute', inset: 0, zIndex: 500,
          }}>{modal}</div>
        )}

        {/* Toast */}
        {toast && (
          <div style={{
            position: 'absolute', top: 60, left: '50%', transform: 'translateX(-50%)',
            zIndex: 700, padding: '10px 18px',
            background: 'rgba(45,42,38,0.92)', color: '#fff',
            borderRadius: 999, boxShadow: '0 10px 30px rgba(0,0,0,0.25)',
            fontFamily: 'Poppins', fontSize: 13, fontWeight: 500,
            display: 'flex', alignItems: 'center', gap: 8, whiteSpace: 'nowrap',
            animation: 'slide-down 360ms cubic-bezier(.2,.8,.2,1)',
          }}>
            {toast.icon && <span style={{ fontSize: 16 }}>{toast.icon}</span>}
            {toast.msg}
          </div>
        )}
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Paleta">
          <TweakColor
            label="Tema visual"
            value={tweaks.palette}
            options={PALETTE_META.map(p => p.swatches)}
            onChange={(v) => {
              const m = PALETTE_META.find(p => JSON.stringify(p.swatches) === JSON.stringify(v));
              if (m) setTweak('palette', m.id);
            }}
          />
          <TweakToggle
            label="Modo oscuro"
            value={tweaks.darkMode}
            onChange={(v) => setTweak('darkMode', v)}
          />
        </TweakSection>
        <TweakSection label="Usuario">
          <TweakRadio
            label="Plan"
            value={tweaks.isPremium ? 'premium' : 'free'}
            options={[
              { value: 'free', label: 'Gratis' },
              { value: 'premium', label: 'Premium' },
            ]}
            onChange={(v) => setTweak('isPremium', v === 'premium')}
          />
          <TweakToggle
            label="Cuenta admin (Pau)"
            value={tweaks.isPau}
            onChange={(v) => setTweak('isPau', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </IOSDevice>
  );
}

// Centered stage that scales the iPhone to viewport
function Stage() {
  const [scale, setScale] = useSt(1);
  useEf(() => {
    function onResize() {
      const vw = window.innerWidth;
      const vh = window.innerHeight;
      const sw = vw / 402;
      const sh = vh / 874;
      setScale(Math.min(sw, sh, 1) * 0.95);
    }
    onResize();
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);
  return (
    <div style={{
      width: '100vw', height: '100vh',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      background: 'radial-gradient(ellipse at center, #F5EBE0 0%, #E8DDD0 100%)',
      overflow: 'hidden',
    }}>
      <div style={{ transform: `scale(${scale})`, transformOrigin: 'center center' }}>
        <App/>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<Stage/>);