// react
import React, { useState, useCallback } from "react";
// application
import AdminLayout from "~/admin/components/AdminLayout";
import ProtectedRoute from "~/admin/components/ProtectedRoute";
import {
  syncExcelApi,
  SyncExcelResponse,
  SyncExcelDetail,
} from "~/admin/services/syncExcelApi";
import { toast } from "react-toastify";

/** Columnas que se pueden leer del Excel. `label` es el texto de cabecera esperado. */
const FIELD_DEFS: {
  field: string;
  name: string;
  label: string;
  required?: boolean;
}[] = [
  { field: "codigo", name: "Código", label: "CODIGO", required: true },
  { field: "nombre", name: "Descripción (Nombre)", label: "DESCRIPCION" },
  { field: "referencia", name: "Referencia", label: "REFERENCIA" },
  { field: "modelo", name: "Modelo", label: "MODELO" },
  { field: "categoria", name: "Categoría", label: "CATEGORIA" },
  { field: "minimo_mayor", name: "Mínimo - Mayor", label: "MINIMO - MAYOR" },
  { field: "oferta", name: "Oferta", label: "OFERTA" },
  { field: "maximo", name: "Máximo", label: "MAXIMO" },
  { field: "number_pieces", name: "Número de Pieza", label: "NUMERO DE PIEZA" },
  { field: "imagenes", name: "Imágenes", label: "IMAGENES" },
];

function SincronizarExcelPage() {
  const [isDragging, setIsDragging] = useState(false);
  const [selectedFile, setSelectedFile] = useState<File | null>(null);
  const [uploading, setUploading] = useState(false);
  const [result, setResult] = useState<SyncExcelResponse | null>(null);
  // Importación de imágenes
  const [imagesDragging, setImagesDragging] = useState(false);
  const [imagesFile, setImagesFile] = useState<File | null>(null);
  const [imagesUploading, setImagesUploading] = useState(false);
  const [imagesResult, setImagesResult] = useState<SyncExcelResponse | null>(null);
  // Selección de columnas a leer del Excel
  const [colSelection, setColSelection] = useState<Record<string, boolean>>(() => {
    const init: Record<string, boolean> = {};
    FIELD_DEFS.forEach((f) => (init[f.field] = f.field === "codigo" || f.field === "nombre"));
    return init;
  });
    const [colAliases, setColAliases] = useState<Record<string, string[]>>(() => {
    const init: Record<string, string[]> = {};
    FIELD_DEFS.forEach((f) => (init[f.field] = [f.label]));
    return init;
  });
  const [verifying, setVerifying] = useState(false);

  /** Construye el mapa campo -> [nombres aceptados] solo con las columnas activadas */
  const buildChosen = (): Record<string, string[]> | undefined => {
    const chosen: Record<string, string[]> = {};
    FIELD_DEFS.forEach((f) => {
      if (colSelection[f.field]) chosen[f.field] = colAliases[f.field];
    });
    if (!chosen["codigo"] && !chosen["nombre"]) {
      toast.error("Debes activar al menos la columna CODIGO o DESCRIPCION");
      return undefined;
    }
    return Object.keys(chosen).length > 0 ? chosen : undefined;
  };

  const validateFile = (file: File): boolean => {
    const validTypes = [
      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", // .xlsx
      "application/vnd.ms-excel", // .xls
    ];
    const validExtensions = [".xlsx", ".xls"];

    const isValidType = validTypes.includes(file.type);
    const isValidExtension = validExtensions.some((ext) =>
      file.name.toLowerCase().endsWith(ext),
    );

    return isValidType || isValidExtension;
  };

  const handleFileSelect = useCallback((file: File) => {
    if (!validateFile(file)) {
      toast.error(
        "Por favor seleccione un archivo Excel válido (.xlsx o .xls)",
      );
      return;
    }

    setSelectedFile(file);
    setResult(null);
  }, []);

  const handleDragOver = useCallback((e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();
    setIsDragging(true);
  }, []);

  const handleDragLeave = useCallback((e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();
    setIsDragging(false);
  }, []);

  const handleDrop = useCallback(
    (e: React.DragEvent<HTMLDivElement>) => {
      e.preventDefault();
      e.stopPropagation();
      setIsDragging(false);

      const files = Array.from(e.dataTransfer.files);
      if (files.length > 0) {
        handleFileSelect(files[0]);
      }
    },
    [handleFileSelect],
  );

  const handleFileInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;
    if (files && files.length > 0) {
      handleFileSelect(files[0]);
    }
  };

  // --- Importación de imágenes ---
  const handleImagesFileSelect = useCallback(
    (file: File) => {
      if (!validateFile(file)) {
        toast.error("Por favor seleccione un archivo Excel válido (.xlsx o .xls)");
        return;
      }
      setImagesFile(file);
      setImagesResult(null);
    },
    [],
  );

  const handleImagesDragOver = useCallback((e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();
    setImagesDragging(true);
  }, []);

  const handleImagesDragLeave = useCallback((e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();
    setImagesDragging(false);
  }, []);

  const handleImagesDrop = useCallback(
    (e: React.DragEvent<HTMLDivElement>) => {
      e.preventDefault();
      e.stopPropagation();
      setImagesDragging(false);
      const files = Array.from(e.dataTransfer.files);
      if (files.length > 0) {
        handleImagesFileSelect(files[0]);
      }
    },
    [handleImagesFileSelect],
  );

  const handleImagesInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;
    if (files && files.length > 0) {
      handleImagesFileSelect(files[0]);
    }
  };

  const handleImagesUpload = async () => {
    if (!imagesFile) {
      toast.error("Por favor seleccione un archivo Excel");
      return;
    }

    try {
      setImagesUploading(true);
      setImagesResult(null);
      const response = await syncExcelApi.syncImages(imagesFile);
      setImagesResult(response);

      if (response.success) {
        toast.success(response.message || "Importación de imágenes completada");
      } else {
        toast.warning(response.message || "Importación completada con advertencias");
      }
      if (response.warnings && response.warnings.length > 0) {
        response.warnings.slice(0, 5).forEach((w) => toast.warning(w));
      }
    } catch (error: any) {
      toast.error(error.message || "Error al importar las imágenes");
      setImagesResult({
        success: false,
        message: error.message || "Error al importar las imágenes",
        error: true,
      });
    } finally {
      setImagesUploading(false);
    }
  };

  const handleUpload = async () => {
    if (!selectedFile) {
      toast.error("Por favor seleccione un archivo Excel");
      return;
    }

    try {
      setUploading(true);
      setResult(null);

            const chosen = buildChosen();
      if (!chosen) return;

      const response = await syncExcelApi.syncExcel(selectedFile, chosen);
      setResult(response);

      if (response.success) {
        toast.success(
          response.message || "Sincronización completada exitosamente",
        );
      } else {
        toast.warning(
          response.message || "Sincronización completada con advertencias",
        );
      }

      if (response.warnings && response.warnings.length > 0) {
        response.warnings.forEach((warning) => {
          toast.warning(warning);
        });
      }
    } catch (error: any) {
      toast.error(error.message || "Error al sincronizar el archivo Excel");
      setResult({
        success: false,
        message: error.message || "Error al sincronizar el archivo Excel",
        error: true,
      });
    } finally {
      setUploading(false);
    }
  };

  /** Verifica la estructura del Excel SIN escribir en la base de datos */
  const handleVerify = async () => {
    if (!selectedFile) {
      toast.error("Por favor seleccione un archivo Excel");
      return;
    }

    try {
      setVerifying(true);
      setResult(null);

      const chosen = buildChosen();
      if (!chosen) return;

      const response = await syncExcelApi.syncExcel(selectedFile, chosen, true);
      setResult(response);

      if (response.success) {
        toast.success(response.message || "Verificación completada");
      }
    } catch (error: any) {
      toast.error(error.message || "Error al verificar el archivo Excel");
      setResult({
        success: false,
        message: error.message || "Error al verificar el archivo Excel",
        error: true,
      });
    } finally {
      setVerifying(false);
    }
  };

  // --- FUNCIÓN PARA DESCARGAR LA ESTRUCTURA ---
  const handleDownloadStructure = () => {
    const fileUrl = "/monticars-estructura.xlsx";

    const link = document.createElement("a");
    link.href = fileUrl;
    link.setAttribute("download", "monticars-estructura.xlsx");
    document.body.appendChild(link);
    link.click();

    if (link.parentNode) {
      link.parentNode.removeChild(link);
    }
  };

  const handleClear = () => {
    setSelectedFile(null);
    setResult(null);
  };

  return (
    <ProtectedRoute>
      <AdminLayout>
        <div className="page-header">
          <h1>Sincronizar Excel</h1>
        </div>

        <div className="card">
          <div className="card-header">
            <h3>Subir Archivo Excel</h3>
          </div>
          <div className="card-body">
            <p className="text-muted mb-4">
              Arrastre y suelte un archivo Excel aquí, o haga clic para
              seleccionar. El archivo debe contener vehículos y productos
              organizados por hojas.
            </p>

            <div
              className={`upload-area ${
                isDragging ? "upload-area--dragging" : ""
              } ${selectedFile ? "upload-area--has-file" : ""}`}
              onDragOver={handleDragOver}
              onDragLeave={handleDragLeave}
              onDrop={handleDrop}
              style={{
                border: `2px dashed ${isDragging ? "#e52727" : "#dee2e6"}`,
                borderRadius: "8px",
                padding: "40px",
                textAlign: "center",
                backgroundColor: isDragging ? "#f8f9fa" : "white",
                cursor: "pointer",
                transition: "all 0.3s ease",
                marginBottom: "20px",
              }}
              onClick={() => document.getElementById("file-input")?.click()}
            >
              <input
                id="file-input"
                type="file"
                accept=".xlsx,.xls"
                onChange={handleFileInputChange}
                style={{ display: "none" }}
              />

              {selectedFile ? (
                <div>
                  <i
                    className="fas fa-file-excel"
                    style={{
                      fontSize: "48px",
                      color: "#28a745",
                      marginBottom: "15px",
                    }}
                  />
                  <p style={{ margin: "10px 0", fontWeight: "bold" }}>
                    {selectedFile.name}
                  </p>
                  <p
                    style={{
                      margin: "5px 0",
                      color: "#6c757d",
                      fontSize: "14px",
                    }}
                  >
                    {(selectedFile.size / 1024).toFixed(2)} KB
                  </p>
                  <button
                    className="btn btn-sm btn-secondary mt-3"
                    onClick={(e) => {
                      e.stopPropagation();
                      handleClear();
                    }}
                  >
                    <i className="fas fa-times mr-2" />
                    Cambiar archivo
                  </button>
                </div>
              ) : (
                <div>
                  <i
                    className="fas fa-cloud-upload-alt"
                    style={{
                      fontSize: "48px",
                      color: "#6c757d",
                      marginBottom: "15px",
                    }}
                  />
                  <p style={{ margin: "10px 0", fontWeight: "bold" }}>
                    Arrastre y suelte el archivo aquí
                  </p>
                  <p style={{ margin: "5px 0", color: "#6c757d" }}>
                    o haga clic para seleccionar
                  </p>
                  <p
                    style={{
                      margin: "15px 0 0 0",
                      color: "#6c757d",
                      fontSize: "12px",
                    }}
                  >
                    Formatos soportados: .xlsx, .xls
                  </p>
                </div>
              )}
            </div>

            <div className="mt-3 p-3" style={{ backgroundColor: "#f8f9fa", borderRadius: "8px" }}>
              <div className="d-flex justify-content-between align-items-center mb-2">
                <strong style={{ fontSize: "14px" }}>
                  <i className="fas fa-columns mr-2 text-primary" />
                  Columnas a leer del Excel (elige qué importar)
                </strong>
                <div>
                  <button
                    type="button"
                    className="btn btn-sm btn-outline-secondary mr-1"
                    onClick={() => {
                      const all: Record<string, boolean> = {};
                      FIELD_DEFS.forEach((f) => (all[f.field] = true));
                      setColSelection(all);
                    }}
                  >
                    Todas
                  </button>
                  <button
                    type="button"
                    className="btn btn-sm btn-outline-secondary"
                    onClick={() => {
                      const none: Record<string, boolean> = {};
                      FIELD_DEFS.forEach((f) => (none[f.field] = false));
                      setColSelection(none);
                    }}
                  >
                    Ninguna
                  </button>
                </div>
              </div>
              <div className="row">
                {FIELD_DEFS.map((f) => (
                  <div className="col-md-6" key={f.field}>
                    <div className="form-check d-flex align-items-center mb-2">
                      <input
                        type="checkbox"
                        className="form-check-input mr-2"
                        id={`col-${f.field}`}
                        checked={!!colSelection[f.field]}
                        onChange={(e) =>
                          setColSelection((prev) => ({
                            ...prev,
                            [f.field]: e.target.checked,
                          }))
                        }
                      />
                      <label
                        className="form-check-label mr-2"
                        htmlFor={`col-${f.field}`}
                        style={{ minWidth: 150 }}
                      >
                        {f.name}
                        {f.required && <span className="text-danger"> *</span>}
                      </label>
                      {colSelection[f.field] && (
                        <div className="flex-grow-1">
                          {colAliases[f.field].map((alias, ai) => (
                            <div
                              key={ai}
                              className="d-flex align-items-center mb-1"
                            >
                              <input
                                type="text"
                                className="form-control form-control-sm mr-1"
                                style={{ maxWidth: 170 }}
                                value={alias}
                                title="Nombre de la columna en el Excel"
                                placeholder={f.label}
                                onChange={(e) =>
                                  setColAliases((prev) => ({
                                    ...prev,
                                    [f.field]: prev[f.field].map((a, k) =>
                                      k === ai ? e.target.value : a,
                                    ),
                                  }))
                                }
                              />
                              {colAliases[f.field].length > 1 && (
                                <button
                                  type="button"
                                  className="btn btn-sm btn-outline-danger py-0 px-2"
                                  title="Quitar este nombre"
                                  onClick={() =>
                                    setColAliases((prev) => ({
                                      ...prev,
                                      [f.field]: prev[f.field].filter(
                                        (_, k) => k !== ai,
                                      ),
                                    }))
                                  }
                                >
                                  ×
                                </button>
                              )}
                            </div>
                          ))}
                          <button
                            type="button"
                            className="btn btn-link btn-sm p-0 text-primary"
                            style={{ fontSize: 12 }}
                            onClick={() =>
                              setColAliases((prev) => ({
                                ...prev,
                                [f.field]: [...prev[f.field], ""],
                              }))
                            }
                            title="Agregar otro nombre aceptado para esta columna"
                          >
                            + Agregar nombre
                          </button>
                        </div>
                      )}
                    </div>
                  </div>
                ))}
              </div>
              <small className="text-muted">
                El texto editable es el nombre de la columna tal como aparece en la
                cabecera del Excel (ignora mayúsculas/acentos/espacios extra).
              </small>
            </div>

            <div className="d-flex justify-content-between align-items-center">
              <div>
                {/* BOTÓN DESCARGAR ESTRUCTURA (A LA IZQUIERDA) */}
                <button
                  className="btn btn-info mr-2"
                  onClick={handleDownloadStructure}
                >
                  <i className="fas fa-download mr-2" />
                  Descargar estructura
                </button>

                <button
                  className="btn btn-warning mr-2"
                  onClick={handleVerify}
                  disabled={!selectedFile || verifying || uploading}
                  title="Valida la estructura del Excel sin guardar nada"
                >
                  {verifying ? (
                    <>
                      <span
                        className="spinner-border spinner-border-sm mr-2"
                        role="status"
                      />
                      Verificando...
                    </>
                  ) : (
                    <>
                      <i className="fas fa-check-double mr-2" />
                      Verificar Excel
                    </>
                  )}
                </button>

                <button
                  className="btn btn-primary"
                  onClick={handleUpload}
                  disabled={!selectedFile || uploading || verifying}
                >
                  {uploading ? (
                    <>
                      <span
                        className="spinner-border spinner-border-sm mr-2"
                        role="status"
                      />
                      Sincronizando...
                    </>
                  ) : (
                    <>
                      <i className="fas fa-sync mr-2" />
                      Sincronizar Excel
                    </>
                  )}
                </button>
              </div>

              {selectedFile && !uploading && (
                <button className="btn btn-secondary" onClick={handleClear}>
                  <i className="fas fa-times mr-2" />
                  Limpiar
                </button>
              )}
            </div>
          </div>
        </div>

        {/* ... resto del código de resultados e información (sin cambios) ... */}
        {result && result.data && (
          <div className="card mt-4">
            <div className="card-header">
              <h3>
                <i
                  className="fas fa-check-circle mr-2"
                  style={{ color: result.success ? "#28a745" : "#ffc107" }}
                />
                Resultados de la Sincronización
              </h3>
            </div>
            <div className="card-body">
              <div className="row mb-4">
                <div className="col-md-3">
                  <div
                    className="text-center p-3"
                    style={{ backgroundColor: "#f8f9fa", borderRadius: "8px" }}
                  >
                    <h4 style={{ color: "#e52727", margin: 0 }}>
                      {result.data.sheets_processed}
                    </h4>
                    <p style={{ margin: "5px 0 0 0", color: "#6c757d" }}>
                      Hojas Procesadas
                    </p>
                  </div>
                </div>
                <div className="col-md-3">
                  <div
                    className="text-center p-3"
                    style={{ backgroundColor: "#f8f9fa", borderRadius: "8px" }}
                  >
                    <h4 style={{ color: "#17a2b8", margin: 0 }}>
                      {result.verify ? result.data.models_found ?? "-" : "-"}
                    </h4>
                    <p style={{ margin: "5px 0 0 0", color: "#6c757d" }}>
                      Modelos Leídos
                    </p>
                  </div>
                </div>
                <div className="col-md-3">
                  <div
                    className="text-center p-3"
                    style={{ backgroundColor: "#f8f9fa", borderRadius: "8px" }}
                  >
                    <h4 style={{ color: "#28a745", margin: 0 }}>
                      {result.data.total_products}
                    </h4>
                    <p style={{ margin: "5px 0 0 0", color: "#6c757d" }}>
                      {result.verify ? "Productos a Leer" : "Total de Productos"}
                    </p>
                  </div>
                </div>
                <div className="col-md-3">
                  <div
                    className="text-center p-3"
                    style={{ backgroundColor: "#f8f9fa", borderRadius: "8px" }}
                  >
                    <h4
                      style={{
                        color: (result.data.details || []).some((d) => !d.ok)
                          ? "#dc3545"
                          : "#28a745",
                        margin: 0,
                      }}
                    >
                      {(result.data.details || []).filter((d) => !d.ok).length}
                    </h4>
                    <p style={{ margin: "5px 0 0 0", color: "#6c757d" }}>
                      Hojas con Error
                    </p>
                  </div>
                </div>
              </div>

              {result.verify && result.data.chosen && (
                <div className="mb-4">
                  <h5>
                    <i className="fas fa-clipboard-check mr-2" />
                    Columnas que marcaste:
                  </h5>
                  <div className="d-flex flex-wrap">
                    {Object.entries(result.data.chosen).map(([field, labels]) => {
                      const def = FIELD_DEFS.find((f) => f.field === field);
                      const details = result.data?.details || [];
                      const totalSheets = details.length || 1;
                      const foundCount = details.filter(
                        (d) => d.found && d.found[field],
                      ).length;
                      const allOk = foundCount >= totalSheets;
                      return (
                        <div
                          key={field}
                          className={`py-2 px-3 mr-2 mb-2 rounded ${
                            allOk ? "border border-success" : "border border-warning"
                          }`}
                          style={{ backgroundColor: allOk ? "#eaf7ea" : "#fff8e1" }}
                        >
                          <strong>{def ? def.name : field}</strong>
                          <div style={{ fontSize: 11 }} className="text-muted">
                            {(Array.isArray(labels) ? labels : [labels]).join(" / ")}
                          </div>
                          <span
                            className={`badge badge-${allOk ? "success" : "warning"} mt-1`}
                          >
                            {allOk ? "✓ Tomada" : `${foundCount}/${totalSheets} hojas`}
                          </span>
                        </div>
                      );
                    })}
                  </div>
                </div>
              )}

              {result.data.details && result.data.details.length > 0 && (
                <div>
                  <h5>
                    {result.verify
                      ? "Resultado de la Verificación por Hoja:"
                      : "Detalles por Hoja:"}
                  </h5>
                  <div className="table-responsive">
                    <table className="table table-striped table-sm">
                      <thead>
                        <tr>
                          <th>Hoja</th>
                          <th>Marca</th>
                          <th>Modelo</th>
                          <th className="text-center">Filas</th>
                          <th className="text-center">Estado</th>
                          <th>Detalle</th>
                        </tr>
                      </thead>
                      <tbody>
                        {result.data.details.map(
                          (detail: SyncExcelDetail, index: number) => (
                            <tr key={index}>
                              <td>
                                <strong>{detail.sheet}</strong>
                              </td>
                              <td>{detail.brand || "-"}</td>
                              <td>{detail.model || "-"}</td>
                              <td className="text-center">{detail.rows ?? 0}</td>
                              <td className="text-center">
                                <span
                                  className={`badge ${
                                    (detail.missing || []).length > 0
                                      ? "badge-warning"
                                      : "badge-success"
                                  }`}
                                >
                                  {(detail.missing || []).length > 0
                                    ? "Parcial"
                                    : "OK"}
                                </span>
                              </td>
                              <td style={{ fontSize: 12 }}>
                                {(detail.missing || []).length > 0 ? (
                                  <span className="text-warning">
                                    <strong>Columnas faltantes:</strong>
                                    <ul className="mb-0 pl-3" style={{ listStyle: "disc" }}>
                                      {(detail.missing || []).map((m, i) => (
                                        <li key={i}>{m}</li>
                                      ))}
                                    </ul>
                                  </span>
                                ) : (
                                  <span className="text-success">
                                    Todas las columnas encontradas
                                  </span>
                                )}
                              </td>
                            </tr>
                          ),
                        )}
                      </tbody>
                    </table>
                  </div>
                </div>
              )}

              {result.warnings && result.warnings.length > 0 && (
                <div className="alert alert-warning mt-4">
                  <h5>
                    <i className="fas fa-exclamation-triangle mr-2" />
                    Advertencias:
                  </h5>
                  <ul style={{ marginBottom: 0 }}>
                    {result.warnings.map((warning, index) => (
                      <li key={index}>{warning}</li>
                    ))}
                  </ul>
                </div>
              )}
            </div>
          </div>
        )}

        {result && result.error && (
          <div className="card mt-4">
            <div className="card-header bg-danger text-white">
              <h3>
                <i className="fas fa-exclamation-circle mr-2" />
                Error en la Sincronización
              </h3>
            </div>
            <div className="card-body">
              <p className="text-danger">{result.message}</p>
            </div>
          </div>
        )}

        {/* Importar imágenes desde Excel */}
        <div className="card mt-4">
          <div className="card-header bg-success text-white">
            <h3>
              <i className="fas fa-images mr-2" />
              Importar Imágenes de Productos (Excel)
            </h3>
          </div>
          <div className="card-body">
            <p className="text-muted" style={{ fontSize: "14px" }}>
              Sube un Excel con las columnas <strong>CODIGO</strong> y{" "}
              <strong>Imagenes</strong>. Cada fila actualiza las imágenes del
              producto cuyo código coincida (hasta 4 enlaces por producto,
              separados por coma).
            </p>

            {!imagesFile ? (
              <div
                className={`text-center p-5 ${imagesDragging ? "border border-primary bg-light" : ""}`}
                style={{
                  border: "2px dashed #ced4da",
                  borderRadius: "8px",
                  cursor: "pointer",
                }}
                onDragOver={handleImagesDragOver}
                onDragLeave={handleImagesDragLeave}
                onDrop={handleImagesDrop}
                onClick={() => document.getElementById("images-excel-input")?.click()}
              >
                <i className="fas fa-cloud-upload-alt fa-3x text-muted mb-3" />
                <p className="mb-1 font-weight-bold">
                  Arrastra el Excel de imágenes aquí o haz clic para seleccionarlo
                </p>
                <small className="text-muted">Formatos aceptados: .xlsx, .xls</small>
                <input
                  id="images-excel-input"
                  type="file"
                  accept=".xlsx,.xls"
                  hidden
                  onChange={handleImagesInputChange}
                />
              </div>
            ) : (
              <div className="d-flex align-items-center justify-content-between border rounded p-3 bg-light">
                <div>
                  <i className="fas fa-file-excel fa-2x text-success mr-3" />
                  <strong>{imagesFile.name}</strong>{" "}
                  <small className="text-muted">
                    ({(imagesFile.size / 1024).toFixed(0)} KB)
                  </small>
                </div>
                <div>
                  <button
                    type="button"
                    className="btn btn-outline-secondary btn-sm mr-2"
                    onClick={() => {
                      setImagesFile(null);
                      setImagesResult(null);
                    }}
                    disabled={imagesUploading}
                  >
                    Cambiar
                  </button>
                  <button
                    type="button"
                    className="btn btn-success"
                    onClick={handleImagesUpload}
                    disabled={imagesUploading}
                  >
                    {imagesUploading ? (
                      <>
                        <span className="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true" />
                        Importando...
                      </>
                    ) : (
                      <>
                        <i className="fas fa-images mr-2" />
                        Importar imágenes
                      </>
                    )}
                  </button>
                </div>
              </div>
            )}

            {imagesResult && (
              <div
                className={`alert mt-3 mb-0 ${imagesResult.success ? "alert-success" : "alert-danger"}`}
              >
                <strong>{imagesResult.message}</strong>
                {imagesResult.data && (
                  <ul className="mb-0 mt-2" style={{ fontSize: "13px" }}>
                    <li>Filas leídas: {imagesResult.data.total_rows}</li>
                    <li>Productos actualizados: {imagesResult.data.updated}</li>
                    <li>Omitidos: {imagesResult.data.skipped}</li>
                  </ul>
                )}
                {imagesResult.warnings && imagesResult.warnings.length > 0 && (
                  <details className="mt-2">
                    <summary style={{ cursor: "pointer" }}>
                      Ver detalles ({imagesResult.warnings.length})
                    </summary>
                    <ul className="mb-0 mt-1" style={{ fontSize: "12px" }}>
                      {imagesResult.warnings.map((w, i) => (
                        <li key={i}>{w}</li>
                      ))}
                    </ul>
                  </details>
                )}
              </div>
            )}
          </div>
        </div>

        <div className="card mt-4">
          <div className="card-header bg-light">
            <h5 className="mb-0" style={{ fontSize: "16px" }}>
              Información
            </h5>
          </div>
          <div className="card-body" style={{ fontSize: "13px" }}>
            <div className="mb-3">
              <strong style={{ fontSize: "14px" }}>
                Estructura del Archivo Excel:
              </strong>
              <ul
                className="mb-0 mt-2"
                style={{ fontSize: "13px", paddingLeft: "20px" }}
              >
                <li>Cada hoja representa una categoría de vehículo</li>
                <li>El nombre de la hoja se usa como categoría del vehículo</li>
                <li>
                  Cabeceras en la <strong>fila 2</strong> (CODIGO,
                  REFERENCIA, DESCRIPCION, MINIMO-MAYOR, OFERTA, MAXIMO...),
                  productos debajo.
                </li>
                <li>
                  Puedes elegir qué columnas leer antes de subir y agregar
                  nombres alternativos por columna (+ Agregar nombre).
                </li>
                <li>
                  IMAGENES acepta URLs separadas por coma (máx. 4); se guardan
                  como imágenes del producto en el sitio web.
                </li>
                <li>
                  Usa <strong>Verificar Excel</strong> para validar cada hoja
                  antes de sincronizar.
                </li>
              </ul>
            </div>

            <div
              className="mb-3 p-2"
              style={{
                backgroundColor: "#f8f9fa",
                borderRadius: "4px",
                fontSize: "13px",
              }}
            >
              <strong style={{ fontSize: "14px" }}>
                Formato de las Filas:
              </strong>
              <ul
                className="mb-0 mt-2"
                style={{ fontSize: "13px", paddingLeft: "20px" }}
              >
                <li>
                  <strong>Nombre del vehículo:</strong> Debe iniciar en la fila
                  2, máximo hasta la fila 3, siempre en la columna A
                </li>
                <li>
                  <strong>Fila de cabecera:</strong> Debe ir inmediatamente
                  debajo del nombre del vehículo (descripción de columnas)
                </li>
                <li>
                  <strong>Lista de productos:</strong> Deben ir debajo de la
                  cabecera sin dejar filas vacías
                </li>
              </ul>
            </div>
          </div>
        </div>
      </AdminLayout>
    </ProtectedRoute>
  );
}

export default SincronizarExcelPage;