{% extends "base.html" %}

{% block title %}{{ t('inventory_browse_title', lang) }} | {{ settings.company_name }}{% endblock %}

{% block content %}
{% set body_styles = ['Sedan', 'SUV', 'Truck', 'Coupe', 'Hatchback', 'Van', 'Convertible'] %}
{% set transmissions = [('', t('any', lang)), ('Automatic', t('automatic', lang)), ('Manual', t('manual', lang)), ('CVT', 'CVT')] %}
{% set fuel_types = ['Gasoline', 'Diesel', 'Hybrid', 'Electric'] %}
{% set drivetrains = ['FWD', 'RWD', 'AWD', '4WD'] %}
{% set sort_options = [
    ('price_low', t('price_low_high', lang)),
    ('price_high', t('price_high_low', lang)),
    ('year_newest', t('year_newest', lang)),
    ('odometer', t('odometer_lowest', lang)),
    ('newest', t('newest_listed', lang)),
] %}

{# ── remove_param is provided by the app context processor ── #}

{# ── active filter chip helper ── #}
{% macro filter_chip(label, param) %}
  <a href="{{ url_for('inventory', lang=lang, **remove_param(param)) }}" class="inline-flex items-center gap-1 rounded-full border border-zinc-300 bg-zinc-100 px-3 py-1 text-xs font-bold text-zinc-700 hover:bg-zinc-200 hover:border-zinc-400 transition">
    {{ label }}
    <span class="ml-0.5 text-zinc-400">&times;</span>
  </a>
{% endmacro %}

{# ── build list of active filter chips ── #}
{% set chips = [] %}
{% if request.args.get('q') %}
  {{ chips.append(filter_chip(t('search', lang) ~ ': ' ~ request.args.get('q'), 'q')) or '' }}
{% endif %}
{% if request.args.get('make') %}
  {{ chips.append(filter_chip(request.args.get('make'), 'make')) or '' }}
{% endif %}
{% if request.args.get('body_style') %}
  {{ chips.append(filter_chip(t('body_style_' ~ request.args.get('body_style')|lower|replace(' ', '_'), lang) or request.args.get('body_style'), 'body_style')) or '' }}
{% endif %}
{% if request.args.get('transmission') %}
  {{ chips.append(filter_chip(request.args.get('transmission'), 'transmission')) or '' }}
{% endif %}
{% if request.args.get('fuel_type') %}
  {{ chips.append(filter_chip(request.args.get('fuel_type'), 'fuel_type')) or '' }}
{% endif %}
{% if request.args.get('drive_line') %}
  {{ chips.append(filter_chip(request.args.get('drive_line'), 'drive_line')) or '' }}
{% endif %}
{% if request.args.get('year_from') %}
  {{ chips.append(filter_chip(t('year_from', lang) ~ ': ' ~ request.args.get('year_from'), 'year_from')) or '' }}
{% endif %}
{% if request.args.get('year_to') %}
  {{ chips.append(filter_chip(t('year_to', lang) ~ ': ' ~ request.args.get('year_to'), 'year_to')) or '' }}
{% endif %}
{% if request.args.get('price_min') %}
  {{ chips.append(filter_chip(t('min_price', lang) ~ ': $' ~ request.args.get('price_min'), 'price_min')) or '' }}
{% endif %}
{% if request.args.get('price_max') %}
  {{ chips.append(filter_chip(t('max_price', lang) ~ ': $' ~ request.args.get('price_max'), 'price_max')) or '' }}
{% endif %}
{% if request.args.get('odometer_min') %}
  {{ chips.append(filter_chip(t('odometer_min', lang) ~ ': ' ~ request.args.get('odometer_min') ~ ' km', 'odometer_min')) or '' }}
{% endif %}
{% if request.args.get('odometer_max') %}
  {{ chips.append(filter_chip(t('odometer_max', lang) ~ ': ' ~ request.args.get('odometer_max') ~ ' km', 'odometer_max')) or '' }}
{% endif %}
{% if request.args.get('certified') %}
  {{ chips.append(filter_chip(t('certified_pre_owned', lang), 'certified')) or '' }}
{% endif %}
{% if request.args.get('sort') and request.args.get('sort') != 'newest' %}
  {% for val, label in sort_options %}
    {% if val == request.args.get('sort') %}
      {{ chips.append(filter_chip(label, 'sort')) or '' }}
    {% endif %}
  {% endfor %}
{% endif %}

{# ── page header ── #}
<section class="bg-white border-b border-zinc-200">
  <div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
    <nav class="mb-4 text-sm font-bold text-zinc-500">
      <a class="text-zinc-700 underline decoration-amber-400 decoration-2 underline-offset-4" href="{{ url_for('home', lang=lang) }}">{{ t('home', lang) }}</a>
      <span class="mx-2">/</span>
      <span>{{ t('inventory', lang) }}</span>
    </nav>
    <h1 class="text-3xl font-black tracking-tight sm:text-4xl">{{ t('used_cars_for_sale', lang) }}</h1>
    <p class="mt-2 max-w-2xl text-zinc-600">{{ t('inventory_browse_subtitle', lang) }}</p>
  </div>
</section>

{# ── main layout: sidebar + content ── #}
<div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8" id="inventory-page" x-data="{ filtersOpen: false }">
  <div class="flex gap-8">

    {# ── mobile filter toggle ── #}
    <button
      class="mb-4 inline-flex items-center gap-2 rounded-lg border border-zinc-300 bg-white px-4 py-2.5 text-sm font-bold text-zinc-700 hover:bg-zinc-50 lg:hidden"
      @click="filtersOpen = !filtersOpen"
      aria-expanded="false"
      :aria-expanded="filtersOpen"
      id="mobile-filter-toggle"
    >
      <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" d="M3 4h18M1 12h16M5 20h10"/>
      </svg>
      {{ t('filters', lang) }}
    </button>

    {# ── filter sidebar ── #}
    <aside
      class="w-64 shrink-0 lg:block"
      :class="filtersOpen ? 'block' : 'hidden'"
      id="filter-sidebar"
    >
      <form
        class="rounded-lg border border-zinc-200 bg-white p-5 shadow-sm sticky top-20"
        method="get"
        action="{{ url_for('inventory', lang=lang) }}"
        data-filter-form
        id="filter-form"
      >
        <div class="flex items-center justify-between mb-4 lg:hidden">
          <h2 class="text-base font-black">{{ t('filters', lang) }}</h2>
          <button type="button" class="text-zinc-400 hover:text-zinc-700" @click="filtersOpen = false" aria-label="{{ t('close', lang) }}">
            <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M6 6l12 12M18 6L6 18"/>
            </svg>
          </button>
        </div>

        {# ── Keyword search ── #}
        <div class="mb-5">
          <label class="block text-xs font-black uppercase tracking-[0.14em] text-zinc-500 mb-1.5" for="filter-q">{{ t('search', lang) }}</label>
          <input
            id="filter-q"
            class="form-input mt-0 text-sm"
            type="text"
            name="q"
            value="{{ request.args.get('q', '') }}"
            placeholder="{{ t('search_stock_make_model', lang) }}"
            data-filter-input
            data-filter-debounce
          >
        </div>

        {# ── Make checkboxes ── #}
        <fieldset class="mb-5">
          <legend class="block text-xs font-black uppercase tracking-[0.14em] text-zinc-500 mb-1.5">{{ t('make', lang) }}</legend>
          <div class="max-h-48 space-y-0.5 overflow-y-auto rounded border border-zinc-200 bg-zinc-50 p-2">
            {% for item in makes %}
              <label class="flex cursor-pointer items-center gap-2 rounded px-1.5 py-1 text-sm hover:bg-white">
                <input
                  type="checkbox"
                  name="make"
                  value="{{ item.make }}"
                  class="h-3.5 w-3.5 rounded border-zinc-300 text-amber-400 focus:ring-amber-400"
                  data-filter-input
                  {% if request.args.get('make') == item.make %}checked{% endif %}
                >
                <span class="flex-1 truncate font-semibold text-zinc-700">{{ item.make }}</span>
                <span class="text-xs font-bold text-zinc-400">{{ item.count }}</span>
              </label>
            {% endfor %}
          </div>
        </fieldset>

        {# ── Body Style checkboxes ── #}
        <fieldset class="mb-5">
          <legend class="block text-xs font-black uppercase tracking-[0.14em] text-zinc-500 mb-1.5">{{ t('body_style', lang) }}</legend>
          <div class="space-y-0.5">
            {% for style in body_styles %}
              <label class="flex cursor-pointer items-center gap-2 rounded px-1.5 py-1 text-sm hover:bg-zinc-50">
                <input
                  type="checkbox"
                  name="body_style"
                  value="{{ style }}"
                  class="h-3.5 w-3.5 rounded border-zinc-300 text-amber-400 focus:ring-amber-400"
                  data-filter-input
                  {% if request.args.get('body_style') == style %}checked{% endif %}
                >
                <span class="font-semibold text-zinc-700">{{ t('body_style_' ~ style|lower|replace(' ', '_'), lang) or style }}</span>
              </label>
            {% endfor %}
          </div>
        </fieldset>

        {# ── Transmission radios ── #}
        <fieldset class="mb-5">
          <legend class="block text-xs font-black uppercase tracking-[0.14em] text-zinc-500 mb-1.5">{{ t('transmission', lang) }}</legend>
          <div class="space-y-0.5">
            {% for val, label in transmissions %}
              <label class="flex cursor-pointer items-center gap-2 rounded px-1.5 py-1 text-sm hover:bg-zinc-50">
                <input
                  type="radio"
                  name="transmission"
                  value="{{ val }}"
                  class="h-3.5 w-3.5 border-zinc-300 text-amber-400 focus:ring-amber-400"
                  data-filter-input
                  {% if request.args.get('transmission', '') == val %}checked{% endif %}
                >
                <span class="font-semibold text-zinc-700">{{ label }}</span>
              </label>
            {% endfor %}
          </div>
        </fieldset>

        {# ── Fuel Type checkboxes ── #}
        <fieldset class="mb-5">
          <legend class="block text-xs font-black uppercase tracking-[0.14em] text-zinc-500 mb-1.5">{{ t('fuel_type', lang) }}</legend>
          <div class="space-y-0.5">
            {% for ft in fuel_types %}
              <label class="flex cursor-pointer items-center gap-2 rounded px-1.5 py-1 text-sm hover:bg-zinc-50">
                <input
                  type="checkbox"
                  name="fuel_type"
                  value="{{ ft }}"
                  class="h-3.5 w-3.5 rounded border-zinc-300 text-amber-400 focus:ring-amber-400"
                  data-filter-input
                  {% if request.args.get('fuel_type') == ft %}checked{% endif %}
                >
                <span class="font-semibold text-zinc-700">{{ t('fuel_' ~ ft|lower, lang) or ft }}</span>
              </label>
            {% endfor %}
          </div>
        </fieldset>

        {# ── Drivetrain checkboxes ── #}
        <fieldset class="mb-5">
          <legend class="block text-xs font-black uppercase tracking-[0.14em] text-zinc-500 mb-1.5">{{ t('drivetrain', lang) }}</legend>
          <div class="space-y-0.5">
            {% for dt in drivetrains %}
              <label class="flex cursor-pointer items-center gap-2 rounded px-1.5 py-1 text-sm hover:bg-zinc-50">
                <input
                  type="checkbox"
                  name="drive_line"
                  value="{{ dt }}"
                  class="h-3.5 w-3.5 rounded border-zinc-300 text-amber-400 focus:ring-amber-400"
                  data-filter-input
                  {% if request.args.get('drive_line') == dt %}checked{% endif %}
                >
                <span class="font-semibold text-zinc-700">{{ dt }}</span>
              </label>
            {% endfor %}
          </div>
        </fieldset>

        {# ── Year range ── #}
        <fieldset class="mb-5">
          <legend class="block text-xs font-black uppercase tracking-[0.14em] text-zinc-500 mb-1.5">{{ t('year', lang) }}</legend>
          <div class="grid grid-cols-2 gap-2">
            <div>
              <label class="block text-[0.65rem] font-bold uppercase text-zinc-400 mb-0.5">{{ t('from', lang) }}</label>
              <select name="year_from" class="form-input mt-0 text-sm py-1.5" data-filter-input>
                <option value="">{{ t('any', lang) }}</option>
                {% for yr in years %}
                  <option value="{{ yr.year }}" {% if request.args.get('year_from') == yr.year|string %}selected{% endif %}>{{ yr.year }} ({{ yr.count }})</option>
                {% endfor %}
              </select>
            </div>
            <div>
              <label class="block text-[0.65rem] font-bold uppercase text-zinc-400 mb-0.5">{{ t('to', lang) }}</label>
              <select name="year_to" class="form-input mt-0 text-sm py-1.5" data-filter-input>
                <option value="">{{ t('any', lang) }}</option>
                {% for yr in years %}
                  <option value="{{ yr.year }}" {% if request.args.get('year_to') == yr.year|string %}selected{% endif %}>{{ yr.year }} ({{ yr.count }})</option>
                {% endfor %}
              </select>
            </div>
          </div>
        </fieldset>

        {# ── Price range ── #}
        <fieldset class="mb-5">
          <legend class="block text-xs font-black uppercase tracking-[0.14em] text-zinc-500 mb-1.5">{{ t('price', lang) }}</legend>
          <div class="grid grid-cols-2 gap-2">
            <div>
              <label class="block text-[0.65rem] font-bold uppercase text-zinc-400 mb-0.5">{{ t('min', lang) }}</label>
              <input
                type="number"
                name="price_min"
                class="form-input mt-0 text-sm py-1.5"
                placeholder="$0"
                value="{{ request.args.get('price_min', '') }}"
                data-filter-input
                data-filter-debounce
              >
            </div>
            <div>
              <label class="block text-[0.65rem] font-bold uppercase text-zinc-400 mb-0.5">{{ t('max', lang) }}</label>
              <input
                type="number"
                name="price_max"
                class="form-input mt-0 text-sm py-1.5"
                placeholder="$999,999"
                value="{{ request.args.get('price_max', '') }}"
                data-filter-input
                data-filter-debounce
              >
            </div>
          </div>
        </fieldset>

        {# ── Odometer range ── #}
        <fieldset class="mb-5">
          <legend class="block text-xs font-black uppercase tracking-[0.14em] text-zinc-500 mb-1.5">{{ t('odometer', lang) }}</legend>
          <div class="grid grid-cols-2 gap-2">
            <div>
              <label class="block text-[0.65rem] font-bold uppercase text-zinc-400 mb-0.5">{{ t('min', lang) }} (km)</label>
              <input
                type="number"
                name="odometer_min"
                class="form-input mt-0 text-sm py-1.5"
                placeholder="0"
                value="{{ request.args.get('odometer_min', '') }}"
                data-filter-input
                data-filter-debounce
              >
            </div>
            <div>
              <label class="block text-[0.65rem] font-bold uppercase text-zinc-400 mb-0.5">{{ t('max', lang) }} (km)</label>
              <input
                type="number"
                name="odometer_max"
                class="form-input mt-0 text-sm py-1.5"
                placeholder="300,000"
                value="{{ request.args.get('odometer_max', '') }}"
                data-filter-input
                data-filter-debounce
              >
            </div>
          </div>
        </fieldset>

        {# ── Certified Pre-Owned ── #}
        <label class="mb-5 flex cursor-pointer items-center gap-2.5 rounded border border-amber-200 bg-amber-50 px-2.5 py-2">
          <input
            type="checkbox"
            name="certified"
            value="1"
            class="h-4 w-4 rounded border-zinc-300 text-amber-400 focus:ring-amber-400"
            data-filter-input
            {% if request.args.get('certified') == '1' %}checked{% endif %}
          >
          <span class="text-sm font-bold text-zinc-800">{{ t('certified_pre_owned', lang) }}</span>
        </label>

        {# ── Apply / Reset buttons ── #}
        <div class="flex flex-col gap-2">
          <button type="submit" class="btn-primary w-full text-sm">{{ t('apply_filters', lang) }}</button>
          <a href="{{ url_for('inventory', lang=lang) }}" class="btn-outline w-full text-center text-sm">{{ t('reset', lang) }}</a>
        </div>
      </form>
    </aside>

    {# ── main content area ── #}
    <div class="min-w-0 flex-1">

      {# ── top bar: result count + sort dropdown ── #}
      <div class="sticky top-16 z-20 mb-4 flex flex-wrap items-center justify-between gap-3 rounded-lg border border-zinc-200 bg-white/95 backdrop-blur px-4 py-3 shadow-sm">
        <div>
          <p class="text-sm font-bold text-zinc-600">
            <span class="text-zinc-900" data-result-count>{{ result_count or listings|length }}</span> {{ t('vehicles_found', lang) }}
          </p>
          <p class="text-xs text-slate-500 mt-0.5">{{ t('pricing_disclaimer', lang) }}</p>
        </div>
        <div class="flex items-center gap-2">
          <label for="sort-select" class="text-xs font-bold text-zinc-500">{{ t('sort_by', lang) }}</label>
          <select
            id="sort-select"
            name="sort"
            class="form-input mt-0 w-auto text-sm py-1.5"
            data-filter-input
            form="filter-form"
          >
            {% for val, label in sort_options %}
              <option value="{{ val }}" {% if request.args.get('sort', 'newest') == val %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
        </div>
      </div>

      {# ── active filter chips ── #}
      {% if chips|length > 0 %}
        <div class="mb-5 flex flex-wrap items-center gap-2">
          <span class="text-xs font-black uppercase tracking-[0.12em] text-zinc-400 mr-1">{{ t('active_filters', lang) }}</span>
          {% for chip in chips %}
            {{ chip|safe }}
          {% endfor %}
          <a href="{{ url_for('inventory', lang=lang) }}" class="text-xs font-bold text-red-600 hover:text-red-700 underline decoration-1 underline-offset-2 ml-1">{{ t('clear_all', lang) }}</a>
        </div>
      {% endif %}

      {# ── listing grid ── #}
      {% if listings|length > 0 %}
        <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
          {% for listing in listings %}
            {% include "partials/listing_card.html" %}
          {% endfor %}
        </div>
      {% else %}
        {# ── empty state ── #}
        <div class="flex flex-col items-center justify-center rounded-xl border-2 border-dashed border-zinc-200 bg-white px-6 py-20 text-center">
          <div class="mb-5 grid h-16 w-16 place-items-center rounded-full bg-zinc-100">
            <svg class="h-7 w-7 text-zinc-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
            </svg>
          </div>
          <h2 class="text-xl font-black text-zinc-800">{{ t('no_vehicles_found', lang) }}</h2>
          <p class="mt-2 max-w-md text-sm leading-relaxed text-zinc-500">{{ t('no_vehicles_suggestion', lang) }}</p>
          <a href="{{ url_for('inventory', lang=lang) }}" class="btn-primary mt-6 text-sm">{{ t('clear_all_filters', lang) }}</a>
        </div>
      {% endif %}

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

{% block body_end %}
<script>
(function () {
  'use strict';

  var filterForm = document.getElementById('filter-form');
  if (!filterForm) return;

  var countTarget = document.querySelector('[data-result-count]');
  var filterDataUrl = '{{ url_for("inventory_filter_data", lang=lang) }}';

  function debounce(fn, delay) {
    var timer = null;
    return function () {
      var args = arguments;
      var ctx = this;
      clearTimeout(timer);
      timer = setTimeout(function () { fn.apply(ctx, args); }, delay);
    };
  }

  function submitFilters() {
    filterForm.requestSubmit();
  }

  var debouncedSubmit = debounce(submitFilters, 400);

  function updateResultCount() {
    if (!filterDataUrl || !countTarget) return;
    try {
      var params = new URLSearchParams(new FormData(filterForm));
      fetch(filterDataUrl + '?' + params.toString())
        .then(function (r) { return r.ok ? r.json() : null; })
        .then(function (data) {
          if (data && typeof data.count === 'number') {
            countTarget.textContent = String(data.count);
          }
        })
        .catch(function () {});
    } catch (e) {}
  }

  // Checkbox / radio change: immediate submit
  filterForm.querySelectorAll('input[type="checkbox"][data-filter-input], input[type="radio"][data-filter-input]').forEach(function (input) {
    input.addEventListener('change', submitFilters);
  });

  // Select change: immediate submit
  filterForm.querySelectorAll('select[data-filter-input]').forEach(function (select) {
    select.addEventListener('change', submitFilters);
  });

  // Number / debounced inputs: delay submit
  filterForm.querySelectorAll('input[data-filter-debounce]').forEach(function (input) {
    input.addEventListener('input', debouncedSubmit);
  });

  // Fetch approximate count on load
  if (countTarget && filterDataUrl) {
    updateResultCount();
  }

  // Close sidebar on Escape (mobile)
  document.addEventListener('keydown', function (e) {
    if (e.key !== 'Escape') return;
    var sidebar = document.getElementById('filter-sidebar');
    if (!sidebar || window.innerWidth >= 1024) return;
    if (sidebar.classList.contains('hidden')) return;
    sidebar.classList.add('hidden');
    var toggle = document.getElementById('mobile-filter-toggle');
    if (toggle) toggle.setAttribute('aria-expanded', 'false');
  });
})();
</script>
{% endblock %}