{% extends "base.html" %}
{% set active_page = 'home' %}

{% block title %}agentplan dashboard{% endblock %}
{% block body_class %}dashboard-home{% endblock %}

{% macro project_card(project) -%}
<article class="project-card-shell" data-project-shell data-project-slug="{{ project.slug }}">
  <div class="project-card-menu">
    <button
      type="button"
      class="kebab-btn"
      aria-label="Project actions for {{ project.title }}"
      aria-expanded="false"
      aria-haspopup="menu"
      data-project-menu-button
      data-project-id="{{ project.id }}"
      data-project-slug="{{ project.slug }}"
      data-project-title="{{ project.title }}"
      data-project-status="{{ project.status }}"
    >⋯</button>
    <div class="kebab-menu" data-project-menu hidden>
      {% if project.status not in ["completed", "archived", "abandoned"] %}
      <button type="button" class="kebab-menu-item" data-project-action="close">Close</button>
      {% endif %}
      {% if project.status != "archived" %}
      <button type="button" class="kebab-menu-item" data-project-action="archive">Archive</button>
      {% endif %}
      <button type="button" class="kebab-menu-item danger" data-project-action="delete">Delete</button>
    </div>
  </div>
  <a class="project-link" href="{{ url_for('project_detail', slug=project.slug) }}" data-project-id="{{ project.id }}" data-project-status="{{ project.status }}" data-project-slug="{{ project.slug }}" aria-label="Open {{ project.title }}">
    <article class="project-card">
      <div class="project-top">
        <div class="project-heading">
          <h2 class="project-title">{{ project.title }}</h2>
          <div class="project-code">{{ project.slug }}</div>
          <div class="project-status-row">
            <span class="project-status-badge status-{{ project.status }}">{{ project.status_label }}</span>
          </div>
        </div>
        <div class="progress-ring" style="--ring-progress: {{ project.progress_pct }};" aria-hidden="true">
          <svg viewBox="0 0 36 36">
            <circle class="progress-ring-track" cx="18" cy="18" r="16"></circle>
            <circle class="progress-ring-value" cx="18" cy="18" r="16"></circle>
          </svg>
          <span class="progress-ring-label project-progress-percent">{{ project.progress_pct }}%</span>
        </div>
      </div>
      <div class="project-meta">
        <div class="project-progress-text"><strong class="project-progress-done">{{ project.done_count }}</strong>/<span class="project-progress-total">{{ project.ticket_count }}</span> done</div>
        <div class="project-last-activity">Last activity: <span class="project-updated-at" data-timestamp="{{ project.updated_at or '' }}">{{ project.updated_at or "n/a" }}</span></div>
        {% if project.missing_directory %}
        <div class="project-warning" title="Linked directory is missing on disk">⚠ Missing directory</div>
        {% endif %}
      </div>
    </article>
  </a>
</article>
{%- endmacro %}

{% block content %}
<section class="home-toolbar">
  <div class="home-toolbar-copy">
    <h1 class="home-title">Projects</h1>
    <p class="home-subtitle">Track active work, spin up new projects, and manage lifecycle actions from one place.</p>
  </div>
  <button type="button" class="btn btn-primary home-create-btn" id="open-create-project-dialog">+ New project</button>
</section>

<section class="stats-grid" id="stats-grid">
  <article class="stat-card"><div class="stat-label">Active Projects</div><div id="stat-active-projects" class="stat-value">{{ summary.active_projects }}</div></article>
  <article class="stat-card"><div class="stat-label">Tickets In Flight</div><div id="stat-tickets-in-flight" class="stat-value">{{ summary.tickets_in_flight }}</div></article>
  <article class="stat-card"><div class="stat-label">Completed Today</div><div id="stat-completed-today" class="stat-value">{{ summary.completed_today }}</div></article>
</section>

<dialog id="create-project-dialog" class="confirm-dialog create-project-dialog">
  <form method="dialog" class="confirm-dialog-form create-project-form" id="create-project-form">
    <div class="confirm-dialog-copy">
      <h3 class="confirm-dialog-title">Create project</h3>
      <p class="confirm-dialog-message">Add a new AgentPlan project linked to an optional working directory.</p>
    </div>
    <label class="dialog-field">
      <span>Title</span>
      <input id="create-project-title" name="title" type="text" maxlength="160" required autocomplete="off">
    </label>
    <label class="dialog-field">
      <span>Description</span>
      <textarea name="description" rows="3" maxlength="2000"></textarea>
    </label>
    <label class="dialog-field">
      <span>Directory</span>
      <input name="directory" type="text" placeholder="~/src/my-project" autocomplete="off">
    </label>
    <div class="confirm-dialog-actions">
      <button type="button" class="btn" id="cancel-create-project">Cancel</button>
      <button type="submit" class="btn btn-primary">Create project</button>
    </div>
  </form>
</dialog>

<div id="project-sections" class="project-sections"{% if not projects %} hidden{% endif %}>
  {% if projects %}
  {% for section in home_sections %}
  {% set section_open = home_sections|length == 1 or section.key == "active" %}
  <section class="project-section" data-project-section data-status-section="{{ section.key }}">
    <div class="project-section-heading">
      <button
        type="button"
        class="project-section-toggle"
        data-section-toggle
        data-section-key="{{ section.key }}"
        aria-expanded="{{ 'true' if section_open else 'false' }}"
      >
        <span class="project-section-toggle-icon" aria-hidden="true"></span>
        <span class="project-section-title">{{ section.title }}</span>
      </button>
      <span class="project-section-count">{{ section.projects|length }}</span>
    </div>
    <section class="projects-grid"{% if not section_open %} hidden{% endif %}>
      {% if section.projects %}
      {% for project in section.projects %}
      {{ project_card(project) }}
      {% endfor %}
      {% else %}
      <div class="project-section-empty">No {{ section.title|lower }} yet.</div>
      {% endif %}
    </section>
  </section>
  {% endfor %}
  {% endif %}
</div>
<div class="empty" id="projects-empty-state"{% if projects %} hidden{% endif %}>No projects found.</div>
{% endblock %}

{% block scripts %}
<script>
  const homeSectionOrder = [
    { key: "active", title: "Active Projects" },
    { key: "completed", title: "Completed Projects" },
    { key: "abandoned", title: "Closed Projects" },
    { key: "archived", title: "Archived Projects" },
  ];
  const projectStatusLabels = {
    active: "Active",
    completed: "Completed",
    abandoned: "Closed",
    archived: "Archived",
  };
  const sectionStateStorageKey = "agentplan.dashboard.home.sectionState";
  let homeSectionState = loadSectionState();

  function renderSummary(summary) {
    document.getElementById("stat-active-projects").textContent = summary.active_projects ?? 0;
    document.getElementById("stat-tickets-in-flight").textContent = summary.tickets_in_flight ?? 0;
    document.getElementById("stat-completed-today").textContent = summary.completed_today ?? 0;
  }

  function esc(v) {
    return String(v ?? "").replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
  }

  function formatRelative(ts) {
    if (!ts) return "n/a";
    const d = new Date(ts);
    if (Number.isNaN(d.valueOf())) return esc(ts);
    const now = new Date();
    const diffSec = Math.floor((now - d) / 1000);
    if (diffSec < 60) return "just now";
    if (diffSec < 3600) return `${Math.floor(diffSec / 60)} min ago`;
    if (diffSec < 6 * 3600) return `${Math.floor(diffSec / 3600)} hours ago`;
    const sameDay = now.toDateString() === d.toDateString();
    if (sameDay) return `Today at ${d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })}`;
    const y = new Date(now); y.setDate(now.getDate() - 1);
    if (y.toDateString() === d.toDateString()) return `Yesterday at ${d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })}`;
    return d.toLocaleString([], { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' });
  }

  function applyRelativeTimes() {
    document.querySelectorAll(".project-updated-at[data-timestamp]").forEach((node) => {
      node.textContent = formatRelative(node.dataset.timestamp || "");
    });
  }

  function formatStatusLabel(status) {
    const normalized = String(status || "").trim().toLowerCase();
    if (projectStatusLabels[normalized]) return projectStatusLabels[normalized];
    if (!normalized) return "Unknown";
    return normalized
      .split(/[-_]/g)
      .filter(Boolean)
      .map((part) => part[0].toUpperCase() + part.slice(1))
      .join(" ");
  }

  function loadSectionState() {
    try {
      const raw = window.localStorage?.getItem(sectionStateStorageKey);
      const parsed = raw ? JSON.parse(raw) : {};
      return parsed && typeof parsed === "object" ? parsed : {};
    } catch (_err) {
      return {};
    }
  }

  function persistSectionState() {
    try {
      window.localStorage?.setItem(sectionStateStorageKey, JSON.stringify(homeSectionState));
    } catch (_err) {
      // Ignore storage failures.
    }
  }

  function defaultSectionOpen(sectionKey, totalSections) {
    return totalSections === 1 || sectionKey === "active";
  }

  function isSectionOpen(sectionKey, totalSections) {
    if (Object.prototype.hasOwnProperty.call(homeSectionState, sectionKey)) {
      return Boolean(homeSectionState[sectionKey]);
    }
    return defaultSectionOpen(sectionKey, totalSections);
  }

  function setSectionExpanded(sectionKey, expanded) {
    const section = document.querySelector(`[data-status-section="${CSS.escape(sectionKey)}"]`);
    const toggle = section?.querySelector("[data-section-toggle]");
    const grid = section?.querySelector(".projects-grid");
    if (toggle) {
      toggle.setAttribute("aria-expanded", expanded ? "true" : "false");
    }
    if (grid) {
      grid.hidden = !expanded;
    }
  }

  function projectMenuMarkup(project) {
    const status = project.status || "";
    const title = esc(project.title || "");
    const maybeClose = ["completed", "archived", "abandoned"].includes(status)
      ? ""
      : '<button type="button" class="kebab-menu-item" data-project-action="close">Close</button>';
    const maybeArchive = status === "archived"
      ? ""
      : '<button type="button" class="kebab-menu-item" data-project-action="archive">Archive</button>';
    return `<div class="project-card-menu"><button type="button" class="kebab-btn" aria-label="Project actions for ${title}" aria-expanded="false" aria-haspopup="menu" data-project-menu-button data-project-id="${project.id}" data-project-slug="${esc(project.slug || "")}" data-project-title="${title}" data-project-status="${esc(status)}">⋯</button><div class="kebab-menu" data-project-menu hidden>${maybeClose}${maybeArchive}<button type="button" class="kebab-menu-item danger" data-project-action="delete">Delete</button></div></div>`;
  }

  function projectCard(project) {
    const warningHtml = project.missing_directory ? `<div class="project-warning" title="Linked directory is missing on disk">⚠ Missing directory</div>` : "";
    const status = String(project.status || "").trim().toLowerCase();
    const statusLabel = esc(project.status_label || formatStatusLabel(status));
    return `<article class="project-card-shell" data-project-shell data-project-slug="${esc(project.slug || "")}">${projectMenuMarkup(project)}<a class="project-link" href="/project/${encodeURIComponent(project.slug)}" data-project-id="${project.id}" data-project-status="${esc(status)}" data-project-slug="${esc(project.slug || "")}" aria-label="Open ${esc(project.title)}"><article class="project-card"><div class="project-top"><div class="project-heading"><h2 class="project-title">${esc(project.title)}</h2><div class="project-code">${esc(project.slug)}</div><div class="project-status-row"><span class="project-status-badge status-${esc(status)}">${statusLabel}</span></div></div><div class="progress-ring" style="--ring-progress: ${project.progress_pct || 0};" aria-hidden="true"><svg viewBox="0 0 36 36"><circle class="progress-ring-track" cx="18" cy="18" r="16"></circle><circle class="progress-ring-value" cx="18" cy="18" r="16"></circle></svg><span class="progress-ring-label project-progress-percent">${project.progress_pct || 0}%</span></div></div><div class="project-meta"><div class="project-progress-text"><strong class="project-progress-done">${project.done_count || 0}</strong>/<span class="project-progress-total">${project.ticket_count || 0}</span> done</div><div class="project-last-activity">Last activity: <span class="project-updated-at" data-timestamp="${esc(project.updated_at || '')}">${formatRelative(project.updated_at)}</span></div>${warningHtml}</div></article></a></article>`;
  }

  function groupProjects(projects) {
    const groups = new Map(homeSectionOrder.map((section) => [section.key, []]));
    const extras = new Map();
    (projects || []).forEach((project) => {
      const key = String(project.status || "unknown").trim().toLowerCase();
      if (groups.has(key)) {
        groups.get(key).push(project);
        return;
      }
      if (!extras.has(key)) extras.set(key, []);
      extras.get(key).push(project);
    });

    const sections = homeSectionOrder
      .map((section) => ({ ...section, projects: groups.get(section.key) || [] }));

    Array.from(extras.entries())
      .sort(([a], [b]) => a.localeCompare(b))
      .forEach(([key, items]) => {
        sections.push({
          key,
          title: `${formatStatusLabel(key)} Projects`,
          projects: items,
        });
      });

    return sections;
  }

  function renderProjectSection(section) {
    const expanded = isSectionOpen(section.key, groupProjects(window.__latestProjects || []).length || 1);
    const content = section.projects.length
      ? section.projects.map((project) => projectCard(project)).join("")
      : `<div class="project-section-empty">No ${esc(section.title.toLowerCase())} yet.</div>`;
    return `<section class="project-section" data-project-section data-status-section="${esc(section.key)}"><div class="project-section-heading"><button type="button" class="project-section-toggle" data-section-toggle data-section-key="${esc(section.key)}" aria-expanded="${expanded ? "true" : "false"}"><span class="project-section-toggle-icon" aria-hidden="true"></span><span class="project-section-title">${esc(section.title)}</span></button><span class="project-section-count">${section.projects.length}</span></div><section class="projects-grid"${expanded ? "" : " hidden"}>${content}</section></section>`;
  }

  function getOpenProjectMenuSlug() {
    const openButton = document.querySelector('[data-project-menu-button][aria-expanded="true"]');
    return openButton?.dataset.projectSlug || "";
  }

  function closeProjectMenus() {
    document.querySelectorAll("[data-project-menu-button]").forEach((button) => {
      button.setAttribute("aria-expanded", "false");
    });
    document.querySelectorAll("[data-project-menu]").forEach((menu) => {
      menu.hidden = true;
    });
    document.querySelectorAll("[data-project-shell].menu-open").forEach((shell) => {
      shell.classList.remove("menu-open");
    });
  }

  function openProjectMenu(button) {
    const menu = button?.parentElement?.querySelector("[data-project-menu]");
    if (!button || !menu) return;
    closeProjectMenus();
    menu.hidden = false;
    button.setAttribute("aria-expanded", "true");
    button.closest("[data-project-shell]")?.classList.add("menu-open");
  }

  function restoreProjectMenu(slug) {
    if (!slug) return;
    const button = Array.from(document.querySelectorAll("[data-project-menu-button]"))
      .find((node) => (node.dataset.projectSlug || "") === slug);
    if (button) openProjectMenu(button);
  }

  function renderProjects(projects) {
    const openMenuSlug = getOpenProjectMenuSlug();
    const projectSections = document.getElementById("project-sections");
    const emptyState = document.getElementById("projects-empty-state");
    const sections = groupProjects(projects || []);
    if (projectSections) {
      projectSections.innerHTML = sections.map((section) => renderProjectSection(section)).join("");
      projectSections.hidden = sections.length === 0;
    }
    if (emptyState) emptyState.hidden = sections.length !== 0;
    applyRelativeTimes();
    restoreProjectMenu(openMenuSlug);
  }

  setClock("live-clock");
  setInterval(() => setClock("live-clock"), 1000);
  window.__latestProjects = {{ projects|tojson }};
  renderProjects(window.__latestProjects);

  const createProjectDialog = document.getElementById("create-project-dialog");
  const createProjectForm = document.getElementById("create-project-form");
  const createProjectTitle = document.getElementById("create-project-title");
  const openCreateProjectButton = document.getElementById("open-create-project-dialog");
  const cancelCreateProjectButton = document.getElementById("cancel-create-project");

  async function postProjectAction(slug, action, body) {
    const response = await fetch(`/api/project/${encodeURIComponent(slug)}/${action}`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: body ? JSON.stringify(body) : null,
    });
    const payload = await response.json().catch(() => ({}));
    if (!response.ok || payload.ok === false) {
      throw new Error(payload.error || `Failed to ${action} project.`);
    }
    return payload;
  }

  async function handleProjectAction(button, action) {
    const slug = button.dataset.projectSlug || "";
    const title = button.dataset.projectTitle || slug || "project";

    if (!slug) {
      showToast("Missing project slug.");
      return;
    }

    try {
      if (action === "delete") {
        const confirmed = await confirmAction("Delete project?", `Delete ${title}? This removes the project and all related tickets.`, "Delete");
        if (!confirmed) return;
      }

      const payload = action === "close"
        ? await postProjectAction(slug, action, { abandon: false })
        : await postProjectAction(slug, action);

      if (action === "delete") {
        button.closest(".project-card-shell")?.remove();
        showToast(`Deleted ${title}.`, "success");
      } else {
        showToast(`${action[0].toUpperCase()}${action.slice(1)}d ${title}.`, "success");
      }

      if (payload && payload.slug && action === "create") {
        window.location.href = `/project/${encodeURIComponent(payload.slug)}`;
        return;
      }

      if (typeof window.location.reload === "function") {
        window.location.reload();
      }
    } catch (error) {
      showToast(error.message || `Failed to ${action} project.`);
    } finally {
      closeProjectMenus();
    }
  }

  openCreateProjectButton?.addEventListener("click", () => {
    if (!createProjectDialog) return;
    createProjectForm?.reset();
    if (typeof createProjectDialog.showModal === "function") {
      createProjectDialog.showModal();
      createProjectTitle?.focus();
    }
  });

  cancelCreateProjectButton?.addEventListener("click", () => {
    createProjectDialog?.close("cancel");
  });

  createProjectDialog?.addEventListener("cancel", (event) => {
    event.preventDefault();
    createProjectDialog.close("cancel");
  });

  createProjectForm?.addEventListener("submit", async (event) => {
    event.preventDefault();
    const submitter = createProjectForm.querySelector('button[type="submit"]');
    const formData = new FormData(createProjectForm);
    const payload = {
      title: (formData.get("title") || "").toString().trim(),
      description: (formData.get("description") || "").toString().trim(),
      directory: (formData.get("directory") || "").toString().trim(),
    };

    if (!payload.title) {
      showToast("Project title is required.");
      createProjectTitle?.focus();
      return;
    }

    try {
      if (submitter) submitter.disabled = true;
      const response = await fetch("/api/project/create", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });
      if (response.redirected && response.url) {
        createProjectDialog?.close("created");
        window.location.href = response.url;
        return;
      }
      const data = await response.json().catch(() => ({}));
      if (!response.ok || data.ok === false) {
        throw new Error(data.error || "Failed to create project.");
      }
      throw new Error("Failed to create project.");
    } catch (error) {
      showToast(error.message || "Failed to create project.");
    } finally {
      if (submitter) submitter.disabled = false;
    }
  });

  document.addEventListener("click", (event) => {
    const menuButton = event.target.closest("[data-project-menu-button]");
    if (menuButton) {
      event.preventDefault();
      event.stopPropagation();
      const menu = menuButton.parentElement?.querySelector("[data-project-menu]");
      const willOpen = menu?.hidden !== false;
      if (willOpen) openProjectMenu(menuButton);
      else closeProjectMenus();
      return;
    }

    const actionButton = event.target.closest("[data-project-action]");
    if (actionButton) {
      event.preventDefault();
      event.stopPropagation();
      const shell = actionButton.closest(".project-card-shell");
      const link = shell?.querySelector(".project-link");
      const button = shell?.querySelector("[data-project-menu-button]");
      if (!button || !link) return;
      button.dataset.projectSlug = link.dataset.projectSlug || button.dataset.projectSlug || "";
      button.dataset.projectTitle = shell.querySelector(".project-title")?.textContent?.trim() || button.dataset.projectTitle || "";
      handleProjectAction(button, actionButton.dataset.projectAction || "");
      return;
    }

    if (!event.target.closest(".project-card-menu")) {
      closeProjectMenus();
    }

    const sectionToggle = event.target.closest("[data-section-toggle]");
    if (sectionToggle) {
      event.preventDefault();
      const sectionKey = sectionToggle.dataset.sectionKey || "";
      if (!sectionKey) return;
      const sections = groupProjects(window.__latestProjects || []);
      const currentlyOpen = isSectionOpen(sectionKey, sections.length || 1);
      const nextOpen = !currentlyOpen;
      homeSectionState[sectionKey] = nextOpen;
      persistSectionState();
      setSectionExpanded(sectionKey, nextOpen);
    }
  });

  document.addEventListener("keydown", (event) => {
    if (event.key === "Escape") {
      closeProjectMenus();
    }
  });

  subscribeSSE("{{ url_for('events') }}", {
    onUnsupported: () => setConnection("sse-dot", "sse-label", false, "SSE unsupported"),
    onOpen: () => setConnection("sse-dot", "sse-label", true, "connected"),
    onError: () => setConnection("sse-dot", "sse-label", false, "reconnecting…"),
    events: {
      project_stats: (event) => {
        try {
          const payload = JSON.parse(event.data);
          renderSummary(payload.summary || {});
          window.__latestProjects = payload.projects || [];
          renderProjects(window.__latestProjects);
          setClock("live-clock", payload.server_time || null);
          setConnection("sse-dot", "sse-label", true, "connected");
        } catch (_err) {
          setConnection("sse-dot", "sse-label", false, "parse error");
        }
      },
    },
  });
</script>
{% endblock %}