{% extends "campermode/base.html" %}

{% block title %}Dashboard — CamperMode{% endblock %}

{% block head %}
<script src="{{ url_for('static', filename='js/campermode.js') }}" defer></script>
{% endblock %}

{% block content %}
<div class="container py-3">

  {# Warning banner #}
  <div id="warning-banner" class="alert alert-warning{% if not show_warning %} d-none{% endif %}"
       role="alert">
    <i class="bi bi-exclamation-triangle-fill me-2"></i>
    Window or seat heating is active — ensure occupants are aware.
  </div>

  {# Status card #}
  <div id="status-card" class="card mb-3 border-2
       {% if state.current_phase == 'heating' %}border-danger
       {% elif state.current_phase == 'paused' %}border-warning
       {% endif %}">
    <div class="card-body">
      <h5 class="card-title status-phase" id="status-phase">
        {% if state.current_phase == 'heating' %}
          <span class="text-danger">
            <i class="bi bi-thermometer-high me-1"></i>Heating
          </span>
        {% elif state.current_phase == 'paused' %}
          <span class="text-warning">
            <i class="bi bi-pause-circle me-1"></i>Paused
          </span>
        {% else %}
          <span class="text-secondary">
            <i class="bi bi-moon-stars me-1"></i>Idle
          </span>
        {% endif %}
      </h5>
      <div id="status-details" class="{% if not state.active %}d-none{% endif %}">
        <p class="mb-1">
          <strong>Cycle:</strong>
          <span id="status-cycle">{{ state.cycle_number }}</span>
        </p>
        <p class="mb-1">
          <strong>Phase remaining:</strong>
          <span id="status-phase-remaining">—</span>
        </p>
        <p class="mb-1">
          <strong>Total remaining:</strong>
          <span id="status-total-remaining">—</span>
        </p>
        <p class="mb-1">
          <strong>Car climate:</strong>
          <span id="status-car-clima">
            {% if state.climatization_state == "off" %}
              <span class="text-warning">
                <i class="bi bi-exclamation-triangle me-1"></i>OFF
              </span>
            {% elif state.climatization_state %}
              <span class="text-success">
                <i class="bi bi-check-circle me-1"></i>{{ state.climatization_state | upper }}
              </span>
            {% else %}
              —
            {% endif %}
          </span>
        </p>
      </div>
      <div class="mt-2">
        <strong>Battery:</strong>
        <span id="status-battery">
          {% if state.current_battery_level is not none %}
            {{ state.current_battery_level }}%
          {% else %}
            —
          {% endif %}
        </span>
      </div>
      <div id="status-avg-consumption"
           class="mt-1{% if state.avg_battery_consumption is none %} d-none{% endif %}">
        <strong>Avg. cycle consumption:</strong>
        <span id="status-avg-consumption-value">
          {%- if state.avg_battery_consumption is not none %}{{ "%.1f"|format(state.avg_battery_consumption) }}%{%- endif -%}
        </span>
        <span id="status-half-cycle-badge"
              class="badge bg-warning text-dark ms-1{% if not state.half_cycle_active %} d-none{% endif %}">Half cycle</span>
      </div>
      <div id="status-stopped-reason"
           class="mt-2 small{% if not state.stopped_reason or state.active %} d-none{% endif %}">
        <i class="bi bi-info-circle me-1"></i><span id="status-stopped-text">
          {% if state.stopped_reason == "manual" %}Stopped manually
          {% elif state.stopped_reason == "battery" %}Stopped: battery too low
          {% elif state.stopped_reason == "vehicle_offline" %}Stopped: vehicle went offline
          {% elif state.stopped_reason == "vehicle_climatization_off" %}Stopped: heating reported off by vehicle
          {% elif state.stopped_reason == "battery_predicted" %}Stopped: battery level predicted too low
          {% elif state.stopped_reason == "duration_reached" %}Session complete
          {% elif state.stopped_reason == "shutdown" %}Stopped: plugin shutdown
          {% elif state.stopped_reason %}{{ state.stopped_reason }}
          {% endif %}
        </span>
      </div>
    </div>
  </div>

  {# Start section — hidden while session is active #}
  <div id="start-section" class="{% if state.active %}d-none{% endif %}">
    <form method="post" action="{{ url_for('start_session') }}">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

      <div class="mb-3">
        <label for="min_battery_level" class="form-label">
          Minimum battery level:
          <strong><span id="battery-label">{{ settings.min_battery_level }}</span>%</strong>
        </label>
        <input type="range" class="form-range" id="min_battery_level"
               name="min_battery_level"
               min="10" max="90" step="5"
               value="{{ settings.min_battery_level }}">
      </div>

      <div class="mb-3">
        <label class="form-label">Pause between cycles</label>
        <div class="btn-group d-flex" role="group" aria-label="Cycle interval">
          {% for mins in [0, 30, 45, 60, 75, 90] %}
          <input type="radio" class="btn-check" name="minutes_between_cycles"
                 id="interval_{{ mins }}" value="{{ mins }}"
                 {% if settings.minutes_between_cycles == mins %}checked{% endif %}>
          <label class="btn btn-outline-secondary btn-interval flex-fill"
                 for="interval_{{ mins }}">
            {% if mins == 0 %}Continuous{% else %}{{ mins }} min{% endif %}
          </label>
          {% endfor %}
        </div>
      </div>

      <div class="mb-3">
        <label for="total_duration_minutes" class="form-label">
          Total duration:
          <strong><span id="duration-label">{{ (settings.total_duration_minutes / 60) | round(1) | string | replace('.0', '') }}</span> h</strong>
        </label>
        <input type="range" class="form-range" id="total_duration_minutes"
               name="total_duration_minutes"
               min="60" max="720" step="30"
               value="{{ settings.total_duration_minutes }}"
               {% if settings.endless %}disabled{% endif %}>
        <div class="form-check mt-1">
          <input type="checkbox" class="form-check-input" id="endless"
                 name="endless" value="1"
                 {% if settings.endless %}checked{% endif %}>
          <label class="form-check-label" for="endless">Run indefinitely</label>
        </div>
      </div>

      <div id="save-indicator"
           class="small text-center mb-2 invisible"
           aria-live="polite"
           style="min-height: 1.25rem;"></div>

      <button type="submit" class="btn btn-success w-100 py-2">
        <i class="bi bi-play-fill me-1"></i>Start Camper Mode
      </button>
    </form>
  </div>

  {# Stop section — hidden while session is idle #}
  <div id="stop-section" class="{% if not state.active %}d-none{% endif %}">
    <form method="post" action="{{ url_for('stop_session') }}">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <button type="submit" class="btn btn-danger w-100 py-2">
        <i class="bi bi-stop-fill me-1"></i>Stop Camper Mode
      </button>
    </form>
  </div>

</div>
{% endblock %}