blackheart-website/src/app/admin/_components/SectionEditor.tsx

"use client";

import { useState, useEffect, useRef, useCallback } from "react";
import { Loader2, Check, AlertCircle } from "lucide-react";

interface SectionEditorProps<T> {
  sectionKey: string;
  title: string;
  children: (data: T, update: (data: T) => void) => React.ReactNode;
}

const DEBOUNCE_MS = 800;

export function SectionEditor<T>({
  sectionKey,
  title,
  children,
}: SectionEditorProps<T>) {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(true);
  const [status, setStatus] = useState<"idle" | "saving" | "saved" | "error">("idle");
  const [error, setError] = useState("");
  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const initialLoadRef = useRef(true);

  useEffect(() => {
    fetch(`/api/admin/sections/${sectionKey}`)
      .then((r) => {
        if (!r.ok) throw new Error("Failed to load");
        return r.json();
      })
      .then(setData)
      .catch(() => setError("Не удалось загрузить данные"))
      .finally(() => setLoading(false));
  }, [sectionKey]);

  const save = useCallback(async (dataToSave: T) => {
    setStatus("saving");
    setError("");

    try {
      const res = await fetch(`/api/admin/sections/${sectionKey}`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(dataToSave),
      });
      if (!res.ok) throw new Error("Failed to save");
      setStatus("saved");
      setTimeout(() => setStatus((s) => (s === "saved" ? "idle" : s)), 2000);
    } catch {
      setStatus("error");
      setError("Ошибка сохранения");
    }
  }, [sectionKey]);

  // Auto-save with debounce whenever data changes (skip initial load)
  useEffect(() => {
    if (!data) return;
    if (initialLoadRef.current) {
      initialLoadRef.current = false;
      return;
    }

    if (timerRef.current) clearTimeout(timerRef.current);
    timerRef.current = setTimeout(() => {
      save(data);
    }, DEBOUNCE_MS);

    return () => {
      if (timerRef.current) clearTimeout(timerRef.current);
    };
  }, [data, save]);

  if (loading) {
    return (
      <div className="flex items-center gap-2 text-neutral-400">
        <Loader2 size={18} className="animate-spin" />
        Загрузка...
      </div>
    );
  }

  if (!data) {
    return <p className="text-red-400">{error || "Данные не найдены"}</p>;
  }

  return (
    <div>
      <div className="flex items-center justify-between gap-4">
        <h1 className="text-2xl font-bold">{title}</h1>
        <div className="flex items-center gap-2 text-sm text-neutral-400">
          {status === "saving" && (
            <>
              <Loader2 size={14} className="animate-spin" />
              <span>Сохранение...</span>
            </>
          )}
          {status === "saved" && (
            <>
              <Check size={14} className="text-emerald-400" />
              <span className="text-emerald-400">Сохранено</span>
            </>
          )}
          {status === "error" && (
            <>
              <AlertCircle size={14} className="text-red-400" />
              <span className="text-red-400">{error}</span>
            </>
          )}
        </div>
      </div>

      <div className="mt-6 space-y-6">{children(data, setData)}</div>
    </div>
  );
}