homeio

1"use client";
2
3import {
4  AlertDialog,
5  AlertDialogAction,
6  AlertDialogCancel,
7  AlertDialogContent,
8  AlertDialogDescription,
9  AlertDialogFooter,
10  AlertDialogHeader,
11  AlertDialogTitle,
12  AlertDialogTrigger,
13} from "@/components/ui/alert-dialog";
14import {
15  InfoBanner,
16  SectionDivider,
17  Toggle,
18  formatStorageSize,
19} from "@/modules/settings/components/panel/controls";
20import { SETTINGS_PANEL_INSET } from "@/modules/settings/components/panel/surface";
21import {
22  DAY_OF_WEEK_OPTIONS,
23  SCHEDULE_TIME_OPTIONS,
24  type BackupSettingsDraft,
25  type SettingsBackend,
26} from "@/modules/settings/components/panel/types";
27import { Download, Upload } from "@/components/icons/platform-icons";
28import { useEffect, useState } from "react";
29import { cn } from "@/lib/utils";
30
31type BackupSectionProps = {
32  data: SettingsBackend["backup"];
33  capabilities: SettingsBackend["capabilities"]["backup"];
34  settingsDraft: BackupSettingsDraft;
35  onSettingsChange: (patch: Partial<BackupSettingsDraft>) => void;
36  onRunBackupNow: () => Promise<void>;
37  onRestoreBackup: (backupId: string) => Promise<void>;
38};
39
40const 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 disabled:cursor-not-allowed disabled:opacity-50";
41
42function PreferenceRow({
43  label,
44  description,
45  children,
46}: {
47  label: string;
48  description?: string;
49  children: React.ReactNode;
50}) {
51  return (
52    <div className={cn(SETTINGS_PANEL_INSET, "flex items-center justify-between gap-4 px-4 py-3")}>
53      <div className="min-w-0">
54        <div className="text-sm text-foreground">{label}</div>
55        {description && (
56          <div className="mt-0.5 text-[11px] text-muted-foreground/70">{description}</div>
57        )}
58      </div>
59      {children}
60    </div>
61  );
62}
63
64export function BackupSection({
65  data,
66  capabilities,
67  settingsDraft,
68  onSettingsChange,
69  onRunBackupNow,
70  onRestoreBackup,
71}: BackupSectionProps) {
72  const [restoreBackupId, setRestoreBackupId] = useState<string | null>(null);
73
74  useEffect(() => {
75    if (!restoreBackupId && data.backups[0]) {
76      setRestoreBackupId(data.backups[0].id);
77    }
78  }, [data.backups, restoreBackupId]);
79
80  const selectedBackup =
81    data.backups.find((b) => b.id === restoreBackupId) ?? data.backups[0] ?? null;
82
83  return (
84    <div className="flex flex-col gap-1">
85      {data.settings.error && <InfoBanner text={data.settings.error} variant="warning" />}
86      {data.runNow.error && <InfoBanner text={data.runNow.error} variant="warning" />}
87      {data.restore.error && <InfoBanner text={data.restore.error} variant="warning" />}
88
89      {/* ── Schedule ── */}
90      <SectionDivider title="Schedule" />
91      <div className="flex flex-col gap-1.5">
92        <div className={cn(SETTINGS_PANEL_INSET, "px-4 py-1")}>
93          <Toggle
94            label="Automatic backups"
95            description="Run full local backups of Homeio-managed data on the schedule below."
96            enabled={settingsDraft.enabled}
97            onToggle={() => onSettingsChange({ enabled: !settingsDraft.enabled })}
98            disabled={capabilities.schedule.disabled}
99            disabledReason={capabilities.schedule.disabledReason}
100          />
101        </div>
102
103        <PreferenceRow label="Frequency">
104          <select
105            value={settingsDraft.frequency}
106            onChange={(e) => onSettingsChange({ frequency: e.target.value as "daily" | "weekly" })}
107            className={cn(selectCls, "w-36")}
108          >
109            <option value="daily">Daily</option>
110            <option value="weekly">Weekly</option>
111          </select>
112        </PreferenceRow>
113
114        {settingsDraft.frequency === "weekly" && (
115          <PreferenceRow label="Day of week">
116            <select
117              value={settingsDraft.dayOfWeek}
118              onChange={(e) => onSettingsChange({ dayOfWeek: e.target.value as BackupSettingsDraft["dayOfWeek"] })}
119              className={cn(selectCls, "w-36")}
120            >
121              {DAY_OF_WEEK_OPTIONS.map((d) => (
122                <option key={d} value={d}>{d.charAt(0).toUpperCase() + d.slice(1)}</option>
123              ))}
124            </select>
125          </PreferenceRow>
126        )}
127
128        <PreferenceRow label="Time" description="24-hour format">
129          <select
130            value={settingsDraft.time}
131            onChange={(e) => onSettingsChange({ time: e.target.value })}
132            className={cn(selectCls, "w-36 font-mono")}
133          >
134            {SCHEDULE_TIME_OPTIONS.map((t) => (
135              <option key={t} value={t}>{t}</option>
136            ))}
137          </select>
138        </PreferenceRow>
139
140        <PreferenceRow label="Retention" description="Backups to keep in /DATA/Backups/homeio">
141          <input
142            value={settingsDraft.retentionCount}
143            onChange={(e) => onSettingsChange({ retentionCount: e.target.value })}
144            type="number"
145            min={1}
146            className="h-8 w-36 rounded-lg border border-glass-border bg-background/55 px-3 text-xs text-foreground focus:border-primary/40 focus:outline-none"
147          />
148        </PreferenceRow>
149
150        <PreferenceRow label="Local path" description="Backups are stored locally only">
151          <span className="font-mono text-xs text-muted-foreground">{data.backupRoot}</span>
152        </PreferenceRow>
153      </div>
154
155      {/* ── Actions ── */}
156      <SectionDivider title="Backup & Restore" />
157      <div className="flex flex-col gap-1.5">
158        <div className={cn(SETTINGS_PANEL_INSET, "flex items-center justify-between gap-4 px-4 py-3")}>
159          <div className="min-w-0">
160            <div className="text-sm text-foreground">Run backup now</div>
161            <div className="mt-0.5 text-[11px] text-muted-foreground/70">Creates a full archive immediately</div>
162          </div>
163          <button
164            onClick={() => void onRunBackupNow()}
165            disabled={capabilities.runNow.disabled || data.runNow.isPending}
166            title={capabilities.runNow.disabledReason}
167            className="inline-flex items-center gap-1.5 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"
168          >
169            <Upload className="size-3" />
170            {data.runNow.isPending ? "Running…" : "Run now"}
171          </button>
172        </div>
173
174        <div className={cn(SETTINGS_PANEL_INSET, "flex items-center justify-between gap-4 px-4 py-3")}>
175          <div className="min-w-0">
176            <div className="text-sm text-foreground">Restore from backup</div>
177            <div className="mt-0.5 text-[11px] text-muted-foreground/70">
178              {selectedBackup
179                ? `Selected: ${new Intl.DateTimeFormat(undefined, { dateStyle: "medium", timeStyle: "short" }).format(new Date(selectedBackup.createdAt))}`
180                : "No backup selected"}
181            </div>
182          </div>
183          <AlertDialog>
184            <AlertDialogTrigger asChild>
185              <button
186                disabled={capabilities.restore.disabled || !selectedBackup || data.restore.isPending}
187                title={capabilities.restore.disabledReason}
188                className="inline-flex items-center gap-1.5 rounded-lg border border-glass-border bg-background/55 px-3 py-1.5 text-xs text-muted-foreground transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
189              >
190                <Download className="size-3" />
191                {data.restore.isPending ? "Restoring…" : "Restore"}
192              </button>
193            </AlertDialogTrigger>
194            <AlertDialogContent>
195              <AlertDialogHeader>
196                <AlertDialogTitle>Restore full system backup?</AlertDialogTitle>
197                <AlertDialogDescription>
198                  {selectedBackup
199                    ? `This will fully replace the current database and /DATA contents with ${selectedBackup.id}, then reboot the server.`
200                    : "Select a backup first."}
201                </AlertDialogDescription>
202              </AlertDialogHeader>
203              <AlertDialogFooter>
204                <AlertDialogCancel>Cancel</AlertDialogCancel>
205                <AlertDialogAction
206                  onClick={(e) => {
207                    e.preventDefault();
208                    if (!selectedBackup) return;
209                    void onRestoreBackup(selectedBackup.id);
210                  }}
211                  disabled={!selectedBackup || data.restore.isPending}
212                >
213                  {data.restore.isPending ? "Restoring…" : "Restore Backup"}
214                </AlertDialogAction>
215              </AlertDialogFooter>
216            </AlertDialogContent>
217          </AlertDialog>
218        </div>
219      </div>
220
221      {/* ── Recent Backups ── */}
222      <SectionDivider title="Recent Backups" />
223      {data.backups.length === 0 ? (
224        <div className={cn(SETTINGS_PANEL_INSET, "px-4 py-3 text-xs text-muted-foreground")}>
225          No completed backups yet.
226        </div>
227      ) : (
228        <div className={cn(SETTINGS_PANEL_INSET, "divide-y divide-glass-border/50 overflow-hidden")}>
229          {data.backups.map((backup) => {
230            const isSelected = selectedBackup?.id === backup.id;
231            return (
232              <button
233                key={backup.id}
234                type="button"
235                onClick={() => setRestoreBackupId(backup.id)}
236                className={cn(
237                  "flex w-full items-center gap-3 px-4 py-3 text-left transition-colors",
238                  isSelected ? "bg-primary/8" : "hover:bg-background/40",
239                )}
240              >
241                <div className={cn(
242                  "size-1.5 shrink-0 rounded-full",
243                  backup.status === "completed" ? "bg-status-green" : "bg-status-red",
244                )} />
245                <div className="min-w-0 flex-1">
246                  <div className="text-xs font-medium text-foreground">
247                    {new Intl.DateTimeFormat(undefined, { dateStyle: "medium", timeStyle: "short" }).format(new Date(backup.createdAt))}
248                  </div>
249                  <div className="text-[11px] text-muted-foreground/70">
250                    {backup.hostname} · {formatStorageSize(backup.sizeBytes)}
251                  </div>
252                </div>
253                {isSelected && (
254                  <span className="text-[11px] font-medium text-primary">Selected</span>
255                )}
256              </button>
257            );
258          })}
259        </div>
260      )}
261    </div>
262  );
263}
264