(() => {
  function create({
    appState,
    escapeHtml,
    cleanString,
    formatWholeNumber,
    formatCurrency,
    formatDate,
    formatHours,
  }) {
    function renderServiceRequestDetailTable(items) {
      return `
        <div class="arch-panel-extension-table-wrap is-detail">
          <table class="arch-panel-extension-table arch-panel-extension-sr-detail-table">
            <thead>
              <tr>
                <th>Customer</th>
                <th>SR Number</th>
                <th>Queue</th>
                <th>Service</th>
                <th>Pillar</th>
                <th class="is-numeric">Oppty value</th>
                <th class="is-numeric">Horas apontadas</th>
                <th>Customer deadline</th>
                <th>Oppty Status</th>
              </tr>
            </thead>
            <tbody>
              ${items
                .map(
                  (serviceRequest) => `
                    <tr>
                      <td>${escapeHtml(serviceRequest.customerName || "-")}</td>
                      <td>${renderServiceRequestLink(serviceRequest)}</td>
                      <td>${escapeHtml(serviceRequest.queueName || "-")}</td>
                      <td>${escapeHtml(serviceRequest.serviceName || "-")}</td>
                      <td>${escapeHtml(serviceRequest.pillarLabel || "-")}</td>
                      <td class="is-numeric">${formatCurrency(serviceRequest.opportunityValue)}</td>
                      <td class="is-numeric">${renderReportedHoursLink(serviceRequest)}</td>
                      <td>${escapeHtml(formatDate(serviceRequest.customerDeadline) || "-")}</td>
                      <td>${escapeHtml(serviceRequest.opportunityStatusLabel || "-")}</td>
                    </tr>
                  `
                )
                .join("")}
            </tbody>
          </table>
        </div>
      `;
    }

    function renderSortButton(label, sortKey, isNumeric = false) {
      const currentKey = appState.detailModal?.sortKey || "";
      const currentDirection = appState.detailModal?.sortDirection || "asc";
      const indicator =
        currentKey === sortKey ? (currentDirection === "asc" ? " ↑" : " ↓") : "";

      return `
        <button
          type="button"
          class="arch-panel-extension-sort-button${isNumeric ? " is-numeric" : ""}"
          data-action="sort-detail"
          data-sort-key="${escapeHtml(sortKey)}"
          aria-label="Sort by ${escapeHtml(label)}"
        >
          <span>${escapeHtml(label)}${indicator}</span>
        </button>
      `;
    }

    function renderOpportunityLink(workload) {
      const label = workload.opportunityNumber || "Opportunity";

      if (!workload.opportunityId || !workload.opportunityNumber) {
        return escapeHtml(label);
      }

      const href = `https://eeho.fa.us2.oraclecloud.com/fscmUI/redwood/cx-sales/application/container/opportunities/opportunities-detail?id=${encodeURIComponent(
        workload.opportunityId
      )}&puid=${encodeURIComponent(workload.opportunityNumber)}`;

      return `<a class="arch-panel-extension-row-link" href="${href}" target="_blank" rel="noreferrer">${escapeHtml(label)}</a>`;
    }

    function renderServiceRequestLink(serviceRequest) {
      const srNumber = cleanString(serviceRequest?.srNumber);

      if (!srNumber) {
        return "-";
      }

      const href = `https://eeho.fa.us2.oraclecloud.com/fscmUI/redwood/service/ec/container/sr/edit?srNumber=${encodeURIComponent(
        srNumber
      )}`;

      return `<a class="arch-panel-extension-row-link" href="${href}" target="_blank" rel="noreferrer">${escapeHtml(srNumber)}</a>`;
    }

    function renderReportedHoursLink(serviceRequest) {
      const srNumber = cleanString(serviceRequest?.srNumber);
      const label = formatHours(serviceRequest?.totalHoursWorked);

      if (!srNumber) {
        return escapeHtml(label);
      }

      return `
        <button
          type="button"
          class="arch-panel-extension-row-link arch-panel-extension-inline-link-button"
          data-action="open-time-entries"
          data-sr-number="${escapeHtml(srNumber)}"
          aria-label="Abrir apontamentos de horas da SR ${escapeHtml(srNumber)}"
        >
          ${escapeHtml(label)}
        </button>
      `;
    }

    function renderWorkloadLink(workload, showRampAlert = false) {
      const description = workload.description ? ` | ${workload.description}` : "";
      const label = `${workload.name || "Unnamed workload"}${description}`;

      if (!workload.workloadId) {
        return `${escapeHtml(label)}${renderRampAlertButton(
          workload,
          showRampAlert
        )}`;
      }

      const href = `https://spa.oracle.com/oalcrm/web/api/g2m-consumer-application/ui/index.html?ojr=workload_workbench/workload_details;workloadId=${encodeURIComponent(
        workload.workloadId
      )}`;

      return `
        <span class="arch-panel-extension-workload-link-cell">
          <a class="arch-panel-extension-row-link" href="${href}" target="_blank" rel="noreferrer">${escapeHtml(label)}</a>
          ${renderRampAlertButton(workload, showRampAlert)}
        </span>
      `;
    }

    function renderRampAlertButton(workload, showRampAlert) {
      if (!showRampAlert || !workload.workloadId) {
        return "";
      }

      return `
        <button
          type="button"
          class="arch-panel-extension-ramp-alert-button"
          data-action="open-ramp-comparison"
          data-workload-id="${escapeHtml(workload.workloadId || "")}"
          title="Requer atencao: existe Delta diferente de zero"
          aria-label="Abrir comparacao de rampa com inconsistencia para ${escapeHtml(
            workload.name || "workload"
          )}"
        >
          !
        </button>
      `;
    }

    function getHeaderNote() {
      if (appState.status === "loading") {
        return appState.loadingMessage || "Loading";
      }

      if (appState.status === "error") {
        return "Extraction failed";
      }

      if (appState.dataset) {
        return `${appState.dataset.user.userEmail} - ${formatWholeNumber(
          appState.dataset.summary.eligibleWorkloads.length
        )} eligible workloads`;
      }

      return "Ready";
    }

    function getHeaderSummary() {
      if (appState.status === "loading") {
        return appState.loadingMessage || "Loading";
      }

      if (appState.status === "error") {
        return "Extraction failed";
      }

      if (appState.dataset) {
        return `${appState.dataset.user.userEmail} | ${formatWholeNumber(
          appState.dataset.summary.eligibleWorkloads.length
        )} eligible workloads`;
      }

      return "Ready";
    }

    return Object.freeze({
      renderServiceRequestDetailTable,
      renderSortButton,
      renderOpportunityLink,
      renderWorkloadLink,
      getHeaderNote,
      getHeaderSummary,
    });
  }

  globalThis.ArchPanelRenderHelpers = Object.freeze({
    create,
  });
})();