<?php
$pageTitle = 'EL3AB - الالغاز';
$extraCss = '/public/css/chessboard.css';
?>
<?php require __DIR__ . '/../includes/header.php'; ?>

<div class="puzzles-page" id="puzzles-page">

  <!-- Header -->
  <div class="text-center" style="margin-bottom:16px;">
    <h2 style="font-size:22px;font-weight:700;">الالغاز</h2>
    <p class="text-muted text-sm">حل الالغاز وطور مستواك</p>
  </div>

  <!-- Stats bar -->
  <div class="puzzle-stats" id="puzzle-stats">
    <div class="puzzle-stat">
      <svg class="icon-sm" style="color:var(--gold)"><use href="/public/icons/sprite.svg#icon-star"></use></svg>
      <div>
        <div class="puzzle-stat-value" id="puzzle-rating">1200</div>
        <div class="puzzle-stat-label">التصنيف</div>
      </div>
    </div>
    <div class="puzzle-stat">
      <svg class="icon-sm" style="color:var(--cyan)"><use href="/public/icons/sprite.svg#icon-fire"></use></svg>
      <div>
        <div class="puzzle-stat-value" id="puzzle-streak">0</div>
        <div class="puzzle-stat-label">السلسلة</div>
      </div>
    </div>
    <div class="puzzle-stat">
      <svg class="icon-sm" style="color:var(--purple)"><use href="/public/icons/sprite.svg#icon-trophy"></use></svg>
      <div>
        <div class="puzzle-stat-value" id="puzzle-best-streak">0</div>
        <div class="puzzle-stat-label">افضل سلسلة</div>
      </div>
    </div>
  </div>

  <!-- Tabs -->
  <div class="puzzle-tabs" id="puzzle-tabs">
    <button class="tab active" data-tab="daily">اليومي</button>
    <button class="tab" data-tab="streak">السلسلة</button>
    <button class="tab" data-tab="themes">المواضيع</button>
    <button class="tab" data-tab="rush">سباق</button>
  </div>

  <!-- Daily tab content -->
  <div class="puzzle-tab-content" id="tab-daily">
    <div class="card" style="margin-bottom:12px;">
      <div class="card-body">
        <p style="font-size:14px;font-weight:600;margin-bottom:8px;">
          <svg class="icon-sm" style="color:var(--gold)"><use href="/public/icons/sprite.svg#icon-star"></use></svg>
          الالغاز اليومية
        </p>
        <p class="text-sm text-muted" style="margin-bottom:12px;">3 الغاز جديدة كل يوم</p>
        <div class="daily-progress" id="daily-progress">
          <div class="daily-dot"></div>
          <div class="daily-dot"></div>
          <div class="daily-dot"></div>
        </div>
      </div>
    </div>
  </div>

  <!-- Streak tab content -->
  <div class="puzzle-tab-content" id="tab-streak" style="display:none;">
    <div class="card" style="margin-bottom:12px;">
      <div class="card-body text-center">
        <p style="font-size:14px;font-weight:600;margin-bottom:4px;">وضع السلسلة</p>
        <p class="text-sm text-muted">حل اكبر عدد على التوالي</p>
      </div>
    </div>
  </div>

  <!-- Themes tab content -->
  <div class="puzzle-tab-content" id="tab-themes" style="display:none;">
    <div class="puzzle-themes-grid" id="puzzle-themes-grid">
      <div class="puzzle-theme-card" data-theme="fork">
        <svg class="icon" style="color:var(--cyan)"><use href="/public/icons/sprite.svg#icon-sword"></use></svg>
        <span>شوكة</span>
      </div>
      <div class="puzzle-theme-card" data-theme="pin">
        <svg class="icon" style="color:var(--gold)"><use href="/public/icons/sprite.svg#icon-shield"></use></svg>
        <span>تثبيت</span>
      </div>
      <div class="puzzle-theme-card" data-theme="skewer">
        <svg class="icon" style="color:var(--error)"><use href="/public/icons/sprite.svg#icon-arrow-right"></use></svg>
        <span>سيخ</span>
      </div>
      <div class="puzzle-theme-card" data-theme="mate">
        <svg class="icon" style="color:var(--purple)"><use href="/public/icons/sprite.svg#icon-crown"></use></svg>
        <span>مات</span>
      </div>
      <div class="puzzle-theme-card" data-theme="endgame">
        <svg class="icon" style="color:var(--text-2)"><use href="/public/icons/sprite.svg#icon-flag"></use></svg>
        <span>نهايات</span>
      </div>
      <div class="puzzle-theme-card" data-theme="opening">
        <svg class="icon" style="color:var(--success)"><use href="/public/icons/sprite.svg#icon-board"></use></svg>
        <span>افتتاحيات</span>
      </div>
    </div>
  </div>

  <!-- Rush tab content -->
  <div class="puzzle-tab-content" id="tab-rush" style="display:none;">
    <div class="card" style="margin-bottom:12px;">
      <div class="card-body text-center">
        <p style="font-size:14px;font-weight:600;margin-bottom:4px;">سباق الالغاز</p>
        <p class="text-sm text-muted" style="margin-bottom:12px;">حل اكبر عدد خلال 3 دقائق</p>
        <div class="rush-timer" id="rush-timer" style="display:none;">
          <svg class="icon-sm" style="color:var(--error)"><use href="/public/icons/sprite.svg#icon-clock"></use></svg>
          <span id="rush-time">3:00</span>
          <span class="text-muted">|</span>
          <span id="rush-count">0 حل</span>
        </div>
        <button class="btn btn-gold" id="btn-start-rush" onclick="Puzzles.startRush()">
          <svg class="icon"><use href="/public/icons/sprite.svg#icon-fire"></use></svg>
          ابدأ السباق
        </button>
      </div>
    </div>
  </div>

  <!-- Puzzle board area (appears when solving) -->
  <div class="puzzle-board-area" id="puzzle-board-area" style="display:none;">
    <!-- Puzzle info -->
    <div class="puzzle-info">
      <div class="puzzle-info-rating">
        <svg class="icon-sm" style="color:var(--gold)"><use href="/public/icons/sprite.svg#icon-star"></use></svg>
        <span id="current-puzzle-rating">1200</span>
      </div>
      <div class="puzzle-info-turn" id="puzzle-turn">دور الابيض</div>
    </div>

    <!-- Board -->
    <div class="board-wrapper">
      <div class="board" id="board"></div>
    </div>

    <!-- Puzzle status -->
    <div class="puzzle-status" id="puzzle-status">
      <span>جد افضل نقلة</span>
    </div>

    <!-- Puzzle result overlay -->
    <div class="puzzle-result" id="puzzle-result" style="display:none;">
      <div class="puzzle-result-icon" id="puzzle-result-icon"></div>
      <div class="puzzle-result-text" id="puzzle-result-text"></div>
      <button class="btn btn-cyan btn-sm" id="btn-next-puzzle" onclick="Puzzles.nextPuzzle()">
        التالي
        <svg class="icon" style="transform:scaleX(-1)"><use href="/public/icons/sprite.svg#icon-arrow-right"></use></svg>
      </button>
    </div>
  </div>

</div>

<style>
.puzzles-page {
  max-width: 100%;
}

/* Stats */
.puzzle-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.puzzle-stat {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}

.puzzle-stat-value {
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-en);
}

.puzzle-stat-label {
  font-size: 11px;
  color: var(--text-3);
}

/* Tabs */
.puzzle-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 4px;
  margin-bottom: 16px;
}

.puzzle-tabs .tab {
  flex: 1;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.2s;
}

.puzzle-tabs .tab.active {
  background: var(--cyan);
  color: var(--text-inverse);
}

/* Daily progress dots */
.daily-progress {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.daily-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-3);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.daily-dot.solved {
  background: var(--success);
  border-color: var(--success);
}

.daily-dot.current {
  border-color: var(--cyan);
  animation: pulse 1.5s ease infinite;
}

@keyframes pulse {
  50% { transform: scale(1.1); }
}

/* Themes grid */
.puzzle-themes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.puzzle-theme-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  cursor: pointer;
  transition: background 0.2s;
  font-size: 14px;
  font-weight: 600;
}

.puzzle-theme-card:hover { background: var(--bg-3); }

/* Rush timer */
.rush-timer {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  font-family: var(--font-en);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
}

/* Puzzle board area */
.puzzle-board-area {
  margin-top: 16px;
}

.puzzle-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
}

.puzzle-info-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-en);
  font-weight: 600;
}

.puzzle-info-turn {
  font-size: 13px;
  color: var(--text-2);
}

.puzzle-status {
  text-align: center;
  padding: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
}

.puzzle-status.correct {
  color: var(--success);
}

.puzzle-status.wrong {
  color: var(--error);
}

/* Puzzle result */
.puzzle-result {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
  margin-top: 8px;
}

.puzzle-result-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.puzzle-result-text {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}
</style>

<script src="/public/js/chess.min.js"></script>
<script src="/public/js/board.js"></script>
<script src="/public/js/puzzles.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
  if (!App.isLoggedIn()) {
    window.location.href = '/login';
    return;
  }

  Puzzles.init();
});
</script>

<?php require __DIR__ . '/../includes/footer.php'; ?>
