// react
import React, { useEffect, useState } from "react";
// application
import AdminLayout from "~/admin/components/AdminLayout";
import ProtectedRoute from "~/admin/components/ProtectedRoute";
import { FooterSettingsForm } from "~/admin/components/footer/FooterSettingsForm";
import { IFooterSettings } from "~/admin/interfaces/footerSettings";
import { footerApi } from "~/admin/services/footerApi";
import { toast } from "react-toastify";

export default function FooterSettingsPage() {
  //states
  const [initial, setInitial] = useState<IFooterSettings | null>(null);
  const [loading, setLoading] = useState<boolean>(true);
  const [saving, setSaving] = useState<boolean>(false);

  //effects
  useEffect(() => {
    (async () => {
      try {
        setLoading(true);
        const data = await footerApi.get();
        setInitial(data);
      } catch (e: any) {
        toast.error(e?.message || "Error al cargar el footer");
      } finally {
        setLoading(false);
      }
    })();
  }, []);

  const handleSave = async (data: IFooterSettings) => {
    try {
      setSaving(true);
      const saved = await footerApi.save(data);
      setInitial(saved);
      toast.success("Footer actualizado");
    } catch (e: any) {
      toast.error(e?.message || "Error al guardar");
    } finally {
      setSaving(false);
    }
  };

  if (loading || !initial) {
    return (
      <ProtectedRoute>
        <AdminLayout>
          <div className="text-center py-5">
            <div className="spinner-border" role="status">
              <span className="sr-only">Cargando...</span>
            </div>
          </div>
        </AdminLayout>
      </ProtectedRoute>
    );
  }

  return (
    <ProtectedRoute>
      <AdminLayout>
        <div className="page-header">
          <h1>Footer del sitio</h1>
        </div>
        <FooterSettingsForm
          initial={initial}
          onSave={handleSave}
          saving={saving}
        />
      </AdminLayout>
    </ProtectedRoute>
  );
}