// 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 { SucursalForm } from "~/admin/components/sucursal/SucursalForm";
import { ISucursal } from "~/admin/interfaces/sucursal";
import { SucursalList } from "~/admin/components/sucursal/SucursalList";
import { SucursalFooterOrder } from "~/admin/components/sucursal/SucursalFooterOrder";
import { sucursalApi } from "~/admin/services/sucursalApi";
import { VENEZUELA_STATES } from "~/admin/constants/venezuelaStates";

export default function SucursalPage() {
  //states
  const [sucursal, setSucursal] = useState<ISucursal[]>([]);
  const [allSucursal, setAllSucursal] = useState<ISucursal[]>([]);
  const [editingSucursal, setEditingSucursal] = useState<ISucursal | null>(
    null,
  );
  const [showForm, setShowForm] = useState<boolean>(false);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState("");
  const [filterEstado, setFilterEstado] = useState<string>("");

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

  const loadSucursal = async () => {
    try {
      setLoading(true);
      const data = await sucursalApi.getAllSucursal();
      setAllSucursal(data);
      applyFiltersTo(searchTerm, filterEstado, data);
    } catch (error: any) {
      toast.error(error.message || "Error al cargar sucursales");
    } finally {
      setLoading(false);
    }
  };

  const applyFiltersTo = (
    term: string,
    estado: string,
    list: ISucursal[]
  ) => {
    let result = list;
    if (estado && estado.trim()) {
      result = result.filter((s) => (s.estado || "").trim() === estado.trim());
    }
    if (term.trim()) {
      const lower = term.toLowerCase().trim();
      result = result.filter(
        (s) =>
          (s.estado && s.estado.toLowerCase().includes(lower)) ||
          (s.name && s.name.toLowerCase().includes(lower)) ||
          (s.address && s.address.toLowerCase().includes(lower)) ||
          String(s.sucursalID).includes(lower)
      );
    }
    setSucursal(result);
  };

  const handleSearch = (term: string) => {
    setSearchTerm(term);
    applyFilters(term, filterEstado);
  };

  const handleFilterEstado = (estado: string) => {
    setFilterEstado(estado);
    applyFilters(searchTerm, estado);
  };

  const applyFilters = (term: string, estado: string) => {
    let result = allSucursal;
    if (estado && estado.trim()) {
      result = result.filter(
        (s) => (s.estado || "").trim() === estado.trim()
      );
    }
    if (term.trim()) {
      const lower = term.toLowerCase().trim();
      result = result.filter(
        (s) =>
          (s.estado && s.estado.toLowerCase().includes(lower)) ||
          (s.name && s.name.toLowerCase().includes(lower)) ||
          (s.address && s.address.toLowerCase().includes(lower)) ||
          String(s.sucursalID).includes(lower)
      );
    }
    setSucursal(result);
  };

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

  const handleEdit = (sucursal: ISucursal) => {
    setEditingSucursal(sucursal);
    setShowForm(true);
  };

  const handleSave = async (data: ISucursal) => {
    try {
      if (data?.sucursalID) {
        await sucursalApi.updateSucursal(data.sucursalID, data);
        toast.success("Sucursal actualizada exitosamente");
      } else {
        await sucursalApi.createSucursal(data);
        toast.success("Sucursal creada exitosamente");
      }
      setShowForm(false);
      setEditingSucursal(null);
      loadSucursal();
    } catch (error: any) {
      toast.error(error.message || "Error al guardar sucursal");
    }
  };

  const handleDelete = async (id: number) => {
    if (!confirm("¿Estás seguro de eliminar esta sucursal?")) {
      return;
    }
    try {
      await sucursalApi.deleteSucursal(id);
      toast.success("Sucursal eliminada exitosamente");
      loadSucursal();
    } catch (error: any) {
      toast.error(error.message || "Error al eliminar sucursal");
    }
  };

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

  if (loading && sucursal.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>Sucursales</h1>
          {!showForm && (
            <button
              className="btn btn-primary mr-2"
              onClick={handleCreateBrand}
            >
              <i className="fas fa-plus" /> Nueva Sucursal
            </button>
          )}
        </div>

        {showForm ? (
          <SucursalForm
            sucursal={editingSucursal}
            onSave={handleSave}
            onCancel={handleCancel}
          />
        ) : (
          <>
            <div className="card mb-3">
              <div className="card-body">
                <div className="row">
                  <div className="col-md-6 mb-2 mb-md-0">
                    <label className="small text-muted">Filtrar por estado</label>
                    <select
                      className="form-control"
                      value={filterEstado}
                      onChange={(e) => handleFilterEstado(e.target.value)}
                    >
                      <option value="">Todos los estados</option>
                      {VENEZUELA_STATES.map((state) => (
                        <option key={state} value={state}>
                          {state}
                        </option>
                      ))}
                    </select>
                  </div>
                  <div className="col-md-6">
                    <label className="small text-muted">Buscar</label>
                    <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="Estado, nombre, dirección o ID..."
                        value={searchTerm}
                        onChange={(e) => handleSearch(e.target.value)}
                      />
                      {(searchTerm || filterEstado) && (
                        <div className="input-group-append">
                          <button
                            className="btn btn-outline-secondary"
                            type="button"
                            onClick={() => {
                              setSearchTerm("");
                              setFilterEstado("");
                              setSucursal(allSucursal);
                            }}
                          >
                            <i className="fas fa-times" />
                          </button>
                        </div>
                      )}
                    </div>
                  </div>
                </div>
                {(searchTerm || filterEstado) && (
                  <small className="text-muted mt-2 d-block">
                    {sucursal.length} sucursal{sucursal.length !== 1 ? "es" : ""}{" "}
                    encontrada{sucursal.length !== 1 ? "s" : ""}
                  </small>
                )}
              </div>
            </div>
            <SucursalFooterOrder sucursals={allSucursal} onReordered={loadSucursal} />
            <SucursalList
              sucursals={sucursal}
              onEdit={handleEdit}
              onDelete={handleDelete}
            />
          </>
        )}
      </AdminLayout>
    </ProtectedRoute>
  );
}