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  DAY_OF_WEEK_OPTIONS,
16  SCHEDULE_TIME_OPTIONS,
17  type ScheduledRebootInput,
18  type SettingsBackend,
19} from "@/modules/settings/components/panel/types";
20import { InfoBanner, SectionDivider, Toggle } from "@/modules/settings/components/panel/controls";
21import { SETTINGS_PANEL_INSET } from "@/modules/settings/components/panel/surface";
22import { AlertTriangle, Loader2, Power, RefreshCw } from "@/components/icons/platform-icons";
23import { useEffect, useState } from "react";
24import { cn } from "@/lib/utils";
25
26type PowerSectionProps = {
27  power: SettingsBackend["power"];
28  onRebootNow: () => Promise<void>;
29  onShutdownNow: () => Promise<void>;
30  onSaveScheduledReboot: (input: ScheduledRebootInput) => Promise<void>;
31  onFactoryReset: () => Promise<void>;
32};
33
34const selectCls =
35  "h-8 w-36 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";
36
37function PreferenceRow({
38  label,
39  description,
40  children,
41}: {
42  label: string;
43  description?: string;
44  children: React.ReactNode;
45}) {
46  return (
47    <div className={cn(SETTINGS_PANEL_INSET, "flex items-center justify-between gap-4 px-4 py-3")}>
48      <div className="min-w-0">
49        <div className="text-sm text-foreground">{label}</div>
50        {description && (
51          <div className="mt-0.5 text-[11px] text-muted-foreground/70">{description}</div>
52        )}
53      </div>
54      {children}
55    </div>
56  );
57}
58
59export function PowerSection({
60  power,
61  onRebootNow,
62  onShutdownNow,
63  onSaveScheduledReboot,
64  onFactoryReset,
65}: PowerSectionProps) {
66  const rebooting = power.reboot.isPending;
67  const shuttingDown = power.shutdown.isPending;
68  const resetting = power.factoryReset.isPending;
69  const scheduledReboot = power.scheduledReboot;
70
71  const [scheduleEnabled, setScheduleEnabled] = useState(scheduledReboot.enabled);
72  const [scheduleFrequency, setScheduleFrequency] = useState(scheduledReboot.frequency);
73  const [scheduleDayOfWeek, setScheduleDayOfWeek] = useState(scheduledReboot.dayOfWeek);
74  const [scheduleTime, setScheduleTime] = useState(scheduledReboot.time);
75
76  useEffect(() => {
77    setScheduleEnabled(scheduledReboot.enabled);
78    setScheduleFrequency(scheduledReboot.frequency);
79    setScheduleDayOfWeek(scheduledReboot.dayOfWeek);
80    setScheduleTime(scheduledReboot.time);
81  }, [scheduledReboot.dayOfWeek, scheduledReboot.enabled, scheduledReboot.frequency, scheduledReboot.time]);
82
83  const scheduleDirty =
84    scheduleEnabled !== scheduledReboot.enabled ||
85    scheduleFrequency !== scheduledReboot.frequency ||
86    scheduleDayOfWeek !== scheduledReboot.dayOfWeek ||
87    scheduleTime !== scheduledReboot.time;
88
89  const scheduleDisabled = scheduledReboot.isLoading || scheduledReboot.isPending;
90
91  return (
92    <div className="flex flex-col gap-1">
93      {/* ── Power Management ── */}
94      <SectionDivider title="Power Management" />
95      <InfoBanner
96        text="These actions will affect all running services. Make sure to save your work before proceeding."
97        variant="warning"
98      />
99      {power.reboot.error && <InfoBanner text={power.reboot.error} variant="warning" />}
100      {power.shutdown.error && <InfoBanner text={power.shutdown.error} variant="warning" />}
101
102      <div className="grid grid-cols-2 gap-2">
103        <AlertDialog>
104          <AlertDialogTrigger asChild>
105            <button
106              disabled={rebooting || !power.reboot.available}
107              className={cn(
108                SETTINGS_PANEL_INSET,
109                "group flex flex-col items-center gap-2 px-4 py-5 transition-colors hover:bg-background/70 disabled:cursor-not-allowed disabled:opacity-60",
110              )}
111            >
112              <RefreshCw className="size-5 text-status-amber group-hover:animate-spin" />
113              <span className="text-xs font-medium text-foreground">Reboot</span>
114              <span className="text-[11px] text-muted-foreground/60">Restart all services</span>
115            </button>
116          </AlertDialogTrigger>
117          <AlertDialogContent>
118            <AlertDialogHeader>
119              <AlertDialogTitle>Reboot server?</AlertDialogTitle>
120              <AlertDialogDescription>
121                All running Docker containers and services will be temporarily stopped and restarted. This takes about 30–60 seconds.
122              </AlertDialogDescription>
123            </AlertDialogHeader>
124            <AlertDialogFooter>
125              <AlertDialogCancel>Cancel</AlertDialogCancel>
126              <AlertDialogAction
127                className="bg-status-amber text-white hover:bg-status-amber/90"
128                onClick={() => void onRebootNow()}
129                disabled={rebooting}
130              >
131                {rebooting ? <><Loader2 className="size-4 animate-spin" />Rebooting…</> : "Reboot now"}
132              </AlertDialogAction>
133            </AlertDialogFooter>
134          </AlertDialogContent>
135        </AlertDialog>
136
137        <AlertDialog>
138          <AlertDialogTrigger asChild>
139            <button
140              disabled={shuttingDown || !power.shutdown.available}
141              className={cn(
142                SETTINGS_PANEL_INSET,
143                "group flex flex-col items-center gap-2 px-4 py-5 transition-colors hover:bg-background/70 disabled:cursor-not-allowed disabled:opacity-60",
144              )}
145            >
146              <Power className="size-5 text-status-red" />
147              <span className="text-xs font-medium text-foreground">Shutdown</span>
148              <span className="text-[11px] text-muted-foreground/60">Power off the machine</span>
149            </button>
150          </AlertDialogTrigger>
151          <AlertDialogContent>
152            <AlertDialogHeader>
153              <AlertDialogTitle>Shut down server?</AlertDialogTitle>
154              <AlertDialogDescription>
155                This powers the machine off completely. You will need to start it again manually before Homeio becomes available.
156              </AlertDialogDescription>
157            </AlertDialogHeader>
158            <AlertDialogFooter>
159              <AlertDialogCancel>Cancel</AlertDialogCancel>
160              <AlertDialogAction
161                className="bg-destructive text-white hover:bg-destructive/90"
162                onClick={() => void onShutdownNow()}
163                disabled={shuttingDown}
164              >
165                {shuttingDown ? <><Loader2 className="size-4 animate-spin" />Shutting down…</> : "Shutdown now"}
166              </AlertDialogAction>
167            </AlertDialogFooter>
168          </AlertDialogContent>
169        </AlertDialog>
170      </div>
171
172      {/* ── Scheduled Reboot ── */}
173      <SectionDivider title="Scheduled Reboot" />
174      {scheduledReboot.error && <InfoBanner text={scheduledReboot.error} variant="warning" />}
175      <div className="flex flex-col gap-1.5">
176        <div className={cn(SETTINGS_PANEL_INSET, "px-4 py-1")}>
177          <Toggle
178            label="Scheduled reboot"
179            description="Automatically reboot the server on a set schedule"
180            enabled={scheduleEnabled}
181            onToggle={() => setScheduleEnabled((v) => !v)}
182            disabled={scheduleDisabled}
183          />
184        </div>
185
186        <PreferenceRow label="Frequency">
187          <select
188            value={scheduleFrequency}
189            onChange={(e) => setScheduleFrequency(e.target.value as "daily" | "weekly")}
190            disabled={!scheduleEnabled || scheduleDisabled}
191            className={selectCls}
192          >
193            <option value="daily">Daily</option>
194            <option value="weekly">Weekly</option>
195          </select>
196        </PreferenceRow>
197
198        {scheduleFrequency === "weekly" && (
199          <PreferenceRow label="Day of week">
200            <select
201              value={scheduleDayOfWeek}
202              onChange={(e) => setScheduleDayOfWeek(e.target.value as ScheduledRebootInput["dayOfWeek"])}
203              disabled={!scheduleEnabled || scheduleDisabled}
204              className={selectCls}
205            >
206              {DAY_OF_WEEK_OPTIONS.map((d) => (
207                <option key={d} value={d}>{d.charAt(0).toUpperCase() + d.slice(1)}</option>
208              ))}
209            </select>
210          </PreferenceRow>
211        )}
212
213        <PreferenceRow label="Time" description="24-hour server local time">
214          <select
215            value={scheduleTime}
216            onChange={(e) => setScheduleTime(e.target.value)}
217            disabled={!scheduleEnabled || scheduleDisabled}
218            className={cn(selectCls, "font-mono")}
219          >
220            {SCHEDULE_TIME_OPTIONS.map((t) => (
221              <option key={t} value={t}>{t}</option>
222            ))}
223          </select>
224        </PreferenceRow>
225
226        <div className={cn(SETTINGS_PANEL_INSET, "flex items-center justify-between gap-4 px-4 py-3")}>
227          <span className="text-[11px] text-muted-foreground/70">
228            {scheduleEnabled
229              ? `Reboot will run ${scheduleFrequency === "daily" ? "daily" : `every ${scheduleDayOfWeek}`} at ${scheduleTime}.`
230              : "Scheduled reboot is disabled."}
231          </span>
232          <button
233            disabled={!scheduleDirty || scheduleDisabled}
234            onClick={() => void onSaveScheduledReboot({ enabled: scheduleEnabled, frequency: scheduleFrequency, dayOfWeek: scheduleDayOfWeek, time: scheduleTime })}
235            className="inline-flex shrink-0 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"
236          >
237            {scheduledReboot.isPending ? <><Loader2 className="size-3 animate-spin" />Saving…</> : "Save schedule"}
238          </button>
239        </div>
240      </div>
241
242      {/* ── Factory Reset ── */}
243      <SectionDivider title="Factory Reset" />
244      {power.factoryReset.error && <InfoBanner text={power.factoryReset.error} variant="warning" />}
245      <InfoBanner
246        text="Factory reset will stop all containers, remove Docker images, custom networks, and volumes, reset the database, delete everything under /DATA, recreate the default directories, and then reboot the machine."
247        variant="warning"
248      />
249      <div className={cn(SETTINGS_PANEL_INSET, "flex items-center justify-between gap-4 px-4 py-3")}>
250        <div className="min-w-0">
251          <div className="text-sm text-foreground">Factory reset server</div>
252          <div className="mt-0.5 text-[11px] text-muted-foreground/70">Wipes all data and returns Homeio to a clean state</div>
253        </div>
254        <AlertDialog>
255          <AlertDialogTrigger asChild>
256            <button
257              disabled={resetting || !power.factoryReset.available}
258              className="inline-flex shrink-0 items-center gap-1.5 rounded-lg bg-destructive/15 px-3 py-1.5 text-xs font-medium text-destructive transition-colors hover:bg-destructive/25 disabled:cursor-not-allowed disabled:opacity-50"
259            >
260              <AlertTriangle className="size-3" />
261              {resetting ? "Resetting…" : "Factory Reset"}
262            </button>
263          </AlertDialogTrigger>
264          <AlertDialogContent>
265            <AlertDialogHeader>
266              <AlertDialogTitle>Factory reset server?</AlertDialogTitle>
267              <AlertDialogDescription>
268                This is destructive. Homeio will remove Docker containers, images, volumes, custom networks, reset the database, wipe /DATA, recreate a clean data root, and reboot. After reset, you will need to register a new user.
269              </AlertDialogDescription>
270            </AlertDialogHeader>
271            <AlertDialogFooter>
272              <AlertDialogCancel>Cancel</AlertDialogCancel>
273              <AlertDialogAction
274                className="bg-destructive text-white hover:bg-destructive/90"
275                onClick={() => void onFactoryReset()}
276                disabled={resetting}
277              >
278                {resetting ? <><Loader2 className="size-4 animate-spin" />Resetting…</> : "Factory reset"}
279              </AlertDialogAction>
280            </AlertDialogFooter>
281          </AlertDialogContent>
282        </AlertDialog>
283      </div>
284    </div>
285  );
286}
287