homeio

1"use client";
2
3import { useState } from "react";
4import {
5  CRON_PRESETS,
6  SHELL_COMMAND_ALLOWLIST,
7  type CreateScheduledTaskInput,
8  type ScheduledTaskConfig,
9  type ScheduledTaskRecord,
10  type ScheduledTaskType,
11} from "@/lib/shared/contracts/scheduled-tasks";
12import { useScheduledTasks } from "@/modules/settings/hooks/useScheduledTasks";
13import { useInstalledApps } from "@/modules/apps/hooks/useInstalledApps";
14import { SectionDivider } from "@/modules/settings/components/panel/controls";
15import { SETTINGS_PANEL_INSET } from "@/modules/settings/components/panel/surface";
16import {
17  AlertTriangle,
18  Check,
19  ChevronDownIcon as ChevronDown,
20  Clock,
21  Play,
22  Plus,
23  Trash2,
24} from "@/components/icons/platform-icons";
25import { cn } from "@/lib/utils";
26
27type TaskFormState = {
28  label: string;
29  taskType: ScheduledTaskType;
30  shellCommand: string;
31  script: string;
32  appId: string;
33  appName: string;
34  cronPreset: string;
35  customCron: string;
36};
37
38const TASK_TYPE_LABELS: Record<ScheduledTaskType, string> = {
39  shell: "Shell Command",
40  script: "Custom Script",
41  "restart-app": "Restart App",
42  backup: "Run Backup",
43  "pull-images": "Pull Docker Images",
44};
45
46const DEFAULT_FORM: TaskFormState = {
47  label: "",
48  taskType: "shell",
49  shellCommand: SHELL_COMMAND_ALLOWLIST[0],
50  script: "",
51  appId: "",
52  appName: "",
53  cronPreset: CRON_PRESETS[1].value,
54  customCron: "0 3 * * *",
55};
56
57function formatRelative(iso: string | null, future = false): string {
58  if (!iso) return "Never";
59  const diff = new Date(iso).getTime() - Date.now();
60  const absDiff = Math.abs(diff);
61  const minutes = Math.floor(absDiff / 60_000);
62  const suffix = future ? (diff > 0 ? " from now" : " ago") : " ago";
63  if (minutes < 1) return future && diff > 0 ? "< 1 min" : "Just now";
64  if (minutes < 60) return `${minutes}m${suffix}`;
65  const hours = Math.floor(minutes / 60);
66  if (hours < 24) return `${hours}h${suffix}`;
67  return `${Math.floor(hours / 24)}d${suffix}`;
68}
69
70function buildConfig(form: TaskFormState): ScheduledTaskConfig {
71  if (form.taskType === "shell") return { type: "shell", command: form.shellCommand };
72  if (form.taskType === "script") return { type: "script", script: form.script };
73  if (form.taskType === "restart-app") return { type: "restart-app", appId: form.appId, appName: form.appName };
74  if (form.taskType === "backup") return { type: "backup" };
75  return { type: "pull-images" };
76}
77
78function buildCron(form: TaskFormState): string {
79  return form.cronPreset === "custom" ? form.customCron : form.cronPreset;
80}
81
82// ── Field helpers ────────────────────────────────────────────────────────────
83
84function Field({ label, children }: { label: string; children: React.ReactNode }) {
85  return (
86    <div className="flex flex-col gap-1.5">
87      <label className="text-[11px] font-medium uppercase tracking-[0.14em] text-muted-foreground/70">
88        {label}
89      </label>
90      {children}
91    </div>
92  );
93}
94
95const inputCls = "h-8 w-full rounded-lg border border-glass-border bg-background/55 px-3 text-xs text-foreground placeholder:text-muted-foreground/50 focus:border-primary/40 focus:outline-none";
96const selectCls = "h-8 w-full cursor-pointer appearance-none rounded-lg border border-glass-border bg-background/55 px-3 text-xs text-foreground focus:border-primary/40 focus:outline-none";
97
98// ── Task row ─────────────────────────────────────────────────────────────────
99
100function TaskRow({
101  task,
102  onToggle,
103  onRunNow,
104  onDelete,
105  isRunning,
106}: {
107  task: ScheduledTaskRecord;
108  onToggle: () => void;
109  onRunNow: () => void;
110  onDelete: () => void;
111  isRunning: boolean;
112}) {
113  const [expanded, setExpanded] = useState(false);
114
115  return (
116    <div className={cn(SETTINGS_PANEL_INSET, "overflow-hidden")}>
117      {/* Header */}
118      <button
119        type="button"
120        className="flex w-full items-center gap-3 px-4 py-3 text-left"
121        onClick={() => setExpanded((v) => !v)}
122      >
123        <div className={cn(
124          "flex size-7 shrink-0 items-center justify-center rounded-lg border border-glass-border bg-background/55",
125          task.enabled ? "text-primary" : "text-muted-foreground/40",
126        )}>
127          <Clock className="size-3.5" />
128        </div>
129        <div className="min-w-0 flex-1">
130          <div className="truncate text-sm font-medium text-foreground">{task.label}</div>
131          <div className="truncate text-[11px] text-muted-foreground/70">
132            {TASK_TYPE_LABELS[task.taskType]} · <span className="font-mono">{task.cronExpression}</span>
133          </div>
134        </div>
135        <div className="flex shrink-0 items-center gap-2">
136          {task.lastRunStatus === "error" && <AlertTriangle className="size-3.5 text-status-red" />}
137          {task.lastRunStatus === "success" && <Check className="size-3.5 text-status-green" />}
138          <ChevronDown className={cn("size-4 text-muted-foreground/50 transition-transform", expanded && "rotate-180")} />
139        </div>
140      </button>
141
142      {/* Expanded detail */}
143      {expanded && (
144        <div className="border-t border-glass-border/50 px-4 py-3">
145          {/* Info rows */}
146          <div className="mb-3 divide-y divide-glass-border/40">
147            <div className="flex items-center justify-between py-1.5">
148              <span className="text-[11px] text-muted-foreground">Last run</span>
149              <span className={cn("text-[11px] font-medium", task.lastRunStatus === "error" ? "text-status-red" : "text-foreground")}>
150                {formatRelative(task.lastRunAt)}
151              </span>
152            </div>
153            <div className="flex items-center justify-between py-1.5">
154              <span className="text-[11px] text-muted-foreground">Next run</span>
155              <span className="text-[11px] font-medium text-foreground">
156                {task.nextRunAt ? formatRelative(task.nextRunAt, true) : "—"}
157              </span>
158            </div>
159            {task.lastRunOutput && (
160              <div className="py-1.5">
161                <span className="text-[11px] text-muted-foreground">Output</span>
162                <div className={cn(
163                  "mt-1 rounded-md border border-glass-border/50 bg-background/40 px-2.5 py-2 font-mono text-[11px] break-all",
164                  task.lastRunStatus === "error" ? "text-status-red" : "text-foreground/80",
165                )}>
166                  {task.lastRunOutput}
167                </div>
168              </div>
169            )}
170          </div>
171
172          {/* Actions */}
173          <div className="flex items-center gap-2">
174            <button
175              type="button"
176              onClick={onToggle}
177              className={cn(
178                "rounded-lg border border-glass-border px-2.5 py-1 text-[11px] font-medium transition-colors",
179                task.enabled ? "bg-status-green/10 text-status-green" : "bg-background/55 text-muted-foreground hover:text-foreground",
180              )}
181            >
182              {task.enabled ? "Enabled" : "Disabled"}
183            </button>
184            <button
185              type="button"
186              onClick={onRunNow}
187              disabled={isRunning}
188              className="inline-flex items-center gap-1.5 rounded-lg border border-glass-border bg-background/55 px-2.5 py-1 text-[11px] text-muted-foreground transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
189            >
190              <Play className="size-3" />
191              {isRunning ? "Running…" : "Run now"}
192            </button>
193            <button
194              type="button"
195              onClick={onDelete}
196              className="ml-auto inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1 text-[11px] text-muted-foreground/50 transition-colors hover:bg-status-red/10 hover:text-status-red"
197            >
198              <Trash2 className="size-3" />
199              Delete
200            </button>
201          </div>
202        </div>
203      )}
204    </div>
205  );
206}
207
208// ── Create form ──────────────────────────────────────────────────────────────
209
210function CreateTaskForm({
211  onSubmit,
212  onCancel,
213}: {
214  onSubmit: (input: CreateScheduledTaskInput) => Promise<void>;
215  onCancel: () => void;
216}) {
217  const [form, setForm] = useState<TaskFormState>(DEFAULT_FORM);
218  const [submitting, setSubmitting] = useState(false);
219  const { data: installedApps = [] } = useInstalledApps();
220  const patch = (u: Partial<TaskFormState>) => setForm((f) => ({ ...f, ...u }));
221  const cronExpression = buildCron(form);
222
223  async function handleSubmit(e: React.FormEvent) {
224    e.preventDefault();
225    if (!form.label.trim()) return;
226    if (form.taskType === "script" && !form.script.trim()) return;
227    if (form.taskType === "restart-app" && !form.appId) return;
228    setSubmitting(true);
229    try {
230      await onSubmit({
231        label: form.label.trim(),
232        taskType: form.taskType,
233        taskConfig: buildConfig(form),
234        cronExpression,
235        enabled: true,
236      });
237    } finally {
238      setSubmitting(false);
239    }
240  }
241
242  return (
243    <form onSubmit={handleSubmit} className={cn(SETTINGS_PANEL_INSET, "flex flex-col gap-4 p-4")}>
244      <div className="text-sm font-semibold text-foreground">New Task</div>
245
246      <Field label="Label">
247        <input
248          required
249          value={form.label}
250          onChange={(e) => patch({ label: e.target.value })}
251          placeholder="e.g. Clean Docker images"
252          className={inputCls}
253        />
254      </Field>
255
256      <Field label="Type">
257        <select
258          value={form.taskType}
259          onChange={(e) => patch({ taskType: e.target.value as ScheduledTaskType })}
260          className={selectCls}
261        >
262          {(Object.keys(TASK_TYPE_LABELS) as ScheduledTaskType[]).map((t) => (
263            <option key={t} value={t}>{TASK_TYPE_LABELS[t]}</option>
264          ))}
265        </select>
266      </Field>
267
268      {form.taskType === "shell" && (
269        <Field label="Command">
270          <select
271            value={form.shellCommand}
272            onChange={(e) => patch({ shellCommand: e.target.value })}
273            className={cn(selectCls, "font-mono")}
274          >
275            {SHELL_COMMAND_ALLOWLIST.map((cmd) => (
276              <option key={cmd} value={cmd}>{cmd}</option>
277            ))}
278          </select>
279        </Field>
280      )}
281
282      {form.taskType === "script" && (
283        <Field label="Bash script">
284          <textarea
285            required
286            rows={5}
287            value={form.script}
288            onChange={(e) => patch({ script: e.target.value })}
289            placeholder={"#!/bin/bash\n# your commands here"}
290            spellCheck={false}
291            className="w-full resize-y rounded-lg border border-glass-border bg-background/55 px-3 py-2 font-mono text-xs text-foreground placeholder:text-muted-foreground/40 focus:border-primary/40 focus:outline-none"
292          />
293          <p className="text-[11px] text-muted-foreground/60">
294            Runs via <code className="font-mono">bash -c</code> · 2-minute timeout
295          </p>
296        </Field>
297      )}
298
299      {form.taskType === "restart-app" && (
300        <Field label="App">
301          <select
302            value={form.appId}
303            onChange={(e) => {
304              const app = installedApps.find((a) => a.id === e.target.value);
305              patch({ appId: e.target.value, appName: app?.name ?? "" });
306            }}
307            className={selectCls}
308          >
309            <option value="">Select app…</option>
310            {installedApps.map((app) => (
311              <option key={app.id} value={app.id}>{app.name}</option>
312            ))}
313          </select>
314        </Field>
315      )}
316
317      <Field label="Schedule">
318        <select
319          value={form.cronPreset}
320          onChange={(e) => patch({ cronPreset: e.target.value })}
321          className={selectCls}
322        >
323          {CRON_PRESETS.map((p) => (
324            <option key={p.value} value={p.value}>{p.label}</option>
325          ))}
326        </select>
327        {form.cronPreset === "custom" && (
328          <input
329            value={form.customCron}
330            onChange={(e) => patch({ customCron: e.target.value })}
331            placeholder="* * * * *"
332            className={cn(inputCls, "font-mono mt-1.5")}
333          />
334        )}
335        <span className="font-mono text-[11px] text-muted-foreground/60">{cronExpression}</span>
336      </Field>
337
338      <div className="flex items-center justify-end gap-2 border-t border-glass-border/50 pt-3">
339        <button
340          type="button"
341          onClick={onCancel}
342          className="rounded-lg px-3 py-1.5 text-xs text-muted-foreground transition-colors hover:text-foreground"
343        >
344          Cancel
345        </button>
346        <button
347          type="submit"
348          disabled={submitting}
349          className="rounded-lg bg-primary/15 px-3 py-1.5 text-xs font-medium text-primary transition-colors hover:bg-primary/25 disabled:cursor-not-allowed disabled:opacity-50"
350        >
351          {submitting ? "Creating…" : "Create task"}
352        </button>
353      </div>
354    </form>
355  );
356}
357
358// ── Section ──────────────────────────────────────────────────────────────────
359
360export function ScheduledTasksSection() {
361  const { tasks, createTask, updateTask, deleteTask, runNow } = useScheduledTasks();
362  const [showForm, setShowForm] = useState(false);
363  const [runningId, setRunningId] = useState<string | null>(null);
364
365  async function handleRunNow(id: string) {
366    setRunningId(id);
367    try { await runNow(id); } finally { setRunningId(null); }
368  }
369
370  async function handleCreate(input: CreateScheduledTaskInput) {
371    await createTask(input);
372    setShowForm(false);
373  }
374
375  return (
376    <div className="flex flex-col gap-1">
377      <SectionDivider title="Tasks" />
378
379      {tasks.length === 0 && !showForm && (
380        <div className={cn(SETTINGS_PANEL_INSET, "px-4 py-6 text-center text-xs text-muted-foreground")}>
381          No scheduled tasks yet.
382        </div>
383      )}
384
385      <div className="flex flex-col gap-1.5">
386        {tasks.map((task) => (
387          <TaskRow
388            key={task.id}
389            task={task}
390            isRunning={runningId === task.id}
391            onToggle={() => void updateTask(task.id, { enabled: !task.enabled })}
392            onRunNow={() => void handleRunNow(task.id)}
393            onDelete={() => void deleteTask(task.id)}
394          />
395        ))}
396
397        {showForm && (
398          <CreateTaskForm onSubmit={handleCreate} onCancel={() => setShowForm(false)} />
399        )}
400      </div>
401
402      {!showForm && (
403        <button
404          type="button"
405          onClick={() => setShowForm(true)}
406          className="mt-1 flex items-center gap-1.5 rounded-lg px-2 py-2 text-xs text-muted-foreground/60 transition-colors hover:text-foreground/80"
407        >
408          <Plus className="size-3.5" />
409          Add task
410        </button>
411      )}
412    </div>
413  );
414}
415