{% extends 'layouts/base.html' %}
{% load i18n %}
{% load static %}

{% block title %}Inquiry #{{ inquiry.id|slice:":8" }} - PX360{% endblock %}

{% block extra_css %}
<style>
    .timeline {
        position: relative;
        padding-left: 30px;
    }
    .timeline::before {
        content: '';
        position: absolute;
        left: 8px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: #e5e7eb;
    }
    .timeline-item {
        position: relative;
        padding-bottom: 30px;
    }
    .timeline-item::before {
        content: '';
        position: absolute;
        left: -26px;
        top: 5px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: white;
        border: 3px solid #17a2b8;
        z-index: 1;
    }
    .timeline-item.status_change::before {
        border-color: #f97316;
    }
    .timeline-item.response::before {
        border-color: #22c55e;
    }
    .timeline-item.note::before {
        border-color: #3b82f6;
    }
    
    .info-label {
        font-weight: 600;
        color: #9ca3af;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
</style>
{% endblock %}

{% block content %}
<!-- Back Button -->
<div class="mb-6">
    {% if source_user %}
    <a href="{% url 'px_sources:source_user_inquiry_list' %}" class="inline-flex items-center gap-2 px-4 py-2 border border-gray-200 rounded-xl text-gray-600 hover:bg-gray-50 transition text-sm font-semibold">
        <i data-lucide="arrow-left" class="w-4 h-4"></i> {% trans "Back to My Inquiries" %}
    </a>
    {% else %}
    <a href="{% url 'complaints:inquiry_list' %}" class="inline-flex items-center gap-2 px-4 py-2 border border-gray-200 rounded-xl text-gray-600 hover:bg-gray-50 transition text-sm font-semibold">
        <i data-lucide="arrow-left" class="w-4 h-4"></i> {% trans "Back to Inquiries" %}
    </a>
    {% endif %}
</div>

<!-- Inquiry Header -->
<div class="bg-gradient-to-r from-cyan-500 to-teal-500 rounded-2xl p-6 text-white mb-6">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div>
            <div class="flex flex-wrap items-center gap-3 mb-4">
                <h2 class="text-2xl font-bold">{{ inquiry.subject }}</h2>
                <span class="px-3 py-1 bg-white/20 rounded-full text-sm font-semibold">
                    {% trans "Inquiry" %}
                </span>
                
                {% if inquiry.status == 'open' %}
                <span class="px-3 py-1 bg-blue-500 rounded-full text-sm font-semibold">{% trans "Open" %}</span>
                {% elif inquiry.status == 'in_progress' %}
                <span class="px-3 py-1 bg-orange-500 rounded-full text-sm font-semibold">{% trans "In Progress" %}</span>
                {% elif inquiry.status == 'resolved' %}
                <span class="px-3 py-1 bg-green-500 rounded-full text-sm font-semibold">{% trans "Resolved" %}</span>
                {% elif inquiry.status == 'closed' %}
                <span class="px-3 py-1 bg-gray-500 rounded-full text-sm font-semibold">{% trans "Closed" %}</span>
                {% endif %}
                
                {% if inquiry.priority %}
                {% if inquiry.priority == 'low' %}
                <span class="px-3 py-1 bg-green-200 text-green-800 rounded-full text-sm font-semibold">{% trans "Low" %}</span>
                {% elif inquiry.priority == 'medium' %}
                <span class="px-3 py-1 bg-orange-200 text-orange-800 rounded-full text-sm font-semibold">{% trans "Medium" %}</span>
                {% elif inquiry.priority == 'high' %}
                <span class="px-3 py-1 bg-red-200 text-red-800 rounded-full text-sm font-semibold">{% trans "High" %}</span>
                {% elif inquiry.priority == 'urgent' %}
                <span class="px-3 py-1 bg-navy text-white rounded-full text-sm font-semibold">{% trans "Urgent" %}</span>
                {% endif %}
                {% endif %}
            </div>
            
            <div class="space-y-2 text-white/90">
                <p class="flex items-center gap-2">
                    <i data-lucide="hash" class="w-4 h-4"></i>
                    <span><strong>{% trans "ID" %}:</strong> {{ inquiry.id|slice:":8" }}</span>
                    {% if inquiry.patient %}
                    <span class="mx-2">|</span>
                    <span><strong>{% trans "Patient" %}:</strong> {{ inquiry.patient.get_full_name }} ({% trans "MRN" %}: {{ inquiry.patient.mrn }})</span>
                    {% else %}
                    <span class="mx-2">|</span>
                    <span><strong>{% trans "Contact" %}:</strong> {{ inquiry.contact_name|default:inquiry.contact_email }}</span>
                    {% endif %}
                </p>
                
                <p class="flex items-center gap-2">
                    <i data-lucide="building-2" class="w-4 h-4"></i>
                    <span><strong>{% trans "Hospital" %}:</strong> {{ inquiry.hospital.name_en }}</span>
                    {% if inquiry.department %}
                    <span class="mx-2">|</span>
                    <span><strong>{% trans "Department" %}:</strong> {{ inquiry.department.name_en }}</span>
                    {% endif %}
                </p>
            </div>
        </div>
        
        {% if inquiry.due_date %}
        <div class="bg-white/10 rounded-2xl p-5 text-center {% if inquiry.is_overdue %}bg-red-500/20{% endif %}">
            <div class="flex items-center justify-center gap-2 mb-2">
                <i data-lucide="clock" class="w-5 h-5"></i>
                <strong>{% trans "Due Date" %}</strong>
            </div>
            <h3 class="text-2xl font-bold mb-2">{{ inquiry.due_date|date:"M d, Y H:i" }}</h3>
            {% if inquiry.is_overdue %}
            <div class="text-red-200 font-bold">
                <i data-lucide="alert-triangle" class="w-4 h-4 inline"></i>
                {% trans "OVERDUE" %}
            </div>
            {% else %}
            <small class="text-white/80">{{ inquiry.due_date|timeuntil }} {% trans "remaining" %}</small>
            {% endif %}
        </div>
        {% endif %}
    </div>
</div>

<!-- Tab Navigation -->
<div class="bg-white rounded-t-2xl border-b border-gray-100 px-6">
    <div class="flex gap-1 overflow-x-auto" role="tablist">
        <button class="tab-btn active" data-target="details" role="tab">
            <i data-lucide="info" class="w-4 h-4"></i> {% trans "Details" %}
        </button>
        <button class="tab-btn" data-target="timeline" role="tab">
            <i data-lucide="clock-history" class="w-4 h-4"></i> {% trans "Timeline" %} ({{ timeline.count }})
        </button>
        <button class="tab-btn" data-target="attachments" role="tab">
            <i data-lucide="paperclip" class="w-4 h-4"></i> {% trans "Attachments" %} ({{ attachments.count }})
        </button>
    </div>
</div>

<!-- Tab Content -->
<div class="bg-white rounded-b-2xl border border-gray-50 shadow-sm mb-6">
    <div class="p-6">
        
        <!-- Details Tab -->
        <div class="tab-panel active" id="details">
            <h3 class="text-xl font-bold text-gray-800 mb-6">{% trans "Inquiry Details" %}</h3>
            
            <div class="space-y-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <div class="info-label mb-2">{% trans "Category" %}</div>
                        <span class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm font-semibold">{{ inquiry.get_category_display }}</span>
                    </div>
                    
                    <div>
                        <div class="info-label mb-2">{% trans "Source" %}</div>
                        {% if inquiry.source %}
                        <span class="px-3 py-1 bg-blue-100 text-blue-700 rounded-lg text-sm font-semibold">{{ inquiry.get_source_display }}</span>
                        {% else %}
                        <span class="text-gray-400 text-sm">{% trans "N/A" %}</span>
                        {% endif %}
                    </div>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <div class="info-label mb-2">{% trans "Channel" %}</div>
                        {% if inquiry.channel %}
                        <span class="text-gray-700 font-medium">{{ inquiry.get_channel_display }}</span>
                        {% else %}
                        <span class="text-gray-400 text-sm">{% trans "N/A" %}</span>
                        {% endif %}
                    </div>
                    
                    <div>
                        <div class="info-label mb-2">{% trans "Assigned To" %}</div>
                        <span class="text-gray-700 font-medium">
                            {% if inquiry.assigned_to %}{{ inquiry.assigned_to.get_full_name }}{% else %}<span class="text-gray-400">{% trans "Unassigned" %}</span>{% endif %}
                        </span>
                    </div>
                </div>
                
                <hr class="border-gray-200">
                
                <div>
                    <div class="info-label mb-2">{% trans "Message" %}</div>
                    <div class="bg-gray-50 rounded-xl p-4 text-gray-700">
                        {{ inquiry.message|linebreaks }}
                    </div>
                </div>
                
                {% if inquiry.response %}
                <hr class="border-gray-200">
                <div>
                    <div class="info-label mb-2">{% trans "Response" %}</div>
                    <div class="bg-green-50 border border-green-200 rounded-xl p-4">
                        <p class="text-gray-700 mb-3">{{ inquiry.response|linebreaks }}</p>
                        <small class="text-gray-500">
                            {% trans "Responded by" %} {{ inquiry.responded_by.get_full_name }} {% trans "on" %} {{ inquiry.responded_at|date:"M d, Y H:i" }}
                        </small>
                    </div>
                </div>
                {% endif %}
                
                <hr class="border-gray-200">
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <div class="info-label mb-2">{% trans "Created" %}</div>
                        <span class="text-gray-700 font-medium">{{ inquiry.created_at|date:"M d, Y H:i" }}</span>
                    </div>
                    <div>
                        <div class="info-label mb-2">{% trans "Last Updated" %}</div>
                        <span class="text-gray-700 font-medium">{{ inquiry.updated_at|date:"M d, Y H:i" }}</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Timeline Tab -->
        <div class="tab-panel hidden" id="timeline">
            <h3 class="text-xl font-bold text-gray-800 mb-6">{% trans "Activity Timeline" %}</h3>
            
            {% if timeline %}
            <div class="timeline">
                {% for update in timeline %}
                <div class="timeline-item {{ update.update_type }}">
                    <div class="bg-white border border-gray-200 rounded-xl p-4 shadow-sm hover:shadow-md transition">
                        <div class="flex justify-between items-start mb-2">
                            <div>
                                <span class="px-3 py-1 bg-cyan-500 text-white rounded-lg text-sm font-bold">{{ update.get_update_type_display }}</span>
                                {% if update.created_by %}
                                <span class="text-gray-500 text-sm ml-2">
                                    by {{ update.created_by.get_full_name }}
                                </span>
                                {% endif %}
                            </div>
                            <small class="text-gray-400">
                                {{ update.created_at|date:"M d, Y H:i" }}
                            </small>
                        </div>
                        <p class="text-gray-700">{{ update.message }}</p>
                        {% if update.old_status and update.new_status %}
                        <div class="flex gap-2 mt-2">
                            <span class="px-2 py-1 bg-blue-100 text-blue-600 rounded-lg text-xs font-bold">{{ update.old_status }}</span>
                            <i data-lucide="arrow-right" class="w-4 h-4 text-gray-400"></i>
                            <span class="px-2 py-1 bg-green-100 text-green-600 rounded-lg text-xs font-bold">{{ update.new_status }}</span>
                        </div>
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="text-center py-12">
                <i data-lucide="clock-history" class="w-16 h-16 mx-auto text-gray-300 mb-4"></i>
                <p class="text-gray-500">{% trans "No timeline entries yet" %}</p>
            </div>
            {% endif %}
        </div>
        
        <!-- Attachments Tab -->
        <div class="tab-panel hidden" id="attachments">
            <h3 class="text-xl font-bold text-gray-800 mb-6">{% trans "Attachments" %}</h3>
            
            {% if attachments %}
            <div class="space-y-3">
                {% for attachment in attachments %}
                <div class="bg-white border border-gray-200 rounded-xl p-4 flex justify-between items-center hover:shadow-md transition">
                    <div>
                        <div class="flex items-center gap-2 font-semibold text-gray-800 mb-1">
                            <i data-lucide="file" class="w-5 h-5"></i> {{ attachment.filename }}
                        </div>
                        <small class="text-gray-500">
                            {% trans "Uploaded by" %} {{ attachment.uploaded_by.get_full_name }}
                            {% trans "on" %} {{ attachment.created_at|date:"M d, Y H:i" }}
                            ({{ attachment.file_size|filesizeformat }})
                        </small>
                        {% if attachment.description %}
                        <p class="text-sm text-gray-600 mt-1">{{ attachment.description }}</p>
                        {% endif %}
                    </div>
                    <a href="{{ attachment.file.url }}" class="p-2 bg-cyan-100 text-cyan-600 rounded-lg hover:bg-cyan-200 transition">
                        <i data-lucide="download" class="w-5 h-5"></i>
                    </a>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="text-center py-12">
                <i data-lucide="paperclip" class="w-16 h-16 mx-auto text-gray-300 mb-4"></i>
                <p class="text-gray-500">{% trans "No attachments" %}</p>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- Sidebar Actions -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <div class="lg:col-span-2"></div>
    
    <div class="space-y-4">
        <!-- Quick Actions -->
        {% if can_edit %}
        <div class="bg-white rounded-2xl border border-gray-50 shadow-sm p-6">
            <h4 class="font-bold text-gray-800 mb-4 flex items-center gap-2">
                <i data-lucide="zap" class="w-5 h-5"></i> {% trans "Quick Actions" %}
            </h4>
            
            <!-- Activate -->
            <form method="post" action="{% url 'complaints:inquiry_activate' inquiry.id %}" class="mb-4">
                {% csrf_token %}
                {% if inquiry.assigned_to and inquiry.assigned_to == user %}
                <button type="submit" class="w-full px-4 py-3 bg-green-500 text-white rounded-xl font-semibold flex items-center justify-center gap-2" disabled>
                    <i data-lucide="check-circle" class="w-5 h-5"></i> {% trans "Activated (Assigned to You)" %}
                </button>
                {% else %}
                <button type="submit" class="w-full px-4 py-3 bg-cyan-500 text-white rounded-xl font-semibold hover:bg-cyan-600 transition flex items-center justify-center gap-2">
                    <i data-lucide="zap" class="w-5 h-5"></i> {% trans "Activate" %}
                </button>
                {% endif %}
            </form>
            
            <!-- Change Status -->
            <form method="post" action="{% url 'complaints:inquiry_change_status' inquiry.id %}" class="mb-4">
                {% csrf_token %}
                <label class="block text-sm font-semibold text-gray-700 mb-2">{% trans "Change Status" %}</label>
                <select name="status" class="w-full px-4 py-3 border border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-cyan-500 focus:border-transparent transition mb-2" required>
                    {% for value, label in status_choices %}
                    <option value="{{ value }}" {% if inquiry.status == value %}selected{% endif %}>{{ label }}</option>
                    {% endfor %}
                </select>
                <textarea name="note" class="w-full px-4 py-3 border border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-cyan-500 focus:border-transparent transition mb-2" rows="2" placeholder="{% trans 'Optional note...' %}"></textarea>
                <button type="submit" class="w-full px-4 py-3 bg-cyan-500 text-white rounded-xl font-semibold hover:bg-cyan-600 transition flex items-center justify-center gap-2">
                    <i data-lucide="refresh-cw" class="w-5 h-5"></i> {% trans "Update Status" %}
                </button>
            </form>
        </div>
        {% endif %}
        
        <!-- Add Note -->
        <div class="bg-white rounded-2xl border border-gray-50 shadow-sm p-6">
            <h4 class="font-bold text-gray-800 mb-4 flex items-center gap-2">
                <i data-lucide="message-circle" class="w-5 h-5"></i> {% trans "Add Note" %}
            </h4>
            
            <form method="post" action="{% url 'complaints:inquiry_add_note' inquiry.id %}">
                {% csrf_token %}
                <textarea name="note" class="w-full px-4 py-3 border border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-cyan-500 focus:border-transparent transition mb-3" rows="3" placeholder="{% trans 'Enter your note...' %}" required></textarea>
                <button type="submit" class="w-full px-4 py-3 bg-green-500 text-white rounded-xl font-semibold hover:bg-green-600 transition flex items-center justify-center gap-2">
                    <i data-lucide="plus-circle" class="w-5 h-5"></i> {% trans "Add Note" %}
                </button>
            </form>
        </div>
        
        <!-- Response Form -->
        {% if can_edit and inquiry.status != 'resolved' and inquiry.status != 'closed' %}
        <div class="bg-white rounded-2xl border border-gray-50 shadow-sm p-6">
            <h4 class="font-bold text-gray-800 mb-4 flex items-center gap-2">
                <i data-lucide="reply" class="w-5 h-5"></i> {% trans "Respond to Inquiry" %}
            </h4>
            
            <form method="post" action="{% url 'complaints:inquiry_respond' inquiry.id %}">
                {% csrf_token %}
                <textarea name="response" class="w-full px-4 py-3 border border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-cyan-500 focus:border-transparent transition mb-3" rows="4" placeholder="{% trans 'Enter your response...' %}" required></textarea>
                <button type="submit" class="w-full px-4 py-3 bg-cyan-500 text-white rounded-xl font-semibold hover:bg-cyan-600 transition flex items-center justify-center gap-2">
                    <i data-lucide="send" class="w-5 h-5"></i> {% trans "Send Response" %}
                </button>
            </form>
        </div>
        {% endif %}
        
        <!-- Contact Information -->
        <div class="bg-white rounded-2xl border border-gray-50 shadow-sm p-6">
            <h4 class="font-bold text-gray-800 mb-4 flex items-center gap-2">
                <i data-lucide="info" class="w-5 h-5"></i> {% trans "Contact Information" %}
            </h4>
            
            <div class="space-y-4">
                {% if inquiry.patient %}
                <div>
                    <div class="info-label mb-1">{% trans "Patient" %}</div>
                    <div class="text-gray-700 font-medium">
                        {{ inquiry.patient.get_full_name }}
                        <br>
                        <small class="text-gray-500">{% trans "MRN" %}: {{ inquiry.patient.mrn }}</small>
                    </div>
                </div>
                
                {% if inquiry.patient.phone %}
                <div>
                    <div class="info-label mb-1">{% trans "Phone" %}</div>
                    <div class="text-gray-700 font-medium">{{ inquiry.patient.phone }}</div>
                </div>
                {% endif %}
                
                {% if inquiry.patient.email %}
                <div>
                    <div class="info-label mb-1">{% trans "Email" %}</div>
                    <div class="text-gray-700 font-medium">{{ inquiry.patient.email }}</div>
                </div>
                {% endif %}
                {% else %}
                {% if inquiry.contact_name %}
                <div>
                    <div class="info-label mb-1">{% trans "Name" %}</div>
                    <div class="text-gray-700 font-medium">{{ inquiry.contact_name }}</div>
                </div>
                {% endif %}
                
                {% if inquiry.contact_phone %}
                <div>
                    <div class="info-label mb-1">{% trans "Phone" %}</div>
                    <div class="text-gray-700 font-medium">{{ inquiry.contact_phone }}</div>
                </div>
                {% endif %}
                
                {% if inquiry.contact_email %}
                <div>
                    <div class="info-label mb-1">{% trans "Email" %}</div>
                    <div class="text-gray-700 font-medium">{{ inquiry.contact_email }}</div>
                </div>
                {% endif %}
                {% endif %}
            </div>
        </div>
        
        <!-- Assignment Info -->
        <div class="bg-white rounded-2xl border border-gray-50 shadow-sm p-6">
            <h4 class="font-bold text-gray-800 mb-4 flex items-center gap-2">
                <i data-lucide="user-check" class="w-5 h-5"></i> {% trans "Assignment Info" %}
            </h4>
            
            <div class="space-y-4">
                <div>
                    <div class="info-label mb-1">{% trans "Assigned To" %}</div>
                    <div class="text-gray-700 font-medium">
                        {% if inquiry.assigned_to %}{{ inquiry.assigned_to.get_full_name }}{% else %}<span class="text-gray-400">{% trans "Unassigned" %}</span>{% endif %}
                    </div>
                </div>
                
                {% if inquiry.responded_by %}
                <div>
                    <div class="info-label mb-1">{% trans "Responded By" %}</div>
                    <div class="text-gray-700 font-medium">
                        {{ inquiry.responded_by.get_full_name }}
                        <br>
                        <small class="text-gray-500">{{ inquiry.responded_at|date:"M d, Y H:i" }}</small>
                    </div>
                </div>
                {% endif %}
                
                {% if inquiry.resolved_by %}
                <div>
                    <div class="info-label mb-1">{% trans "Resolved By" %}</div>
                    <div class="text-gray-700 font-medium">
                        {{ inquiry.resolved_by.get_full_name }}
                        <br>
                        <small class="text-gray-500">{{ inquiry.resolved_at|date:"M d, Y H:i" }}</small>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<script>
// Tab switching
document.querySelectorAll('.tab-btn').forEach(btn => {
    btn.addEventListener('click', () => {
        // Remove active class from all tabs and panels
        document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
        document.querySelectorAll('.tab-panel').forEach(p => p.classList.add('hidden'));
        
        // Add active class to clicked tab
        btn.classList.add('active');
        
        // Show corresponding panel
        const target = btn.dataset.target;
        document.getElementById(target).classList.remove('hidden');
    });
});
</script>

<style>
.tab-btn {
    @apply px-4 py-3 text-sm font-semibold text-gray-500 hover:text-gray-700 hover:bg-gray-50 transition border-b-2 border-transparent;
}
.tab-btn.active {
    @apply text-cyan-500 border-cyan-500;
}
.tab-panel {
    @apply block;
}
.tab-panel.hidden {
    @apply hidden;
}
</style>
{% endblock %}