/* ============================================================
   app.jsx — Shell, navegação e persistência (LocalStorage)
   ============================================================ */
function App() {
  const store = window.crmStore;
  const clientParams = (() => {
    const q = new URLSearchParams(location.search);
    const c = q.get('c');
    if (c) return { c, t: c };                       // link curto: código serve como token
    const p = q.get('p');
    return p ? { p, t: q.get('t') || '', d: q.get('d') || '' } : null;  // links antigos
  })();
  if (clientParams) return <ClientView params={clientParams} />;

  const [view, setView] = React.useState('pipeline');   // 'pipeline' | 'wizard'
  const [deals, setDeals] = React.useState([]);
  const [navOpen, setNavOpen] = React.useState(false);
  const [resume, setResume] = React.useState(null);     // negócio a retomar (ou null = novo)
  const [user, setUser] = React.useState(null);
  const [ready, setReady] = React.useState(false);      // sessão verificada
  const [loadingDeals, setLoadingDeals] = React.useState(false);

  const startNew = () => { setResume(null); setView('wizard'); setNavOpen(false); };
  const resumeDeal = (deal) => { setResume(deal); setView('wizard'); setNavOpen(false); };

  const refresh = React.useCallback(async () => {
    try { setDeals(await store.list()); } catch (e) { console.warn('list falhou', e); }
  }, [store]);

  /* sessão + carga inicial + realtime */
  React.useEffect(() => {
    let unsubAuth = () => {}, unsubRt = () => {};
    (async () => {
      const u = await store.init();
      setUser(u); setReady(true);
      unsubAuth = store.onAuth((nu) => { setUser(nu); if (nu) refresh(); else setDeals([]); });
    })();
    return () => { unsubAuth(); unsubRt(); };
  }, [store, refresh]);

  React.useEffect(() => {
    if (!user) return;
    setLoadingDeals(true);
    refresh().then(() => setLoadingDeals(false));
    const unsubRt = store.subscribe(() => refresh());
    // rede de segurança: recarrega periodicamente e ao focar a aba
    // (garante ver o aceite/pagamento do cliente mesmo se o realtime não disparar)
    let poll = null;
    if (store.hasCloud) poll = setInterval(() => { if (!document.hidden) refresh(); }, 12000);
    const onFocus = () => { if (!document.hidden) refresh(); };
    document.addEventListener('visibilitychange', onFocus);
    window.addEventListener('focus', onFocus);
    return () => {
      unsubRt();
      if (poll) clearInterval(poll);
      document.removeEventListener('visibilitychange', onFocus);
      window.removeEventListener('focus', onFocus);
    };
  }, [user, store, refresh]);

  const commitDeal = (deal) => {
    setDeals(prev => {
      const exists = prev.find(d => d.id === deal.id);
      return exists ? prev.map(d => d.id === deal.id ? { ...deal } : d) : [{ ...deal }, ...prev];
    });
    return store.upsert(deal).catch(e => { console.warn('upsert falhou', e); throw e; });
  };
  const moveDeal = (id, stage) => {
    let updated = null;
    setDeals(prev => prev.map(d => { if (d.id === id) { updated = { ...d, stage, updatedAt: Date.now() }; return updated; } return d; }));
    if (updated) store.upsert(updated).catch(e => console.warn('upsert falhou', e));
  };
  const paidDeal = (id) => moveDeal(id, 'pagamento');
  const deleteDeal = (id) => {
    setDeals(prev => prev.filter(d => d.id !== id));
    store.remove(id).catch(e => console.warn('remove falhou', e));
  };

  const logout = async () => { await store.signOut(); setView('pipeline'); };

  const nav = [
    { id: 'pipeline', label: 'Pipeline', icon: 'layers' },
    { id: 'wizard', label: 'Nova proposta', icon: 'spark' },
  ];

  /* gating: aguardando sessão */
  if (!ready) {
    return <div className="boot app-bg"><div className="boot-spin" /></div>;
  }
  /* gating: modo nuvem sem login */
  if (store.mode === 'supabase' && !user) {
    return <AuthScreen onAuthed={() => setUser(store.user)} />;
  }

  return (
    <div className="app app-bg">
      {/* Sidebar */}
      <aside className={'sidebar' + (navOpen ? ' open' : '')}>
        <div className="side-brand"><LogoImg height={38} /></div>
        <nav className="side-nav">
          {nav.map(n => (
            <button key={n.id} className={'nav-item' + (view === n.id ? ' on' : '')}
              onClick={() => { if (n.id === 'wizard') startNew(); else { setView(n.id); setNavOpen(false); } }}>
              <Icon name={n.icon} size={19} /><span>{n.label}</span>
              {n.id === 'pipeline' && deals.length > 0 && <span className="nav-badge">{deals.length}</span>}
            </button>
          ))}
        </nav>
        <button className="side-cta" onClick={startNew}>
          <Icon name="bolt" size={16} /> Iniciar contratação
        </button>
        <div className="side-foot">
          <div className="side-foot-dot" />
          <div className="col grow" style={{ gap: 0, minWidth: 0 }}>
            <span style={{ fontSize: 12.5, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
              {store.mode === 'supabase' ? (user && user.email) : 'Modo local'}
            </span>
            <span style={{ fontSize: 11, color: 'var(--text-3)' }}>
              {store.mode === 'supabase' ? 'Sincronizado · nuvem' : 'Somente este aparelho'}
            </span>
          </div>
          {store.mode === 'supabase' && (
            <button className="side-logout" onClick={logout} title="Sair"><Icon name="arrowR" size={16} /></button>
          )}
        </div>
      </aside>

      {navOpen && <div className="nav-scrim" onClick={() => setNavOpen(false)} />}

      {/* Main */}
      <main className="main">
        <div className="topbar">
          <button className="hamburger" onClick={() => setNavOpen(true)}><Icon name="grid" size={20} /></button>
          <LogoImg height={26} />
        </div>
        <div className="main-scroll">
          {view === 'pipeline' && (
            <Pipeline deals={deals} onMove={moveDeal} onDelete={deleteDeal} onNew={startNew} onResume={resumeDeal} />
          )}
          {view === 'wizard' && (
            <Wizard key={resume ? resume.id : 'new'} resume={resume}
              onCommit={commitDeal} onPaid={paidDeal} onExit={(v) => { setResume(null); setView(v || 'pipeline'); }} />
          )}
        </div>
      </main>
    </div>
  );
}

window.__ddRoot = window.__ddRoot || ReactDOM.createRoot(document.getElementById('root'));
window.__ddRoot.render(<App />);