/* app.jsx — root, estado global, roteamento (VER Clipping) */

const OFFLINE_MODE = !window.api || !api.isLoggedIn(); // seed data quando sem backend

const App = () => {
  const [user, setUser]       = React.useState(api.isLoggedIn() ? { name: "Usuário" } : null);
  const [demoMode, setDemoMode] = React.useState(false);
  const [page, setPage]       = React.useState("dashboard");
  const [reviewClient, setReviewClient] = React.useState(null);
  const [loading, setLoading] = React.useState(true);

  const [clients, setClients]     = React.useState([]);
  const [clippings, setClippings] = React.useState({});
  const [portals, setPortals]     = React.useState([]);
  const [history, setHistory]     = React.useState([]);
  const [metrics, setMetrics]     = React.useState(SEED_METRICS);

  const [toast, setToast] = React.useState(null);
  const onToast = (msg) => setToast({ id: Date.now(), msg });

  // Carrega dados
  const loadAll = React.useCallback(async () => {
    if (!api.isLoggedIn()) { setLoading(false); return; }
    try {
      const [c, p, cl, h] = await Promise.all([
        api.getClients(),
        api.getPortals(),
        api.getToday(),
        api.getHistory({ limit: 60 }),
      ]);
      setClients(c);
      setPortals(p);
      setClippings(cl);
      setHistory(h);
    } catch (e) {
      console.warn("[app] API indisponível — usando seed data:", e.message);
      setClients(SEED_CLIENTS);
      setPortals(SEED_PORTALS);
      setClippings(SEED_CLIPPINGS);
      setHistory(SEED_HISTORY);
    } finally { setLoading(false); }
  }, []);

  React.useEffect(() => {
    if (demoMode) {
      setClients(SEED_CLIENTS); setPortals(SEED_PORTALS);
      setClippings(SEED_CLIPPINGS); setHistory(SEED_HISTORY);
      setLoading(false);
    } else if (user) {
      loadAll();
    } else {
      setLoading(false);
    }
  }, [user, demoMode, loadAll]);

  const pendingCount = clients.filter(c => clippings[c.id] && clippings[c.id].status === "pending").length;

  const updateClip = (id, next) => setClippings(prev => ({ ...prev, [id]: next }));

  const gotoReview = (id) => { setReviewClient(id); setPage("review"); };

  const approve = async (id) => {
    const client  = clients.find(c => c.id === id);
    const clip    = clippings[id];
    const count   = (clip.saiu || []).filter(i => i.kept).length + (clip.clipping || []).filter(i => i.kept).length;
    const now     = new Date();
    const sentAt  = String(now.getHours()).padStart(2,"0") + ":" + String(now.getMinutes()).padStart(2,"0");
    const byName  = user.name;

    if (demoMode) {
      setClippings(prev => ({ ...prev, [id]: { ...prev[id], status: "sent", sentAt, approvedBy: byName } }));
      setHistory(prev => [{ id:"h"+Date.now(), date:todayShort(), dateFull:todayFull(), time:sentAt, client:client.name, clientId:id, count, by:byName, status:"enviado" }, ...prev]);
      onToast(`Clipping de ${client.name} aprovado e enviado`);
      setPage("dashboard");
      return;
    }

    try {
      const res = await api.approveClip(id);
      setClippings(prev => ({ ...prev, [id]: { ...prev[id], status: "sent", sentAt: res.sentAt, approvedBy: res.approvedBy } }));
      setHistory(prev => [{ id:"h"+Date.now(), date:todayShort(), dateFull:todayFull(), time:res.sentAt, client:client.name, clientId:id, count, by:res.approvedBy, status:"enviado" }, ...prev]);
      onToast(`Clipping de ${client.name} aprovado e enviado`);
      setPage("dashboard");
    } catch (e) {
      onToast("Erro ao enviar: " + e.message);
    }
  };

  const crumbs = {
    dashboard: ["Operação", "Dashboard"],
    review:    ["Operação", "Revisão do dia"],
    clients:   ["Cadastros", "Clientes"],
    portals:   ["Cadastros", "Portais"],
    history:   ["Operação", "Histórico"],
    metrics:   ["Análise", "Métricas"],
  };

  if (!user && !demoMode) return <LoginPage onLogin={u => { setUser(u); }} onDemo={() => { setDemoMode(true); setUser({ name: "Demo", role: "demo" }); }} />;

  if (loading) return (
    <div style={{ minHeight:"100vh",display:"flex",alignItems:"center",justifyContent:"center",background:"var(--ink-50)" }}>
      <div style={{ textAlign:"center",color:"var(--ink-500)",fontSize:14 }}>
        <Icon name="refresh" style={{ width:24,height:24,animation:"spin 1s linear infinite" }} />
        <div style={{ marginTop:12 }}>Carregando dados…</div>
      </div>
    </div>
  );

  const reviewClip = clippings[reviewClient] || {};
  const reviewC    = clients.find(c => c.id === reviewClient);

  return (
    <div className="app">
      <Sidebar page={page} onNavigate={setPage} pendingCount={pendingCount} />
      <div className="main">
        <div className="topbar">
          <div className="topbar__crumbs">
            <span>{crumbs[page][0]}</span>
            <span className="sep">/</span>
            <span style={{ color:"var(--ink-900)",fontWeight:500 }}>{crumbs[page][1]}</span>
          </div>
          <div className="topbar__right">
            {pendingCount > 0
              ? <Status kind="warn">{pendingCount} aguardando revisão</Status>
              : <Status kind="ok">Todos os clippings aprovados</Status>}
            <span className="topbar__date">{HOJE_LABEL}</span>
            <button className="iconbtn" title={"Sessão: " + user.name} onClick={() => { api.clearToken(); setUser(null); setDemoMode(false); }}>
              <Icon name="close" />
            </button>
          </div>
        </div>

        {page === "dashboard" ? (
          <Dashboard clients={clients} clippings={clippings} onReview={gotoReview} coletaHora={COLETA_HORA}
            onCollect={async () => { await api.triggerCollect(); onToast("Coleta iniciada — aguarde alguns minutos"); }} />
        ) : null}
        {page === "review" && reviewC ? (
          <ReviewPage client={reviewC} clip={reviewClip} clients={clients} clippings={clippings}
            reviewClient={reviewClient} setReviewClient={setReviewClient}
            onUpdate={updateClip} onApprove={approve} onToast={onToast} />
        ) : null}
        {page === "clients" ? (
          <ClientsPage clients={clients} setClients={setClients} onToast={onToast}
            onSave={async (c) => { await api.saveClient(c); const updated = await api.getClients(); setClients(updated); }} />
        ) : null}
        {page === "portals" ? (
          <PortalsPage portals={portals} setPortals={setPortals} onToast={onToast}
            onSave={async (p) => { await api.savePortal(p); const updated = await api.getPortals(); setPortals(updated); }} />
        ) : null}
        {page === "history" ? (
          <HistoryPage history={history} onToast={onToast} />
        ) : null}
        {page === "metrics" ? (
          <MetricsPage clients={clients} metrics={metrics} onToast={onToast}
            onLoadMetrics={async (clientId, period) => {
              try {
                const m = await api.getMetrics(clientId, period);
                setMetrics(prev => ({ ...prev, [clientId]: m }));
              } catch {}
            }} />
        ) : null}
      </div>

      {toast ? <Toast key={toast.id} message={toast.msg} onDone={() => setToast(null)} /> : null}
    </div>
  );
};

function todayShort() {
  const d = new Date();
  return String(d.getDate()).padStart(2,"0")+"/"+String(d.getMonth()+1).padStart(2,"0");
}
function todayFull() {
  const d = new Date();
  return String(d.getDate()).padStart(2,"0")+"/"+String(d.getMonth()+1).padStart(2,"0")+"/"+d.getFullYear();
}

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