<?php
defined( 'ABSPATH' ) || exit;

$jalpi_locations = Jalpi_Theme_Builder::get_locations();
$jalpi_first_loc = array_key_first( $jalpi_locations );
?>
<div class="jalpi-tb-wrap">

  <!-- ── Header ─────────────────────────────────────────────────────────── -->
  <div class="jalpi-tb-header">
    <div class="jalpi-tb-header__title">
      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <rect x="3" y="3" width="18" height="5" rx="1"/>
        <rect x="3" y="10" width="18" height="8" rx="1"/>
        <rect x="3" y="20" width="18" height="1" rx="0.5"/>
      </svg>
      <div>
        <h1><?php echo esc_html__( 'Theme Builder', 'jalpi-page-builder' ); ?></h1>
        <p><?php echo esc_html__( 'Design your site structure with reusable Jalpi Page Builder templates.', 'jalpi-page-builder' ); ?></p>
      </div>
    </div>
    <div class="jalpi-tb-header__actions">
      <span id="jalpi-tb-save-indicator" class="jalpi-tb-badge jalpi-tb-badge--muted" style="display:none"><?php echo esc_html__( 'Saved', 'jalpi-page-builder' ); ?></span>
    </div>
  </div>

  <!-- ── Layout ────────────────────────────────────────────────────────── -->
  <div class="jalpi-tb-layout">

    <!-- Left: location nav -->
    <nav class="jalpi-tb-nav" id="jalpi-tb-nav">
      <?php foreach ( $jalpi_locations as $jalpi_loc_key => $jalpi_loc ) : ?>
        <a
          class="jalpi-tb-nav__item<?php echo esc_attr( $jalpi_loc_key === $jalpi_first_loc ? ' is-active' : '' ); ?>"
          href="#"
          data-location="<?php echo esc_attr( $jalpi_loc_key ); ?>"
        >
          <span class="jalpi-tb-nav__icon jalpi-tb-nav__icon--<?php echo esc_attr( $jalpi_loc['icon'] ); ?>">
            <?php
            echo wp_kses(
                jalpi_tb_location_icon( $jalpi_loc_key ),
                [
                    'svg'      => [ 'width' => true, 'height' => true, 'viewbox' => true, 'fill' => true, 'stroke' => true, 'stroke-width' => true, 'stroke-linecap' => true ],
                    'rect'     => [ 'x' => true, 'y' => true, 'width' => true, 'height' => true, 'rx' => true, 'fill' => true, 'stroke' => true, 'opacity' => true ],
                    'path'     => [ 'd' => true, 'fill' => true, 'stroke' => true ],
                    'line'     => [ 'x1' => true, 'y1' => true, 'x2' => true, 'y2' => true, 'stroke' => true ],
                    'circle'   => [ 'cx' => true, 'cy' => true, 'r' => true, 'fill' => true, 'stroke' => true ],
                    'polyline' => [ 'points' => true, 'fill' => true, 'stroke' => true ],
                ]
            );
            ?>
          </span>
          <span class="jalpi-tb-nav__label"><?php echo esc_html( $jalpi_loc['label'] ); ?></span>
          <span class="jalpi-tb-nav__count" data-loc-count="<?php echo esc_attr( $jalpi_loc_key ); ?>">0</span>
        </a>
      <?php endforeach; ?>
    </nav>

    <!-- Right: template list for selected location -->
    <main class="jalpi-tb-main">

      <div class="jalpi-tb-section-header">
        <div class="jalpi-tb-section-header__info">
          <h2 id="jalpi-tb-section-title"><?php echo esc_html( $jalpi_locations[ $jalpi_first_loc ]['label'] ); ?></h2>
          <p id="jalpi-tb-section-desc"><?php echo esc_html( $jalpi_locations[ $jalpi_first_loc ]['description'] ); ?></p>
        </div>
        <button class="jalpi-tb-btn jalpi-tb-btn--primary" id="jalpi-tb-add-new">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
          <?php echo esc_html__( 'Add Template', 'jalpi-page-builder' ); ?>
        </button>
      </div>

      <div id="jalpi-tb-templates-list" class="jalpi-tb-templates">
        <div class="jalpi-tb-loading">
          <div class="jalpi-tb-spinner"></div>
          <?php echo esc_html__( 'Loading templates…', 'jalpi-page-builder' ); ?>
        </div>
      </div>

    </main>
  </div><!-- .jalpi-tb-layout -->

</div><!-- .jalpi-tb-wrap -->

<!-- ── Condition Builder Modal ─────────────────────────────────────────── -->
<div class="jalpi-tb-overlay" id="jalpi-tb-modal-overlay" aria-hidden="true">
  <div class="jalpi-tb-modal" role="dialog" aria-labelledby="jalpi-tb-modal-title">

    <div class="jalpi-tb-modal__hd">
      <h3 id="jalpi-tb-modal-title"><?php echo esc_html__( 'Edit Conditions', 'jalpi-page-builder' ); ?></h3>
      <p id="jalpi-tb-modal-tpl-name" class="jalpi-tb-modal__subtitle"></p>
      <button class="jalpi-tb-modal__close" id="jalpi-tb-modal-close" aria-label="<?php echo esc_attr__( 'Close', 'jalpi-page-builder' ); ?>">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
      </button>
    </div>

    <div class="jalpi-tb-modal__body">
      <p class="jalpi-tb-modal__hint">
        <?php echo wp_kses_post( __( 'A template is shown when <strong>at least one</strong> <em>Is</em> condition matches, and <strong>no</strong> <em>Is Not</em> condition matches.', 'jalpi-page-builder' ) ); ?>
      </p>

      <div class="jalpi-conditions-list" id="jalpi-conditions-list">
        <!-- Condition rows injected by JS -->
      </div>

      <button class="jalpi-tb-btn jalpi-tb-btn--ghost jalpi-tb-btn--sm" id="jalpi-condition-add">
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
        <?php echo esc_html__( 'Add Condition', 'jalpi-page-builder' ); ?>
      </button>
    </div>

    <div class="jalpi-tb-modal__ft">
      <button class="jalpi-tb-btn jalpi-tb-btn--ghost" id="jalpi-conditions-cancel"><?php echo esc_html__( 'Cancel', 'jalpi-page-builder' ); ?></button>
      <button class="jalpi-tb-btn jalpi-tb-btn--primary" id="jalpi-conditions-save"><?php echo esc_html__( 'Save Conditions', 'jalpi-page-builder' ); ?></button>
    </div>

  </div>
</div>

<!-- ── Name / Create Modal ─────────────────────────────────────────────── -->
<div class="jalpi-tb-overlay" id="jalpi-tb-create-overlay" aria-hidden="true">
  <div class="jalpi-tb-modal jalpi-tb-modal--sm" role="dialog">
    <div class="jalpi-tb-modal__hd">
      <h3><?php echo esc_html__( 'New Template', 'jalpi-page-builder' ); ?></h3>
      <button class="jalpi-tb-modal__close" id="jalpi-create-close" aria-label="<?php echo esc_attr__( 'Close', 'jalpi-page-builder' ); ?>">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
      </button>
    </div>
    <div class="jalpi-tb-modal__body">
      <label class="jalpi-tb-field">
        <span class="jalpi-tb-field__label"><?php echo esc_html__( 'Template Name', 'jalpi-page-builder' ); ?></span>
        <input type="text" id="jalpi-create-title" class="jalpi-tb-input" placeholder="<?php echo esc_attr__( 'e.g. Main Header', 'jalpi-page-builder' ); ?>">
      </label>
    </div>
    <div class="jalpi-tb-modal__ft">
      <button class="jalpi-tb-btn jalpi-tb-btn--ghost" id="jalpi-create-cancel"><?php echo esc_html__( 'Cancel', 'jalpi-page-builder' ); ?></button>
      <button class="jalpi-tb-btn jalpi-tb-btn--primary" id="jalpi-create-confirm">
        <?php echo esc_html__( 'Create & Edit', 'jalpi-page-builder' ); ?>
      </button>
    </div>
  </div>
</div>

<?php
function jalpi_tb_location_icon( string $jalpi_loc ): string {
    $icons = [
        'header'  => '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="3" y="3" width="18" height="5" rx="1"/><rect x="3" y="10" width="18" height="11" rx="1" opacity=".35"/></svg>',
        'footer'  => '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="3" y="3" width="18" height="13" rx="1" opacity=".35"/><rect x="3" y="18" width="18" height="3" rx="1"/></svg>',
        'single'  => '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>',
        'archive' => '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>',
        'search'  => '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>',
        '404'     => '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>',
    ];
    return $icons[ $jalpi_loc ] ?? $icons['single'];
}
?>
