app.js

const formatHours = (value) => `${Number(value).toFixed(1)} h`;

const create = (tag, className, text) => {
  const node = document.createElement(tag);
  if (className) node.className = className;
  if (text !== undefined) node.textContent = text;
  return node;
};

const load = async () => {
  const response = await fetch("./data/analysis.json");
  if (!response.ok) throw new Error("analysis.json konnte nicht geladen werden");
  return response.json();
};

const renderHero = (data) => {
  document.querySelector("#headline").textContent = data.executive_summary.headline;
  const panel = document.querySelector("#heroPanel");
  const stats = [
    ["Best Estimate", formatHours(data.work_estimate.best_estimate_hours)],
    ["Aktive Projekte", String(data.work_estimate.active_project_count)],
    ["Top Empfehlung", data.rankings.top_recommendation.name],
    ["Analysefenster", `${data.meta.window_start} bis ${data.meta.window_end}`],
  ];
  stats.forEach(([label, value]) => {
    const row = create("div", "summary-stat");
    row.append(create("span", "", label));
    row.append(create("strong", "", value));
    panel.append(row);
  });
};

const renderFindings = (data) => {
  const host = document.querySelector("#findingCards");
  data.executive_summary.key_findings.forEach((finding, index) => {
    const card = create("article", "card");
    card.append(create("div", "label", `Antwort ${index + 1}`));
    card.append(create("p", "supporting", finding));
    host.append(card);
  });
};

const renderWork = (data) => {
  const host = document.querySelector("#workCards");
  const cards = [
    ["Best Estimate", formatHours(data.work_estimate.best_estimate_hours), "Zentralwert aus Session-Bloecken, Commit-Spans und Artefakt-Bonus."],
    ["Untergrenze", formatHours(data.work_estimate.lower_bound_hours), "Konservative Sicht: nur ein Teil der Session-Zeit zaehlt als aktive Build-Zeit."],
    ["Obergrenze", formatHours(data.work_estimate.upper_bound_hours), "Erweitert um stille Vor-/Nacharbeit, verworfene Versuche und uncommitted Arbeit."],
  ];
  cards.forEach(([label, metric, support]) => {
    const card = create("article", "card");
    card.append(create("div", "label", label));
    card.append(create("p", "metric", metric));
    card.append(create("p", "supporting", support));
    host.append(card);
  });

  const methodList = document.querySelector("#methodList");
  data.work_estimate.method.forEach((line) => methodList.append(create("li", "", line)));
  const uncertaintyList = document.querySelector("#uncertaintyList");
  data.work_estimate.uncertainties.forEach((line) => uncertaintyList.append(create("li", "", line)));
};

const renderWorkflow = (data) => {
  const workflow = data.workflow_patterns;
  const narrative = document.querySelector("#workflowNarrative");
  [workflow.startup_pattern, workflow.iteration_pattern, workflow.parallel_vs_serial.evidence].forEach((line) => {
    narrative.append(create("p", "", line));
  });

  const total = workflow.prototyping_vs_refinement.prototype_signals + workflow.prototyping_vs_refinement.refinement_signals;
  const protoPct = total ? (workflow.prototyping_vs_refinement.prototype_signals / total) * 100 : 0;
  const refinePct = 100 - protoPct;
  const chart = document.querySelector("#ratioChart");
  [
    ["Prototyping", protoPct, "proto"],
    ["Refinement", refinePct, "refine"],
  ].forEach(([label, pct, klass]) => {
    const row = create("div", "mini-row");
    row.append(create("div", "", label));
    const track = create("div", "track");
    const fill = create("span");
    fill.className = klass;
    fill.style.width = `${pct}%`;
    track.append(fill);
    row.append(track);
    row.append(create("div", "muted", `${pct.toFixed(0)}%`));
    chart.append(row);
  });
  document.querySelector("#ratioNote").textContent = workflow.prototyping_vs_refinement.interpretation;

  const cards = [
    ["Seriell vs. Parallel", workflow.parallel_vs_serial.label],
    ["Eval-Loops", workflow.evaluation_loops.interpretation],
    ["Bevorzugte Projektarten", workflow.preferred_project_types.join(" • ")],
    ["Meta-Systeme", workflow.meta_systems.join(" • ")],
  ];
  const host = document.querySelector("#workflowCards");
  cards.forEach(([label, support]) => {
    const card = create("article", "card");
    card.append(create("div", "label", label));
    card.append(create("p", "supporting", support));
    host.append(card);
  });
};

const renderClusters = (data) => {
  const grid = document.querySelector("#clusterGrid");
  data.project_clusters.forEach((cluster) => {
    const card = create("article", "cluster-card");
    card.append(create("div", "label", `${cluster.count} Projekte`));
    card.append(create("h3", "", cluster.name));
    card.append(create("p", "supporting", cluster.summary));
    const pills = create("div", "pill-row");
    cluster.projects.forEach((project) => {
      pills.append(create("span", "pill", `${project.name} · ${project.commit_count}`));
    });
    card.append(pills);
    grid.append(card);
  });

  const tableHost = document.querySelector("#projectTable");
  const table = create("table");
  table.innerHTML = `
    <thead>
      <tr>
        <th>Projekt</th>
        <th>Cluster</th>
        <th>Commits</th>
        <th>Sessions</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody></tbody>
  `;
  const tbody = table.querySelector("tbody");
  data.projects.slice(0, 12).forEach((project) => {
    const row = document.createElement("tr");
    row.innerHTML = `
      <td>${project.name}</td>
      <td>${project.cluster}</td>
      <td>${project.commit_count}</td>
      <td>${project.session_count}</td>
      <td>${project.status}</td>
    `;
    tbody.append(row);
  });
  tableHost.append(table);
};

const renderTimeline = (data) => {
  const host = document.querySelector("#timeline");
  const grid = create("div", "timeline-grid");
  data.timeline.forEach((day) => {
    const cell = create("article", `day-cell level-${day.intensity}`);
    const date = new Date(day.date);
    const label = date.toLocaleDateString("de-DE", { day: "2-digit", month: "2-digit" });
    const header = create("div", "day-head");
    header.append(create("span", "", label));
    header.append(create("span", "", `${day.projects.length} Projekte`));
    cell.append(header);
    const projects = create("div", "day-projects");
    if (day.projects.length === 0) {
      projects.append(create("span", "muted", "ruhiger Tag"));
    } else {
      day.projects.slice(0, 3).forEach((project) => {
        projects.append(create("span", "", `${project.name} · ${project.session_count} Session`));
      });
    }
    cell.append(projects);
    grid.append(cell);
  });
  host.append(grid);
};

const renderRanking = (data) => {
  const top = data.rankings.top_recommendation;
  const main = document.querySelector("#topRecommendation");
  main.append(create("div", "badge", "Top Empfehlung"));
  main.append(create("h3", "", top.name));
  main.append(create("p", "metric", `${top.score.toFixed(2)} / 5`));
  main.append(create("p", "supporting", top.summary));

  const stack = create("div", "mini-stack");
  Object.entries(top.scores).forEach(([label, value]) => {
    const row = create("div", "mini-row");
    row.append(create("div", "", label.replace("_", " ")));
    const track = create("div", "track");
    const fill = create("span");
    fill.style.width = `${(value / 5) * 100}%`;
    track.append(fill);
    row.append(track);
    row.append(create("div", "muted", value.toFixed(1)));
    stack.append(row);
  });
  main.append(stack);

  const topThree = document.querySelector("#topThree");
  data.rankings.top_three.forEach((project, index) => {
    const item = create("div", "rank-item");
    item.innerHTML = `<strong>#${index + 1} ${project.name}</strong><p class="supporting">${project.summary}</p>`;
    topThree.append(item);
  });

  const rankingTable = document.querySelector("#rankingTable");
  const table = create("table");
  table.innerHTML = `
    <thead>
      <tr>
        <th>Projekt</th>
        <th>Score</th>
        <th>Commits</th>
        <th>Kernaussage</th>
      </tr>
    </thead>
    <tbody></tbody>
  `;
  const tbody = table.querySelector("tbody");
  data.rankings.shortlist.forEach((project) => {
    const row = document.createElement("tr");
    row.innerHTML = `
      <td>${project.name}</td>
      <td>${project.score.toFixed(2)}</td>
      <td>${project.commit_count}</td>
      <td>${project.summary}</td>
    `;
    tbody.append(row);
  });
  rankingTable.append(table);
};

const renderEvidence = (data) => {
  const host = document.querySelector("#evidenceGrid");
  data.evidence.forEach((entry) => {
    const card = create("article", "evidence-card");
    card.append(create("div", "label", entry.project));
    card.append(create("p", "supporting", `${entry.commits} Commits im Fenster · letzter Commit ${entry.last_commit ?? "n/a"}`));
    const pills = create("div", "pill-row");
    Object.entries(entry.artifacts).forEach(([key, value]) => pills.append(create("span", "pill", `${key}: ${value}`)));
    card.append(pills);
    const list = create("ul", "bullet-list");
    entry.sample_messages.forEach((message) => list.append(create("li", "", message)));
    card.append(list);
    host.append(card);
  });
};

load()
  .then((data) => {
    renderHero(data);
    renderFindings(data);
    renderWork(data);
    renderWorkflow(data);
    renderClusters(data);
    renderTimeline(data);
    renderRanking(data);
    renderEvidence(data);
  })
  .catch((error) => {
    document.body.innerHTML = `<main class="page-shell"><article class="panel"><h1>Ladefehler</h1><p>${error.message}</p></article></main>`;
  });