{% extends "base.html" %}

{% block title %}Settings - LSMC Hub{% endblock %}

{% block content %}
<div class="page-header">
  <h1 class="page-title">Settings</h1>
</div>

<div class="card mb-lg">
  <div class="card-header">
    <h2 class="card-title">Theme Selection</h2>
  </div>
  <div class="card-body">
    <!-- Debug: Active Theme Info -->
    <div class="theme-debug" style="background: var(--bg-tertiary); padding: var(--space-md); border-radius: var(--radius-md); margin-bottom: var(--space-lg); font-family: var(--font-mono); font-size: var(--text-sm);">
      <div style="margin-bottom: var(--space-xs);"><strong>Active Theme:</strong> <code style="color: var(--accent-blue);">{{ current_theme }}</code></div>
      <div style="margin-bottom: var(--space-xs);"><strong>Active Font:</strong> <code style="color: var(--accent-primary);">{{ current_font }}</code></div>
      <div style="margin-bottom: var(--space-xs);"><strong>CSS Path:</strong> <code style="color: var(--accent-green);">{{ theme_css_path }}</code></div>
      <div style="margin-bottom: var(--space-xs);"><strong>data-theme attr:</strong> <code style="color: var(--accent-yellow);" id="data-theme-display">checking...</code></div>
      <div style="margin-bottom: var(--space-xs);"><strong>data-font attr:</strong> <code style="color: var(--accent-green);" id="data-font-display">checking...</code></div>
      <div><strong>user_theme context:</strong> <code style="color: var(--accent-primary);">{{ user_theme|default('not set') }}</code></div>
      <script>
        document.getElementById('data-theme-display').textContent = document.documentElement.getAttribute('data-theme') || 'not set';
        document.getElementById('data-font-display').textContent = document.documentElement.getAttribute('data-font') || 'not set';
      </script>
    </div>

    <p class="text-secondary mb-md">Choose your preferred visual theme for the LSMC Hub interface.</p>

    <div class="theme-selector">
      <div class="theme-grid">
        {% for theme in themes %}
        <div class="theme-option {% if theme.code == current_theme %}selected{% endif %}"
             onclick="selectTheme('{{ theme.code }}', this)">
          <div class="theme-preview theme-preview-{{ theme.code }}">
            <div class="theme-preview-header"></div>
            <div class="theme-preview-sidebar"></div>
            <div class="theme-preview-content">
              <div class="theme-preview-card"></div>
              <div class="theme-preview-card"></div>
            </div>
          </div>
          <div class="theme-info">
            <span class="theme-name">{{ theme.name }}</span>
            <span class="theme-desc">{{ theme.description }}</span>
          </div>
        </div>
        {% endfor %}
      </div>

      <div id="theme-status" class="mt-md"></div>
    </div>

    <div class="font-selector mt-lg">
      <h3 class="card-title" style="margin-bottom: var(--space-sm);">Typography</h3>
      <p class="text-secondary mb-md">Choose the UI font pair. The companion serif is only used for prominent titles.</p>

      <div class="font-grid">
        {% for font in font_choices %}
        <div class="font-option {% if font.code == current_font %}selected{% endif %}"
             onclick="selectFont('{{ font.code }}', this)">
          <div class="font-preview"
               style="--preview-body-font: {{ font.body_family }}; --preview-heading-font: {{ font.heading_family }};">
            <div class="font-preview-title">{{ font.heading_preview }}</div>
            <div class="font-preview-body">{{ font.body_preview }}</div>
          </div>
          <div class="theme-info">
            <span class="theme-name">{{ font.name }}</span>
            <span class="theme-desc">{{ font.description }}</span>
          </div>
        </div>
        {% endfor %}
      </div>

      <div id="font-status" class="mt-md"></div>
    </div>

    <script>
    function updateAppearance(payload, statusId, successMessage) {
      fetch('/api/themes/select', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: new URLSearchParams(payload).toString()
      })
      .then(response => response.json())
      .then(data => {
        const statusDiv = document.getElementById(statusId);
        if (data.status === 'success') {
          statusDiv.innerHTML = '<span class="text-success">✓ ' + successMessage + '</span>';
          setTimeout(() => window.location.reload(), 500);
        } else {
          statusDiv.innerHTML = '<span class="text-error">Error: ' + (data.detail || 'Unknown error') + '</span>';
        }
      })
      .catch(err => {
        document.getElementById(statusId).innerHTML = '<span class="text-error">Error: ' + err.message + '</span>';
      });
    }

    function selectTheme(themeCode, element) {
      document.querySelectorAll('.theme-option').forEach(el => el.classList.remove('selected'));
      element.classList.add('selected');
      updateAppearance({ theme: themeCode }, 'theme-status', 'Theme updated to ' + themeCode + '. Refreshing.');
    }

    function selectFont(fontCode, element) {
      document.querySelectorAll('.font-option').forEach(el => el.classList.remove('selected'));
      element.classList.add('selected');
      updateAppearance({ font: fontCode }, 'font-status', 'Typography updated to ' + fontCode + '. Refreshing.');
    }
    </script>
  </div>
</div>

<div class="card mb-lg">
  <div class="card-header">
    <h2 class="card-title">Display Preferences</h2>
  </div>
  <div class="card-body">
    <p class="text-secondary mb-md">Configure how dates and times are displayed throughout the interface.</p>

    <div class="form-group">
      <label class="form-label">Date/Time Format</label>
      <div class="datetime-format-options">
        <label class="option-card {% if (user_preferences.datetime_format or 'standard') == 'standard' %}selected{% endif %}" onclick="selectDatetimeFormat('standard', this)">
          <input type="radio" name="datetime_format" value="standard" {% if (user_preferences.datetime_format or 'standard') == 'standard' %}checked{% endif %} style="display: none;">
          <div class="option-title">Standard</div>
          <div class="option-desc">YYYY-MM-DD HH:MM:SS TZ</div>
          <div class="option-example">2026-01-25 15:50:16 PST</div>
        </label>
      </div>
      <div id="datetime-format-status" class="mt-sm"></div>
    </div>

    <div class="form-group mt-md">
      <label class="form-label" for="display-timezone">Display Timezone</label>
      <select id="display-timezone" class="form-select" onchange="selectDisplayTimezone(this.value)">
        {% set current_tz = user_preferences.display_timezone or 'UTC' %}
        {% for tz in ['UTC', 'America/Los_Angeles', 'America/Denver', 'America/Chicago', 'America/New_York', 'Europe/London'] %}
        <option value="{{ tz }}" {% if current_tz == tz %}selected{% endif %}>{{ tz }}</option>
        {% endfor %}
      </select>
      <p class="text-muted text-sm mt-xs">Stored in UTC; display converts to your selected timezone.</p>
      <div id="display-timezone-status" class="mt-sm"></div>
    </div>
  </div>
</div>

<div class="card mb-lg">
  <div class="card-header">
    <h2 class="card-title">Role Indicators</h2>
  </div>
  <div class="card-body">
    <p class="text-secondary mb-md">Your current roles in the system:</p>

    <div class="role-badges">
      {% for role in user_roles %}
      <span class="role-badge role-badge-{{ role|lower }}">{{ role }}</span>
      {% endfor %}
    </div>

    <p class="text-muted mt-md text-sm">
      Role badges appear throughout the interface to indicate your access level.
    </p>

    <div class="mt-lg" style="border-top: 1px solid var(--border-color); padding-top: var(--space-md);">
      <p class="text-secondary mb-sm">If you updated your roles in the admin panel but they're not reflected here, refresh your session:</p>
      <form action="/admin/settings/refresh-session" method="POST" style="display: inline;">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        <button type="submit" class="btn btn-secondary btn-sm">
          <span class="btn-icon">↻</span>
          Refresh Session from Database
        </button>
      </form>
    </div>
  </div>
</div>

{% if has_api_access %}
<div class="card mb-lg">
  <div class="card-header" style="display: flex; justify-content: space-between; align-items: center;">
    <h2 class="card-title">API Tokens</h2>
    <button onclick="toggleCreateTokenForm()" class="btn btn-primary btn-sm">+ Create Token</button>
  </div>
  <div class="card-body">
    <p class="text-secondary mb-md">
      Personal API tokens allow programmatic access to the LSMC Atlas API with your permissions.
    </p>

    <!-- Create Token Form (hidden by default) -->
    <div id="create-token-form" style="display: none; margin-bottom: var(--space-lg); padding: var(--space-lg); background: var(--bg-tertiary); border-radius: var(--radius-md);">
      <h3 style="margin-top: 0;">Create New Token</h3>
      <form action="/admin/settings/api-tokens" method="POST">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">

        <div class="form-group">
          <label class="form-label" for="token_name">Token Name *</label>
          <input type="text" id="token_name" name="token_name" class="form-input"
                 placeholder="e.g., CI/CD Pipeline, Development" required maxlength="100">
          <p class="text-muted text-sm">A descriptive name to identify this token's purpose.</p>
        </div>

        <div class="form-group">
          <label class="form-label" for="expires_in_days">Expires In</label>
          <select id="expires_in_days" name="expires_in_days" class="form-select">
            <option value="30">30 days</option>
            <option value="90" selected>90 days</option>
            <option value="180">180 days</option>
            <option value="365">365 days</option>
          </select>
        </div>

        <div style="display: flex; gap: var(--space-sm);">
          <button type="submit" class="btn btn-primary">Create Token</button>
          <button type="button" onclick="toggleCreateTokenForm()" class="btn btn-secondary">Cancel</button>
        </div>
      </form>
    </div>

    <!-- Token List -->
    {% if api_tokens %}
    <div class="table-container">
      <table class="data-table">
        <thead>
          <tr>
            <th>Name</th>
            <th>Prefix</th>
            <th>Status</th>
            <th>Created</th>
            <th>Expires</th>
            <th>Last Used</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for token in api_tokens %}
          <tr>
            <td><strong>{{ token.token_name }}</strong></td>
            <td><code style="font-size: var(--text-sm);">{{ token.token_prefix }}</code></td>
            <td>
              {% if token.status == 'ACTIVE' and not token.is_expired %}
                <span class="status-pill status-active">Active</span>
              {% elif token.status == 'REVOKED' %}
                <span class="status-pill status-rejected">Revoked</span>
              {% else %}
                <span class="status-pill status-on-hold">Expired</span>
              {% endif %}
            </td>
            <td>{{ token.created_at.strftime('%Y-%m-%d') }}</td>
            <td>{{ token.expires_at.strftime('%Y-%m-%d') }}</td>
            <td>{{ token.last_used_at | format_dt(user_preferences) if token.last_used_at else 'Never' }}</td>
            <td>
              {% if token.status == 'ACTIVE' and not token.is_expired %}
              <form action="/admin/settings/api-tokens/{{ token.id }}/revoke" method="POST"
                    style="display: inline;" onsubmit="return confirm('Revoke this token? This cannot be undone.');">
                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                <button type="submit" class="btn btn-sm btn-danger">Revoke</button>
              </form>
              {% else %}
              <span class="text-muted">—</span>
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <p class="text-muted">No API tokens yet. Create one to access the API programmatically.</p>
    {% endif %}
  </div>
</div>
{% else %}
<div class="card mb-lg">
  <div class="card-header">
    <h2 class="card-title">API Tokens</h2>
  </div>
  <div class="card-body">
    <p class="text-secondary">
      API tokens allow programmatic access to the LSMC Atlas API.
      You need to be a member of the <strong>API_ACCESS</strong> group to create API tokens.
    </p>
    <p class="text-muted text-sm">
      Contact your administrator to request access.
    </p>
  </div>
</div>
{% endif %}

<style>
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-lg);
}

.theme-option {
  cursor: pointer;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-sm);
  transition: all 0.2s ease;
}

.theme-option:hover {
  border-color: var(--accent-primary);
}

.theme-option.selected {
  border-color: var(--accent-primary);
  background: var(--bg-tertiary);
}

.theme-option {
  user-select: none;
}

.theme-preview {
  height: 100px;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  margin-bottom: var(--space-sm);
}

.theme-preview-default { background: #1a1a1a; }
.theme-preview-lsmc { background: #363844; }
.theme-preview-bold { background: #07090d; }
.theme-preview-professional { background: #eef2f6; }
.theme-preview-minimal { background: #002b36; }

.theme-preview-header {
  height: 12px;
  background: rgba(255,255,255,0.1);
}

.theme-preview-sidebar {
  position: absolute;
  left: 0;
  top: 12px;
  width: 30px;
  height: 100%;
  background: rgba(255,255,255,0.05);
}

.theme-preview-content {
  position: absolute;
  left: 35px;
  top: 20px;
  right: 8px;
}

.theme-preview-card {
  height: 25px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  margin-bottom: 6px;
}

/* Light preview needs darker chrome to read */
.theme-preview-professional .theme-preview-header {
  background: rgba(0,0,0,0.08);
}

.theme-preview-professional .theme-preview-sidebar {
  background: rgba(0,0,0,0.05);
}

.theme-preview-professional .theme-preview-card {
  background: rgba(0,0,0,0.10);
}

.theme-info {
  text-align: center;
}

.theme-name {
  display: block;
  font-weight: 600;
  margin-bottom: 2px;
}

.theme-desc {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.font-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-lg);
}

.font-option {
  cursor: pointer;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  transition: all 0.2s ease;
  user-select: none;
}

.font-option:hover {
  border-color: var(--accent-primary);
}

.font-option.selected {
  border-color: var(--accent-primary);
  background: var(--bg-tertiary);
}

.font-preview {
  display: grid;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
}

.font-preview-title {
  font-family: var(--preview-heading-font);
  font-size: var(--text-2xl);
  line-height: 1.05;
}

.font-preview-body {
  font-family: var(--preview-body-font);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.role-badges {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.role-badge {
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
}

.role-badge-admin { background: #dc2626; color: white; }
.role-badge-lsmc_staff { background: #2563eb; color: white; }
.role-badge-customer { background: #059669; color: white; }
.role-badge-read_only { background: #6b7280; color: white; }

/* DateTime format options */
.datetime-format-options {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.option-card {
  cursor: pointer;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  min-width: 220px;
  transition: all 0.2s ease;
}

.option-card:hover {
  border-color: var(--accent-primary);
}

.option-card.selected {
  border-color: var(--accent-primary);
  background: var(--bg-tertiary);
}

.option-title {
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.option-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin-bottom: var(--space-xs);
}

.option-example {
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  color: var(--accent-blue);
  background: var(--bg-tertiary);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
}
</style>

<script>
function selectDatetimeFormat(format, element) {
  // Update visual selection
  document.querySelectorAll('.datetime-format-options .option-card').forEach(el => el.classList.remove('selected'));
  element.classList.add('selected');

  updateUserPreference({ datetime_format: format }, 'datetime-format-status', 'Format updated. Changes will apply to new page loads.');
}

function selectDisplayTimezone(timezone) {
  updateUserPreference({ display_timezone: timezone }, 'display-timezone-status', 'Timezone updated. Refresh to update all visible timestamps.');
}

function updateUserPreference(payload, statusElementId, successMessage) {
  fetch('/api/user/preferences', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(payload)
  })
  .then(response => response.json())
  .then(data => {
    const statusDiv = document.getElementById(statusElementId);
    if (data.status === 'success') {
      statusDiv.innerHTML = '<span class="text-success">✓ ' + successMessage + '</span>';
      setTimeout(() => { statusDiv.innerHTML = ''; }, 3000);
    } else {
      statusDiv.innerHTML = '<span class="text-error">Error: ' + (data.detail || 'Unknown error') + '</span>';
    }
  })
  .catch(err => {
    document.getElementById(statusElementId).innerHTML = '<span class="text-error">Error: ' + err.message + '</span>';
  });
}

function toggleCreateTokenForm() {
  const form = document.getElementById('create-token-form');
  if (form.style.display === 'none') {
    form.style.display = 'block';
    document.getElementById('token_name').focus();
  } else {
    form.style.display = 'none';
  }
}
</script>
{% endblock %}