import { fetchCurrentUser, fetchRepoBranches, fetchRepoContents, fetchRepositories } from "./gitea-api.js";
import { getActiveServer, getState, setSettings, updateSettings, addRecentRepo } from "./state.js";
import {
  listLocalRepoBranches,
  listLocalRepoTree,
  readLocalRepoFile,
  runGitBranch,
  runGitClone,
  runGitPull,
  runGitPush,
  runGitStatus,
  testGiteaConnection,
} from "./tauri-api.js";

const appRoot = document.getElementById("app");

const mockRepos = [
  { id: 1, full_name: "alice/portfolio", private: false, clone_url: "https://example.com/portfolio.git", updated_at: "today", owner: { login: "alice", type: "User" } },
  { id: 2, full_name: "alice/dotfiles", private: true, clone_url: "https://example.com/dotfiles.git", updated_at: "yesterday", owner: { login: "alice", type: "User" } },
  { id: 3, full_name: "acme-corp/client-ui", private: false, clone_url: "https://example.com/client-ui.git", updated_at: "today", owner: { login: "acme-corp", type: "Organization" } },
  { id: 4, full_name: "acme-corp/api-server", private: true, clone_url: "https://example.com/api-server.git", updated_at: "3 days ago", owner: { login: "acme-corp", type: "Organization" } },
  { id: 5, full_name: "oss-collective/toolkit", private: false, clone_url: "https://example.com/toolkit.git", updated_at: "last week", owner: { login: "oss-collective", type: "Organization" } },
];

let repositories = [...mockRepos];
let currentUserLogin = ""; // authenticated user's login name
let serverTestResult = "";
let settingsNotice = "";
let gitOutput = "";
let activeRightTab = "clone"; // "clone" | "settings" | "servers"
let activeMainTab = "repos"; // "repos" | "local" | "viewer"
let repoOwnerFilter = "all"; // "all" | "personal" | "orgs"
const maxPreviewBytes = 256 * 1024;

const FOLDER_ICON = `<svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path fill="#54aeff" d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z"/></svg>`;
const FILE_ICON = `<svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path fill="#848d97" d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"/></svg>`;

function uid() {
  return `${Date.now()}-${Math.random().toString(16).slice(2)}`;
}

function escapeHtml(value = "") {
  return value
    .replaceAll("&", "&amp;")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;")
    .replaceAll('"', "&quot;");
}

function formatBytes(value) {
  if (!Number.isFinite(value)) return "";
  if (value < 1024) return `${value} B`;
  if (value < 1024 * 1024) return `${(value / 1024).toFixed(1)} KB`;
  return `${(value / 1024 / 1024).toFixed(1)} MB`;
}

function parentPath(path = "") {
  const parts = path.split("/").filter(Boolean);
  parts.pop();
  return parts.join("/");
}

function languageForPath(path = "") {
  const extension = path.split(".").pop()?.toLowerCase();
  const names = {
    js: "JavaScript",
    ts: "TypeScript",
    tsx: "TypeScript",
    jsx: "JavaScript",
    rs: "Rust",
    json: "JSON",
    css: "CSS",
    html: "HTML",
    htm: "HTML",
    md: "Markdown",
    toml: "TOML",
    yml: "YAML",
    yaml: "YAML",
  };
  return names[extension] || "Text";
}

function highlightCode(content = "", language = "Text") {
  let html = escapeHtml(content);
  if (["JavaScript", "TypeScript", "Rust"].includes(language)) {
    html = html.replace(
      /\b(async|await|const|let|var|function|return|if|else|for|while|class|struct|enum|impl|fn|pub|use|mod|match|Ok|Err|true|false|null)\b/g,
      '<span class="syntax-keyword">$1</span>'
    );
  } else if (language === "JSON") {
    html = html.replace(/(&quot;[^&]*?&quot;)(\s*:)/g, '<span class="syntax-key">$1</span>$2');
  } else if (language === "CSS") {
    html = html.replace(/([.#]?[a-zA-Z0-9_-]+)(\s*\{)/g, '<span class="syntax-key">$1</span>$2');
  }
  return html;
}

function isMarkdownPath(path = "") {
  return /\.(md|markdown)$/i.test(path);
}

function safeMarkdownHref(value = "") {
  const href = value.trim();
  const lowerHref = href.toLowerCase();
  if (!href || lowerHref.startsWith("javascript:") || lowerHref.startsWith("data:")) {
    return "";
  }
  return href;
}

function renderMarkdownInline(value = "") {
  return escapeHtml(value)
    .replace(/`([^`]+)`/g, "<code>$1</code>")
    .replace(/\[([^\]]+)\]\(([^)\s]+)(?:\s+&quot;[^&]*&quot;)?\)/g, (_match, label, href) => {
      const safeHref = safeMarkdownHref(href.replaceAll("&amp;", "&"));
      return safeHref ? `<a href="${escapeHtml(safeHref)}">${label}</a>` : label;
    })
    .replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
    .replace(/__([^_]+)__/g, "<strong>$1</strong>")
    .replace(/\*([^*]+)\*/g, "<em>$1</em>")
    .replace(/_([^_]+)_/g, "<em>$1</em>");
}

function renderMarkdown(content = "") {
  const lines = content.replace(/\r\n/g, "\n").split("\n");
  const html = [];
  let inFence = false;
  let fenceLanguage = "";
  let fenceLines = [];
  let listType = "";
  let listItems = [];

  const flushList = () => {
    if (!listType) return;
    html.push(`<${listType}>${listItems.map((item) => `<li>${renderMarkdownInline(item)}</li>`).join("")}</${listType}>`);
    listType = "";
    listItems = [];
  };

  const flushFence = () => {
    html.push(`<pre class="markdown-code" data-language="${escapeHtml(fenceLanguage)}"><code>${escapeHtml(fenceLines.join("\n"))}</code></pre>`);
    inFence = false;
    fenceLanguage = "";
    fenceLines = [];
  };

  for (const line of lines) {
    const fence = line.match(/^```(\w+)?\s*$/);
    if (fence) {
      if (inFence) {
        flushFence();
      } else {
        flushList();
        inFence = true;
        fenceLanguage = fence[1] || "";
        fenceLines = [];
      }
      continue;
    }

    if (inFence) {
      fenceLines.push(line);
      continue;
    }

    if (!line.trim()) {
      flushList();
      continue;
    }

    const heading = line.match(/^(#{1,6})\s+(.+)$/);
    if (heading) {
      flushList();
      const level = heading[1].length;
      html.push(`<h${level}>${renderMarkdownInline(heading[2])}</h${level}>`);
      continue;
    }

    if (/^\s*[-*_]{3,}\s*$/.test(line)) {
      flushList();
      html.push("<hr>");
      continue;
    }

    const quote = line.match(/^>\s?(.*)$/);
    if (quote) {
      flushList();
      html.push(`<blockquote>${renderMarkdownInline(quote[1])}</blockquote>`);
      continue;
    }

    const unordered = line.match(/^\s*[-*+]\s+(.+)$/);
    if (unordered) {
      if (listType && listType !== "ul") flushList();
      listType = "ul";
      listItems.push(unordered[1]);
      continue;
    }

    const ordered = line.match(/^\s*\d+\.\s+(.+)$/);
    if (ordered) {
      if (listType && listType !== "ol") flushList();
      listType = "ol";
      listItems.push(ordered[1]);
      continue;
    }

    flushList();
    html.push(`<p>${renderMarkdownInline(line)}</p>`);
  }

  if (inFence) flushFence();
  flushList();
  return html.join("");
}

function decodeBase64Content(content = "") {
  const cleaned = content.replace(/\s/g, "");
  const binary = atob(cleaned);
  const bytes = Uint8Array.from(binary, (char) => char.charCodeAt(0));
  if (bytes.byteLength > maxPreviewBytes) {
    return { content: "", size: bytes.byteLength, isBinary: false, tooLarge: true };
  }
  if (bytes.includes(0)) {
    return { content: "", size: bytes.byteLength, isBinary: true, tooLarge: false };
  }
  try {
    return {
      content: new TextDecoder("utf-8", { fatal: true }).decode(bytes),
      size: bytes.byteLength,
      isBinary: false,
      tooLarge: false,
    };
  } catch {
    return { content: "", size: bytes.byteLength, isBinary: true, tooLarge: false };
  }
}

function normaliseRemoteEntries(contents) {
  const items = Array.isArray(contents) ? contents : [contents];
  return items
    .map((item) => ({
      name: item.name,
      path: item.path || item.name,
      type: item.type === "dir" ? "dir" : "file",
      size: item.size,
    }))
    .sort((a, b) => (a.type === b.type ? a.name.localeCompare(b.name) : a.type === "dir" ? -1 : 1));
}

function normaliseLocalEntries(entries) {
  return entries.map((entry) => ({
    name: entry.name,
    path: entry.path,
    type: entry.entryType === "tree" ? "dir" : "file",
    size: entry.size,
  }));
}

function serverFormTemplate(server = null) {
  // Reused in first-launch setup and in Settings server management.
  const defaults = {
    id: "",
    displayName: "",
    serverUrl: "",
    authMethod: "token",
    token: "",
    username: "",
    password: "",
  };
  const config = { ...defaults, ...(server || {}) };
  return `
    <div class="stack panel" id="server-form-card">
      <h3 class="title">${server ? "Edit Server" : "Add Server"}</h3>
      <input type="hidden" name="id" value="${escapeHtml(config.id)}" />
      <div>
        <div class="label">Display name</div>
        <input name="displayName" value="${escapeHtml(config.displayName)}" placeholder="Gitpub Main" />
      </div>
      <div>
        <div class="label">Gitea server URL</div>
        <input name="serverUrl" value="${escapeHtml(config.serverUrl)}" placeholder="https://git.example.com" />
      </div>
      <div>
        <div class="label">Auth method</div>
        <select name="authMethod">
          <option value="token" ${config.authMethod === "token" ? "selected" : ""}>Access Token</option>
          <option value="password" ${config.authMethod === "password" ? "selected" : ""}>Username / Password</option>
        </select>
      </div>
      <div>
        <div class="label">Access token</div>
        <input name="token" value="${escapeHtml(config.token)}" placeholder="gitea token" />
      </div>
      <div class="row">
        <div style="flex: 1">
          <div class="label">Username</div>
          <input name="username" value="${escapeHtml(config.username)}" placeholder="username" />
        </div>
        <div style="flex: 1">
          <div class="label">Password</div>
          <input type="password" name="password" value="${escapeHtml(config.password)}" placeholder="password" />
        </div>
      </div>
      <div class="row wrap">
        <button id="test-server-btn" type="button">Test connection</button>
        <button id="save-server-btn" class="primary" type="button">Save server</button>
      </div>
      <div class="muted">${escapeHtml(serverTestResult || settingsNotice)}</div>
    </div>
  `;
}

function welcomeView() {
  appRoot.innerHTML = `
    <div class="welcome-wrap">
      <div class="welcome-card stack">
        <div class="welcome-logo">
          <img src="/assets/logos/Gitpub-Word-Logo-2-White.svg" alt="Gitpub" class="welcome-logo-img" />
          <span class="welcome-logo-desktop">Desktop</span>
        </div>
        <div class="panel stack">
          <h1 class="title">Welcome to Gitpub Desktop</h1>
          <p class="subtitle">
            Connect your first Gitea backend. Gitpub Desktop works with any compatible Gitea server.
          </p>
          ${serverFormTemplate(null)}
        </div>
      </div>
    </div>
  `;
  bindServerFormEvents();
}

function isOrgRepo(repo) {
  const ownerLogin = repo.owner?.login || repo.full_name.split("/")[0];
  // When we know the authenticated user, compare against owner login.
  // Fall back to owner.type for cases where user info wasn't fetched.
  if (currentUserLogin) {
    return ownerLogin.toLowerCase() !== currentUserLogin.toLowerCase();
  }
  return repo.owner?.type === "Organization" || repo.owner?.type === "organization";
}

function filteredRepositories() {
  const searchTerm = getState().repoSearch.trim().toLowerCase();
  let result = repositories;

  if (repoOwnerFilter === "personal") {
    result = result.filter((repo) => !isOrgRepo(repo));
  } else if (repoOwnerFilter === "orgs") {
    result = result.filter((repo) => isOrgRepo(repo));
  }

  if (searchTerm) {
    result = result.filter((repo) => repo.full_name.toLowerCase().includes(searchTerm));
  }

  return result;
}

function groupedByOrg(repos) {
  const groups = {};
  for (const repo of repos) {
    const org = repo.owner?.login || "Unknown";
    if (!groups[org]) groups[org] = [];
    groups[org].push(repo);
  }
  return groups;
}

function repoCardTemplate(repo) {
  return `
    <article class="repo-card stack">
      <div><strong>${escapeHtml(repo.full_name)}</strong></div>
      <div class="muted">${repo.private ? "Private" : "Public"} · ${escapeHtml(repo.updated_at || "recently")}</div>
      <div class="row">
        <button class="view-repo-btn primary-blue" data-repo-name="${escapeHtml(repo.full_name)}" type="button">View</button>
        <button class="clone-repo-btn" data-clone-url="${escapeHtml(repo.clone_url || "")}" type="button">Clone</button>
        <button class="open-repo-btn" data-repo-name="${escapeHtml(repo.full_name)}" type="button">Open</button>
      </div>
    </article>
  `;
}

function breadcrumbTemplate(repoName, path = "") {
  const parts = path.split("/").filter(Boolean);
  const crumbs = [`<button class="viewer-crumb-btn" data-viewer-path="" type="button">${escapeHtml(repoName)}</button>`];
  parts.forEach((part, index) => {
    const crumbPath = parts.slice(0, index + 1).join("/");
    crumbs.push(`<span class="viewer-crumb-sep">/</span><button class="viewer-crumb-btn" data-viewer-path="${escapeHtml(crumbPath)}" type="button">${escapeHtml(part)}</button>`);
  });
  return crumbs.join("");
}

function filePreviewTemplate(file) {
  const language = languageForPath(file.path);
  const meta = [language, formatBytes(file.size)].filter(Boolean).join(" · ");

  const header = `
    <div class="viewer-file-panel-header">
      <span class="viewer-file-name">${FILE_ICON} ${escapeHtml(file.path.split("/").pop())}</span>
      <span class="muted">${escapeHtml(meta)}</span>
    </div>`;

  if (file.tooLarge) {
    return header + `<div class="empty-state viewer-empty"><div>File too large to preview</div><div class="muted">Preview is limited to ${formatBytes(maxPreviewBytes)}.</div></div>`;
  }
  if (file.isBinary) {
    return header + `<div class="empty-state viewer-empty"><div>Binary file</div><div class="muted">Binary content cannot be previewed.</div></div>`;
  }
  if (isMarkdownPath(file.path)) {
    return header + `<div class="markdown-body">${renderMarkdown(file.content || "")}</div>`;
  }
  return header + `<pre class="code-preview" data-language="${escapeHtml(language)}"><code>${highlightCode(file.content || "", language)}</code></pre>`;
}

function viewerTemplate() {
  const { viewer } = getState();
  if (!viewer.source) {
    return `
      <section class="panel stack">
        <h3 class="title">Repository Viewer</h3>
        <div class="empty-state viewer-empty">
          <div>No repository selected</div>
          <div class="muted">Use View on a repository card, or open a local path and click View files.</div>
        </div>
      </section>
    `;
  }

  const rows = [];
  if (viewer.path) {
    rows.push(`
      <button class="viewer-row" data-entry-type="dir" data-entry-path="${escapeHtml(parentPath(viewer.path))}" type="button">
        <span class="viewer-row-icon">${FOLDER_ICON}</span>
        <span class="viewer-row-name">..</span>
        <span class="viewer-row-size"></span>
      </button>`);
  }
  viewer.entries.forEach((entry) => {
    const active = viewer.selectedFile?.path === entry.path ? " active" : "";
    rows.push(`
      <button class="viewer-row${active}" data-entry-type="${entry.type}" data-entry-path="${escapeHtml(entry.path)}" type="button">
        <span class="viewer-row-icon">${entry.type === "dir" ? FOLDER_ICON : FILE_ICON}</span>
        <span class="viewer-row-name ${entry.type === "dir" ? "viewer-dir-name" : ""}">${escapeHtml(entry.name)}</span>
        <span class="viewer-row-size muted">${entry.type === "file" ? formatBytes(entry.size) : ""}</span>
      </button>`);
  });
  if (!rows.length && !viewer.loading) {
    rows.push(`<div class="viewer-empty-row"><span class="muted">This folder is empty.</span></div>`);
  }

  const showReadme = viewer.readmeFile && !viewer.selectedFile;

  return `
    <section class="panel stack viewer-panel">
      <div class="viewer-topbar">
        <div class="viewer-crumb-row">
          ${breadcrumbTemplate(viewer.repoName || "repo", viewer.path)}
        </div>
        <div class="row viewer-controls">
          <span class="viewer-source-badge">${viewer.source === "remote" ? "Remote" : "Local"}</span>
          <select id="viewer-branch-select" ${viewer.loading ? "disabled" : ""}>
            ${viewer.branches.map((b) => `<option value="${escapeHtml(b.name)}" ${b.name === viewer.branch ? "selected" : ""}>${escapeHtml(b.name)}${b.current ? " ✓" : ""}</option>`).join("")}
          </select>
          <button id="viewer-refresh-btn" type="button">Refresh</button>
        </div>
      </div>

      ${viewer.error ? `<div class="viewer-error">${escapeHtml(viewer.error)}</div>` : ""}
      ${viewer.loading ? `<div class="viewer-loading">Loading…</div>` : ""}

      <div class="viewer-table">
        <div class="viewer-table-header">
          <span></span>
          <span>Name</span>
          <span>Size</span>
        </div>
        ${rows.join("")}
      </div>

      ${viewer.selectedFile ? `<div class="viewer-file-panel">${filePreviewTemplate(viewer.selectedFile)}</div>` : ""}

      ${showReadme ? `
        <div class="viewer-readme-panel">
          <div class="viewer-readme-header">
            ${FILE_ICON}
            <span>${escapeHtml(viewer.readmeFile.path.split("/").pop())}</span>
          </div>
          <div class="viewer-readme-body markdown-body">${renderMarkdown(viewer.readmeFile.content || "")}</div>
        </div>` : ""}
    </section>
  `;
}

function dashboardView() {
  const state = getState();
  const activeServer = getActiveServer();
  const visibleRepos = filteredRepositories();

  appRoot.innerHTML = `
    <div class="layout">
      <aside class="sidebar stack">
        <div class="sidebar-brand">
          <div class="sidebar-logo">
            <img src="/assets/logos/Gitpub-Word-Logo-2-White.svg" alt="Gitpub" class="sidebar-logo-img" />
            <span class="sidebar-logo-desktop">Desktop</span>
          </div>
        </div>

        <div class="server-chip">
          <div class="label">Active server</div>
          <div>${escapeHtml(activeServer?.displayName || "No server selected")}</div>
          <div class="muted">${escapeHtml(activeServer?.serverUrl || "Add a server to connect")}</div>
        </div>

        <div class="sidebar-nav">
          <button id="refresh-repos-btn" class="sidebar-btn" type="button">Refresh</button>
          <button id="open-settings-btn" class="sidebar-btn" type="button">Servers</button>
        </div>

        <div class="sidebar-recents">
          <div class="label">Recent repositories</div>
          <ul class="list">
            ${state.settings.recentRepositories.length
              ? state.settings.recentRepositories
                  .map((path) => `<li class="recent-item" title="${escapeHtml(path)}">${escapeHtml(path.split(/[/\\]/).filter(Boolean).pop() || path)}</li>`)
                  .join("")
              : "<li class='muted'>No recent repositories.</li>"}
          </ul>
        </div>
      </aside>

      <main class="main stack">
        <div class="tabs main-tabs">
          <button class="tab-btn ${activeMainTab === "repos" ? "active" : ""}" data-main-tab="repos">Repositories</button>
          <button class="tab-btn ${activeMainTab === "local" ? "active" : ""}" data-main-tab="local">Local Repo</button>
          <button class="tab-btn ${activeMainTab === "viewer" ? "active" : ""}" data-main-tab="viewer">Viewer</button>
          ${activeMainTab === "repos"
            ? `<span class="tab-spacer"></span><input id="repo-search-input" class="tab-search" placeholder="Search…" value="${escapeHtml(state.repoSearch)}" />`
            : ""}
        </div>

        ${activeMainTab === "repos" ? `
          <section class="panel stack">
            <div class="section-header">
              <h3 class="title">Repositories</h3>
              <span class="muted">${visibleRepos.length} shown</span>
            </div>
            <div class="repo-filter-pills">
              <button class="pill-btn ${repoOwnerFilter === "all" ? "active" : ""}" data-owner-filter="all">All</button>
              <button class="pill-btn ${repoOwnerFilter === "personal" ? "active" : ""}" data-owner-filter="personal">Personal</button>
              <button class="pill-btn ${repoOwnerFilter === "orgs" ? "active" : ""}" data-owner-filter="orgs">Organizations</button>
            </div>
            ${repoOwnerFilter === "orgs"
              ? (() => {
                  const groups = groupedByOrg(visibleRepos);
                  const orgNames = Object.keys(groups).sort();
                  if (!orgNames.length) {
                    return `<div class="empty-state"><div>No organisation repositories found</div><div class="muted">Try refreshing or check your server connection.</div></div>`;
                  }
                  return orgNames.map((org) => `
                    <div class="org-group stack">
                      <div class="org-group-header">
                        <span class="org-badge">${escapeHtml(org)}</span>
                        <span class="muted">${groups[org].length} repo${groups[org].length !== 1 ? "s" : ""}</span>
                      </div>
                      <div class="repo-grid">
                        ${groups[org].map((repo) => repoCardTemplate(repo)).join("")}
                      </div>
                    </div>
                  `).join("");
                })()
              : `<div class="repo-grid">
                  ${visibleRepos.length
                    ? visibleRepos.map((repo) => repoCardTemplate(repo)).join("")
                    : `<div class="empty-state">
                         <div>No repositories found</div>
                         <div class="muted">Try refreshing or check your server connection.</div>
                       </div>`}
                </div>`}
          </section>
        ` : activeMainTab === "local" ? `
          <section class="panel stack">
            <h3 class="title">Local Repository</h3>
            <div class="row">
              <input id="local-repo-path-input" placeholder="Path to local repository…" value="${escapeHtml(state.localRepoPathInput)}" />
              <button id="open-local-repo-btn" type="button">Open</button>
            </div>
            ${state.selectedRepoName
              ? `<div class="selected-repo"><span class="label">Active: </span>${escapeHtml(state.selectedRepoName)}</div>`
              : ""}
            <div class="row wrap">
              <button id="git-status-btn" type="button">Status</button>
              <button id="git-branch-btn" type="button">Branch</button>
              <button id="git-pull-btn" type="button">Pull</button>
              <button id="git-push-btn" type="button">Push</button>
              <button id="view-local-repo-btn" class="primary-blue" type="button">View files</button>
            </div>
            <div>
              <div class="label">Commit message</div>
              <textarea id="commit-message-input" placeholder="Write commit message…">${escapeHtml(state.commitMessage)}</textarea>
              <div class="muted commit-note">Commit support coming in the next milestone.</div>
            </div>
            ${gitOutput
              ? `<pre class="git-output">${escapeHtml(gitOutput)}</pre>`
              : `<p class="muted git-output-placeholder">Run a git command to see output here.</p>`}
          </section>
        ` : viewerTemplate()}
      </main>

      <aside class="rightbar stack">
        <div class="tabs right-tabs">
          <button class="tab-btn ${activeRightTab === "clone" ? "active" : ""}" data-right-tab="clone">Clone</button>
          <button class="tab-btn ${activeRightTab === "settings" ? "active" : ""}" data-right-tab="settings">Settings</button>
          <button class="tab-btn ${activeRightTab === "servers" ? "active" : ""}" data-right-tab="servers">Servers</button>
        </div>

        ${activeRightTab === "clone" ? `
          <section class="panel stack">
            <div>
              <div class="label">Repository URL</div>
              <input id="clone-url-input" placeholder="https://git.example.com/org/repo.git" value="${escapeHtml(state.cloneUrlInput)}" />
            </div>
            <div>
              <div class="label">Destination path</div>
              <input id="clone-destination-input" placeholder="/Users/me/code/repo" value="${escapeHtml(state.cloneDestinationInput || state.settings.defaultCloneDirectory)}" />
            </div>
            <button id="clone-btn" class="primary" type="button">Clone</button>
            <span class="muted">Uses system Git from settings.</span>
          </section>
        ` : ""}

        ${activeRightTab === "settings" ? `
          <section class="panel stack">
            <div>
              <div class="label">Theme</div>
              <select id="theme-select">
                <option value="dark" ${state.settings.theme === "dark" ? "selected" : ""}>Dark (default)</option>
              </select>
            </div>
            <div>
              <div class="label">Git executable path</div>
              <input id="git-path-input" value="${escapeHtml(state.settings.gitExecutablePath)}" placeholder="git or /usr/bin/git" />
            </div>
            <div>
              <div class="label">Default clone directory</div>
              <input id="default-clone-dir-input" value="${escapeHtml(state.settings.defaultCloneDirectory)}" placeholder="/Users/me/code" />
            </div>
            <button id="save-basic-settings-btn" class="primary" type="button">Save settings</button>
            ${settingsNotice ? `<div class="muted">${escapeHtml(settingsNotice)}</div>` : ""}
          </section>
        ` : ""}

        ${activeRightTab === "servers" ? `
          <section class="panel stack">
            ${state.settings.servers
              .map((server) => `
                <div class="server-chip stack">
                  <strong>${escapeHtml(server.displayName)}</strong>
                  <span class="muted">${escapeHtml(server.serverUrl)}</span>
                  <div class="row wrap">
                    <button class="set-default-server-btn" data-id="${server.id}" type="button">Set default</button>
                    <button class="edit-server-btn" data-id="${server.id}" type="button">Edit</button>
                    <button class="delete-server-btn danger" data-id="${server.id}" type="button">Remove</button>
                  </div>
                </div>
              `).join("")}
            <button id="add-server-btn" type="button">Add new server</button>
            <div id="server-form-slot" class="stack"></div>
            ${settingsNotice ? `<div class="muted">${escapeHtml(settingsNotice)}</div>` : ""}
          </section>
        ` : ""}
      </aside>
    </div>
  `;

  bindDashboardEvents();
}

function bindServerFormEvents(existingServer = null) {
  const testButton = document.getElementById("test-server-btn");
  const saveButton = document.getElementById("save-server-btn");
  const formCard = document.getElementById("server-form-card");
  if (!testButton || !saveButton || !formCard) return;

  const collectPayload = () => {
    const get = (name) => formCard.querySelector(`[name="${name}"]`)?.value?.trim() || "";
    return {
      id: get("id"),
      displayName: get("displayName"),
      serverUrl: get("serverUrl"),
      authMethod: get("authMethod") || "token",
      token: get("token"),
      username: get("username"),
      password: get("password"),
    };
  };

  testButton.addEventListener("click", async () => {
    const payload = collectPayload();
    try {
      const result = await testGiteaConnection(payload);
      serverTestResult = `${result.ok ? "Connected" : "Failed"}: ${result.message} (${result.apiBaseUrl})`;
      render();
      if (existingServer) {
        openServerForm(existingServer.id);
      }
    } catch (error) {
      serverTestResult = `Connection test failed: ${error.message}`;
      render();
      if (existingServer) {
        openServerForm(existingServer.id);
      }
    }
  });

  saveButton.addEventListener("click", () => {
    const payload = collectPayload();
    if (!payload.displayName || !payload.serverUrl) {
      settingsNotice = "Display name and server URL are required.";
      render();
      if (existingServer) openServerForm(existingServer.id);
      return;
    }

    const state = getState();
    let nextServers = [...state.settings.servers];
    const nextId = payload.id || uid();
    const serverData = { ...payload, id: nextId };
    const existingIndex = nextServers.findIndex((item) => item.id === nextId);

    if (existingIndex >= 0) {
      nextServers[existingIndex] = serverData;
      settingsNotice = `Updated server ${payload.displayName}.`;
    } else {
      nextServers.push(serverData);
      settingsNotice = `Added server ${payload.displayName}.`;
    }

    const activeServerId = state.settings.activeServerId || nextId;
    setSettings({ ...state.settings, servers: nextServers, activeServerId });
    serverTestResult = "";
    render();
  });
}

function openServerForm(serverId = null) {
  const slot = document.getElementById("server-form-slot");
  if (!slot) return;

  const server = getState().settings.servers.find((item) => item.id === serverId) || null;
  slot.innerHTML = serverFormTemplate(server);
  bindServerFormEvents(server);
}

async function loadRepositories() {
  const activeServer = getActiveServer();
  if (!activeServer) {
    repositories = [...mockRepos];
    currentUserLogin = "alice"; // mock user matches mock personal repos
    return;
  }

  try {
    const [user, repos] = await Promise.all([
      fetchCurrentUser(activeServer),
      fetchRepositories(activeServer),
    ]);
    currentUserLogin = user.login || "";
    repositories = repos;
  } catch (error) {
    settingsNotice = `Using mock repositories. API fetch failed: ${error.message}`;
    currentUserLogin = "alice";
    repositories = [...mockRepos];
  }
}

async function autoLoadReadme() {
  const state = getState();
  const viewer = state.viewer;
  const entry = viewer.entries.find(
    (e) => e.type === "file" && /^readme(\.md|\.txt|\.rst)?$/i.test(e.name)
  );
  viewer.readmeFile = null;
  if (!entry) return;

  try {
    if (viewer.source === "remote") {
      const activeServer = getActiveServer();
      const file = await fetchRepoContents(activeServer, viewer.repoName, entry.path, viewer.branch);
      const decoded = file.encoding === "base64"
        ? decodeBase64Content(file.content || "")
        : { content: file.content || "", isBinary: false, tooLarge: false };
      if (!decoded.isBinary && !decoded.tooLarge) {
        viewer.readmeFile = { path: entry.path, content: decoded.content };
      }
    } else {
      const file = await readLocalRepoFile(
        viewer.repoPath, viewer.branch, entry.path, state.settings.gitExecutablePath
      );
      if (!file.isBinary && !file.tooLarge) {
        viewer.readmeFile = { path: entry.path, content: file.content || "" };
      }
    }
    render();
  } catch {
    // README load failure is non-fatal
  }
}

async function loadViewerPath(path = "") {
  const state = getState();
  const viewer = state.viewer;
  if (!viewer.source) return;

  viewer.path = path;
  viewer.loading = true;
  viewer.error = "";
  viewer.entries = [];
  viewer.selectedFile = null;
  viewer.readmeFile = null;
  render();

  try {
    if (viewer.source === "remote") {
      const activeServer = getActiveServer();
      if (!activeServer) throw new Error("No active server is configured.");
      const contents = await fetchRepoContents(activeServer, viewer.repoName, path, viewer.branch);
      viewer.entries = normaliseRemoteEntries(contents).filter((entry) => entry.type === "dir" || entry.path !== path);
    } else {
      const entries = await listLocalRepoTree(
        viewer.repoPath,
        viewer.branch,
        path,
        state.settings.gitExecutablePath
      );
      viewer.entries = normaliseLocalEntries(entries);
    }
    viewer.loading = false;
    render();
    await autoLoadReadme();
  } catch (error) {
    viewer.error = `Unable to load repository contents: ${error.message}`;
    viewer.loading = false;
    render();
  }
}

async function openViewerFile(path) {
  const state = getState();
  const viewer = state.viewer;
  if (!viewer.source || !path) return;

  viewer.loading = true;
  viewer.error = "";
  viewer.selectedFile = null;
  render();

  try {
    if (viewer.source === "remote") {
      const activeServer = getActiveServer();
      if (!activeServer) throw new Error("No active server is configured.");
      const file = await fetchRepoContents(activeServer, viewer.repoName, path, viewer.branch);
      const decoded = file.encoding === "base64"
        ? decodeBase64Content(file.content || "")
        : { content: file.content || "", size: file.size || 0, isBinary: false, tooLarge: false };
      viewer.selectedFile = {
        path: file.path || path,
        size: file.size || decoded.size,
        content: decoded.content,
        isBinary: decoded.isBinary,
        tooLarge: decoded.tooLarge,
      };
    } else {
      const file = await readLocalRepoFile(
        viewer.repoPath,
        viewer.branch,
        path,
        state.settings.gitExecutablePath
      );
      viewer.selectedFile = {
        path: file.path,
        size: file.size,
        content: file.content || "",
        isBinary: file.isBinary,
        tooLarge: file.tooLarge,
      };
    }
  } catch (error) {
    viewer.error = `Unable to preview file: ${error.message}`;
  } finally {
    viewer.loading = false;
    render();
  }
}

async function openRemoteViewer(repo) {
  const state = getState();
  const viewer = state.viewer;
  Object.assign(viewer, {
    source: "remote",
    repoName: repo.full_name,
    repoPath: "",
    cloneUrl: repo.clone_url || "",
    defaultBranch: repo.default_branch || "",
    branch: "",
    branches: [],
    path: "",
    entries: [],
    selectedFile: null,
    loading: true,
    error: "",
  });
  activeMainTab = "viewer";
  render();

  try {
    const activeServer = getActiveServer();
    if (!activeServer) throw new Error("No active server is configured.");
    const branches = await fetchRepoBranches(activeServer, repo.full_name);
    const branchNames = branches.map((branch) => branch.name).filter(Boolean);
    const selectedBranch = repo.default_branch || branchNames[0] || "";
    viewer.branches = branchNames.map((name) => ({ name, current: name === selectedBranch }));
    viewer.branch = selectedBranch;
    await loadViewerPath("");
  } catch (error) {
    viewer.loading = false;
    viewer.error = `Unable to open repository viewer: ${error.message}`;
    render();
  }
}

async function openLocalViewer() {
  const state = getState();
  const value = state.selectedRepoPath || state.localRepoPathInput;
  if (!value) {
    gitOutput = "Select or enter a local repository path first.";
    activeMainTab = "local";
    render();
    return;
  }

  const viewer = state.viewer;
  Object.assign(viewer, {
    source: "local",
    repoName: state.selectedRepoName || value.split(/[/\\]/).filter(Boolean).pop() || value,
    repoPath: value,
    cloneUrl: "",
    defaultBranch: "",
    branch: "",
    branches: [],
    path: "",
    entries: [],
    selectedFile: null,
    loading: true,
    error: "",
  });
  activeMainTab = "viewer";
  render();

  try {
    const branches = await listLocalRepoBranches(value, state.settings.gitExecutablePath);
    const selectedBranch = branches.find((branch) => branch.current)?.name || branches[0]?.name || "";
    viewer.branches = branches;
    viewer.branch = selectedBranch;
    await loadViewerPath("");
  } catch (error) {
    viewer.loading = false;
    viewer.error = `Unable to open local viewer: ${error.message}`;
    render();
  }
}

async function runRepoCommand(actionName, runner) {
  const state = getState();
  if (!state.selectedRepoPath) {
    gitOutput = "Select or enter a local repository path first.";
    render();
    return;
  }

  try {
    const result = await runner();
    gitOutput = `${actionName}: ${result.command}\n\n${result.stdout || "(no stdout)"}\n${result.stderr ? `\n${result.stderr}` : ""}`;
  } catch (error) {
    gitOutput = `${actionName} failed: ${error.message}`;
  }
  render();
}

function bindDashboardEvents() {
  const state = getState();

  document.getElementById("repo-search-input")?.addEventListener("input", (event) => {
    state.repoSearch = event.target.value;
    render();
  });

  document.getElementById("refresh-repos-btn")?.addEventListener("click", async () => {
    await loadRepositories();
    render();
  });

  document.getElementById("open-settings-btn")?.addEventListener("click", () => {
    activeRightTab = "servers";
    render();
  });

  document.querySelectorAll("[data-right-tab]").forEach((btn) => {
    btn.addEventListener("click", () => {
      activeRightTab = btn.dataset.rightTab;
      render();
    });
  });

  document.querySelectorAll("[data-main-tab]").forEach((btn) => {
    btn.addEventListener("click", () => {
      activeMainTab = btn.dataset.mainTab;
      render();
    });
  });

  document.querySelectorAll("[data-owner-filter]").forEach((btn) => {
    btn.addEventListener("click", () => {
      repoOwnerFilter = btn.dataset.ownerFilter;
      render();
    });
  });

  document.querySelectorAll(".view-repo-btn").forEach((button) => {
    button.addEventListener("click", () => {
      const repo = repositories.find((item) => item.full_name === button.dataset.repoName);
      if (repo) {
        openRemoteViewer(repo);
      }
    });
  });

  document.querySelectorAll(".open-repo-btn").forEach((button) => {
    button.addEventListener("click", () => {
      state.selectedRepoName = button.dataset.repoName || "Repository";
      activeMainTab = "local";
      render();
    });
  });

  document.querySelectorAll(".clone-repo-btn").forEach((button) => {
    button.addEventListener("click", () => {
      state.cloneUrlInput = button.dataset.cloneUrl || "";
      activeRightTab = "clone";
      render();
    });
  });

  document.getElementById("open-local-repo-btn")?.addEventListener("click", () => {
    // MVP local detection is user-driven path entry; folder picker can be added next.
    const value = document.getElementById("local-repo-path-input")?.value?.trim() || "";
    state.localRepoPathInput = value;
    state.selectedRepoPath = value;
    state.selectedRepoName = value.split(/[/\\]/).filter(Boolean).pop() || value;
    addRecentRepo(value);
    render();
  });

  document.getElementById("view-local-repo-btn")?.addEventListener("click", () => {
    const value = document.getElementById("local-repo-path-input")?.value?.trim() || state.selectedRepoPath;
    state.localRepoPathInput = value;
    state.selectedRepoPath = value;
    state.selectedRepoName = value.split(/[/\\]/).filter(Boolean).pop() || value;
    if (value) addRecentRepo(value);
    openLocalViewer();
  });

  document.getElementById("clone-btn")?.addEventListener("click", async () => {
    state.cloneUrlInput = document.getElementById("clone-url-input")?.value?.trim() || "";
    state.cloneDestinationInput = document.getElementById("clone-destination-input")?.value?.trim() || "";

    if (!state.cloneUrlInput || !state.cloneDestinationInput) {
      gitOutput = "Clone URL and destination path are required.";
      render();
      return;
    }

    try {
      const result = await runGitClone(
        state.cloneUrlInput,
        state.cloneDestinationInput,
        state.settings.gitExecutablePath
      );
      gitOutput = `${result.command}\n\n${result.stdout || "Clone completed."}\n${result.stderr || ""}`;
      addRecentRepo(state.cloneDestinationInput);
    } catch (error) {
      gitOutput = `Clone failed: ${error.message}`;
    }
    render();
  });

  document.getElementById("git-status-btn")?.addEventListener("click", () => {
    runRepoCommand("Status", () => runGitStatus(state.selectedRepoPath, state.settings.gitExecutablePath));
  });
  document.getElementById("git-branch-btn")?.addEventListener("click", () => {
    runRepoCommand("Branch", () => runGitBranch(state.selectedRepoPath, state.settings.gitExecutablePath));
  });
  document.getElementById("git-pull-btn")?.addEventListener("click", () => {
    runRepoCommand("Pull", () => runGitPull(state.selectedRepoPath, state.settings.gitExecutablePath));
  });
  document.getElementById("git-push-btn")?.addEventListener("click", () => {
    runRepoCommand("Push", () => runGitPush(state.selectedRepoPath, state.settings.gitExecutablePath));
  });

  document.getElementById("save-basic-settings-btn")?.addEventListener("click", () => {
    updateSettings({
      theme: document.getElementById("theme-select")?.value || "dark",
      gitExecutablePath: document.getElementById("git-path-input")?.value?.trim() || "",
      defaultCloneDirectory: document.getElementById("default-clone-dir-input")?.value?.trim() || "",
    });
    settingsNotice = "Saved basic settings.";
    render();
  });

  document.getElementById("add-server-btn")?.addEventListener("click", () => openServerForm());

  document.querySelectorAll(".set-default-server-btn").forEach((button) => {
    button.addEventListener("click", async () => {
      updateSettings({ activeServerId: button.dataset.id });
      settingsNotice = "Default server updated.";
      await loadRepositories();
      render();
    });
  });

  document.querySelectorAll(".delete-server-btn").forEach((button) => {
    button.addEventListener("click", () => {
      const nextServers = getState().settings.servers.filter((server) => server.id !== button.dataset.id);
      const nextActive =
        getState().settings.activeServerId === button.dataset.id ? nextServers[0]?.id || null : getState().settings.activeServerId;
      setSettings({ ...getState().settings, servers: nextServers, activeServerId: nextActive });
      settingsNotice = "Server removed.";
      render();
    });
  });

  document.querySelectorAll(".edit-server-btn").forEach((button) => {
    button.addEventListener("click", () => openServerForm(button.dataset.id));
  });

  document.getElementById("viewer-branch-select")?.addEventListener("change", (event) => {
    state.viewer.branch = event.target.value;
    loadViewerPath("");
  });

  document.getElementById("viewer-refresh-btn")?.addEventListener("click", () => {
    loadViewerPath(state.viewer.path);
  });

  document.querySelectorAll(".viewer-crumb-btn").forEach((button) => {
    button.addEventListener("click", () => {
      loadViewerPath(button.dataset.viewerPath || "");
    });
  });

  document.querySelectorAll(".viewer-row").forEach((button) => {
    button.addEventListener("click", () => {
      const path = button.dataset.entryPath || "";
      if (button.dataset.entryType === "dir") {
        loadViewerPath(path);
      } else {
        openViewerFile(path);
      }
    });
  });
}

function render() {
  if (!getState().settings.servers.length) {
    // First launch always lands in setup until at least one backend is saved.
    welcomeView();
    return;
  }
  dashboardView();
}

window.addEventListener("DOMContentLoaded", async () => {
  await loadRepositories();
  render();
});