Homelab-manager/web/src/pages/ServersTasks.tsx

import { useCallback, useEffect, useMemo, useState } from "react";
import cronstrue from "cronstrue";
import { CronExpressionParser } from "cron-parser";
import {
  api,
  type CurrentUser,
  type ManualTaskInput,
  type ScheduleType,
  type ServerRecord,
  type TaskRecord,
} from "../api/client";
import CopyButton from "../components/CopyButton";
import { formatDateTime } from "../utils/date";

const SCHEDULE_TYPE_LABELS: Record<string, string> = {
  cron: "Cron jobs",
  systemd_timer: "systemd timers",
  docker: "Docker jobs",
  backup: "Backups",
  update: "Updates",
  n8n_workflow: "n8n workflows",
  manual: "Other",
};

const SCHEDULE_TYPE_OPTIONS: { value: ScheduleType; label: string }[] = [
  { value: "docker", label: "Docker" },
  { value: "cron", label: "Cron" },
  { value: "systemd_timer", label: "systemd timer" },
  { value: "backup", label: "Backup" },
  { value: "update", label: "Update" },
  { value: "n8n_workflow", label: "n8n workflow" },
  { value: "manual", label: "Other / manual" },
];

function installCommand(token: string): string {
  return `curl -fsSL ${window.location.origin}/agent/linux/install.sh | sudo API_URL=${window.location.origin} API_TOKEN=${token} bash`;
}

function uninstallCommand(): string {
  return `curl -fsSL ${window.location.origin}/agent/linux/uninstall.sh | sudo bash`;
}

function describeSchedule(task: TaskRecord): string {
  if (!task.scheduleExpression) return "—";
  if (task.scheduleType === "cron") {
    try {
      return cronstrue.toString(task.scheduleExpression, { verbose: false });
    } catch {
      return task.scheduleExpression;
    }
  }
  return task.scheduleExpression;
}

interface NextRun {
  date: Date;
  estimated: boolean;
}

function computeNextRun(task: TaskRecord): NextRun | null {
  if (task.nextRunAt) return { date: new Date(task.nextRunAt), estimated: false };
  if (task.scheduleType !== "cron" || !task.scheduleExpression || task.isStale || !task.enabled) return null;
  try {
    const date = CronExpressionParser.parse(task.scheduleExpression).next().toDate();
    return { date, estimated: true };
  } catch {
    return null;
  }
}

const emptyTaskForm = {
  scheduleType: "docker" as ScheduleType,
  name: "",
  command: "",
  scheduleExpression: "",
  enabled: true,
};

export default function ServersTasks({ user }: { user: CurrentUser }) {
  const isAdmin = user.role === "admin";
  const canEditTasks = user.role === "admin" || user.role === "operator";

  const [servers, setServers] = useState<ServerRecord[]>([]);
  const [tasks, setTasks] = useState<TaskRecord[] | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [managingServers, setManagingServers] = useState(false);

  const [filters, setFilters] = useState({
    serverId: undefined as number | undefined,
    scheduleType: undefined as string | undefined,
    search: "",
    includeStale: false,
  });

  const [taskForm, setTaskForm] = useState<typeof emptyTaskForm | null>(null);
  const [editingTask, setEditingTask] = useState<TaskRecord | null>(null);
  const [newTaskServerId, setNewTaskServerId] = useState<number | undefined>(undefined);
  const [savingTask, setSavingTask] = useState(false);

  const [serverName, setServerName] = useState("");
  const [serverHostname, setServerHostname] = useState("");
  const [serverDescription, setServerDescription] = useState("");
  const [newToken, setNewToken] = useState<{ server: ServerRecord; token: string } | null>(null);
  const [uninstallFor, setUninstallFor] = useState<ServerRecord | null>(null);

  const loadServers = useCallback(() => {
    return api.servers
      .list()
      .then((res) => setServers(res.servers))
      .catch((err) => setError(String(err)));
  }, []);

  const loadTasks = useCallback(() => {
    return api.tasks
      .list(filters)
      .then((res) => setTasks(res.tasks))
      .catch((err) => setError(String(err)));
  }, [filters]);

  useEffect(() => {
    loadServers();
  }, [loadServers]);

  useEffect(() => {
    const handle = setTimeout(loadTasks, 200);
    return () => clearTimeout(handle);
  }, [loadTasks]);

  const groups = useMemo(() => {
    const byServer = new Map<number, { serverId: number; serverName: string; tasks: TaskRecord[] }>();
    for (const task of tasks ?? []) {
      const entry = byServer.get(task.serverId) ?? { serverId: task.serverId, serverName: task.serverName, tasks: [] };
      entry.tasks.push(task);
      byServer.set(task.serverId, entry);
    }
    return [...byServer.values()];
  }, [tasks]);

  function openAddTask() {
    setEditingTask(null);
    setNewTaskServerId(filters.serverId ?? servers[0]?.id);
    setTaskForm({ ...emptyTaskForm });
  }

  function openEditTask(task: TaskRecord) {
    setEditingTask(task);
    setTaskForm({
      scheduleType: task.scheduleType,
      name: task.name,
      command: task.command ?? "",
      scheduleExpression: task.scheduleExpression ?? "",
      enabled: task.enabled,
    });
  }

  async function submitTask(e: React.FormEvent) {
    e.preventDefault();
    if (!taskForm) return;
    setSavingTask(true);
    setError(null);
    try {
      const serverId = editingTask?.serverId ?? newTaskServerId;
      if (!serverId) {
        setError("Choose a server first.");
        return;
      }
      const data: ManualTaskInput = {
        serverId,
        scheduleType: taskForm.scheduleType,
        name: taskForm.name,
        command: taskForm.command || undefined,
        scheduleExpression: taskForm.scheduleExpression || undefined,
        enabled: taskForm.enabled,
      };
      if (editingTask) {
        await api.tasks.update(editingTask.id, data);
      } else {
        await api.tasks.create(data);
      }
      setTaskForm(null);
      setEditingTask(null);
      await loadTasks();
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err));
    } finally {
      setSavingTask(false);
    }
  }

  async function deleteTask(task: TaskRecord) {
    if (!confirm(`Delete "${task.name}"?`)) return;
    try {
      await api.tasks.remove(task.id);
      await loadTasks();
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err));
    }
  }

  async function createServer(e: React.FormEvent) {
    e.preventDefault();
    setError(null);
    try {
      const result = await api.servers.create({
        name: serverName,
        hostname: serverHostname || undefined,
        description: serverDescription || undefined,
      });
      setNewToken(result);
      setServerName("");
      setServerHostname("");
      setServerDescription("");
      await loadServers();
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err));
    }
  }

  async function rotateToken(id: number) {
    try {
      const result = await api.servers.rotateToken(id);
      setNewToken(result);
      await loadServers();
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err));
    }
  }

  async function deleteServer(id: number) {
    if (!confirm("Remove this server and all its tracked tasks?")) return;
    try {
      await api.servers.remove(id);
      await loadServers();
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err));
    }
  }

  return (
    <>
      <div className="d-flex align-items-center mb-3">
        <h2 className="page-title mb-0">Servers &amp; Tasks</h2>
        {isAdmin && (
          <button className="btn btn-outline-secondary ms-auto" onClick={() => setManagingServers((v) => !v)}>
            {managingServers ? "Back to tasks" : "Manage servers"}
          </button>
        )}
      </div>
      {error && <div className="alert alert-danger">{error}</div>}

      {managingServers ? (
        <>
          <div className="card mb-3">
            <div className="card-header">
              <h3 className="card-title">Add a server</h3>
            </div>
            <form onSubmit={createServer}>
              <div className="card-body row g-3">
                <div className="col-md-4">
                  <label className="form-label">Server name</label>
                  <input
                    className="form-control"
                    required
                    placeholder="e.g. nas01"
                    value={serverName}
                    onChange={(e) => setServerName(e.target.value)}
                  />
                </div>
                <div className="col-md-4">
                  <label className="form-label">Hostname</label>
                  <input
                    className="form-control"
                    placeholder="optional"
                    value={serverHostname}
                    onChange={(e) => setServerHostname(e.target.value)}
                  />
                </div>
                <div className="col-md-4">
                  <label className="form-label">Description</label>
                  <input
                    className="form-control"
                    placeholder="optional"
                    value={serverDescription}
                    onChange={(e) => setServerDescription(e.target.value)}
                  />
                </div>
              </div>
              <div className="card-footer">
                <button type="submit" className="btn btn-primary">
                  Add server
                </button>
              </div>
            </form>
          </div>

          {newToken && (
            <div className="card mb-3">
              <div className="card-header">
                <h3 className="card-title">Agent token for {newToken.server.name}</h3>
              </div>
              <div className="card-body">
                <p className="text-secondary">This token is only shown once — copy it now.</p>
                <div className="input-group mb-3">
                  <code className="form-control">{newToken.token}</code>
                  <CopyButton text={newToken.token} />
                </div>
                <p className="text-secondary">
                  Install the agent on the server (run as root — put sudo right after the pipe, not before curl):
                </p>
                <div className="input-group">
                  <pre className="form-control text-wrap mb-0">{installCommand(newToken.token)}</pre>
                  <CopyButton text={installCommand(newToken.token)} />
                </div>
              </div>
              <div className="card-footer">
                <button className="btn" onClick={() => setNewToken(null)}>
                  Dismiss
                </button>
              </div>
            </div>
          )}

          {uninstallFor && (
            <div className="card mb-3">
              <div className="card-header">
                <h3 className="card-title">Uninstall agent from {uninstallFor.name}</h3>
              </div>
              <div className="card-body">
                <p className="text-secondary">Run this on the server as root to stop and remove the agent (its entry here is kept):</p>
                <div className="input-group">
                  <pre className="form-control text-wrap mb-0">{uninstallCommand()}</pre>
                  <CopyButton text={uninstallCommand()} />
                </div>
              </div>
              <div className="card-footer">
                <button className="btn" onClick={() => setUninstallFor(null)}>
                  Dismiss
                </button>
              </div>
            </div>
          )}

          <div className="card">
            <div className="table-responsive">
              <table className="table table-vcenter card-table">
                <thead>
                  <tr>
                    <th>Name</th>
                    <th>Hostname</th>
                    <th>Token</th>
                    <th>Last seen</th>
                    <th className="w-1">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {servers.map((s) => (
                    <tr key={s.id}>
                      <td>{s.name}</td>
                      <td>{s.hostname ?? "—"}</td>
                      <td className="text-secondary">{s.apiTokenPrefix}…</td>
                      <td>{s.lastSeenAt ? formatDateTime(new Date(s.lastSeenAt)) : "never"}</td>
                      <td>
                        <div className="btn-list flex-nowrap">
                          <button className="btn btn-sm" onClick={() => rotateToken(s.id)}>
                            Rotate token
                          </button>
                          <button className="btn btn-sm" onClick={() => setUninstallFor(s)}>
                            Uninstall
                          </button>
                          <button className="btn btn-sm btn-outline-danger" onClick={() => deleteServer(s.id)}>
                            Delete
                          </button>
                        </div>
                      </td>
                    </tr>
                  ))}
                  {servers.length === 0 && (
                    <tr>
                      <td colSpan={5} className="text-secondary text-center">
                        No servers registered yet.
                      </td>
                    </tr>
                  )}
                </tbody>
              </table>
            </div>
          </div>
        </>
      ) : (
        <>
          <div className="card mb-3">
            <div className="card-body">
              <div className="row g-2 align-items-end">
                <div className="col-md-3">
                  <label className="form-label">Server</label>
                  <select
                    className="form-select"
                    value={filters.serverId ?? ""}
                    onChange={(e) => setFilters({ ...filters, serverId: e.target.value ? Number(e.target.value) : undefined })}
                  >
                    <option value="">All servers</option>
                    {servers.map((s) => (
                      <option key={s.id} value={s.id}>
                        {s.name}
                      </option>
                    ))}
                  </select>
                </div>
                <div className="col-md-3">
                  <label className="form-label">Schedule type</label>
                  <select
                    className="form-select"
                    value={filters.scheduleType ?? ""}
                    onChange={(e) => setFilters({ ...filters, scheduleType: e.target.value || undefined })}
                  >
                    <option value="">All schedule types</option>
                    {SCHEDULE_TYPE_OPTIONS.map((opt) => (
                      <option key={opt.value} value={opt.value}>
                        {opt.label}
                      </option>
                    ))}
                  </select>
                </div>
                <div className="col-md-3">
                  <label className="form-label">Search</label>
                  <input
                    type="search"
                    className="form-control"
                    placeholder="Name or command…"
                    value={filters.search}
                    onChange={(e) => setFilters({ ...filters, search: e.target.value })}
                  />
                </div>
                <div className="col-md-3 d-flex align-items-center gap-3">
                  <label className="form-check mb-0">
                    <input
                      type="checkbox"
                      className="form-check-input"
                      checked={filters.includeStale}
                      onChange={(e) => setFilters({ ...filters, includeStale: e.target.checked })}
                    />
                    <span className="form-check-label">Show stale/missing</span>
                  </label>
                  {canEditTasks && (
                    <button className="btn btn-primary ms-auto" onClick={openAddTask} disabled={servers.length === 0}>
                      Add task
                    </button>
                  )}
                </div>
              </div>
            </div>
          </div>

          {taskForm && (
            <div className="card mb-3">
              <div className="card-header">
                <h3 className="card-title">{editingTask ? "Edit task" : "Add a task manually"}</h3>
              </div>
              <form onSubmit={submitTask}>
                <div className="card-body row g-3">
                  {!editingTask && (
                    <div className="col-md-3">
                      <label className="form-label">Server</label>
                      <select
                        className="form-select"
                        required
                        value={newTaskServerId ?? ""}
                        onChange={(e) => setNewTaskServerId(e.target.value ? Number(e.target.value) : undefined)}
                      >
                        <option value="">Choose a server…</option>
                        {servers.map((s) => (
                          <option key={s.id} value={s.id}>
                            {s.name}
                          </option>
                        ))}
                      </select>
                    </div>
                  )}
                  <div className="col-md-3">
                    <label className="form-label">Schedule type</label>
                    <select
                      className="form-select"
                      value={taskForm.scheduleType}
                      onChange={(e) => setTaskForm({ ...taskForm, scheduleType: e.target.value as ScheduleType })}
                    >
                      {SCHEDULE_TYPE_OPTIONS.map((opt) => (
                        <option key={opt.value} value={opt.value}>
                          {opt.label}
                        </option>
                      ))}
                    </select>
                  </div>
                  <div className="col-md-6">
                    <label className="form-label">Name</label>
                    <input
                      className="form-control"
                      required
                      placeholder="e.g. postgres-backup"
                      value={taskForm.name}
                      onChange={(e) => setTaskForm({ ...taskForm, name: e.target.value })}
                    />
                  </div>
                  <div className="col-md-6">
                    <label className="form-label">Command / description</label>
                    <input
                      className="form-control"
                      placeholder="e.g. docker exec pg-backup /backup.sh"
                      value={taskForm.command}
                      onChange={(e) => setTaskForm({ ...taskForm, command: e.target.value })}
                    />
                  </div>
                  <div className="col-md-6">
                    <label className="form-label">Schedule</label>
                    <input
                      className="form-control"
                      placeholder="e.g. daily at 02:00, or 0 2 * * *"
                      value={taskForm.scheduleExpression}
                      onChange={(e) => setTaskForm({ ...taskForm, scheduleExpression: e.target.value })}
                    />
                  </div>
                  <div className="col-12">
                    <label className="form-check">
                      <input
                        type="checkbox"
                        className="form-check-input"
                        checked={taskForm.enabled}
                        onChange={(e) => setTaskForm({ ...taskForm, enabled: e.target.checked })}
                      />
                      <span className="form-check-label">Enabled</span>
                    </label>
                  </div>
                </div>
                <div className="card-footer d-flex gap-2">
                  <button type="submit" className="btn btn-primary" disabled={savingTask}>
                    {editingTask ? "Save changes" : "Add task"}
                  </button>
                  <button
                    type="button"
                    className="btn"
                    onClick={() => {
                      setTaskForm(null);
                      setEditingTask(null);
                    }}
                  >
                    Cancel
                  </button>
                </div>
              </form>
            </div>
          )}

          {tasks && groups.length === 0 && (
            <div className="card">
              <div className="card-body text-secondary">
                No scheduled tasks found yet. Install the agent on a server to auto-report cron/systemd tasks, or use
                "Add task" above for things like Docker-based backup jobs.
              </div>
            </div>
          )}

          {groups.map((group) => {
            const byType = new Map<string, TaskRecord[]>();
            for (const task of group.tasks) {
              const list = byType.get(task.scheduleType) ?? [];
              list.push(task);
              byType.set(task.scheduleType, list);
            }
            return (
              <div className="card mb-3" key={group.serverId}>
                <div className="card-header">
                  <h3 className="card-title">{group.serverName}</h3>
                </div>
                {[...byType.entries()].map(([scheduleType, groupTasks]) => (
                  <div key={scheduleType}>
                    <div className="card-body py-2 bg-secondary-lt">
                      <strong>{SCHEDULE_TYPE_LABELS[scheduleType] ?? scheduleType}</strong>
                    </div>
                    <div className="table-responsive">
                      <table className="table table-vcenter card-table mb-0">
                        <thead>
                          <tr>
                            <th>Name</th>
                            <th>Command</th>
                            <th>Schedule</th>
                            <th>Next run</th>
                            <th>Status</th>
                            {canEditTasks && <th className="w-1">Actions</th>}
                          </tr>
                        </thead>
                        <tbody>
                          {groupTasks.map((task) => {
                            const nextRun = computeNextRun(task);
                            return (
                              <tr key={task.id}>
                                <td>{task.name}</td>
                                <td className="text-secondary">{task.command ?? "—"}</td>
                                <td>
                                  <div>{describeSchedule(task)}</div>
                                  {task.scheduleExpression && (
                                    <span className="text-secondary small">{task.scheduleExpression}</span>
                                  )}
                                </td>
                                <td>
                                  {nextRun ? (
                                    <span
                                      title={
                                        nextRun.estimated
                                          ? "Estimated from the cron expression in your browser's timezone — the server may run in a different timezone"
                                          : undefined
                                      }
                                    >
                                      {nextRun.estimated ? "~" : ""}
                                      {formatDateTime(nextRun.date)}
                                    </span>
                                  ) : (
                                    "—"
                                  )}
                                </td>
                                <td>
                                  {task.isStale ? (
                                    <span className="badge bg-red-lt text-red me-1">Missing</span>
                                  ) : task.enabled ? (
                                    <span className="badge bg-green-lt text-green me-1">Enabled</span>
                                  ) : (
                                    <span className="badge bg-secondary-lt text-secondary me-1">Disabled</span>
                                  )}
                                  {task.origin === "manual" && <span className="badge bg-blue-lt">Manual</span>}
                                </td>
                                {canEditTasks && (
                                  <td>
                                    {task.origin === "manual" && (
                                      <div className="btn-list flex-nowrap">
                                        <button className="btn btn-sm" onClick={() => openEditTask(task)}>
                                          Edit
                                        </button>
                                        <button className="btn btn-sm btn-outline-danger" onClick={() => deleteTask(task)}>
                                          Delete
                                        </button>
                                      </div>
                                    )}
                                  </td>
                                )}
                              </tr>
                            );
                          })}
                        </tbody>
                      </table>
                    </div>
                  </div>
                ))}
              </div>
            );
          })}
        </>
      )}
    </>
  );
}