freezmo/components/DataSection.tsx

"use client";

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

import { Button } from "@/components/ui";
import {
  applyImport,
  downloadBackup,
  getStoragePersistence,
  parseBackup,
  previewImport,
  requestStoragePersistence,
  type BackupFile,
  type ImportPreview,
  type PersistenceState,
} from "@/lib/backup";
import { useI18n } from "@/lib/i18n";

/**
 * Settings → Data & backup: export everything to one file, import a backup
 * with a preview and a merge/replace choice, and show whether the browser
 * treats this origin's storage as persistent.
 */
export function DataSection() {
  const { t } = useI18n();
  const fileRef = useRef<HTMLInputElement>(null);
  const [persistence, setPersistence] = useState<PersistenceState | null>(null);
  const [pending, setPending] = useState<{ backup: BackupFile; preview: ImportPreview } | null>(null);
  const [notice, setNotice] = useState<string | null>(null);

  useEffect(() => {
    void getStoragePersistence().then(setPersistence);
  }, []);

  const pick = async (file: File | undefined) => {
    setNotice(null);
    if (!file) return;
    const raw = await file.text().catch(() => "");
    const result = parseBackup(raw);
    if ("error" in result) {
      setPending(null);
      setNotice(result.error);
      return;
    }
    setPending({ backup: result.backup, preview: previewImport(result.backup) });
  };

  const reset = () => {
    setPending(null);
    if (fileRef.current) fileRef.current.value = "";
  };

  const apply = async (mode: "merge" | "replace") => {
    if (!pending) return;
    const done = await applyImport(pending.backup, mode);
    setNotice(t("settings.importDone", { decks: done.decks, homework: done.homework }));
    reset();
  };

  const requestPersistent = async () => {
    const granted = await requestStoragePersistence();
    setPersistence(granted ? "persistent" : "best-effort");
    setNotice(granted ? t("settings.storageGranted") : t("settings.storageDenied"));
  };

  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.data")}</h3>
      <p className="text-[11.5px] leading-relaxed text-[var(--text-subtle)]">{t("settings.dataNote")}</p>

      <div className="grid gap-2">
        <Button size="sm" variant="secondary" className="touch-target w-full" onClick={() => void downloadBackup()}>
          {t("settings.exportAll")}
        </Button>
        <Button size="sm" variant="secondary" className="touch-target w-full" onClick={() => fileRef.current?.click()}>
          {t("settings.importBackup")}
        </Button>
        <input
          ref={fileRef}
          type="file"
        aria-hidden="true"
        tabIndex={-1}
          accept="application/json,.json"
          className="hidden"
          onChange={(event) => void pick(event.target.files?.[0])}
        />
      </div>
      <p className="text-[11px] leading-relaxed text-[var(--text-subtle)]">{t("settings.exportNote")}</p>

      {pending ? (
        <div className="space-y-2 rounded-xl border border-[var(--hairline)] bg-[var(--surface)] p-3">
          <p className="text-[12px] font-medium text-[var(--text)]">
            {t("settings.importPreview", {
              decks: pending.preview.decks.added + pending.preview.decks.replaced,
              homework: pending.preview.homework.added + pending.preview.homework.replaced,
              folders: pending.preview.folders.added + pending.preview.folders.replaced,
              chats: pending.preview.chats.added + pending.preview.chats.replaced,
            })}
          </p>
          <p className="text-[11px] leading-relaxed text-[var(--text-subtle)]">{t("settings.importMergeNote")}</p>
          <p className="text-[11px] leading-relaxed text-[var(--text-subtle)]">{t("settings.importReplaceNote")}</p>
          <div className="flex flex-wrap gap-2">
            <Button size="sm" onClick={() => void apply("merge")}>
              {t("settings.importMerge")}
            </Button>
            <Button size="sm" variant="danger" onClick={() => void apply("replace")}>
              {t("settings.importReplace")}
            </Button>
            <Button size="sm" variant="ghost" onClick={reset}>
              {t("settings.importCancel")}
            </Button>
          </div>
        </div>
      ) : null}

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

      <div className="flex items-center justify-between gap-3 border-t border-[var(--hairline-soft)] pt-2">
        <span className="min-w-0">
          <span className="block text-[12px] font-semibold text-[var(--text)]">{t("settings.storage")}</span>
          <span className="block text-[11px] leading-snug text-[var(--text-subtle)]">
            {persistence === "persistent"
              ? t("settings.storagePersistent")
              : persistence === "unsupported"
                ? t("settings.storageBestEffort")
                : t("settings.storageBestEffort")}
          </span>
        </span>
        {persistence === "best-effort" ? (
          <Button size="sm" variant="secondary" className="shrink-0" onClick={() => void requestPersistent()}>
            {t("settings.storageRequest")}
          </Button>
        ) : null}
      </div>
    </section>
  );
}