import React, { useEffect, useState } from "react";
import { toast } from "react-toastify";
import AdminLayout from "~/admin/components/AdminLayout";
import ProtectedRoute from "~/admin/components/ProtectedRoute";
import { AboutUsSectionForm } from "~/admin/components/aboutUs/AboutUsSectionForm";
import { AboutUsSectionList } from "~/admin/components/aboutUs/AboutUsSectionList";
import { IAboutUsSection } from "~/admin/interfaces/aboutUsSection";
import { aboutUsApi } from "~/admin/services/aboutUsApi";

export default function AboutUsAdminPage() {
  const [sections, setSections] = useState<IAboutUsSection[]>([]);
  const [loading, setLoading] = useState(true);
  const [showForm, setShowForm] = useState(false);
  const [editing, setEditing] = useState<IAboutUsSection | null>(null);

  const load = async () => {
    try {
      setLoading(true);
      const data = await aboutUsApi.getAll();
      setSections(data);
    } catch (e: unknown) {
      const msg = e instanceof Error ? e.message : "Error al cargar";
      toast.error(msg);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    load();
  }, []);

  const handleNew = () => {
    setEditing(null);
    setShowForm(true);
  };

  const handleEdit = (s: IAboutUsSection) => {
    setEditing(s);
    setShowForm(true);
  };

  const handleSave = async (formData: FormData) => {
    try {
      if (editing) {
        await aboutUsApi.updateWithFormData(editing.id, formData);
        toast.success("Sección actualizada");
      } else {
        await aboutUsApi.create(formData);
        toast.success("Sección creada");
      }
      setShowForm(false);
      setEditing(null);
      await load();
    } catch (e: unknown) {
      const msg = e instanceof Error ? e.message : "Error al guardar";
      toast.error(msg);
    }
  };

  const handleDelete = async (id: number) => {
    if (!confirm("¿Eliminar esta sección? No se puede deshacer.")) return;
    try {
      await aboutUsApi.delete(id);
      toast.success("Sección eliminada");
      await load();
    } catch (e: unknown) {
      const msg = e instanceof Error ? e.message : "Error al eliminar";
      toast.error(msg);
    }
  };

  const handleCancel = () => {
    setShowForm(false);
    setEditing(null);
  };

  if (loading && sections.length === 0) {
    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>Nosotros (historia)</h1>
          {!showForm && (
            <button type="button" className="btn btn-primary" onClick={handleNew}>
              <i className="fas fa-plus" /> Nueva sección
            </button>
          )}
        </div>
        {showForm ? (
          <AboutUsSectionForm section={editing} onSave={handleSave} onCancel={handleCancel} />
        ) : (
          <AboutUsSectionList sections={sections} onEdit={handleEdit} onDelete={handleDelete} />
        )}
      </AdminLayout>
    </ProtectedRoute>
  );
}