{% extends "webapp/base.html" %}
{% block title %}{{ t('settings') }} — FIGHTSKILL{% endblock %}
{% block content %}
<div style="max-width:1100px;margin:0 auto">

  <!-- Premium Player Profile Card -->
  <div class="profile-card scroll-reveal" style="margin-bottom:2rem">
    <div class="profile-avatar">
      {% if user.avatar %}
      <img src="{{ url_for('static', filename='uploads/'+user.avatar) }}" style="width:100%;height:100%;border-radius:50%;object-fit:cover">
      {% else %}
      {{ user.display_name[0]|upper }}
      {% endif %}
    </div>
    <h2 class="profile-name">{{ user.display_name }}</h2>
    <div class="profile-level">Level {{ user.level | default(1) }} • Elite</div>
    <p style="color:var(--text-dim);font-size:0.88rem;margin-bottom:1.25rem">{{ user.email }}</p>

    <!-- Profile Stats -->
    <div class="profile-stats">
      <div class="profile-stat stat-green">
        <div class="stat-num">{{ stats.wins if stats else 0 }}</div>
        <div class="stat-label">{{ t('wins') | default('Wins') }}</div>
      </div>
      <div class="profile-stat stat-purple">
        <div class="stat-num">{{ stats.matches if stats else 0 }}</div>
        <div class="stat-label">{{ t('matches_played') | default('Matches') }}</div>
      </div>
      <div class="profile-stat stat-blue">
        <div class="stat-num">{{ stats.win_rate if stats else '0' }}%</div>
        <div class="stat-label">{{ t('win_rate') | default('Win Rate') }}</div>
      </div>
      <div class="profile-stat stat-green">
        <div class="stat-num">${{ stats.prize_earned | default(0) }}</div>
        <div class="stat-label">{{ t('earned') | default('Earned') }}</div>
      </div>
    </div>

    <!-- Achievements -->
    <div class="achievements">
      <div class="achievement unlocked">
        <span style="font-size:1.1rem">🏆</span>
        <span>{{ t('tournament_winner') | default('Tournament Winner') }}</span>
      </div>
      <div class="achievement unlocked">
        <span style="font-size:1.1rem">🔥</span>
        <span>{{ t('win_streak') | default('10 Win Streak') }}</span>
      </div>
    </div>
  </div>

  <!-- Edit Global Profile -->
  <div class="card scroll-reveal" style="margin-bottom:1.5rem">
    <h2 style="font-size:1.2rem;margin-bottom:1rem">✏️ {{ t('edit_profile') | default('Edit Global Profile') }}</h2>
    <form method="POST" action="{{ url_for('web.profile_update') }}" enctype="multipart/form-data">
      <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin-bottom:1rem">
        <div>
          <label style="font-size:0.72rem;color:var(--text-muted);text-transform:uppercase">{{ t('username') }}</label>
          <input class="input" name="username" value="{{ user.username or '' }}" style="width:100%">
        </div>
        <div>
          <label style="font-size:0.75rem;color:var(--text-muted);text-transform:uppercase">🎮 {{ t('steam_name') | default('Steam Name') }}</label>
          <input class="input" name="steam_name" value="{{ user.steam_name or '' }}" style="width:100%" placeholder="نام کاربری استیم">
        </div>
        <div>
          <label style="font-size:0.75rem;color:var(--text-muted);text-transform:uppercase">{{ t('profile_picture') | default('Profile Picture') }}</label>
          <input class="input" type="file" name="avatar" accept="image/*" style="width:100%;padding:0.5rem">
        </div>
      </div>
      <div style="margin-bottom:1rem">
        <label style="font-size:0.75rem;color:var(--text-muted);text-transform:uppercase">{{ t('bio') | default('Bio') }}</label>
        <textarea class="input" name="bio" rows="2" style="width:100%">{{ user.bio or '' }}</textarea>
      </div>
      <button type="submit" class="btn btn-primary btn-sm">{{ t('save_changes') | default('Save Changes') }}</button>
    </form>
  </div>

  <!-- Game Profiles -->
  <div class="card scroll-reveal" style="margin-bottom:1.5rem">
    <h2 style="font-size:1.3rem;margin-bottom:0.4rem">🎮 {{ t('game_profiles') | default('Game Profiles') }}</h2>
    <p style="color:var(--text-muted);font-size:0.8rem;margin-bottom:1.25rem">{{ t('game_profiles_desc') | default('Set your in-game identity separately for each game.') }}</p>
    <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem">
      {% for g in games %}
      <div style="background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);padding:1rem">
        <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem">
          <span style="font-size:1.4rem">{{ g.icon }}</span>
          <span style="font-weight:700;font-size:0.9rem">{{ g.name }}</span>
        </div>
        <form method="POST" action="{{ url_for('web.game_profile_save') }}">
          <input type="hidden" name="game_id" value="{{ g.id }}">
          <div style="margin-bottom:0.5rem">
            <input class="input" name="in_game_name" placeholder="{{ t('in_game_name') | default('In-game Name') }}"
                   value="{{ game_profiles[g.id].in_game_name if g.id in game_profiles else '' }}" style="width:100%;font-size:0.85rem">
          </div>
          <div style="margin-bottom:0.75rem">
            <input class="input" name="in_game_id" placeholder="{{ t('in_game_id') | default('In-game ID') }}"
                   value="{{ game_profiles[g.id].in_game_id if g.id in game_profiles else '' }}" style="width:100%">
          </div>
          <button type="submit" class="btn btn-outline btn-sm" style="width:100%">💾 {{ t('save') | default('Save') }}</button>
        </form>
      </div>
      {% endfor %}
    </div>
  </div>

  <!-- Change Password + Email -->
  <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-bottom:1.5rem">
    <div class="card">
      <h2 style="font-size:1.1rem;margin-bottom:1rem">🔒 {{ t('change_password') | default('Change Password') }}</h2>
      <form method="POST" action="{{ url_for('web.profile_password') }}">
        <div style="margin-bottom:0.75rem">
          <input class="input" type="password" name="current_password" placeholder="{{ t('current_password') | default('Current Password') }}" required style="width:100%">
        </div>
        <div style="margin-bottom:0.75rem">
          <input class="input" type="password" name="new_password" placeholder="{{ t('new_password') | default('New Password') }}" required minlength="6" style="width:100%">
        </div>
        <button type="submit" class="btn btn-outline btn-sm">{{ t('change_password') | default('Change Password') }}</button>
      </form>
    </div>

    <div class="card">
      <h2 style="font-size:1.1rem;margin-bottom:1rem">📧 {{ t('email_management') | default('Email') }}</h2>
      <div style="font-size:0.9rem;margin-bottom:0.4rem;color:var(--text)">{{ user.email }}</div>
      <div style="font-size:0.75rem;color:var(--text-muted);margin-bottom:0.9rem">
        {{ t('email_status') | default('Status') }}:
        {% if user.email_verified %}
        <span class="badge badge-neon" style="font-size:0.65rem">✓ {{ t('verified') | default('Verified') }}</span>
        {% else %}
        <span class="badge badge-orange" style="font-size:0.65rem">{{ t('unverified') | default('Unverified') }}</span>
        {% endif %}
      </div>
      <div>
        <label style="font-size:0.75rem;color:var(--text-muted);text-transform:uppercase">{{ t('language') }}</label>
        <div style="display:flex;gap:0.4rem;margin-top:0.4rem;flex-wrap:wrap">
          {% for lc in ['en','fa','tr','ar'] %}
          <form method="POST" action="{{ url_for('public.set_language') }}" style="display:inline">
            <input type="hidden" name="lang" value="{{ lc }}">
            <input type="hidden" name="region" value="{{ session.get('region','global') }}">
            <button type="submit" class="btn btn-sm {% if lc == current_lang %}btn-primary{% else %}btn-ghost{% endif %}">{{ lc|upper }}</button>
          </form>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>

  <!-- Region + Theme -->
  <div class="card" style="margin-bottom:1.5rem">
    <h2 style="font-size:1.1rem;margin-bottom:1rem">🎨 {{ t('theme') }} + {{ t('region') | default('Region') }}</h2>
    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem;align-items:start">
      <div>
        <label style="font-size:0.75rem;color:var(--text-muted);text-transform:uppercase">{{ t('region') | default('Region') }}</label>
        <select class="input" onchange="if(this.value) window.location.href='/region/set?region='+this.value" style="width:100%;margin-top:0.4rem;max-width:220px">
          {% for rc, rflag, rname in [('ir','🇮🇷','Iran'),('eu','🇪🇺','Europe'),('ea','🌏','Asia'),('na','🇺🇸','America'),('global','🌍','Global')] %}
          <option value="{{ rc }}" {% if (user.region or 'global') == rc %}selected{% endif %}>{{ rflag }} {{ rname }}</option>
          {% endfor %}
        </select>
        <small style="color:var(--text-muted);font-size:0.72rem;display:block;margin-top:0.3rem">{{ t('region_note') | default('You will play matches in your region.') }}</small>
      </div>
      <div>
        <label style="font-size:0.75rem;color:var(--text-muted);text-transform:uppercase">{{ t('theme') }}</label>
        <div style="display:flex;gap:0.5rem;margin-top:0.5rem">
          <button class="btn btn-sm {% if current_theme != 'light' %}btn-primary{% else %}btn-ghost{% endif %}" onclick="setTheme('dark')">{{ t('dark_mode') }}</button>
          <button class="btn btn-sm {% if current_theme == 'light' %}btn-primary{% else %}btn-ghost{% endif %}" onclick="setTheme('light')">{{ t('light_mode') }}</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Notification Preferences -->
  <div class="card scroll-reveal">
    <h2 style="font-size:1.1rem;margin-bottom:1rem">🔔 {{ t('notification_settings') | default('Notification Settings') }}</h2>
    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0.75rem" id="notifPrefs">
      {% set prefs = [
        ('team_invite', 'Team Invitations'),
        ('match_registration', 'Tournament Registration'),
        ('room_code', 'Room Code Available'),
        ('prize', 'Prize Received'),
        ('wallet', 'Wallet Transactions'),
        ('system', 'System Announcements')
      ] %}
      {% for key, en_label in prefs %}
      <label style="display:flex;align-items:center;gap:0.5rem;font-size:0.85rem;color:var(--text);cursor:pointer">
        <input type="checkbox" class="notif-pref" data-key="{{ key }}" checked style="width:auto">
        {{ en_label }}
      </label>
      {% endfor %}
    </div>
    <p style="color:var(--text-muted);font-size:0.72rem;margin-top:0.75rem">{{ t('notif_prefs_note') | default('Preferences are saved automatically.') }}</p>
  </div>

</div>

<script>
function setTheme(theme) {
  document.documentElement.setAttribute('data-theme', theme);
  localStorage.setItem('fightskill-theme', theme);
  fetch('/theme/save', {
    method: 'POST',
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    body: 'theme=' + theme
  }).then(() => location.reload());
}

document.querySelectorAll('.notif-pref').forEach(cb => {
  cb.addEventListener('change', () => {
    const prefs = JSON.parse(localStorage.getItem('fightskill-notif-prefs') || '{}');
    document.querySelectorAll('.notif-pref').forEach(c => prefs[c.dataset.key] = c.checked);
    localStorage.setItem('fightskill-notif-prefs', JSON.stringify(prefs));
  });
});
</script>
{% endblock %}