// react
import React, { useState, useEffect } from "react";
// application
import AdminLayout from "~/admin/components/AdminLayout";
import ProtectedRoute from "~/admin/components/ProtectedRoute";
import { toast } from "react-toastify";
import { PaymentForm } from "~/admin/components/payment/PaymentForm";
import { IPayment } from "~/admin/interfaces/payment";
import { paymentApi } from "~/admin/services/paymentApi";
import { PaymentList } from "~/admin/components/payment/PaymentList";

function ProductosPage() {
  //states
  const [allPayments, setAllPayments] = useState<IPayment[]>([]);
  const [payments, setPayments] = useState<IPayment[]>([]);
  const [editingPayment, setEditingPayment] = useState<IPayment | null>(null);
  const [showForm, setShowForm] = useState(false);
  const [loading, setLoading] = useState(true);
  const [page, setPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);
  const [searchTerm, setSearchTerm] = useState("");

  //functions
  const loadPayments = async () => {
    try {
      setLoading(true);
      const res = await paymentApi.get();
      setAllPayments(res);
      setPayments(res);
    } catch (error: any) {
      toast.error(error.message || "Error al cargar métodos de envío");
    } finally {
      setLoading(false);
    }
  };

  const handleSearch = (term: string) => {
    setSearchTerm(term);

    if (!term.trim()) {
      setPayments(allPayments);
      return;
    }

    const filtered = allPayments.filter((payment) => {
      const searchLower = term.toLowerCase().trim();
      const idMatch = payment.paymentID?.toString().includes(searchLower);
      const nameMatch = payment.name.toLowerCase().includes(searchLower);

      return idMatch || nameMatch;
    });

    setPayments(filtered);
  };

  const handleCreate = () => {
    setEditingPayment(null);
    setShowForm(true);
  };

  const handleEdit = async (payment: IPayment) => {
    try {
      setEditingPayment(payment);
      setShowForm(true);
    } catch (error: any) {
      toast.error(error.message || "Error al cargar pago");
    }
  };

  const handleCreatePaymentApi = async (data: IPayment) => {
    try {
      if (editingPayment?.paymentID) {
        await paymentApi.update(editingPayment.paymentID, data);
        toast.success("Método de envío actualizado");
      } else {
        await paymentApi.create(data);
        toast.success("Método de envío creado");
      }
      setShowForm(false);
      setEditingPayment(null);

      loadPayments();
    } catch (error: any) {
      toast.error(error.message || "Error al guardar");
    }
  };

  const handleDelete = async (id: number) => {
    if (!confirm("¿Eliminar este método de envío?")) {
      return;
    }

    try {
      await paymentApi.delete(id);
      toast.success("Método de envío eliminado");
      loadPayments();
    } catch (error: any) {
      toast.error(error.message || "Error al eliminar pago");
    }
  };

  const handlePause = async (payment: IPayment) => {
    if (payment.status === 0) return;
    if (!confirm("¿Pausar este método de envío?")) return;
    try {
      await paymentApi.pause(payment);
      toast.success("Método de envío pausado");
      loadPayments();
    } catch (error: any) {
      toast.error(error.message || "Error al pausar");
    }
  };

  const handleActivate = async (payment: IPayment) => {
    if (payment.status === 1) return;
    if (!confirm("¿Activar este método de envío?")) return;
    try {
      await paymentApi.activate(payment);
      toast.success("Método de envío activado");
      loadPayments();
    } catch (error: any) {
      toast.error(error.message || "Error al activar");
    }
  };

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

  //effects
  useEffect(() => {
    loadPayments();
  }, [page]);

  if (loading && payments.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 envío</h1>
          {!showForm && (
            <button className="btn btn-primary" onClick={handleCreate}>
              <i className="fas fa-plus" /> Nuevo método de envío
            </button>
          )}
        </div>

        {showForm ? (
          <PaymentForm
            payment={editingPayment}
            handleCreatePaymentApi={handleCreatePaymentApi}
            onCancel={handleCancel}
          />
        ) : (
          <>
            <div className="card mb-3">
              <div className="card-body">
                <div className="input-group">
                  <div className="input-group-prepend">
                    <span className="input-group-text">
                      <i className="fas fa-search" />
                    </span>
                  </div>
                  <input
                    type="text"
                    className="form-control"
                    placeholder="Buscar por ID, nombre o código..."
                    value={searchTerm}
                    onChange={(e) => handleSearch(e.target.value)}
                  />
                  {searchTerm && (
                    <div className="input-group-append">
                      <button
                        className="btn btn-outline-secondary"
                        type="button"
                        onClick={() => handleSearch("")}
                      >
                        <i className="fas fa-times" />
                      </button>
                    </div>
                  )}
                </div>
                {searchTerm && (
                  <small className="text-muted mt-2 d-block">
                    {payments.length} pago{payments.length !== 1 ? "s" : ""}{" "}
                    encontrado{payments.length !== 1 ? "s" : ""}
                  </small>
                )}
              </div>
            </div>
            <PaymentList
              payments={payments}
              onEdit={handleEdit}
              onPause={handlePause}
              onActivate={handleActivate}
              onDelete={handleDelete}
            />
            {totalPages > 1 && (
              <div className="pagination-container mt-4">
                <button
                  className="btn btn-sm btn-secondary"
                  disabled={page === 1}
                  onClick={() => setPage(page - 1)}
                >
                  Anterior
                </button>
                <span className="mx-3">
                  Página {page} de {totalPages}
                </span>
                <button
                  className="btn btn-sm btn-secondary"
                  disabled={page >= totalPages}
                  onClick={() => setPage(page + 1)}
                >
                  Siguiente
                </button>
              </div>
            )}
          </>
        )}
      </AdminLayout>
    </ProtectedRoute>
  );
}

export default ProductosPage;