// 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 { IService } from "~/admin/interfaces/service";
import { serviceApi } from "~/admin/services/serviceApi";
import { downloadPdfTable } from "~/admin/utils/pdfExport";
import { ServiceForm } from "~/admin/components/service/ServiceForm";
import { ServiceList } from "~/admin/components/service/ServiceList";

export default function ServicesPage() {
  //states
  const [services, setServices] = useState<IService[]>([]);
  const [allServices, setAllServices] = useState<IService[]>([]);
  const [editingService, setEditingService] = useState<IService | null>(null);
  const [showForm, setShowForm] = useState<boolean>(false);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState("");

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

  const loadServices = async () => {
    try {
      setLoading(true);
      const data = await serviceApi.getAllServices();
      setAllServices(data);
      setServices(data);
    } catch (error: any) {
      toast.error(error.message || "Error al cargar servicios");
    } finally {
      setLoading(false);
    }
  };

  const handleSearch = (term: string) => {
    setSearchTerm(term);
    const q = term.trim().toLowerCase();

    if (!q) {
      setServices(allServices);
      return;
    }

    const filtered = allServices.filter((s) => {
      const idStr = String(s.serviceID);
      const title = (s.title ?? "").toLowerCase();
      const idMatch = idStr.includes(q);
      const nameMatch = title.includes(q);
      return idMatch || nameMatch;
    });
    setServices(filtered);
  };

  const handleCreateBrand = () => {
    setEditingService(null);
    setShowForm(true);
  };

  const handleEdit = (service: IService) => {
    setEditingService(service);
    setShowForm(true);
  };

  const handleSave = async (data: IService) => {
    try {
      if (data?.serviceID) {
        await serviceApi.updateService(data.serviceID, data);
        toast.success("Servicio actualizado exitosamente");
      } else {
        await serviceApi.createService(data);
        toast.success("Servicio creado exitosamente");
      }
      setShowForm(false);
      setEditingService(null);
      loadServices();
    } catch (error: any) {
      toast.error(error.message || "Error al guardar marca");
    }
  };

  const handleDelete = async (id: number) => {
    if (!confirm("¿Estás seguro de eliminar esta marca?")) {
      return;
    }
    try {
      await serviceApi.deleteService(id);
      toast.success("Servicio eliminado exitosamente");
      loadServices();
    } catch (error: any) {
      toast.error(error.message || "Error al eliminar servicio");
    }
  };

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

  const handleExportPdf = async () => {
    try {
      await downloadPdfTable(
        `listado-servicios-${Date.now()}.pdf`,
        "Listado de Servicios",
        [
          { header: "Título", dataKey: "title" },
          { header: "Descripción", dataKey: "description" },
          { header: "Icono", dataKey: "icon" },
        ],
        allServices.map((s) => ({
          title: s.title,
          description: s.description ?? "",
          icon: s.icon ?? "",
        }))
      );
      toast.success("PDF generado correctamente");
    } catch (error: any) {
      toast.error(error?.message || "Error al generar PDF");
    }
  };

  if (loading && services.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>Servicios</h1>
          {!showForm && (
            <>
              <button
                className="btn btn-primary mr-2"
                onClick={handleCreateBrand}
              >
                <i className="fas fa-plus" /> Nuevo Servicio
              </button>
              <button
                type="button"
                className="btn btn-secondary mr-2"
                onClick={handleExportPdf}
                disabled={allServices.length === 0}
              >
                <i className="fas fa-file-pdf" /> Exportar PDF
              </button>
            </>
          )}
        </div>

        {showForm ? (
          <ServiceForm
            service={editingService}
            onSave={handleSave}
            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 nombre o ID..."
                    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.trim() && (
                  <small className="text-muted mt-2 d-block">
                    {services.length} servicio{services.length !== 1 ? "s" : ""}{" "}
                    encontrado{services.length !== 1 ? "s" : ""}
                  </small>
                )}
              </div>
            </div>
            <ServiceList
              services={services}
              onEdit={handleEdit}
              onDelete={handleDelete}
            />
          </>
        )}
      </AdminLayout>
    </ProtectedRoute>
  );
}