// ════════════════════════════════════════════════════════════════
// MAIN APP — Router + state + seed data
// ════════════════════════════════════════════════════════════════

// ─── Seed Data ─────────────────────────────────────────────────

const SEED_EMPRESAS = [
  {
    id: "emp_a8f4c2b9",
    nome: "Padaria Pão Quente",
    razao: "Pão Quente Comércio de Alimentos LTDA",
    cnpj: "32.456.789/0001-23",
    segmento: "Alimentação",
    status: "connected",
    createdAt: "12 mai 2025",
    lastRefresh: "há 18 min",
    lastCall: "há 4 min",
    calls24h: 247,
    refreshes: 8,
    avgLatency: 184,
    minutesElapsed: 18,
    token: "ab7c4f2e9d1a3b5c8e6f0a2d4b9c1e3f",
    tokenCreated: "12 mai 2025",
    recentLogs: [
      { ts: "14:32:08", method: "GET", endpoint: "/v1/sales?date=2026-05-15", status: 200, dur: 184 },
      { ts: "14:28:01", method: "GET", endpoint: "/v1/sales?date=2026-05-15", status: 200, dur: 167 },
      { ts: "14:00:34", method: "GET", endpoint: "/v1/sales?date=2026-05-14", status: 200, dur: 201, refresh: true },
      { ts: "13:30:12", method: "GET", endpoint: "/v1/customers", status: 200, dur: 156 },
      { ts: "13:00:08", method: "GET", endpoint: "/v1/sales?date=2026-05-14", status: 200, dur: 189 },
    ],
  },
  {
    id: "emp_d2e6f7a1",
    nome: "TechParts Indústria",
    razao: "TechParts Indústria de Componentes S.A.",
    cnpj: "47.823.156/0001-78",
    segmento: "Indústria",
    status: "needs_refresh",
    createdAt: "23 mar 2025",
    lastRefresh: "há 28 min",
    lastCall: "há 12 min",
    calls24h: 1842,
    refreshes: 47,
    avgLatency: 212,
    minutesElapsed: 28,
    token: "ce5a8d3f7b2c1e9a4d6f8b0c3e5a7d9f",
    tokenCreated: "23 mar 2025",
    recentLogs: [
      { ts: "14:30:55", method: "GET", endpoint: "/v1/products", status: 200, dur: 198 },
      { ts: "14:21:03", method: "GET", endpoint: "/v1/sales?date=2026-05-15", status: 200, dur: 234 },
    ],
  },
  {
    id: "emp_b3c9e1d8",
    nome: "Estilo & Cia Boutique",
    razao: "Estilo & Cia Comércio de Vestuário",
    cnpj: "21.567.890/0001-45",
    segmento: "Varejo",
    status: "error",
    createdAt: "08 jan 2026",
    lastRefresh: "há 3 horas",
    lastCall: "há 2 h",
    calls24h: 89,
    refreshes: 2,
    avgLatency: 178,
    minutesElapsed: 30,
    token: "f1a3b5c7d9e0f2a4b6c8d0e2f4a6b8c0",
    tokenCreated: "08 jan 2026",
    recentLogs: [
      { ts: "12:14:22", method: "GET", endpoint: "/v1/sales", status: 401, dur: 92 },
      { ts: "12:14:01", method: "POST", endpoint: "/auth/refresh", status: 401, dur: 78, refresh: true },
    ],
  },
  {
    id: "emp_5f8a2c1d",
    nome: "Café da Esquina",
    razao: "Café da Esquina Bebidas LTDA",
    cnpj: "15.987.456/0001-32",
    segmento: "Alimentação",
    status: "pending",
    createdAt: "10 mai 2026",
    lastRefresh: "—",
    lastCall: "—",
    calls24h: 0,
    refreshes: 0,
    avgLatency: 0,
    minutesElapsed: 0,
    token: "00000000000000000000000000000000",
    tokenCreated: "—",
    recentLogs: [],
  },
];

// build flat logs list
const buildAllLogs = (empresas) => {
  const all = [];
  empresas.forEach(emp => {
    (emp.recentLogs || []).forEach(l => {
      all.push({ ...l, empresaId: emp.id, empresaNome: emp.nome });
    });
  });
  // add some extra varied logs
  const today = ["14:35:12", "14:33:48", "14:29:09", "14:24:55", "14:18:32", "14:12:07", "14:05:44", "13:58:21", "13:52:09", "13:45:38"];
  empresas.filter(e => e.status === "connected" || e.status === "needs_refresh").forEach(emp => {
    today.slice(0, 6).forEach((ts, i) => {
      all.push({
        ts,
        method: i % 4 === 0 ? "POST" : "GET",
        endpoint: i % 3 === 0 ? "/v1/customers" : i % 3 === 1 ? "/v1/sales?date=2026-05-15" : "/v1/products",
        status: i === 5 ? 429 : 200,
        dur: 100 + Math.floor(Math.random() * 250),
        refresh: i === 2,
        empresaId: emp.id,
        empresaNome: emp.nome,
      });
    });
  });
  // sort newest first
  return all.sort((a, b) => b.ts.localeCompare(a.ts));
};

// ─── App Root ──────────────────────────────────────────────────

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "density": "cozy",
  "sidebarLayout": "wide",
  "cardLayout": "stacked",
  "urlStyle": "mono",
  "dashboardLayout": "split",
  "demoState": "logged-in"
}/*EDITMODE-END*/;

const App = () => {
  const [authed, setAuthed] = React.useState(true);
  const [user, setUser] = React.useState({ name: "Rafa Lemos", email: "rafa@choraapi.com.br" });
  const [empresas, setEmpresas] = React.useState(SEED_EMPRESAS);
  const [route, setRoute] = React.useState({ name: "empresas" }); // default deep into the meat
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const { copy, Toast } = useCopyToast();

  // External demo-state control (logged-out vs logged-in)
  React.useEffect(() => {
    if (tweaks.demoState === "logged-out") setAuthed(false);
    else setAuthed(true);
  }, [tweaks.demoState]);

  const handleLogin = (u) => {
    setUser(u);
    setAuthed(true);
    setRoute({ name: "empresas" });
    setTweak({ demoState: "logged-in" });
  };

  const handleLogout = () => {
    setAuthed(false);
    setRoute({ name: "empresas" });
    setTweak({ demoState: "logged-out" });
  };

  const addEmpresa = (data) => {
    const id = "emp_" + Math.random().toString(36).slice(2, 10);
    const token = Math.random().toString(36).slice(2) + Math.random().toString(36).slice(2);
    const newEmp = {
      id,
      ...data,
      token,
      tokenCreated: "agora",
      createdAt: new Date().toLocaleDateString("pt-BR", { day: "2-digit", month: "short", year: "numeric" }),
      lastRefresh: "—",
      lastCall: "—",
      calls24h: 0,
      refreshes: 0,
      avgLatency: 0,
      minutesElapsed: 0,
      recentLogs: [],
    };
    setEmpresas(prev => [newEmp, ...prev]);
    return newEmp;
  };

  const updateEmpresa = (id, patch) => {
    setEmpresas(prev => prev.map(e => e.id === id ? { ...e, ...patch } : e));
  };

  const currentEmpresa = (route.empresaId)
    ? empresas.find(e => e.id === route.empresaId)
    : null;

  // Need fresh empresa reference when route changes
  if (!authed) {
    return (
      <>
        <AuthScreen onLogin={handleLogin}/>
        <Toast/>
      </>
    );
  }

  const allLogs = buildAllLogs(empresas);

  return (
    <div className={"app-shell density-" + tweaks.density}>
      <Marquee/>
      <div className={"app-body" + (tweaks.sidebarLayout === "rail" ? " rail" : "")}>
        <Sidebar
          route={route}
          setRoute={setRoute}
          user={user}
          empresas={empresas}
        />
        <main className="app-main">
          <div className="app-main-narrow">
            {route.name === "dashboard" && (
              <Dashboard user={user} empresas={empresas} setRoute={setRoute}/>
            )}
            {route.name === "empresas" && (
              <EmpresasList
                empresas={empresas}
                setRoute={setRoute}
                cardLayout={tweaks.cardLayout}
              />
            )}
            {route.name === "empresa-new" && (
              <EmpresaNew setRoute={setRoute} addEmpresa={addEmpresa}/>
            )}
            {route.name === "empresa" && currentEmpresa && (
              <EmpresaDetail
                empresa={currentEmpresa}
                setRoute={setRoute}
                updateEmpresa={updateEmpresa}
                copy={copy}
                urlStyle={tweaks.urlStyle}
                dashboardLayout={tweaks.dashboardLayout}
              />
            )}
            {route.name === "oauth" && currentEmpresa && (
              <OAuthFlow
                empresa={currentEmpresa}
                setRoute={setRoute}
                updateEmpresa={updateEmpresa}
              />
            )}
            {route.name === "logs" && (
              <LogsScreen
                empresas={empresas}
                allLogs={allLogs}
                setRoute={setRoute}
                filterEmpresaId={route.empresaId}
              />
            )}
            {route.name === "conta" && (
              <ContaScreen user={user} empresas={empresas} onLogout={handleLogout}/>
            )}
          </div>
        </main>
      </div>

      <Toast/>

      <TweaksPanel className="tweaks-panel-light" title="Tweaks">
        <TweakSection label="Estado do protótipo">
          <TweakRadio
            label="Visualizando"
            value={tweaks.demoState}
            onChange={(v) => setTweak({ demoState: v })}
            options={[
              { value: "logged-in", label: "App logado" },
              { value: "logged-out", label: "Tela de login" },
            ]}
          />
        </TweakSection>

        <TweakSection label="Layout">
          <TweakRadio
            label="Densidade"
            value={tweaks.density}
            onChange={(v) => setTweak({ density: v })}
            options={[
              { value: "compact", label: "Compacta" },
              { value: "cozy", label: "Padrão" },
              { value: "comfortable", label: "Confortável" },
            ]}
          />
          <TweakRadio
            label="Sidebar"
            value={tweaks.sidebarLayout}
            onChange={(v) => setTweak({ sidebarLayout: v })}
            options={[
              { value: "rail", label: "Rail (ícones)" },
              { value: "wide", label: "Larga (com texto)" },
            ]}
          />
        </TweakSection>

        <TweakSection label="Empresas">
          <TweakRadio
            label="Card"
            value={tweaks.cardLayout}
            onChange={(v) => setTweak({ cardLayout: v })}
            options={[
              { value: "row", label: "Em linha" },
              { value: "stacked", label: "Em coluna" },
            ]}
          />
        </TweakSection>

        <TweakSection label="URL do Power BI">
          <TweakRadio
            label="Estilo"
            value={tweaks.urlStyle}
            onChange={(v) => setTweak({ urlStyle: v })}
            options={[
              { value: "input", label: "Input + Botão" },
              { value: "mono", label: "Card mono" },
              { value: "terminal", label: "Terminal" },
            ]}
          />
        </TweakSection>

        <TweakSection label="Dashboard da empresa">
          <TweakRadio
            label="Layout"
            value={tweaks.dashboardLayout}
            onChange={(v) => setTweak({ dashboardLayout: v })}
            options={[
              { value: "split", label: "Duas colunas" },
              { value: "stacked", label: "Empilhado" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
};

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