{% extends "base.html" %}
{% block title %}Ticket Details – Echo{% endblock %}
{% block content %}
  
<div class="max-w-3xl mx-auto space-y-6">
  <header class="text-center mb-10">
    <h1 class="text-4xl font-bold tracking-tight text-zinc-100">Ticket Details</h1>
  </header>
  {% set role_href = (user.role | lower) if user and user.role else 'end_user' %}
  <a href="/dashboard/{{ role_href }}" class="text-m text-blue-400 hover:text-blue-300">Back to Dashboard</a>
 

  {% if not_found %}
    <div class="border border-red-800 bg-red-900 text-red-300 rounded p-4">Ticket not found.</div>
  {% else %}
    <div class="bg-zinc-900 border border-zinc-800 rounded-lg p-6 shadow-sm">
      <div class="flex items-start justify-between">
        <div class="text-3xl font-medium mt-1">{{ ticket.title }}</div>
        <div class="text-right text-l text-zinc-400">
          <div>Created: {{ ticket.created_at.strftime('%b %d, %I:%M %p') }}</div>
          <div>Updated: {{ ticket.updated_at.strftime('%b %d, %I:%M %p') }}</div>
        </div>
      </div>

      <div class="mt-4 text-m text-zinc-300 whitespace-pre-line">{{ ticket.description }}</div>

      <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4 text-m">
        <div class="bg-zinc-900 border border-zinc-800 rounded p-3">
          <div class="text-zinc-500">Category</div>
          <div class="font-medium">{{ ticket.category.value if ticket.category else 'general' }}</div>
        </div>
        <div class="bg-zinc-900 border border-zinc-800 rounded p-3">
          <div class="text-zinc-500">Priority</div>
          <div class="font-medium">{{ ticket.priority.value if ticket.priority else 'medium' }}</div>
        </div>
        <div class="bg-zinc-900 border border-zinc-800 rounded p-3">
          <div class="text-zinc-500">Status</div>
          <div class="font-medium">{{ ticket.status.value if ticket.status else 'open' }}</div>
        </div>
        <div class="bg-zinc-900 border border-zinc-800 rounded p-3">
          <div class="text-zinc-500">Requester</div>
          {% set requester_display = ticket.requester_name or (ticket.requester.full_name if ticket.requester and ticket.requester.full_name else (ticket.requester.email if ticket.requester else '')) %}
          <div class="font-medium">{{ requester_display or 'N/A' }}</div>
        </div>
        <div class="bg-zinc-900 border border-zinc-800 rounded p-3">
          <div class="text-zinc-500">Assignee</div>
          <div class="font-medium">{{ ticket.assignee_id or 'Unassigned' }}</div>
        </div>
      </div>
    </div>

    {# IT staff suggested fix form #}
    {% set role = (user.role | lower) if user and user.role else '' %}
    <div class="bg-zinc-900 border border-zinc-800 rounded-lg p-6 shadow-sm mt-6">
      {% set role = (user.role | lower) if user and user.role else '' %}
      {% if role in ['admin', 'it_agent'] %}
        {% if ticket.status.value == 'open' %}
          <h2 class="text-3xl font-semibold mb-3">Recommend a Resolution</h2>
        {% else %}
          <h2 class="text-3xl font-semibold mb-3">Recommended Resolutions</h2>
        {% endif %}
      {% else %}
        <h2 class="text-3xl font-semibold mb-3">Agent Suggestions</h2>
      {% endif %}

      {% if message %}
        <div class="mb-4 border border-green-800 bg-green-900 text-green-300 rounded p-3">{{ message }}</div>
      {% endif %}
      {% if error %}
        <div class="mb-4 border border-red-800 bg-red-900 text-red-300 rounded p-3">{{ error }}</div>
      {% endif %}
      {% if role in ['admin', 'it_agent'] %}
        {% if ticket.status.value == 'open' %}
          <form method="post" action="/tickets/{{ ticket.id }}/suggest" class="space-y-3">
            <div>
              <label for="suggestion" class="block text-lg font-medium text-zinc-300">Suggested fix</label>
              <textarea id="suggestion" name="suggestion" rows="5" required
                        class="mt-1 block w-full rounded-md border border-zinc-700 bg-zinc-900 text-zinc-100 text-m placeholder-zinc-500 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                        placeholder="Recommend a solution..."></textarea>
            </div>
            <div class="flex justify-end">
              <button type="submit" class="inline-flex justify-center rounded-md bg-blue-600 px-4 py-2 text-white font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-zinc-900">Submit Suggestion</button>
            </div>
          </form>
        {% endif %}
      {% endif %}

      {% if suggestions and suggestions|length > 0 %}
        <ul class="divide-y mt-6">
          {% for suggestion in suggestions %}
          <li class="py-4 flex flex-col md:flex-row md:items-start md:justify-between gap-4">
            <div class="flex-1 space-y-2">
              <div class="text-lg text-zinc-200 whitespace-pre-line">
                {{ suggestion.content }}
              </div>

              {% set rejection_feedback = suggestion.feedback if suggestion.feedback is not none else '' %}
              {% set is_rejected = rejection_feedback|trim|length > 0 %}

              {% if is_rejected %}
                <div class="mt-1 rounded-lg border border-amber-800/60 bg-amber-950/40 text-amber-200 text-m p-3 space-y-1">
                  <div class="font-semibold text-amber-300">
                    Feedback
                  </div>
                  <p class="whitespace-pre-line text-amber-100">
                    {{ rejection_feedback }}
                  </p>
                </div>
              {% endif %}

              <div class="mt-1 text-lg text-zinc-500 flex flex-wrap items-center gap-1">
                {% set display_name = suggestion.author_name or (suggestion.author.full_name if suggestion.author and suggestion.author.full_name else (suggestion.author.email if suggestion.author else '')) %}
                {% if display_name %}
                  <span>By {{ display_name }} -</span>
                {% endif %}
                <span>{{ suggestion.created_at.strftime('%b %d %H:%M') }}</span>
                {% if suggestion.is_accepted %}
                  <span class="ml-2 inline-flex items-center rounded bg-green-900/80 px-2 py-0.5 text-sm font-medium text-green-300">
                    Accepted
                  </span>
                {% elif is_rejected %}
                  <span class="ml-2 inline-flex items-center rounded bg-red-900/80 px-2 py-0.5 text-sm font-medium text-red-300">
                    Rejected
                  </span>
                {% endif %}
              </div>
            </div>

            {% set is_requester = user and (user.id == ticket.requester_id) %}
            {% set is_closed = (ticket.status.value if ticket.status else 'open') == 'closed' %}
            {% set action_locked = suggestion.is_accepted or is_closed or is_rejected %}

            {% if role == 'end_user' and is_requester %}
            <div class="w-full md:w-80 space-y-2">
              <div class="flex items-center justify-start md:justify-end gap-2">
                <form method="post" action="/tickets/{{ ticket.id }}/suggestions/{{ suggestion.id }}/accept">
                  <button
                    class="inline-flex items-center justify-center rounded bg-green-600 px-3 py-1.5 text-m font-medium text-white hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed"
                    {% if action_locked %}disabled{% endif %}>
                    Accept
                  </button>
                </form>

                <button type="button"
                        class="inline-flex items-center justify-center rounded bg-red-600 px-3 py-1.5 text-m font-medium text-white hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed"
                        data-feedback-trigger="reject-panel-{{ suggestion.id }}"
                        {% if action_locked %}disabled{% endif %}>
                  Reject
                </button>
              </div>

              {% if not action_locked %}
              <div id="reject-panel-{{ suggestion.id }}" class="hidden w-full border border-red-800/50 bg-red-950/40 rounded-lg p-3 space-y-2">
                <form method="post"
                      action="/tickets/{{ ticket.id }}/suggestions/{{ suggestion.id }}/deny"
                      class="space-y-2">
                  <label for="reject-feedback-{{ suggestion.id }}" class="block text-m font-medium text-red-100">
                    Explain the reason for rejection
                  </label>
                  <textarea id="reject-feedback-{{ suggestion.id }}"
                            name="feedback"
                            rows="3"
                            required
                            class="w-full rounded-md border border-red-800 bg-red-950/60 text-red-50 placeholder-red-200/70 text-m p-2 focus:border-red-400 focus:ring-1 focus:ring-red-400"
                            placeholder="Why didn't this suggestion work?"></textarea>

                  <div class="flex items-center justify-end gap-2 text-m">
                    <button type="button"
                            class="inline-flex items-center rounded border border-red-700 px-3 py-1 text-red-200 hover:bg-red-900/40"
                            data-feedback-cancel="reject-panel-{{ suggestion.id }}">
                      Cancel
                    </button>
                    <button type="submit"
                            class="inline-flex items-center rounded bg-red-600 px-3 py-1 text-white hover:bg-red-700 font-medium">
                      Send Feedback & Reject
                    </button>
                  </div>
                </form>
              </div>
              {% endif %}
            </div>
            {% endif %}
          </li>
          {% endfor %}
        </ul>

      {% else %}
        <p class="text-sm text-zinc-400">No suggestions yet.</p>
      {% endif %}
    </div>
{% endif %}
</div>
{% endblock %}

{% block scripts %}
  {{ super() }}
  <script src="/static/js/res_feedback.js"></script>
{% endblock %}