<?php if ( ! defined( 'ABSPATH' ) ) exit; ?>
<div id="a11y-app-container">
  <div id="bulkProgressContainer" style="display:none; text-align:center; padding:40px;">
    <h2 style="font-size: 1.5em; margin-bottom: 20px;">Analizando PDFs por lotes...</h2>
    <div style="background: #f0f0f1; border-radius: 4px; overflow: hidden; margin-bottom: 20px; height: 24px;">
      <div id="bulkProgressBar" style="background: #2271b1; height: 100%; width: 0%; transition: width 0.3s;"></div>
    </div>
    <p id="bulkProgressText" style="font-size: 1.2em; font-weight: bold;">0 / 0 completados</p>
    <ul id="bulkProgressLog" style="list-style-type:none; padding:0; text-align:left; max-height: 200px; overflow-y: auto; background:#fff; border:1px solid #ccd0d4; margin-top:20px; padding:10px;">
    </ul>
    <a id="bulkProgressDoneBtn" href="<?php echo esc_url( admin_url( 'admin.php?page=a11ysaurio-pdf-checker' ) ); ?>" class="button button-primary button-large" style="display:none; margin-top:20px;">Volver al Historial</a>
  </div>
  
  <header class="topbar" style="display:none;">
    <div class="brand">
      <h2 id="appTitle" data-i18n="appName"></h2>
      <p class="sub" data-i18n="appSubTitle"></p>
    </div>
    <button id="analyzeBtn" type="button" data-i18n="btnAnalyze" style="display:none;"></button>
  </header>

  <main id="mainContent" tabindex="-1" aria-labelledby="appTitle">
    <section class="tabs panel" aria-labelledby="workspaceHeading">
      <h2 id="workspaceHeading" class="section-title" data-i18n="workspaceHeading" style="display:none;"></h2>

      <div class="tab-buttons" role="tablist" aria-label="Vistas del análisis" style="margin-bottom: 20px; border-bottom: 1px solid #ccd0d4;">
        <button id="tabValidationBtn" class="tab-btn active button" type="button" role="tab" aria-selected="true" aria-controls="tabValidation" tabindex="0" data-i18n="tabValidation"></button>
        <button id="tabTreeBtn" class="tab-btn button" type="button" role="tab" aria-selected="false" aria-controls="tabTree" tabindex="-1" data-i18n="tabTree"></button>
        <button id="tabReaderBtn" class="tab-btn button" type="button" role="tab" aria-selected="false" aria-controls="tabReader" tabindex="-1" data-i18n="tabReader"></button>
        <button id="tabReportBtn" class="tab-btn button" type="button" role="tab" aria-selected="false" aria-controls="tabReport" tabindex="-1" data-i18n="tabReport"></button>
        <button id="tabGlossaryBtn" class="tab-btn button" type="button" role="tab" aria-selected="false" aria-controls="tabGlossary" tabindex="-1" data-i18n="tabGlossary"></button>
        <button id="tabMetadataBtn" class="tab-btn button" type="button" role="tab" aria-selected="false" aria-controls="tabMetadata" tabindex="-1" data-i18n="tabMetadata"></button>
      </div>

      <div id="tabTree" class="tab-panel" role="tabpanel" aria-labelledby="tabTreeBtn" hidden>
        <section class="inner-panel" aria-labelledby="treeFilterHeading">
          <h3 id="treeFilterHeading" class="subsection-title" data-i18n="treeFilterHeading"></h3>
          <label for="filterInput" data-i18n="filterLabel"></label>
          <input id="filterInput" type="text" data-i18n-placeholder="filterPlaceholder" autocomplete="off" style="width: 100%;">
        </section>

        <section class="inner-panel status" aria-labelledby="statusHeading">
          <h3 id="statusHeading" class="subsection-title" data-i18n="statusHeading"></h3>
          <div id="status" role="status" aria-live="polite" aria-atomic="true" data-i18n="statusWaiting">Esperando análisis...</div>
        </section>

        <section class="inner-panel meta" aria-labelledby="metaHeading">
          <h3 id="metaHeading" class="subsection-title" data-i18n="metaHeading"></h3>
          <div id="meta"></div>
        </section>

        <section class="inner-panel" aria-labelledby="treeHeading">
          <div class="toolbar-header" style="display: flex; justify-content: space-between; align-items: center;">
            <h3 id="treeHeading" class="subsection-title" data-i18n="treeHeading"></h3>
            <div class="tree-toolbar">
              <button id="expandAllBtn" class="button" type="button" data-i18n="btnExpandAll"></button>
              <button id="collapseAllBtn" class="button" type="button" data-i18n="btnCollapseAll"></button>
              <button id="copyJsonBtn" class="button" type="button" data-i18n="btnCopyJson"></button>
            </div>
          </div>
          <div id="tree" class="tree" aria-live="polite" style="margin-top: 15px;"></div>
        </section>
      </div>

      <div id="tabValidation" class="tab-panel active" role="tabpanel" aria-labelledby="tabValidationBtn">
        <section class="inner-panel" aria-labelledby="validationHeading">
          <div class="toolbar-header" style="display: flex; justify-content: space-between; align-items: center;">
            <h3 id="validationHeading" class="subsection-title" data-i18n="validationHeading"></h3>
            <div class="validation-toolbar">
              <select id="validationModeSelect" style="padding:4px 8px; border-radius:4px; border:1px solid var(--border); font-size:0.9em;">
                <option value="basic" data-i18n="modeBasic">Análisis Fácil</option>
                <option value="advanced" data-i18n="modeAdvanced">Análisis Avanzado</option>
              </select>
              <button id="copyValidationBtn" class="button" type="button" data-i18n="btnCopyValidation"></button>
            </div>
          </div>
          <div id="validationSummary" class="validation-summary" style="margin-top: 15px;"></div>
          <div id="validationList" class="validation-list" aria-live="polite"></div>
        </section>
      </div>

      <div id="tabReader" class="tab-panel" role="tabpanel" aria-labelledby="tabReaderBtn" hidden>
        <section class="inner-panel" aria-labelledby="readerHeading">
          <div class="toolbar-header">
            <h3 id="readerHeading" class="subsection-title" data-i18n="readerHeading"></h3>
          </div>
          <div style="margin-bottom: 12px; font-size: 0.9em; color: var(--muted);" data-i18n="readerDesc"></div>
          <div id="readerContent" style="background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 16px; min-height: 200px; max-height: 60vh; overflow-y: auto;" aria-live="polite"></div>
        </section>
      </div>

      <div id="tabReport" class="tab-panel" role="tabpanel" aria-labelledby="tabReportBtn" hidden>
        <section class="inner-panel" aria-labelledby="reportHeading">
          <div class="toolbar-header" style="display: flex; justify-content: space-between; align-items: center;">
            <h3 id="reportHeading" class="subsection-title" data-i18n="reportHeading"></h3>
            <div class="validation-toolbar">
              <button id="copyReportBtn" class="button" type="button" data-i18n="btnCopyReport"></button>
              <button id="downloadCsvBtn" class="button button-primary" type="button" data-i18n="btnDownloadCsv"></button>
            </div>
          </div>
          <div id="reportSummary" class="validation-summary" style="margin-top: 15px;"></div>
          <div id="reportList" class="validation-list" aria-live="polite"></div>
        </section>
      </div>

      <div id="tabGlossary" class="tab-panel" role="tabpanel" aria-labelledby="tabGlossaryBtn" hidden>
        <section class="inner-panel" aria-labelledby="glossaryHeading">
          <div class="toolbar-header">
            <h3 id="glossaryHeading" class="subsection-title" data-i18n="glossaryHeading"></h3>
          </div>
          <div style="margin-bottom: 12px; font-size: 0.9em; color: var(--text);" data-i18n="glossaryDesc"></div>
          <div id="glossaryContent" class="glossary-list" style="display:flex; flex-direction:column; gap:12px; max-height:60vh; overflow-y:auto;" aria-live="polite"></div>
        </section>
      </div>

      <div id="tabMetadata" class="tab-panel" role="tabpanel" aria-labelledby="tabMetadataBtn" hidden>
        <section class="inner-panel" aria-labelledby="metadataHeading">
          <div class="toolbar-header">
            <h3 id="metadataHeading" class="subsection-title" data-i18n="metadataHeading"></h3>
          </div>
          <div style="margin-bottom: 12px; font-size: 0.9em; color: var(--muted);" data-i18n="metadataDesc"></div>
          
          <div class="form-group" style="margin-bottom: 12px;">
            <label for="metaTitleInput" style="display:block;margin-bottom:4px;font-weight:600;" data-i18n="metaTitleLabel"></label>
            <input id="metaTitleInput" type="text" style="width:100%;padding:8px;border:1px solid var(--border);border-radius:4px;box-sizing:border-box;" data-i18n-placeholder="metaTitlePlaceholder">
          </div>

          <div class="form-group" style="margin-bottom: 16px;">
            <label for="metaLangInput" style="display:block;margin-bottom:4px;font-weight:600;" data-i18n="metaLangLabel"></label>
            <select id="metaLangInput" style="width:100%;padding:8px;border:1px solid var(--border);border-radius:4px;box-sizing:border-box;">
              <option value="">(Sin definir)</option>
              <option value="es">Español (es)</option>
              <option value="es-ES">Español de España (es-ES)</option>
              <option value="es-MX">Español de México (es-MX)</option>
              <option value="es-AR">Español de Argentina (es-AR)</option>
              <option value="en">English (en)</option>
              <option value="en-US">English US (en-US)</option>
              <option value="en-GB">English UK (en-GB)</option>
              <option value="fr">Français (fr)</option>
              <option value="de">Deutsch (de)</option>
              <option value="it">Italiano (it)</option>
              <option value="pt">Português (pt)</option>
              <option value="pt-BR">Português do Brasil (pt-BR)</option>
              <option value="ca">Català (ca)</option>
              <option value="gl">Galego (gl)</option>
              <option value="eu">Euskara (eu)</option>
            </select>
          </div>

          <div class="form-group" style="margin-bottom: 16px;">
            <label style="display:flex; align-items:center; cursor:pointer;">
              <input type="checkbox" id="metaPdfuaInput" style="margin-right: 18px;" />
              <span data-i18n="metaPdfuaLabel">Añadir identificador PDF/UA (si no existe)</span>
            </label>
            
            <div id="pdfuaAlert" style="display:none; margin-top: 8px; padding: 12px; background: #fff3cd; border-left: 4px solid #ffc107; border-radius: 4px; font-size: 0.9em; color: #333;">
              <strong data-i18n="pdfuaAlertTitle">¡Atención!</strong>
              <span data-i18n="pdfuaAlertDesc">La presencia o no del identificador PDF/UA no garantiza la accesibilidad del documento.</span>
              <a href="https://josehumanes.com/guia-para-entender-el-protocolo-matterhorn/" target="_blank" data-i18n="pdfuaAlertLink" style="color: var(--udl); font-weight: 500; margin-left: 4px;">Más información</a>
            </div>
          </div>

          <button id="exportModifiedPdfBtn" class="button button-primary" type="button" style="width:100%;padding:10px;cursor:pointer;" data-i18n="btnExportModifiedPdf"></button>
          
          <div id="metadataStatus" style="margin-top: 12px; font-size: 0.9em; font-weight: bold;" aria-live="polite"></div>
        </section>
      </div>
    </section>
  </main>

  <dialog id="errorModal" class="error-modal" aria-labelledby="modalTitle">
    <div class="modal-header">
      <h2 id="modalTitle" data-i18n="errorAffectedTags"></h2>
      <button id="closeModalBtn" class="close-modal-btn" type="button" aria-label="Cerrar detalles de error" data-i18n="btnClose"></button>
    </div>
    <div id="modalContent" class="modal-content" aria-live="polite">
    </div>
  </dialog>

  <dialog id="infoModal" class="error-modal" aria-labelledby="infoModalTitle">
    <div class="modal-header">
      <h2 id="infoModalTitle" data-i18n="infoModalTitle"></h2>
      <button id="closeInfoModalBtn" class="close-modal-btn" type="button" aria-label="Cerrar información" data-i18n="btnClose"></button>
    </div>
    <div id="infoModalContent" class="modal-content" aria-live="polite">
    </div>
  </dialog>
</div>
