import React, { useEffect, useState } from "react";
import { toast } from "react-toastify";
import AdminLayout from "~/admin/components/AdminLayout";
import ProtectedRoute from "~/admin/components/ProtectedRoute";
import { BankPaymentMethodForm } from "~/admin/components/bankPayment/BankPaymentMethodForm";
import { BankPaymentMethodList } from "~/admin/components/bankPayment/BankPaymentMethodList";
import { IBankPaymentMethod } from "~/admin/interfaces/bankPaymentMethod";
import { bankPaymentApi } from "~/admin/services/bankPaymentApi";

export default function BankPaymentsAdminPage() {
  const [items, setItems] = useState<IBankPaymentMethod[]>([]);
  const [loading, setLoading] = useState(true);
  const [showForm, setShowForm] = useState(false);
  const [editing, setEditing] = useState<IBankPaymentMethod | null>(null);

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

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

  const handleSave = async (formData: FormData) => {
    try {
      if (editing) {
        await bankPaymentApi.updateWithFormData(editing.id, formData);
        toast.success("Método de pago actualizado");
      } else {
        await bankPaymentApi.createWithFormData(formData);
        toast.success("Método de pago creado");
      }
      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 este método de pago?")) return;
    try {
      await bankPaymentApi.delete(id);
      toast.success("Eliminado");
      await load();
    } catch (e: unknown) {
      const msg = e instanceof Error ? e.message : "Error al eliminar";
      toast.error(msg);
    }
  };

  const handlePause = async (item: IBankPaymentMethod) => {
    if (item.status === 0) return;
    if (!confirm("¿Pausar este método de pago?")) return;
    try {
      await bankPaymentApi.pause(item);
      toast.success("Método de pago pausado");
      await load();
    } catch (e: unknown) {
      const msg = e instanceof Error ? e.message : "Error al pausar";
      toast.error(msg);
    }
  };

  const handleActivate = async (item: IBankPaymentMethod) => {
    if (item.status === 1) return;
    if (!confirm("¿Activar este método de pago?")) return;
    try {
      await bankPaymentApi.activate(item);
      toast.success("Método de pago activado");
      await load();
    } catch (e: unknown) {
      const msg = e instanceof Error ? e.message : "Error al activar";
      toast.error(msg);
    }
  };

  if (loading && items.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>Métodos de pago</h1>
          {!showForm && (
            <button type="button" className="btn btn-primary" onClick={() => { setEditing(null); setShowForm(true); }}>
              <i className="fas fa-plus" /> Nuevo método de pago
            </button>
          )}
        </div>
        {showForm ? (
          <BankPaymentMethodForm
            item={editing}
            onSave={handleSave}
            onCancel={() => { setShowForm(false); setEditing(null); }}
          />
        ) : (
          <BankPaymentMethodList
            items={items}
            onEdit={(row) => { setEditing(row); setShowForm(true); }}
            onPause={handlePause}
            onActivate={handleActivate}
            onDelete={handleDelete}
          />
        )}
      </AdminLayout>
    </ProtectedRoute>
  );
}