/* global React, ReactDOM */
const { useState: useStateApp, useEffect: useEffectApp, useCallback: useCallbackApp } = React;

// ── stale banner ─────────────────────────────────────────────────────────────
function StaleBanner({ stale, staleSince }) {
  if (!stale) return null;
  return (
    <div className="stale-banner">
      ⚠ Dados desatualizados — última atualização válida: {staleSince || 'indisponível'}
    </div>
  );
}

// ── main app ──────────────────────────────────────────────────────────────────
function App() {
  const D = window.IntradayData;
  const API = window.IntradayAPI;

  // session: { token, role, name, store, shift } | null
  const [session, setSession] = useStateApp(() => API.getSession());
  const [intradayData, setIntradayData] = useStateApp(null);
  const [loading, setLoading] = useStateApp(false);
  const [error, setError] = useStateApp(null);

  // Navigation: { kind, fromAdmin?, fromSupervisor?, fromTeamleader?, storeCode?, shiftId?, operatorName? }
  const [view, setView] = useStateApp(null);

  const fetchData = useCallbackApp(async () => {
    if (!session) return;
    setLoading(true);
    setError(null);
    try {
      const data = await API.getIntraday();
      setIntradayData(data);
    } catch (e) {
      setError(e.message || 'Erro ao carregar dados');
    } finally {
      setLoading(false);
    }
  }, [session]);

  // Initialize view from session role on login / session change
  useEffectApp(() => {
    if (!session) { setView(null); return; }
    const role = session.role;
    if (role === 'admin')        setView({ kind: 'admin' });
    else if (role === 'supervisor') setView({ kind: 'supervisor' });
    else if (role === 'teamleader') setView({ kind: 'teamleader' });
    else                            setView({ kind: 'operator' });
    fetchData();
  }, [session]);

  // Auto-refresh every 10 minutes
  useEffectApp(() => {
    if (!session) return;
    const id = setInterval(fetchData, 10 * 60 * 1000);
    return () => clearInterval(id);
  }, [session, fetchData]);

  function handleLogin(sessionData) {
    setSession(sessionData);
  }

  function handleLogout() {
    API.logout();
    setSession(null);
    setIntradayData(null);
  }

  if (!session) {
    return <window.LoginScreen onLogin={handleLogin} />;
  }

  const role = session.role;

  // Build props shared across views
  const sharedProps = {
    intradayData,
    loading,
    error,
    session,
    onRefresh: fetchData,
  };

  return (
    <div className="app-shell">
      <header className="top-bar">
        <img src="assets/logos/logo-shopper.png" alt="Shopper" className="top-bar-logo-img" />
        <div className="top-bar-divider" />
        <div className="top-bar-context">
          <span className="top-bar-eyebrow">Intraday</span>
          <span className="top-bar-store">Performance Operacional</span>
        </div>
        <div className="top-bar-spacer" />
        <span className="top-bar-user">{session.name}</span>
        <button className="top-bar-logout" onClick={handleLogout} title="Sair">
          <window.Icon name="log_out" size={14} />
          <span className="top-bar-logout-text">Sair</span>
        </button>
      </header>

      <window.LiveBanner onRefresh={fetchData} />

      {intradayData && <StaleBanner stale={intradayData.stale} staleSince={intradayData.stale_since} />}

      {loading && !intradayData && (
        <div className="loading-state">Carregando dados...</div>
      )}
      {error && !intradayData && (
        <div className="error-state">Erro: {error}</div>
      )}

      {view && intradayData && (
        <>
          {view.kind === 'admin' && (
            <window.AdminView
              {...sharedProps}
              onOpenStore={(storeCode) => setView({ kind: 'supervisor', storeCode, fromAdmin: true })}
            />
          )}

          {view.kind === 'supervisor' && (
            <>
              {view.fromAdmin && (
                <div style={{ maxWidth: 1400, width: '100%', margin: '0 auto', padding: '16px 24px 0' }}>
                  <button className="backlink" onClick={() => setView({ kind: 'admin' })}>
                    <window.Icon name="arrow_left" size={14} /> Voltar para visão consolidada
                  </button>
                </div>
              )}
              <window.SupervisorView
                {...sharedProps}
                storeCode={view.storeCode || session.store}
                onOpenShift={(shiftId) => setView({ kind: 'teamleader', storeCode: view.storeCode || session.store, shiftId, fromSupervisor: true, fromAdmin: view.fromAdmin })}
                onOpenOperator={(operatorName, shiftId) => setView({ kind: 'operator', storeCode: view.storeCode || session.store, shiftId, operatorName, fromSupervisor: true, fromAdmin: view.fromAdmin })}
              />
            </>
          )}

          {view.kind === 'teamleader' && (
            <window.TeamLeaderView
              {...sharedProps}
              storeCode={view.storeCode || session.store}
              shiftId={view.shiftId || session.shift}
              onBack={view.fromSupervisor ? () => setView({ kind: 'supervisor', storeCode: view.storeCode, fromAdmin: view.fromAdmin }) : null}
              onOpenOperator={(operatorName) => setView({ kind: 'operator', storeCode: view.storeCode || session.store, shiftId: view.shiftId || session.shift, operatorName, fromTeamleader: true, fromSupervisor: view.fromSupervisor, fromAdmin: view.fromAdmin })}
            />
          )}

          {view.kind === 'operator' && (
            <window.OperatorView
              {...sharedProps}
              storeCode={view.storeCode || session.store}
              shiftId={view.shiftId || session.shift}
              operatorName={view.operatorName || session.name}
              onBack={
                view.fromTeamleader
                  ? () => setView({ kind: 'teamleader', storeCode: view.storeCode, shiftId: view.shiftId, fromSupervisor: view.fromSupervisor, fromAdmin: view.fromAdmin })
                  : view.fromSupervisor
                  ? () => setView({ kind: 'supervisor', storeCode: view.storeCode, fromAdmin: view.fromAdmin })
                  : null
              }
            />
          )}
        </>
      )}
    </div>
  );
}

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