// aplicativo.jsx — shell, roteador, navegação responsiva (sidebar + tab bar) e Ajustes.

const ACCENTS = {
  gold:     { c: '#C9A96E', d: '#A98A4F', on: '#2A2114' },
  terracota:{ c: '#C7762B', d: '#A8631F', on: '#1f1206' },
  navy:     { c: '#5C82B8', d: '#3A5A86', on: '#0a0f17' },
  verde:    { c: '#7FB08C', d: '#54805f', on: '#0c1410' },
};
const VERSE_FONTS = {
  cormorant: "'Cormorant Garamond', Georgia, serif",
  lora:      "'Lora', Georgia, serif",
  fraunces:  "'Fraunces', Georgia, serif",
};
const DENSITY = { compacto: 0.86, regular: 1, espaçoso: 1.16 };

function hexA(hex, a) {
  const n = parseInt(hex.slice(1), 16);
  return `rgba(${(n >> 16) & 255},${(n >> 8) & 255},${n & 255},${a})`;
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "gold",
  "verseFont": "cormorant",
  "theme": "dark",
  "density": "regular",
  "textSize": 1,
  "homeLayout": "mistura"
}/*EDITMODE-END*/;

const NAV = [
  { k: 'home', path: '/home', icon: 'home', label: 'Início' },
  { k: 'jornadas', path: '/jornadas', icon: 'book', label: 'Jornadas' },
  { k: 'orar', path: '/orar', icon: 'hands', label: 'Orar' },
  { k: 'biblioteca', path: '/biblioteca', icon: 'bookmark', label: 'Biblioteca' },
  { k: 'perfil', path: '/perfil', icon: 'user', label: 'Perfil' },
];
const TITLES = { hoje: 'Hoje', videos: 'Vídeos', comunidade: 'Comunidade', loja: 'Loja', jornada: 'Jornada', produto: '', roteiro: 'Roteiro', compra: '' };

function applyTweaks(t) {
  const root = document.documentElement;
  const a = ACCENTS[t.accent] || ACCENTS.gold;
  root.style.setProperty('--accent', a.c);
  root.style.setProperty('--accent-deep', a.d);
  root.style.setProperty('--accent-soft', hexA(a.c, t.theme === 'light' ? 0.14 : 0.16));
  root.style.setProperty('--accent-line', hexA(a.c, 0.42));
  root.style.setProperty('--on-accent', a.on);
  root.style.setProperty('--verse-font', VERSE_FONTS[t.verseFont] || VERSE_FONTS.cormorant);
  root.style.setProperty('--density', DENSITY[t.density] || 1);
  root.style.setProperty('--tsize', t.textSize || 1);
  root.setAttribute('data-theme', t.theme === 'light' ? 'light' : 'dark');
  const meta = document.querySelector('meta[name="theme-color"]');
  if (meta) meta.content = t.theme === 'light' ? '#F7F2E9' : '#090806';
}

function activeTab(parts) {
  const p = parts[0] || 'home';
  if (['home', 'hoje'].includes(p)) return 'home';
  if (['jornadas', 'jornada'].includes(p)) return 'jornadas';
  if (['orar', 'roteiro'].includes(p)) return 'orar';
  if (['biblioteca', 'loja', 'produto', 'compra'].includes(p)) return 'biblioteca';
  if (p === 'perfil') return 'perfil';
  return p;
}

function Roteador({ route, tw, setTweak }) {
  const [a, b, c, d] = route.parts;
  const first = a || 'home';
  switch (first) {
    case 'home': return <TelaInicio tw={tw} />;
    case 'hoje': return <TelaHoje />;
    case 'jornadas': return <TelaJornadas />;
    case 'jornada': return c === 'dia' ? <TelaDia id={b} n={d} /> : <TelaDetalheJornada id={b} />;
    case 'orar': return <TelaOrar tab={b === 'roteiros' ? 'roteiros' : 'oracoes'} />;
    case 'roteiro': return <TelaRoteiro id={b} />;
    case 'biblioteca': case 'loja': return <TelaBiblioteca />;
    case 'produto': return <TelaDetalheProduto id={b} />;
    case 'compra': return <TelaCompraSucesso id={c} />;
    case 'videos': return <TelaVideos />;
    case 'comunidade': return <TelaComunidade />;
    case 'perfil': return <TelaPerfil tw={tw} setTweak={setTweak} />;
    default: return <TelaInicio tw={tw} />;
  }
}

function appbarTitle(parts) {
  const p = parts[0];
  if (p === 'jornada') { const j = JOURNEYS.find(x => x.id === parts[1]); return j ? j.title : 'Jornada'; }
  if (p === 'produto') { const pr = PRODUCTS.find(x => x.id === parts[1]); return pr ? pr.title : ''; }
  if (p === 'roteiro') return 'Roteiro';
  if (p === 'compra') return '';
  return TITLES[p] || '';
}

function Aplicativo() {
  const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const route = useRoute();
  const store = useStore();
  useEffect(() => { applyTweaks(tw); }, [tw]);

  // gate onboarding
  if (!store.state.onboarded || route.parts[0] === 'onboarding') {
    if (store.state.onboarded && route.parts[0] === 'onboarding') { /* allow re-onboard */ }
    if (!store.state.onboarded) return (<><TelaOnboarding /><PainelAjustesUI tw={tw} setTweak={setTweak} /></>);
    return (<><TelaOnboarding /><PainelAjustesUI tw={tw} setTweak={setTweak} /></>);
  }

  const tab = activeTab(route.parts);
  const isMain = NAV.some(n => n.k === tab && (route.parts.length <= 1));
  const showBack = !isMain;
  const title = appbarTitle(route.parts);

  return (
    <div className="app">
      {/* pular navegação (teclado/leitor): foca o conteúdo sem tocar o hash (href falso quebraria o router) */}
      <a href="#conteudo" className="skip-link"
        onClick={(e) => { e.preventDefault(); const c = document.getElementById('conteudo'); if (c) { c.focus(); c.scrollIntoView(); } }}>
        Pular para o conteúdo
      </a>
      {/* sidebar (desktop) */}
      <nav className="sidebar" aria-label="Navegação principal">
        <div className="side-brand">
          <Logo size={40} radius={11} />
          <div className="nm">O Casal<br />Legendário</div>
        </div>
        {NAV.map(n => (
          <button key={n.k} type="button" className={'side-link' + (tab === n.k ? ' on' : '')}
            aria-current={tab === n.k ? 'page' : undefined} onClick={() => navRoot(n.path)}>
            <Icon name={n.icon} size={20} /> <span>{n.label}</span>
          </button>
        ))}
        <div className="rule rule-soft" style={{ margin: '12px 6px' }} />
        {[['videos', 'play', 'Vídeos'], ['comunidade', 'users', 'Comunidade'], ['loja', 'store', 'Loja']].map(([k, i, l]) => (
          <button key={k} type="button" className={'side-link' + (route.parts[0] === k ? ' on' : '')}
            aria-current={route.parts[0] === k ? 'page' : undefined} onClick={() => navRoot('/' + k)}>
            <Icon name={i} size={20} /> <span>{l}</span>
          </button>
        ))}
        <div className="side-foot">
          <div className="chip-streak" style={{ width: '100%', justifyContent: 'center' }}>
            <Icon name="flame" size={15} className="flame" fill /> {store.streak} dias seguidos
          </div>
        </div>
      </nav>

      <main className="main">
        {/* mobile app bar */}
        <header className="appbar mob-only">
          {showBack
            ? <button className="backbtn" onClick={() => back()} aria-label="Voltar para a tela anterior">
                <Icon name="back" size={20} /> <span>Voltar</span>
              </button>
            : <Logo size={32} radius={9} />}
          <div className="ttl">{showBack ? title : 'O Casal Legendário'}</div>
          {tab === 'home' && !showBack && <button className="iconbtn" onClick={() => navRoot('/perfil')} aria-label="Perfil e ajustes"><Icon name="settings" size={21} /></button>}
        </header>

        <div className="scroll" id="conteudo" tabIndex={-1}>
          <div className="screen-anim" key={route.parts.join('/')}>
            <Roteador route={route} tw={tw} setTweak={setTweak} />
          </div>
        </div>

        {/* mobile tab bar */}
        <nav className="tabbar mob-only" aria-label="Navegação">
          {NAV.map(n => (
            <button key={n.k} type="button" className={'tab-item' + (tab === n.k ? ' on' : '')}
              aria-current={tab === n.k ? 'page' : undefined} onClick={() => navRoot(n.path)}>
              <Icon name={n.icon} size={23} fill={tab === n.k} />
              <span>{n.label}</span>
            </button>
          ))}
        </nav>

        {/* região viva: anuncia a tela atual a leitores de tela (persiste entre rotas, fora do bloco com key=) */}
        <div id="rota-live" role="status" aria-live="polite" aria-atomic="true" className="sr-only" />
      </main>

      {/* coach-mark de 1º uso: FORA do .scroll/.screen-anim (cujo transform quebraria o position:fixed) */}
      {tab === 'home' && <CoachNav />}

      <PainelAjustesUI tw={tw} setTweak={setTweak} />
    </div>
  );
}

function PainelAjustesUI({ tw, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Identidade" />
      <TweakColor label="Acento" value={ACCENTS[tw.accent].c}
        options={[ACCENTS.gold.c, ACCENTS.terracota.c, ACCENTS.navy.c, ACCENTS.verde.c]}
        onChange={(v) => setTweak('accent', Object.keys(ACCENTS).find(k => ACCENTS[k].c === v) || 'gold')} />
      <TweakSelect label="Fonte dos versículos" value={tw.verseFont}
        options={['cormorant', 'lora', 'fraunces']} onChange={(v) => setTweak('verseFont', v)} />
      <TweakSection label="Aparência" />
      <TweakRadio label="Tema" value={tw.theme} options={['dark', 'light']} onChange={(v) => setTweak('theme', v)} />
      <TweakRadio label="Densidade" value={tw.density} options={['compacto', 'regular', 'espaçoso']} onChange={(v) => setTweak('density', v)} />
      <TweakSlider label="Tamanho do texto" value={tw.textSize} min={0.9} max={1.2} step={0.05} onChange={(v) => setTweak('textSize', v)} />
      <TweakSection label="Início" />
      <TweakRadio label="Layout da Home" value={tw.homeLayout} options={['mistura', 'streak', 'editorial']} onChange={(v) => setTweak('homeLayout', v)} />
    </TweaksPanel>
  );
}

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