import "./styles/index.css";
import { mountShell } from "./shell.js";
import { mountSidebar, renderProjects, renderSourceOptions } from "./sidebar.js";
import {
  mountWorkspace,
  renderOverview,
  renderOntology,
  loadOntologyRegistry,
  loadEntities,
  loadExtractionLogs,
  loadResearchSessions,
  loadGraphQuery,
  loadTags,
} from "./workspace.js";
import { loadGraph } from "./graph.js";
import { loadWorkbench } from "./workbench.js";
import { loadPipeline } from "./pipeline.js";
import { mountGlobalSearch } from "./search.js";
import { mountInspector, refreshInspector } from "./inspector.js";
import { api } from "./api.js";
import { state } from "./state.js";
import { toast } from "./utils.js";
import { onLangChange } from "./i18n.js";

const root = document.getElementById("app");
const hosts = mountShell(root);
mountSidebar(hosts.sidebarHost, {
  onProjectChanged: loadProjects,
  onCrawlUpdate: () => refreshInspector(),
  refreshAll,
});
mountWorkspace(hosts.workspaceHost);
mountInspector(hosts.inspectorHost);
mountGlobalSearch();

document.getElementById("refreshBtn").addEventListener("click", loadProjects);
window.addEventListener("project:select", (event) => selectProject(event.detail));
window.addEventListener("workspace:refresh", refreshAll);
onLangChange(() => refreshInspector());

loadProjects().catch((error) => toast(error.message));

async function loadProjects() {
  state.projects = await api("/projects");
  if (!state.selectedProject && state.projects.length) {
    state.selectedProject = state.projects[0].name;
  }
  renderProjects();
  if (state.selectedProject) {
    await selectProject(state.selectedProject);
  }
}

async function selectProject(projectName) {
  state.selectedProject = projectName;
  state.projectDetail = await api(`/projects/${encodeURIComponent(projectName)}`);
  state.ontology = await api(`/ontology/${encodeURIComponent(state.projectDetail.domain)}`);
  renderProjects();
  renderSourceOptions(state.projectDetail);
  renderOverview();
  renderOntology();
  refreshInspector();
  await refreshAll();
}

async function refreshAll() {
  if (!state.selectedProject) return;
  const loaders = [
    ["pipeline", loadPipeline],
    ["ontology registry", loadOntologyRegistry],
    ["entities", loadEntities],
    ["claims workbench", loadWorkbench],
    ["extraction logs", loadExtractionLogs],
    ["research sessions", loadResearchSessions],
    ["graph query", loadGraphQuery],
    ["tags", loadTags],
    ["graph", loadGraph],
  ];
  await Promise.all(loaders.map(async ([label, fn]) => {
    try { await fn(); } catch (error) { console.warn(`${label} load failed`, error); }
  }));
  refreshInspector();
}