/* global React, ReactDOM, Sidebar, TopBar, AuthFlow, Dashboard, UI, DATA */
const { useState: useAppState, useEffect: useAppEffect } = React;

const LS_AUTH = "docomate_authed";
const LS_ROUTE = "docomate_route";

function Placeholder({ name }) {
  return (
    <div className="app-scroll"><div className="page">
      <UI.EmptyState icon="package" title={`${name} — coming together`} body="This surface is being built in this iteration. Use the sidebar to explore the parts that are ready." />
    </div></div>
  );
}

// Top-bar config per route
function chromeFor(route, navigate) {
  const D = DATA;
  switch (route.name) {
    case "dashboard": return { title: "Dashboard" };
    case "projects": return { title: "Projects" };
    case "marketplace": return { title: "Workflow marketplace" };
    case "executions": return { title: "Executions" };
    case "connectors": return { title: "Connectors" };
    case "documents": return { title: "Documents & files" };
    case "templates": return { title: "Templates" };
    case "team": return { title: "Team" };
    case "billing": return { title: "Billing & usage" };
    case "activity": return { title: "Activity logs" };
    case "settings": return { title: "Settings" };
    case "project": {
      const p = D.projects.find((x) => x.id === route.params?.id);
      return { crumbs: [{ label: "Projects", to: "projects" }, { label: p?.name || "Project" }] };
    }
    case "execution": {
      const e = D.executions.find((x) => x.id === route.params?.id);
      return { crumbs: [{ label: "Executions", to: "executions" }, { label: e?.id || "Execution" }] };
    }
    case "marketplaceDetail": {
      const m = D.marketplace.find((x) => x.id === route.params?.id);
      return { crumbs: [{ label: "Marketplace", to: "marketplace" }, { label: m?.name || "Workflow" }] };
    }
    default: return { title: route.name };
  }
}

const CHROMELESS = ["builder", "createProject", "template"];

function App() {
  const [authed, setAuthed] = useAppState(() => localStorage.getItem(LS_AUTH) === "1");
  const [route, setRoute] = useAppState(() => {
    try { return JSON.parse(localStorage.getItem(LS_ROUTE)) || { name: "dashboard", params: {} }; }
    catch { return { name: "dashboard", params: {} }; }
  });
  const [toastPush, toastNode] = UI.useToast();

  const navigate = (name, params = {}) => {
    if (name === "__signout") { localStorage.removeItem(LS_AUTH); setAuthed(false); setRoute({ name: "dashboard", params: {} }); return; }
    const scroller = document.querySelector(".app-scroll");
    if (scroller) scroller.scrollTop = 0;
    setRoute({ name, params });
  };

  useAppEffect(() => { localStorage.setItem(LS_ROUTE, JSON.stringify(route)); }, [route]);
  useAppEffect(() => { localStorage.setItem(LS_AUTH, authed ? "1" : "0"); }, [authed]);

  if (!authed) {
    return <AuthFlow onEnter={() => { setAuthed(true); navigate("dashboard"); }} />;
  }

  const screen = renderScreen(route, navigate, toastPush);

  if (CHROMELESS.includes(route.name)) {
    return <>{screen}{toastNode}</>;
  }

  const chrome = chromeFor(route, navigate);
  return (
    <div className="app">
      <Sidebar route={route} navigate={navigate} />
      <div className="app-main">
        <TopBar {...chrome} navigate={navigate} />
        {screen}
      </div>
      {toastNode}
    </div>
  );
}

function comp(name) { return window[name]; }

function renderScreen(route, navigate, toast) {
  const C = comp;
  switch (route.name) {
    case "dashboard": return <Dashboard navigate={navigate} toast={toast} />;
    case "projects": return C("ProjectsList") ? <ProjectsList navigate={navigate} toast={toast} /> : <Placeholder name="Projects" />;
    case "createProject": return C("CreateProjectWizard") ? <CreateProjectWizard navigate={navigate} toast={toast} params={route.params} /> : <Placeholder name="Create project" />;
    case "project": return C("ProjectOverview") ? <ProjectOverview navigate={navigate} toast={toast} params={route.params} /> : <Placeholder name="Project" />;
    case "builder": return C("WorkflowBuilder") ? <WorkflowBuilder navigate={navigate} toast={toast} params={route.params} /> : <Placeholder name="Workflow builder" />;
    case "template": return C("TemplateWizard") ? <TemplateWizard navigate={navigate} toast={toast} params={route.params} /> : <Placeholder name="Template configuration" />;
    case "executions": return C("ExecutionsList") ? <ExecutionsList navigate={navigate} toast={toast} /> : <Placeholder name="Executions" />;
    case "execution": return C("ExecutionDetail") ? <ExecutionDetail navigate={navigate} toast={toast} params={route.params} /> : <Placeholder name="Execution detail" />;
    case "marketplace": return C("Marketplace") ? <Marketplace navigate={navigate} toast={toast} /> : <Placeholder name="Marketplace" />;
    case "marketplaceDetail": return C("MarketplaceDetail") ? <MarketplaceDetail navigate={navigate} toast={toast} params={route.params} /> : <Placeholder name="Workflow detail" />;
    case "connectors": return C("Connectors") ? <Connectors navigate={navigate} toast={toast} /> : <Placeholder name="Connectors" />;
    case "documents": return C("Documents") ? <Documents navigate={navigate} toast={toast} /> : <Placeholder name="Documents" />;
    case "templates": return C("TemplatesList") ? <TemplatesList navigate={navigate} toast={toast} /> : <Placeholder name="Templates" />;
    case "team": return C("Team") ? <Team navigate={navigate} toast={toast} /> : <Placeholder name="Team" />;
    case "billing": return C("Billing") ? <Billing navigate={navigate} toast={toast} /> : <Placeholder name="Billing" />;
    case "activity": return C("ActivityLogs") ? <ActivityLogs navigate={navigate} toast={toast} /> : <Placeholder name="Activity logs" />;
    case "settings": return C("Settings") ? <Settings navigate={navigate} toast={toast} /> : <Placeholder name="Settings" />;
    default: return <Placeholder name={route.name} />;
  }
}

window.DocomateApp = App;