'use client';

// Importación de iconos nativos según tu estructura de Boxicons
import { BookBookmark, Plus } from "@boxicons/react";; // Ajusta la ruta/librería de tus iconos según corresponda

export default function ListadoLibrosPage() {
  return (
    <>
      <div className="row">
        {/* ENCABEZADO */}
        <div className="col-md-5">
          <div className="alert alert-light text-dark" role="alert">
            <div className="row align-items-center">
              <div className="col-md-2 text-center">
                <BookBookmark style={{ fontSize: '57px' }} />
              </div>
              <div className="col">
                <div className="mt-1 mb-1">
                  <h4>
                    <strong>Listado de libros</strong>
                  </h4>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* FILTROS */}
        <div className="col-md-7">
          <div className="alert alert-light text-dark" role="alert">
            <div className="row align-items-center">
              <div className="col-md-12">
                <strong className="text-muted">Libros</strong>
              </div>
              <div className="col-md-9">
                <select id="ListaTipo" className="form-select">
                  <option value="">Seleccione tipo...</option>
                </select>
              </div>
              <div className="col-md-3">
                <button type="button" id="ButtonFiltro" className="btn btn-primary w-100">
                  Buscar
                </button>
              </div>
            </div>
          </div>
        </div>

        {/* BOTÓN AGREGAR */}
        <div className="col-md-12">
          <div className="alert alert-light text-dark" role="alert">
            <div className="row">
              <div className="col-md-12 text-end">
                <div className="d-grid gap-2">
                  <button
                    type="button"
                    id="LinkButtonAgregar"
                    className="btn btn-warning text-dark mt-1"
                    data-bs-toggle="modal"
                    data-bs-target="#modalAgregar"
                  >
                    <Plus className="me-1" />
                    <strong>Agregar nuevo libro</strong>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* TABLA DE LIBROS */}
        <div className="col-md-12">
          <div className="alert alert-light text-dark" role="alert">
            <div className="table-responsive">
              <table className="table table-sm mb-0" style={{ fontSize: '16px' }}>
                <thead>
                  <tr>
                    <th className="text-start" style={{ width: '5%' }}></th>
                    <th className="text-start" style={{ width: '35%' }}>Libro</th>
                    <th className="text-start" style={{ width: '7%' }}>Codigo</th>
                    <th className="text-start" style={{ width: '20%' }}>URL</th>
                    <th className="text-start" style={{ width: '15%' }}>Tipo de libro</th>
                  </tr>
                </thead>
                <tbody>
                  {/* Fila de ejemplo estática para iteración con .map */}
                  <tr>
                    <td className="text-start" style={{ width: '5%' }}>
                      <button
                        type="button"
                        className="btn p-0 border-0"
                        data-bs-toggle="modal"
                        data-bs-target="#modalAgregar"
                      >
                        <span className="badge bg-warning text-dark" style={{ fontWeight: 'normal' }}>
                          Edit
                        </span>
                      </button>
                    </td>
                    <td className="text-start" style={{ width: '35%' }}>
                      <span id="lblId" className="d-none">1</span>
                      English File Elementary
                    </td>
                    <td className="text-start" style={{ width: '7%' }}>EF-01</td>
                    <td className="text-start" style={{ width: '20%' }}>https://www.libreriainglesa.cl</td>
                    <td className="text-start" style={{ width: '15%' }}>General English</td>
                  </tr>
                </tbody>
              </table>
              <span id="LabelMsjBook" className="d-none">No existen registros.</span>
            </div>
          </div>
        </div>
      </div>

      {/* MODAL AGREGAR / EDITAR LIBRO */}
      <div
        className="modal fade"
        id="modalAgregar"
        data-bs-backdrop="static"
        data-bs-keyboard="false"
        tabIndex={-1}
        aria-hidden="true"
      >
        <div className="modal-dialog modal-dialog-centered">
          <div className="modal-content text-dark">
            <div className="modal-header">
              <h5 className="modal-title">
                Agregar <strong>PROGRAMA</strong>
              </h5>
              <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div className="modal-body">
              <table className="table table-borderless align-middle mb-0">
                <tbody>
                  <tr>
                    <td style={{ width: '35%' }}>
                      <strong>ID libreria</strong>
                    </td>
                    <td>
                      <span id="LabelIdEdit" className="d-none">0</span>
                      <input type="text" id="TextBoxIDLibreria" className="form-control" />
                      <span id="LabelID" className="d-none">0</span>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <strong>Libro</strong>
                    </td>
                    <td>
                      <input type="text" id="TextBoxDescripcion" className="form-control" />
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <strong>Codigo interno libro</strong>
                    </td>
                    <td>
                      <input type="text" id="TextBoxSKU" className="form-control" />
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <strong>URL</strong>
                    </td>
                    <td>
                      <input
                        type="text"
                        id="TextBoxUrl"
                        className="form-control"
                        defaultValue="https://www.libreriainglesa.cl"
                      />
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <strong>Tipo libro</strong>
                    </td>
                    <td>
                      <select id="tipoLibroAdd" className="form-select">
                        <option value="">Seleccione tipo...</option>
                      </select>
                    </td>
                  </tr>
                  <tr>
                    <td></td>
                    <td className="text-end pt-3">
                      <button type="button" className="btn btn-secondary me-2" data-bs-dismiss="modal">
                        Cancelar
                      </button>
                      <button type="button" id="LinkButtonIngresar" className="btn btn-primary cargando">
                        Registrar
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

      {/* MODAL DE ALERTAS Y NOTIFICACIONES */}
      <div
        className="modal fade"
        id="mensajeAlerta"
        data-bs-backdrop="static"
        data-bs-keyboard="false"
        tabIndex={-1}
        aria-hidden="true"
      >
        <div className="modal-dialog modal-dialog-centered modal-dialog-scrollable">
          <div className="modal-content text-dark">
            <div className="modal-header alert alert-secondary mb-0">
              <h5 className="modal-title float-start mt-1">
                <strong>Módulo Academico - Empresa</strong>
              </h5>
              <button type="button" className="btn-close float-end" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div className="modal-body alert mb-0" style={{ textAlign: 'justify' }}>
              <div className="row">
                <div className="col-md-12 text-center">
                  <h5>
                    <strong>
                      <span id="LabelMensaje">Mensaje de confirmación</span>
                    </strong>
                  </h5>
                </div>
              </div>
            </div>
            <div className="modal-footer">
              <button type="button" className="btn btn-primary" data-bs-dismiss="modal">
                Close
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* MODAL DE CARGA (LOADING) */}
      <div
        className="modal fade"
        id="mensajeCargando"
        data-bs-backdrop="static"
        data-bs-keyboard="false"
        tabIndex={-1}
        aria-hidden="true"
      >
        <div className="modal-dialog modal-dialog-centered">
          <div className="modal-content text-dark">
            <div className="modal-header alert alert-secondary mb-0">
              <h5 className="modal-title d-flex align-items-center">
                {/* <LoaderAlt className="bx-spin me-2" /> */}
                <strong>Módulo Academico - Empresas</strong>
              </h5>
            </div>
            <div className="modal-body text-center py-4 mb-0">
              <h5 className="mb-3">
                <strong>Procesando, espere un momento</strong>
              </h5>
              <div className="d-flex justify-content-center gap-2">
                <div className="spinner-grow spinner-grow-sm text-primary" role="status">
                  <span className="visually-hidden">Cargando...</span>
                </div>
                <div className="spinner-grow spinner-grow-sm text-danger" role="status">
                  <span className="visually-hidden">Cargando...</span>
                </div>
                <div className="spinner-grow spinner-grow-sm text-primary" role="status">
                  <span className="visually-hidden">Cargando...</span>
                </div>
                <div className="spinner-grow spinner-grow-sm text-danger" role="status">
                  <span className="visually-hidden">Cargando...</span>
                </div>
                <div className="spinner-grow spinner-grow-sm text-primary" role="status">
                  <span className="visually-hidden">Cargando...</span>
                </div>
                <div className="spinner-grow spinner-grow-sm text-danger" role="status">
                  <span className="visually-hidden">Cargando...</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* MODAL DE ERROR DE SISTEMA */}
      <div className="modal fade" id="modalError" tabIndex={-1} aria-hidden="true">
        <div className="modal-dialog modal-dialog-centered">
          <div className="modal-content text-dark">
            <div className="modal-header alert alert-danger mb-0">
              <h5 className="modal-title text-danger d-flex align-items-center">
                {/* <ErrorCircle className="me-2 fs-4" /> */}
                <strong>Error de Sistema</strong>
              </h5>
              <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div className="modal-body text-center py-4">
              <p className="mb-0 fs-6" id="mensajeErrorText">
                Ocurrió un error inesperado al procesar los libros. Por favor intente nuevamente.
              </p>
            </div>
            <div className="modal-footer">
              <button type="button" className="btn btn-secondary btn-sm" data-bs-dismiss="modal">
                Cerrar
              </button>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}