{% extends "base.html" %}
{% block title %}Ticket Timeline{% endblock %}
{% block breadcrumb %}
<nav class="mb-4" aria-label="Breadcrumb">
  <ol class="flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400">
    <li><a href="{% url 'dashboard' %}" class="hover:text-gray-700 dark:hover:text-gray-300">Dashboard</a></li>
    <li class="text-gray-300 dark:text-gray-600">/</li>
    <li class="text-gray-900 dark:text-white font-medium" aria-current="page">Ticket Timeline</li>
  </ol>
</nav>
{% endblock %}

{% block content %}

{% if not selected_project_id %}
<div class="mb-6">
  <h1 class="text-2xl font-bold">Ticket Timeline</h1>
  <p class="text-gray-500 dark:text-gray-400 text-sm mt-1">Gantt chart of tickets within a project</p>
</div>

<div class="space-y-4" x-data="{ search: '' }">
  <div class="relative max-w-md">
    <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
    <input type="text" x-model="search" placeholder="Search projects by name or prefix..."
           class="block w-full pl-10 pr-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-950 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-600 focus:ring-2 focus:ring-primary-500 focus:border-transparent outline-none text-sm">
  </div>

  {% if not projects %}
  <div class="flex flex-col items-center justify-center py-12 text-gray-500 dark:text-gray-400">
    <h3 class="text-base font-medium text-gray-900 dark:text-white mb-1">No Projects Available</h3>
    <p class="text-sm text-gray-500 dark:text-gray-400">You don't have access to any projects yet.</p>
  </div>
  {% else %}
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
    {% for p in projects %}
    <div x-show="!search || '{{ p.name|lower }} {{ p.ticket_prefix|lower }}'.includes(search.toLowerCase())">
      <a href="/dashboard/ticket-timeline/{{ p.id }}/" class="block relative p-4 bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-600 rounded-lg hover:shadow-md transition-all overflow-hidden"
         style="border-left: 4px solid {{ p.color|default:'#6B7280' }};">
        {% if p.pinned_date %}
        <div class="absolute top-2 right-2">
          <div class="flex items-center justify-center w-6 h-6 rounded-full shadow-sm" style="background-color:{{ p.color|default:'#6B7280' }};">
            <i class="fas fa-thumbtack text-white text-xs"></i>
          </div>
        </div>
        {% endif %}
        <span class="inline-flex px-2.5 py-1 rounded text-xs font-semibold mb-3 text-white" style="background-color:{{ p.color|default:'#6B7280' }}">{{ p.ticket_prefix }}</span>
        <h3 class="font-semibold text-base text-gray-900 dark:text-white line-clamp-2">{{ p.name }}</h3>
      </a>
    </div>
    {% endfor %}
  </div>
  {% endif %}
</div>

{% else %}
<div>
  <div class="mb-4" x-data="{ open: false }">
    <div class="relative">
      <button @click="open = !open" @click.away="open = false"
              class="inline-flex items-center gap-2 px-4 py-2.5 text-sm font-medium text-gray-900 dark:text-white bg-white dark:bg-gray-950 border-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
              style="border-color: {{ selected_project.color|default:'#D1D5DB' }};">
        {% if selected_project.ticket_prefix %}
        <span class="px-2 py-0.5 rounded text-xs font-semibold text-white" style="background-color:{{ selected_project.color|default:'#6B7280' }}">{{ selected_project.ticket_prefix }}</span>
        {% endif %}
        <span>{{ selected_project.name }}</span>
        <i class="fas fa-chevron-down text-xs transition-transform" :class="{ 'rotate-180': open }"></i>
      </button>
      <div x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
           class="absolute top-full left-0 mt-2 w-80 bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg z-50 max-h-96 overflow-y-auto" style="display: none;">
        <div class="p-2">
          <div class="px-3 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">Switch Project</div>
          {% for p in projects %}
          <a href="/dashboard/ticket-timeline/{{ p.id }}/" @click="open = false"
             class="w-full flex items-center gap-3 px-3 py-2 rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors text-left {% if p.id == selected_project.id %}bg-gray-50 dark:bg-gray-800{% endif %}">
            {% if p.pinned_date %}
            <div class="flex items-center justify-center w-5 h-5 rounded-full shrink-0" style="background-color:{{ p.color|default:'#6B7280' }};">
              <i class="fas fa-thumbtack text-white text-[8px]"></i>
            </div>
            {% endif %}
            {% if p.ticket_prefix %}
            <span class="px-2 py-0.5 rounded text-xs font-semibold text-white flex-shrink-0" style="background-color:{{ p.color|default:'#6B7280' }}">{{ p.ticket_prefix }}</span>
            {% endif %}
            <div class="flex-1 min-w-0 text-sm font-medium text-gray-900 dark:text-white truncate">{{ p.name }}</div>
            {% if p.id == selected_project.id %}
            <i class="fas fa-check text-xs flex-shrink-0" style="color:{{ p.color|default:'#3B82F6' }}"></i>
            {% endif %}
          </a>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>

  <div class="bg-white dark:bg-gray-950 rounded-xl shadow">
    <div class="p-4 border-b border-gray-200 dark:border-gray-600">
      <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
        <h2 class="text-lg font-medium text-gray-900 dark:text-white">Ticket Timeline</h2>
        <div class="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
          <i class="fas fa-eye"></i>
          <span>Read Only View</span>
        </div>
      </div>
    </div>
    <div class="w-full">
      {% if tickets_with_dates %}
        {% include "components/gantt_chart.html" with gantt_data=gantt_json name_column_label="Task Name" gantt_height=600 %}
      {% else %}
      <div class="flex flex-col items-center justify-center h-64 text-gray-500 gap-4">
        <i class="fas fa-calendar text-5xl"></i>
        <h3 class="text-lg font-medium">No tickets with due dates</h3>
        <p class="text-sm">Add due dates to tickets to see the timeline</p>
      </div>
      {% endif %}
    </div>
  </div>
</div>
{% endif %}
{% endblock %}