// react
import React from "react";
// third-party
import { useForm } from "react-hook-form";
import { IService } from "~/admin/interfaces/service";

interface Props {
  service?: IService | null;
  onSave: (service: IService) => void;
  onCancel: () => void;
}

const ICON_LIST = [
  // Automotriz & Transporte
  { label: "Carro", value: "fas fa-car" },
  { label: "Camión", value: "fas fa-truck" },
  { label: "Moto", value: "fas fa-motorcycle" },
  { label: "Taller / Herramientas", value: "fas fa-tools" },
  { label: "Gasolina / Energía", value: "fas fa-gas-pump" },
  { label: "Llave inglesa", value: "fas fa-wrench" },
  { label: "Aceite / Gota", value: "fas fa-tint" },
  { label: "Batería", value: "fas fa-battery-full" },

  // Ubicación & Sucursales
  { label: "Mapa / Marcador", value: "fas fa-map-marker-alt" },
  { label: "Edificio", value: "fas fa-building" },
  { label: "Tienda", value: "fas fa-store" },
  { label: "Almacén", value: "fas fa-warehouse" },
  { label: "Casa", value: "fas fa-home" },
  { label: "Globo terráqueo", value: "fas fa-globe" },
  { label: "Ruta / Carretera", value: "fas fa-route" },
  { label: "Brújula", value: "fas fa-compass" },

  // Negocios & Servicios
  { label: "Maletín", value: "fas fa-briefcase" },
  { label: "Usuarios / Clientes", value: "fas fa-users" },
  { label: "Usuario individual", value: "fas fa-user" },
  { label: "Auriculares / Soporte", value: "fas fa-headset" },
  { label: "Teléfono", value: "fas fa-phone-alt" },
  { label: "Sobre / Email", value: "fas fa-envelope" },
  { label: "Reloj / Tiempo", value: "fas fa-clock" },
  { label: "Calendario", value: "fas fa-calendar-alt" },
  { label: "Portapapeles", value: "fas fa-clipboard-list" },
  { label: "Gráfico / Crecimiento", value: "fas fa-chart-line" },
  { label: "Dinero / Monedas", value: "fas fa-coins" },
  { label: "Tarjeta de crédito", value: "fas fa-credit-card" },
  { label: "Calculadora", value: "fas fa-calculator" },

  // Varios / Interfaz
  { label: "Estrella / Favorito", value: "fas fa-star" },
  { label: "Corazón", value: "fas fa-heart" },
  { label: "Búsqueda", value: "fas fa-search" },
  { label: "Información", value: "fas fa-info-circle" },
  { label: "Check / Éxito", value: "fas fa-check-circle" },
  { label: "Alerta / Peligro", value: "fas fa-exclamation-triangle" },
  { label: "Escudo / Seguridad", value: "fas fa-shield-alt" },
  { label: "Candado", value: "fas fa-lock" },
  { label: "Llave", value: "fas fa-key" },
  { label: "Configuración", value: "fas fa-cogs" },
  { label: "Carrito / Cotización", value: "fas fa-shopping-cart" },
  { label: "Regalo", value: "fas fa-gift" },
  { label: "Cámara", value: "fas fa-camera" },
  { label: "Medalla / Calidad", value: "fas fa-medal" },

  // Chat y Comunicación
  { label: "Chat / Mensajes", value: "fas fa-comments" },
  { label: "Burbuja de Texto", value: "fas fa-comment-dots" },
  { label: "Megáfono / Avisos", value: "fas fa-bullhorn" },

  // Logística y Entregas
  { label: "Caja de Entrega", value: "fas fa-box-open" },
  { label: "Paquete Cerrado", value: "fas fa-box" },
  { label: "Envío / Avión", value: "fas fa-paper-plane" },
  { label: "Contenedor / Carga", value: "fas fa-shipping-fast" },

  // Documentación y Otros
  { label: "Documento / PDF", value: "fas fa-file-alt" },
  { label: "Firma / Contrato", value: "fas fa-signature" },
  { label: "Lupa de Detalle", value: "fas fa-search-plus" },
  { label: "Herramientas Cruzadas", value: "fas fa-toolbox" },
  { label: "Mundo / Logística Internacional", value: "fas fa-globe-americas" },
].sort((a, b) => a.label.localeCompare(b.label));

export const ServiceForm = ({ service, onSave, onCancel }: Props) => {
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
  } = useForm<IService>({
    defaultValues: service || {
      serviceID: 0,
      title: "",
      description: "",
      icon: "",
    },
  });

  const selectedIcon = watch("icon");

  const onSubmit = (data: IService) => {
    onSave(data);
  };

  return (
    <div className="card">
      <div className="card-header">
        <h3>Sección de Sucursal</h3>
      </div>
      <div className="card-body">
        <form onSubmit={handleSubmit(onSubmit)}>
          <div className="row">
            <div className="col-md-12">
              <div className="form-group">
                <label>Título *</label>
                <input
                  type="text"
                  placeholder="Maracaibo"
                  className={`form-control ${errors.title ? "is-invalid" : ""}`}
                  required
                  {...register("title", {
                    required: "El título es requerido",
                  })}
                />
                {errors.title && (
                  <div className="invalid-feedback">{errors.title.message}</div>
                )}
              </div>
            </div>

            <div className="col-md-12">
              <div className="form-group">
                <label>Descripción *</label>
                <input
                  type="text"
                  placeholder="Maracaibo"
                  className={`form-control ${errors.description ? "is-invalid" : ""}`}
                  required
                  {...register("description", {
                    required: "La descripción es requerida",
                  })}
                />
                {errors.description && (
                  <div className="invalid-feedback">
                    {errors.description.message}
                  </div>
                )}
              </div>
            </div>

            <div className="col-md-12">
              <div className="form-group">
                <label>Icono *</label>
                <div className="d-flex align-items-center gap-2">
                  <select
                    className={`form-control ${errors.icon ? "is-invalid" : ""}`}
                    {...register("icon", { required: "El icono es requerido" })}
                  >
                    <option value="">Seleccione un icono...</option>
                    {ICON_LIST.map((item, index) => (
                      <option key={index} value={item.value}>
                        {item.label}
                      </option>
                    ))}
                  </select>
                  <div
                    style={{
                      fontSize: "24px",
                      width: "40px",
                      textAlign: "center",
                    }}
                  >
                    <div
                      style={{
                        fontSize: "24px",
                        width: "40px",
                        textAlign: "center",
                        color: "#333",
                      }}
                    >
                      {selectedIcon && <i className={selectedIcon}></i>}
                    </div>
                  </div>
                </div>
                {errors.icon && (
                  <div className="invalid-feedback">{errors.icon.message}</div>
                )}
              </div>
            </div>
          </div>
          <div className="form-actions">
            <button
              type="button"
              onClick={onCancel}
              className="btn btn-secondary mr-2"
            >
              <i className="fas fa-save" /> Cancelar
            </button>
            <button type="submit" className="btn btn-primary">
              <i className="fas fa-save" />
              {service?.serviceID ? "Actualizar" : "Guardar"}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};