// modules/datatable_html.js
export function generateDatatableHTML(config = {}) {
  const {
    targetSelector,
    tableId = "datatable_" + Date.now(),
    filters = [],
    allowAction = true,
    hideOption = false,
  } = config;

  const container = document.querySelector(targetSelector);
  if (!container) {
    console.error("Target container not found:", targetSelector);
    return;
  }

  // === Generate Dynamic Filters ===
  const filtersHTML = filters
    .map(([filterName, placeholder, type = "options", options = []]) => {
      // tipe select (options)
      if (type === "options") {
        const optionsHTML = options
          .map((opt) => `<option value="${opt.value}">${opt.display}</option>`)
          .join("");
        return `
          <div class="col-md-3 mb-3">
            <select class="form-select form-select-sm datatable-filter" data-filter="${filterName}">
              <option value="">${placeholder}</option>
              ${optionsHTML}
            </select>
          </div>`;
      }

      // tipe date
      if (type === "date") {
        return `
          <div class="col-md-3 mb-3">
            <input type="date" class="form-control form-control-sm datatable-filter" 
              data-filter="${filterName}" placeholder="${placeholder}" />
          </div>`;
      }

      // tipe datetime
      if (type === "datetime") {
        return `
          <div class="col-md-3 mb-3">
            <input type="datetime-local" class="form-control form-control-sm datatable-filter" 
              data-filter="${filterName}" placeholder="${placeholder}" />
          </div>`;
      }

      // tipe text (default fallback)
      return `
        <div class="col-md-3 mb-3">
          <input type="text" class="form-control form-control-sm datatable-filter"
            data-filter="${filterName}" placeholder="${placeholder}" />
        </div>`;
    })
    .join("");

  // === Template Layout ===
  var option_html = `
  {{ option_data }}

  <table id="${tableId}" class="table table-striped table-hover align-middle table-row-dashed fs-7 gy-4 nowrap w-100">
    <thead>
      <tr id="${tableId}_thead"></tr>
    </thead>
    <tbody></tbody>
  </table>
`;

  if (hideOption == false) {
    option_html = option_html.replace(
      "{{ option_data }}",
      `
      <div class="card mb-5 shadow-sm border-0">
    <div class="card-body">
      <div class="row align-items-center g-3">
        <div class="col-md-3">
          <label class="form-label form-label-sm fw-semibold mb-1" for="${tableId}_search">Pencarian</label>
          <input type="text" id="${tableId}_search" class="form-control form-control-sm" placeholder="Search..." />
        </div>
        <div class="col-md-3">
          <label class="form-label form-label-sm fw-semibold mb-1" for="${tableId}_order_by">Urut Berdasarkan</label>
          <select id="${tableId}_order_by" class="form-select form-select-sm"></select>
        </div>
        <div class="col-md-2">
          <label class="form-label form-label-sm fw-semibold mb-1" for="${tableId}_order_type">Arah Urutan</label>
          <select id="${tableId}_order_type" class="form-select form-select-sm">
            <option value="DESC">DESC</option>
            <option value="ASC">ASC</option>
          </select>
        </div>
        <div class="col-md-2">
          <label class="form-label form-label-sm fw-semibold mb-1" for="${tableId}_rows_per_page">Load Data</label>
          <select id="${tableId}_rows_per_page" class="form-select form-select-sm">
            <option value="10">10 Rows</option>
            <option value="25">25 Rows</option>
            <option value="50">50 Rows</option>
            <option value="100" selected>100 Rows</option>
            <option value="250">250 Rows</option>
            <option value="500">500 Rows</option>
            <option value="1000">1000 Rows</option>
            <option value="5000">5000 Rows</option>
            <option value="10000">10000 Rows</option>
          </select>
        </div>
        <div class="col-md-2 text-end">
          <label class="form-label form-label-sm fw-semibold mb-1 invisible">Aksi</label>
          <button id="${tableId}_delete_selected" class="btn btn-sm btn-danger d-none">
            <i class="fa fa-trash"></i> Delete Selected
          </button>
        </div>
      </div>

      ${filters.length > 0 ? `<div class="row mt-3">${filtersHTML}</div>` : ""}
    </div>
  </div>
    `
    );
  } else {
    option_html = option_html.replace(
      "{{ option_data }}",
      `<div class="card mb-5 shadow-sm border-0">
        <div class="card-body">
          <div class="row align-items-center g-3"> 
            <div class="col-md-2 text-end">
              <label class="form-label form-label-sm fw-semibold mb-1 invisible">Aksi</label>
              <button id="${tableId}_delete_selected" class="btn btn-sm btn-danger d-none">
                <i class="fa fa-trash"></i> Delete Selected
              </button>
            </div>
          </div>
        </div>
      </div>
      `
    );
  }

  container.innerHTML = option_html;

  return { tableId, allowAction };
}
