freezmo/components/SyncSection.tsx

"use client";

import { useEffect, useState, useSyncExternalStore } from "react";

import { Button } from "@/components/ui";
import { copyText } from "@/lib/clipboard";
import { haptic } from "@/lib/haptics";
import { useI18n } from "@/lib/i18n";
import { deleteSyncedData, enableSync, forgetDeviceKey, hasDeviceKey, joinSync, syncNow, unlockSync, type SyncOutcome } from "@/lib/sync";
import { syncStore } from "@/lib/sync-state";

/**
 * Settings → Sync (off by default). Enabling derives a key from the user's
 * passphrase, stores it as a non-extractable CryptoKey and uploads the first
 * encrypted blob. Joining needs the sync ID plus the passphrase. Conflicts
 * are surfaced with an explicit choice — never resolved silently.
 */
export function SyncSection() {
  const { t, locale } = useI18n();
  const record = useSyncExternalStore(syncStore.subscribe, syncStore.getSnapshot, syncStore.getServerSnapshot);
  const [mode, setMode] = useState<"idle" | "enable" | "join">("idle");
  const [pass, setPass] = useState("");
  const [pass2, setPass2] = useState("");
  const [joinId, setJoinId] = useState("");
  const [busy, setBusy] = useState(false);
  const [notice, setNotice] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [locked, setLocked] = useState<boolean | null>(null);
  const [confirmDelete, setConfirmDelete] = useState(false);

  useEffect(() => {
    if (!record.enabled) {
      setLocked(null);
      return;
    }
    void hasDeviceKey().then(setLocked);
  }, [record.enabled, record.id]);

  const statusFor = (outcome: SyncOutcome): string | null => {
    switch (outcome.status) {
      case "pushed":
        return t("settings.syncPushed");
      case "pulled":
        return t("settings.syncPulled");
      case "up-to-date":
        return t("settings.syncDone");
      case "conflict":
        return t("settings.syncConflict");
      case "locked":
        return t("settings.syncLocked");
      case "error":
        return outcome.message ?? t("settings.syncError");
      default:
        return null;
    }
  };

  const reset = () => {
    setMode("idle");
    setPass("");
    setPass2("");
    setJoinId("");
    setError(null);
  };

  const run = async (action: () => Promise<SyncOutcome>) => {
    setBusy(true);
    setError(null);
    setNotice(null);
    try {
      const outcome = await action();
      const text = statusFor(outcome);
      if (outcome.status === "error" || outcome.status === "locked") setError(text);
      else setNotice(text);
      if (outcome.status !== "error" && outcome.status !== "locked") reset();
    } finally {
      setBusy(false);
    }
  };

  const startEnable = () => {
    if (pass.length < 8) return setError(t("settings.syncPassphraseShort"));
    if (pass !== pass2) return setError(t("settings.syncPassphraseMismatch"));
    void run(() => enableSync(pass));
  };

  const startJoin = () => {
    if (!joinId.trim()) return setError(t("server.syncInvalidId"));
    if (pass.length < 8) return setError(t("settings.syncPassphraseShort"));
    void run(() => joinSync(joinId, pass));
  };

  const startUnlock = () => {
    if (!pass) return setError(t("settings.syncPassphraseShort"));
    void run(async () => {
      const outcome = await unlockSync(pass);
      if (outcome.status !== "error") setLocked(true);
      return outcome;
    });
  };

  const lastSynced = record.lastSyncedAt
    ? t("settings.syncLast", { when: new Date(record.lastSyncedAt).toLocaleString(locale) })
    : t("settings.syncNever");

  const fieldClass =
    "w-full rounded-xl border border-[var(--hairline)] bg-[var(--surface-strong)] px-3 py-2.5 text-sm text-frost-950 outline-none transition focus:border-accent-500 dark:text-frost-50";

  /* Revoking the server copy must work even on a device that can't unlock
     (e.g. after the browser dropped the stored key). */
  const deleteBlock = (
    <div className="flex flex-wrap gap-2 border-t border-[var(--hairline-soft)] pt-2">
      {confirmDelete ? (
        <span className="flex flex-wrap items-center gap-2">
          <span className="text-[11.5px] text-[var(--text-muted)]">{t("settings.syncDeleteConfirm")}</span>
          <Button
            size="sm"
            variant="danger"
            loading={busy}
            onClick={() =>
              void run(async () => {
                setConfirmDelete(false);
                return deleteSyncedData();
              })
            }
          >
            {t("settings.syncDeleteYes")}
          </Button>
          <Button size="sm" variant="ghost" onClick={() => setConfirmDelete(false)}>
            {t("settings.syncCancel")}
          </Button>
        </span>
      ) : (
        <Button size="sm" variant="ghost" onClick={() => setConfirmDelete(true)}>
          {t("settings.syncDelete")}
        </Button>
      )}
    </div>
  );

  return (
    <section className="mb-4 space-y-2 rounded-2xl border border-[var(--hairline)] bg-[var(--surface-sunken)] p-3">
      <h3 className="text-sm font-semibold text-frost-950 dark:text-frost-50">{t("settings.sync")}</h3>
      <p className="text-[11.5px] leading-relaxed text-[var(--text-subtle)]">{t("settings.syncNote")}</p>
      <p className="text-[11px] font-medium leading-relaxed text-[var(--text-muted)]">{t("settings.syncNoteKey")}</p>

      {!record.enabled ? (
        mode === "enable" ? (
          <div className="space-y-2">
            <input
              type="password"
              value={pass}
              onChange={(event) => setPass(event.target.value)}
              placeholder={t("settings.syncPassphrase")}
              autoComplete="new-password"
              spellCheck={false}
              className={fieldClass}
            />
            <input
              type="password"
              value={pass2}
              onChange={(event) => setPass2(event.target.value)}
              placeholder={t("settings.syncPassphraseConfirm")}
              autoComplete="new-password"
              spellCheck={false}
              className={fieldClass}
            />
            {error ? <p className="text-[11.5px] font-medium text-rose-600 dark:text-rose-300">{error}</p> : null}
            <div className="flex flex-wrap gap-2">
              <Button size="sm" loading={busy} onClick={startEnable}>
                {t("settings.syncStart")}
              </Button>
              <Button size="sm" variant="ghost" onClick={reset}>
                {t("settings.syncCancel")}
              </Button>
            </div>
          </div>
        ) : mode === "join" ? (
          <div className="space-y-2">
            <input
              type="text"
              value={joinId}
              onChange={(event) => setJoinId(event.target.value)}
              placeholder={t("settings.syncJoinId")}
              autoComplete="off"
              spellCheck={false}
              className={fieldClass}
            />
            <input
              type="password"
              value={pass}
              onChange={(event) => setPass(event.target.value)}
              placeholder={t("settings.syncPassphrase")}
              autoComplete="off"
              spellCheck={false}
              className={fieldClass}
            />
            <p className="text-[11px] leading-relaxed text-[var(--text-subtle)]">{t("settings.syncJoinNote")}</p>
            {error ? <p className="text-[11.5px] font-medium text-rose-600 dark:text-rose-300">{error}</p> : null}
            <div className="flex flex-wrap gap-2">
              <Button size="sm" loading={busy} onClick={startJoin}>
                {t("settings.syncJoinAction")}
              </Button>
              <Button size="sm" variant="ghost" onClick={reset}>
                {t("settings.syncCancel")}
              </Button>
            </div>
          </div>
        ) : (
          <div className="flex flex-wrap gap-2">
            <Button size="sm" variant="secondary" onClick={() => setMode("enable")}>
              {t("settings.syncEnable")}
            </Button>
            <Button size="sm" variant="ghost" onClick={() => setMode("join")}>
              {t("settings.syncJoin")}
            </Button>
          </div>
        )
      ) : locked === false ? (
        <div className="space-y-2">
          <p className="text-[11.5px] leading-relaxed text-[var(--text-muted)]">{t("settings.syncLocked")}</p>
          <input
            type="password"
            value={pass}
            onChange={(event) => setPass(event.target.value)}
            placeholder={t("settings.syncPassphrase")}
            autoComplete="off"
            spellCheck={false}
            className={fieldClass}
          />
          {error ? <p className="text-[11.5px] font-medium text-rose-600 dark:text-rose-300">{error}</p> : null}
          <Button size="sm" loading={busy} onClick={startUnlock}>
            {t("settings.syncUnlock")}
          </Button>
          {deleteBlock}
        </div>
      ) : (
        <div className="space-y-2">
          <div className="flex items-center justify-between gap-2">
            <span className="min-w-0">
              <span className="block text-[11px] font-semibold uppercase tracking-wide text-[var(--text-subtle)]">
                {t("settings.syncId")}
              </span>
              <span className="block truncate font-mono text-[12px] text-[var(--text)]">{record.id}</span>
            </span>
            <Button
              size="sm"
              variant="secondary"
              className="shrink-0"
              onClick={() => {
                void copyText(record.id).then((ok) => {
                  haptic("tap");
                  setNotice(ok ? t("settings.syncCopied") : t("settings.syncError"));
                });
              }}
            >
              {t("settings.syncCopy")}
            </Button>
          </div>

          <p className="text-[11.5px] font-medium text-[var(--text-muted)]">{lastSynced}</p>

          {record.conflict ? (
            <div className="space-y-2 rounded-xl border border-amber-300 bg-amber-50 p-2.5 text-[12px] text-amber-900 dark:border-amber-400/40 dark:bg-amber-400/10 dark:text-amber-100">
              <p className="font-semibold">{t("settings.syncConflict")}</p>
              <div className="flex flex-wrap gap-2">
                <Button size="sm" loading={busy} onClick={() => void run(() => syncNow("push"))}>
                  {t("settings.syncKeepLocal")}
                </Button>
                <Button size="sm" variant="secondary" loading={busy} onClick={() => void run(() => syncNow("pull"))}>
                  {t("settings.syncKeepRemote")}
                </Button>
              </div>
            </div>
          ) : (
            <Button size="sm" loading={busy} onClick={() => void run(() => syncNow("auto"))}>
              {t("settings.syncNow")}
            </Button>
          )}

          {notice ? <p className="text-[12px] font-medium text-[var(--text-muted)]">{notice}</p> : null}
          {error ? <p className="text-[11.5px] font-medium text-rose-600 dark:text-rose-300">{error}</p> : null}

          <div className="flex flex-wrap gap-2 border-t border-[var(--hairline-soft)] pt-2">
            <Button
              size="sm"
              variant="ghost"
              onClick={() => {
                void forgetDeviceKey().then(() => {
                  setLocked(false);
                  setNotice(null);
                });
              }}
            >
              {t("settings.syncForget")}
            </Button>
            {deleteBlock}
          </div>
        </div>
      )}
    </section>
  );
}