{% extends "base.html" %}
{% from 'macros/help.html' import help_icon %}
{% from 'macros/badges.html' import badge_secondary %}
{% block title %}Můj profil — MedCover{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-12 col-lg-9">
    <h2 class="mb-4">Můj profil</h2>

    <!-- ── Profile edit ── -->
    <div class="card mb-4">
      <div class="card-header fw-semibold">Osobní údaje</div>
      <div class="card-body">
        <form method="POST" novalidate>
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <input type="hidden" name="action" value="profile">
          <div class="row g-3">
            <div class="col-12 col-md-6">
            <label for="name" class="form-label">Celé jméno <small class="text-muted fw-normal">(Příjmení Jméno)</small>
              {{ help_icon("Zadejte nejdříve příjmení, pak jméno — např. Novák Jan. Zobrazuje se ve všech přehledech a výkazech.") }}
            </label>
              <input type="text" class="form-control" id="name" name="name" value="{{ user.name }}" placeholder="Novák Jan" required>
            </div>
            <div class="col-12 col-md-6">
              <label for="email" class="form-label">E-mail
                {{ help_icon("Přihlašovací e-mail. Nelze změnit — kontaktujte administrátora.") }}
              </label>
              <input type="email" class="form-control" id="email" value="{{ user.email }}" disabled>
            </div>
            <div class="col-12 col-md-4">
              <label for="phone" class="form-label">Telefon
                {{ help_icon("Nepovinné. Povolené formáty: +420 123 456 789, 00420 123 456 789, 123 456 789 (mezery jsou volitelné).") }}
              </label>
              <input type="tel" class="form-control" id="phone" name="phone" value="{{ user.phone or '' }}">
              <div class="invalid-feedback">Neplatný formát. Povolené formáty: +420 123 456 789, 00420 123 456 789, 123 456 789 (mezery jsou volitelné).</div>
            </div>
            <div class="col-12 col-md-4">
              <label for="preferred_calendar_view" class="form-label">Výchozí zobrazení kalendáře
                {{ help_icon("Vyberte, ve kterém zobrazení se vám kalendář otevře po přihlášení.") }}
              </label>
              <select class="form-select" id="preferred_calendar_view" name="preferred_calendar_view">
                {% for cv in calendar_views %}
                <option value="{{ cv.value }}" {{ 'selected' if user.preferred_calendar_view == cv }}>
                  {{ {'month': 'Měsíc', 'week': 'Týden', 'day': 'Den', 'list': 'Seznam'}[cv.value] }}
                </option>
                {% endfor %}
              </select>
            </div>
            <div class="col-12 col-md-4">
              <label for="dashboard_horizon_days" class="form-label">Horizont dashboardu (dny)
                {{ help_icon("Počet dní dopředu, na které dashboard zobrazuje nadcházející akce. Výchozí hodnota je 30 dní.") }}
              </label>
              <input type="number" class="form-control" id="dashboard_horizon_days" name="dashboard_horizon_days"
                     min="1" max="365" value="{{ user.dashboard_horizon_days }}">
            </div>
            <div class="col-12">
              <div class="form-check form-switch">
                <input class="form-check-input dark-toggle" type="checkbox" role="switch"
                       id="dark_mode" name="dark_mode" value="1" {{ 'checked' if user.dark_mode }}>
                <label class="form-check-label fw-semibold dark-label" for="dark_mode">Tmavý režim</label>
              </div>
            </div>
          </div>
          <div class="mt-3">
            <button type="submit" class="btn btn-danger">Uložit profil</button>
          </div>
        </form>
      </div>
    </div>

    <!-- ── Signature ── -->
    {% if current_user.has_permission('work_report.generate') %}
    <div class="card mb-4">
      <div class="card-header fw-semibold">
        Podpis pro výkaz práce
        {{ help_icon("Nahraný podpis se automaticky vloží do vygenerovaného výkazu práce. Podporované formáty: PNG, JPEG, HEIC.") }}
      </div>
      <div class="card-body">
        {% if has_signature %}
          <div class="mb-3">
            <img src="{{ url_for('users.signature_preview') }}?v={{ user.version }}"
                 alt="Uložený podpis"
                 class="border rounded bg-white p-2"
                 style="max-height: 100px; max-width: 100%;">
          </div>
          <form method="POST" class="d-inline">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <input type="hidden" name="action" value="signature_remove">
            <button type="submit" class="btn btn-sm btn-outline-danger"
                    data-confirm="Opravdu smazat uložený podpis?">Smazat podpis</button>
          </form>
        {% else %}
          <p class="text-muted">Zatím není nahraný žádný podpis.</p>
        {% endif %}
        <form method="POST" enctype="multipart/form-data" class="mt-3">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <input type="hidden" name="action" value="signature_upload">
          <div class="row g-3 align-items-end">
            <div class="col-12 col-md-8">
              <label for="signature" class="form-label">
                {{ 'Nahradit podpis novým obrázkem' if has_signature else 'Nahrát podpis' }}
              </label>
              <input type="file" class="form-control" id="signature" name="signature"
                     accept="image/png,image/jpeg,image/heic,image/heif,.heic,.heif" required>
              <div class="form-text">
                Vyfoťte svůj podpis na čisté bílé stránce, nebo použijte sken. Před nahráním fotku ořízněte tak, aby byl vidět jen podpis na bílém pozadí.
              </div>
            </div>
            <div class="col-12 col-md-4">
              <button type="submit" class="btn btn-primary">Nahrát</button>
            </div>
          </div>
        </form>
      </div>
    </div>
    {% endif %}

    <!-- ── Change password ── -->
    <div class="card mb-4">
      <div class="card-header fw-semibold">Změna hesla</div>
      <div class="card-body">
        <form method="POST" novalidate>
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <input type="hidden" name="action" value="password">
          <div class="row g-3">
            <div class="col-12 col-md-4">
              <label for="current_password" class="form-label">Současné heslo</label>
              <input type="password" class="form-control" id="current_password" name="current_password" required>
            </div>
            <div class="col-12 col-md-4">
              <label for="new_password" class="form-label">Nové heslo</label>
              <input type="password" class="form-control" id="new_password" name="new_password"
                     minlength="{{ min_password_length }}" required>
              <div class="form-text">Minimálně {{ min_password_length }} znaků.</div>
            </div>
            <div class="col-12 col-md-4">
              <label for="confirm_password" class="form-label">Potvrzení nového hesla</label>
              <input type="password" class="form-control" id="confirm_password" name="confirm_password" required>
            </div>
          </div>
          <div class="mt-3">
            <button type="submit" class="btn btn-outline-danger">Změnit heslo</button>
          </div>
        </form>
      </div>
    </div>

    <!-- ── Credentials ── -->
    <div class="card mb-4">
      <div class="card-header fw-semibold">Moje kvalifikace</div>
      <div class="card-body">
        {% if user.qualifications %}
          <div class="d-flex flex-wrap gap-2">
            {% for c in user.qualifications %}
              {{ badge_secondary(c.name, extra_classes='fs-6') }}
            {% endfor %}
          </div>
        {% else %}
          <p class="text-muted mb-0">Žádné kvalifikace přiřazeny.</p>
        {% endif %}
      </div>
    </div>

    <!-- ── Issued equipment ── -->
    {% if issued_items %}
    <div class="card mb-4">
      <div class="card-header fw-semibold">Přidělené vybavení</div>
      <div class="card-body">
        <ul class="list-group list-group-flush">
          {% for item in issued_items %}
          <li class="list-group-item d-flex justify-content-between align-items-center">
            <div>
              <strong>{{ item.serial_number or item.id }}</strong>
              <span class="text-muted ms-2">{{ item.equipment_type.name if item.equipment_type else '—' }}</span>
            </div>
            <small class="text-muted">Vydáno: {{ item.issued_at | localdt if item.issued_at else '—' }}</small>
          </li>
          {% endfor %}
        </ul>
      </div>
    </div>
    {% endif %}

    <!-- ── Upcoming events ── -->
    <div class="card mb-4">
      <div class="card-header fw-semibold">Nadcházející akce</div>
      <div class="card-body">
        {% if upcoming %}
          <ul class="list-group list-group-flush">
            {% for a in upcoming %}
            <li class="list-group-item d-flex justify-content-between align-items-center">
              <a href="{{ url_for('events.detail', event_id=a.spot.event.id) }}">{{ a.spot.event.name }}</a>
              <span class="text-muted">{{ a.spot.event.start_datetime | localdt }}</span>
            </li>
            {% endfor %}
          </ul>
        {% else %}
          <p class="text-muted mb-0">Žádné nadcházející akce.</p>
        {% endif %}
      </div>
    </div>

    <!-- ── iCal subscription ── -->
    <div class="card mb-4" id="ical">
      <div class="card-header fw-semibold d-flex align-items-center gap-2">
        Kalendářový odkaz – moje akce
        {{ help_icon("Odkaz pro přihlášení k odběru vašich akcí v externím kalendáři (Google Kalendář, Apple Kalendář, Outlook, …). Odkaz je veřejný — zacházejte s ním jako s heslem.") }}
      </div>
      <div class="card-body">
        <p class="mb-2">
          Zkopírujte odkaz níže a přidejte ho do svého kalendáře jako <strong>odběr kalendáře</strong>
          (ne jako jednorázový import). Kalendář se pak automaticky aktualizuje.
        </p>
        <p class="mb-1 small text-muted">
          <strong>Co uvidíte:</strong> pouze akce, na které jste přihlášeni a které jsou aktivní (zrušené, dokončené nebo archivované akce se nezobrazí).
        </p>
        <p class="mb-2 small text-muted">
          <strong>Jak rychle se aktualizuje:</strong> kalendářové aplikace stahují změny přibližně každé 4 hodiny — nová přihláška nebo změna času se neprojeví okamžitě.
        </p>
        <p class="mb-3 small">
          <i class="bi bi-question-circle me-1 text-primary"></i>
          Návod na přidání:
          <a href="{{ url_for('users.ical_guide_google') }}">Google Kalendář</a>
        </p>

        <div class="input-group mb-3">
          <input type="text" class="form-control font-monospace small" id="ical-url-input"
                 value="{{ ical_url }}" readonly>
          <button class="btn btn-outline-secondary" type="button" id="ical-copy-btn"
                  title="Kopírovat odkaz">
            <i class="bi bi-clipboard"></i> Kopírovat
          </button>
        </div>

        <form method="POST" action="{{ url_for('calendar.regenerate') }}"
              data-confirm="Opravdu chcete vygenerovat nový odkaz? Starý odkaz přestane okamžitě fungovat a budete se muset znovu přihlásit k odběru ve všech svých kalendářích.">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <button type="submit" class="btn btn-sm btn-outline-warning">
            <i class="bi bi-arrow-clockwise"></i> Vygenerovat nový odkaz
          </button>
          <span class="ms-2 small text-muted">
            {{ help_icon("Pokud se obáváte, že váš odkaz někdo zná, vygenerujte nový. Starý odkaz okamžitě přestane fungovat — ve všech svých kalendářích se budete muset odběru znovu přihlásit pomocí nového odkazu.") }}
          </span>
        </form>
      </div>
    </div>

    <!-- ── iCal all events subscription ── -->
    <div class="card mb-4" id="ical-all">
      <div class="card-header fw-semibold d-flex align-items-center gap-2">
        Kalendářový odkaz – všechny akce
        {{ help_icon("Odkaz pro odběr všech aktivních akcí v systému (ne jen vašich). Vhodné pro koordinátory a správce, kteří chtějí mít přehled o všem.") }}
      </div>
      <div class="card-body">
        <p class="mb-2">
          Tento odkaz obsahuje <strong>všechny akce</strong> v systému (kromě zrušených a archivovaných).
          U každé akce uvidíte stav, pozice s kvalifikacemi a přiřazenými uživateli a zodpovědnou osobu.
        </p>
        <p class="mb-2 small text-muted">
          <strong>Jak rychle se aktualizuje:</strong> kalendářové aplikace stahují změny přibližně každé 4 hodiny.
        </p>

        <div class="input-group mb-3">
          <input type="text" class="form-control font-monospace small" id="ical-all-url-input"
                 value="{{ ical_all_url }}" readonly>
          <button class="btn btn-outline-secondary" type="button" id="ical-all-copy-btn"
                  title="Kopírovat odkaz">
            <i class="bi bi-clipboard"></i> Kopírovat
          </button>
        </div>

        <form method="POST" action="{{ url_for('calendar.regenerate_all') }}"
              data-confirm="Opravdu chcete vygenerovat nový odkaz? Starý odkaz přestane okamžitě fungovat.">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <button type="submit" class="btn btn-sm btn-outline-warning">
            <i class="bi bi-arrow-clockwise"></i> Vygenerovat nový odkaz
          </button>
          <span class="ms-2 small text-muted">
            {{ help_icon("Pokud se obáváte, že váš odkaz někdo zná, vygenerujte nový. Starý odkaz okamžitě přestane fungovat.") }}
          </span>
        </form>
      </div>
    </div>

  </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script src="{{ url_for('static', filename='js/user-profile.js') }}?v={{ static_ver }}"></script>
<script src="{{ url_for('static', filename='js/user-form.js') }}?v={{ static_ver }}"></script>
<script nonce="{{ g.csp_nonce }}">
(function () {
  function setupCopyBtn(btnId, inputId) {
    var btn = document.getElementById(btnId);
    var inp = document.getElementById(inputId);
    if (btn && inp) {
      btn.addEventListener('click', function () {
        navigator.clipboard.writeText(inp.value).then(function () {
          btn.textContent = '✓ Zkopírováno';
          btn.classList.replace('btn-outline-secondary', 'btn-success');
          setTimeout(function () {
            btn.innerHTML = '<i class="bi bi-clipboard"></i> Kopírovat';
            btn.classList.replace('btn-success', 'btn-outline-secondary');
          }, 2000);
        });
      });
    }
  }
  setupCopyBtn('ical-copy-btn', 'ical-url-input');
  setupCopyBtn('ical-all-copy-btn', 'ical-all-url-input');
})();
</script>
{% endblock %}