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

{% block title %}{% trans "Appreciation Detail" %} - PX360{% endblock %}

{% block extra_css %}
<style>
    .tab-active {
        border-bottom: 3px solid #005696;
        color: #005696;
        font-weight: 700;
    }
    .tab-inactive {
        color: #64748b;
        font-weight: 500;
    }
    .tab-inactive:hover {
        color: #005696;
    }
    .toggle-switch {
        position: relative;
        width: 44px;
        height: 24px;
        background: #cbd5e1;
        border-radius: 12px;
        cursor: pointer;
        transition: background 0.3s;
    }
    .toggle-switch.active {
        background: #005696;
    }
    .toggle-switch::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: 20px;
        height: 20px;
        background: white;
        border-radius: 50%;
        transition: transform 0.3s;
        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }
    .toggle-switch.active::after {
        transform: translateX(20px);
    }
</style>
{% endblock %}

{% block content %}
<header class="mb-6">
    <div class="flex items-center gap-2 text-sm text-slate mb-2">
        <a href="{% url 'appreciation:appreciation_list' %}" class="hover:text-navy">{% trans "Appreciations" %}</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <span class="font-bold text-navy">{% trans "Detail" %}</span>
        <span class="px-2.5 py-1 rounded-full text-[10px] font-bold uppercase
            {% if appreciation.status == 'draft' %}bg-amber-100 text-amber-700
            {% elif appreciation.status == 'activated' %}bg-blue-100 text-blue-700
            {% elif appreciation.status == 'ai_analyzed' %}bg-purple-100 text-purple-700
            {% elif appreciation.status == 'sent' %}bg-green-100 text-green-700
            {% elif appreciation.status == 'acknowledged' %}bg-emerald-100 text-emerald-700
            {% else %}bg-slate-100 text-slate-600{% endif %}">
            {{ appreciation.get_status_display }}
        </span>
    </div>
    <div class="flex items-center justify-between">
        <h1 class="text-2xl font-bold text-navy flex items-center gap-3">
            <i data-lucide="heart" class="w-7 h-7 text-pink-500"></i>
            {% trans "Appreciation Detail" %}
        </h1>
        <span class="text-xs text-slate-400">
            {{ appreciation.created_at|date:"Y-m-d H:i" }} &mdash; {{ appreciation.hospital.name }}
        </span>
    </div>
</header>

<nav class="bg-white px-6 flex gap-6 border-b shadow-sm mb-6 rounded-t-2xl">
    <button class="py-4 text-sm tab-active" onclick="switchTab('details')" id="tab-details">{% trans "Details" %}</button>
    {% if appreciation.ai_analysis %}
    <button class="py-4 text-sm tab-inactive" onclick="switchTab('ai')" id="tab-ai">{% trans "AI Analysis" %}</button>
    {% endif %}
    <button class="py-4 text-sm tab-inactive" onclick="switchTab('notes')" id="tab-notes">
        {% trans "Notes" %}
        {% if notes_count %}<span class="ml-1 px-1.5 py-0.5 bg-slate-100 text-slate-600 text-xs rounded-full">{{ notes_count }}</span>{% endif %}
    </button>
</nav>

<main class="grid grid-cols-12 gap-6">
    <div class="col-span-8 space-y-6">

        <div id="panel-details" class="tab-panel">
            <section class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100 mb-6">
                <h3 class="font-bold text-navy mb-4 flex items-center gap-2">
                    <i data-lucide="message-square" class="w-5 h-5 text-emerald-600"></i>
                    {% trans "Appreciation Message" %}
                </h3>
                <p class="text-slate-700 text-sm leading-relaxed">{{ appreciation.message_en|linebreaks }}</p>
                {% if appreciation.message_ar %}
                <div class="mt-4 pt-4 border-t border-slate-100">
                    <p class="text-xs font-bold text-slate uppercase tracking-wider mb-1">{% trans "Arabic" %}</p>
                    <p class="text-slate-700 text-sm leading-relaxed" dir="rtl">{{ appreciation.message_ar|linebreaks }}</p>
                </div>
                {% endif %}
            </section>

            {% if metadata %}
            <section class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100 mb-6">
                <h3 class="font-bold text-navy mb-4 flex items-center gap-2">
                    <i data-lucide="user" class="w-5 h-5 text-blue-600"></i>
                    {% trans "Submitted By" %}
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    {% if metadata.submitted_by_name %}
                    <div>
                        <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Name" %}</p>
                        <p class="text-sm font-semibold text-navy">{{ metadata.submitted_by_name }}</p>
                    </div>
                    {% endif %}
                    {% if metadata.submitted_by_phone %}
                    <div>
                        <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Phone" %}</p>
                        <p class="text-sm font-semibold text-navy">{{ metadata.submitted_by_phone }}</p>
                    </div>
                    {% endif %}
                    {% if metadata.submitted_by_email %}
                    <div>
                        <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Email" %}</p>
                        <p class="text-sm font-semibold text-navy">{{ metadata.submitted_by_email }}</p>
                    </div>
                    {% endif %}
                    {% if metadata.staff_name_mentioned %}
                    <div>
                        <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Staff Mentioned" %}</p>
                        <p class="text-sm font-semibold text-navy">{{ metadata.staff_name_mentioned }}</p>
                    </div>
                    {% endif %}
                </div>
            </section>
            {% endif %}

            {% if appreciation.recipient %}
            <section class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100 mb-6">
                <h3 class="font-bold text-navy mb-4 flex items-center gap-2">
                    <i data-lucide="user-check" class="w-5 h-5 text-blue-600"></i>
                    {% trans "Assigned To" %}
                </h3>
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-full bg-navy/10 flex items-center justify-center">
                        <i data-lucide="user" class="w-5 h-5 text-navy"></i>
                    </div>
                    <div>
                        <p class="text-sm font-bold text-navy">{{ appreciation.get_recipient_name }}</p>
                        {% if appreciation.department %}
                        <p class="text-xs text-slate">{{ appreciation.department.name }}</p>
                        {% endif %}
                    </div>
                </div>
            </section>
            {% endif %}

            {% if appreciation.status == 'sent' or appreciation.status == 'acknowledged' %}
            <section class="bg-white rounded-2xl p-6 shadow-sm border border-green-200 mb-6">
                <h3 class="font-bold text-green-800 mb-4 flex items-center gap-2">
                    <i data-lucide="check-circle-2" class="w-5 h-5 text-green-600"></i>
                    {% trans "Sent" %}
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Sent At" %}</p>
                        <p class="text-sm font-semibold text-navy">{{ appreciation.sent_at|date:"Y-m-d H:i" }}</p>
                    </div>
                    <div>
                        <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "To Manager" %}</p>
                        <p class="text-sm font-semibold {% if appreciation.send_to_manager %}text-green-600{% else %}text-slate{% endif %}">
                            {% if appreciation.send_to_manager %}{% trans "Yes" %}{% else %}{% trans "No" %}{% endif %}
                        </p>
                    </div>
                    <div>
                        <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "To Department" %}</p>
                        <p class="text-sm font-semibold {% if appreciation.send_to_department %}text-green-600{% else %}text-slate{% endif %}">
                            {% if appreciation.send_to_department %}{% trans "Yes" %}{% else %}{% trans "No" %}{% endif %}
                        </p>
                    </div>
                </div>
                {% if appreciation.custom_message %}
                <div class="mt-4 pt-4 border-t border-green-100">
                    <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Custom Message" %}</p>
                    <p class="text-sm text-slate-700">{{ appreciation.custom_message }}</p>
                </div>
                {% endif %}
                {% if appreciation.cc_list %}
                <div class="mt-4 pt-4 border-t border-green-100">
                    <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "CC" %}</p>
                    <div class="flex flex-wrap gap-1.5">
                        {% for email in appreciation.cc_list %}
                        <span class="px-2 py-0.5 rounded-full text-xs font-bold bg-green-100 text-green-700">{{ email }}</span>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}
                {% if appreciation.acknowledged_at %}
                <div class="mt-4 pt-4 border-t border-green-100">
                    <div class="flex items-center gap-2">
                        <i data-lucide="check-circle" class="w-4 h-4 text-emerald-600"></i>
                        <p class="text-sm font-semibold text-emerald-700">{% trans "Acknowledged on" %} {{ appreciation.acknowledged_at|date:"Y-m-d H:i" }}</p>
                    </div>
                </div>
                {% endif %}
            </section>
            {% endif %}
        </div>

        {% if appreciation.ai_analysis %}
        <div id="panel-ai" class="tab-panel hidden">
            <section class="bg-white rounded-2xl p-6 shadow-sm border border-purple-200">
                <h3 class="font-bold text-purple-800 mb-4 flex items-center gap-2">
                    <i data-lucide="sparkles" class="w-5 h-5 text-purple-600"></i>
                    {% trans "AI Analysis" %}
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    {% if appreciation.ai_analysis.summary_en %}
                    <div>
                        <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Summary (EN)" %}</p>
                        <p class="text-sm text-slate-700">{{ appreciation.ai_analysis.summary_en }}</p>
                    </div>
                    {% endif %}
                    {% if appreciation.ai_analysis.summary_ar %}
                    <div>
                        <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Summary (AR)" %}</p>
                        <p class="text-sm text-slate-700" dir="rtl">{{ appreciation.ai_analysis.summary_ar }}</p>
                    </div>
                    {% endif %}
                    {% if appreciation.ai_analysis.themes %}
                    <div>
                        <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Themes" %}</p>
                        <div class="flex flex-wrap gap-1.5">
                            {% for theme in appreciation.ai_analysis.themes %}
                            <span class="px-2 py-0.5 rounded-full text-xs font-bold bg-purple-100 text-purple-700">{{ theme }}</span>
                            {% endfor %}
                        </div>
                    </div>
                    {% endif %}
                    {% if appreciation.ai_analysis.tone %}
                    <div>
                        <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Tone" %}</p>
                        <span class="px-2.5 py-1 rounded-full text-xs font-bold capitalize bg-blue-100 text-blue-700">{{ appreciation.ai_analysis.tone }}</span>
                    </div>
                    {% endif %}
                </div>
                {% if appreciation.ai_analysis.suggested_response_en %}
                <div class="mt-4 pt-4 border-t border-purple-100">
                    <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Suggested Response" %}</p>
                    <p class="text-sm text-slate-600 bg-purple-50 rounded-lg p-3">{{ appreciation.ai_analysis.suggested_response_en }}</p>
                </div>
                {% endif %}
            </section>
        </div>
        {% endif %}

        <div id="panel-notes" class="tab-panel hidden">
            {% include "partials/notes_panel.html" %}
        </div>
    </div>

    <div class="col-span-4 space-y-6">
        {% if can_activate %}
        <section class="bg-white rounded-2xl p-6 shadow-sm border border-emerald-200">
            <h3 class="font-bold text-emerald-800 mb-4 text-sm flex items-center gap-2">
                <i data-lucide="zap" class="w-4 h-4"></i> {% trans "Activate Appreciation" %}
            </h3>
            <form method="post" action="{% url 'appreciation:appreciation_activate' pk=appreciation.pk %}">
                {% csrf_token %}
                <p class="text-slate text-xs mb-4">{% trans "Select the staff member and department, then activate to trigger AI analysis." %}</p>
                <div class="space-y-3">
                    <div>
                        <label class="block text-[10px] font-bold text-slate uppercase tracking-wider mb-1">
                            {% trans "Staff Member" %} <span class="text-red-500">*</span>
                        </label>
                        <select name="staff" id="id_staff" data-tomselect class="w-full px-3 py-2.5 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-navy/20 focus:border-navy outline-none">
                            <option value="">{% trans "Select staff..." %}</option>
                            {% for s in staff_list %}
                            <option value="{{ s.id }}" data-department="{{ s.department.id }}">{{ s.first_name }} {{ s.last_name }}{% if s.employee_id %} ({{ s.employee_id }}){% endif %}{% if s.department %} - {{ s.department.name }}{% endif %}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Department" %}</label>
                        <select name="department" id="id_department" data-tomselect class="w-full px-3 py-2.5 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-navy/20 focus:border-navy outline-none">
                            <option value="">{% trans "Auto from staff" %}</option>
                            {% for d in departments %}
                            <option value="{{ d.id }}">{{ d.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Category" %}</label>
                        <select name="category" class="w-full px-3 py-2.5 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-navy/20 focus:border-navy outline-none">
                            <option value="">{% trans "Select category..." %}</option>
                            {% for c in categories %}
                            <option value="{{ c.id }}" {% if appreciation.category and appreciation.category.id == c.id %}selected{% endif %}>{{ c.name_en }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <button type="submit" class="w-full mt-4 px-4 py-2.5 bg-emerald-600 text-white rounded-xl font-bold hover:bg-emerald-700 transition text-sm inline-flex items-center justify-center gap-2">
                    <i data-lucide="zap" class="w-4 h-4"></i> {% trans "Activate & Analyze" %}
                </button>
            </form>
        </section>
        {% endif %}

        {% if can_send %}
        <section class="bg-white rounded-2xl p-6 shadow-sm border border-blue-200">
            <h3 class="font-bold text-navy mb-4 text-sm flex items-center gap-2">
                <i data-lucide="send" class="w-4 h-4"></i> {% trans "Send Appreciation" %}
            </h3>
            <form method="post" action="{% url 'appreciation:appreciation_send' pk=appreciation.pk %}">
                {% csrf_token %}
                <p class="text-slate text-xs mb-4">{% trans "Configure recipients and customize the message before sending." %}</p>
                <div class="space-y-3 mb-4">
                    <div class="flex items-center justify-between p-3 bg-slate-50 rounded-xl">
                        <div>
                            <p class="text-xs font-bold text-navy">{% trans "Notify Manager" %}</p>
                        </div>
                        <label class="toggle-switch active" onclick="this.classList.toggle('active')">
                            <input type="checkbox" name="send_to_manager" class="hidden" value="on" checked>
                        </label>
                    </div>
                    <div class="flex items-center justify-between p-3 bg-slate-50 rounded-xl">
                        <div>
                            <p class="text-xs font-bold text-navy">{% trans "Notify Dept" %}</p>
                        </div>
                        <label class="toggle-switch active" onclick="this.classList.toggle('active')">
                            <input type="checkbox" name="send_to_department" class="hidden" value="on" checked>
                        </label>
                    </div>
                </div>
                <div class="mb-3">
                    <label class="block text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Custom Message" %}</label>
                    <textarea name="custom_message" rows="3" class="w-full px-3 py-2 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-navy/20 focus:border-navy outline-none resize-none"
                        placeholder="{% trans 'Add a personal note...' %}">{% if appreciation.ai_analysis.suggested_response_en %}{{ appreciation.ai_analysis.suggested_response_en }}{% endif %}</textarea>
                </div>
                <div class="mb-3">
                    <label class="block text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "CC Recipients" %}</label>
                    <input type="text" name="cc_emails" class="w-full px-3 py-2 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-navy/20 focus:border-navy outline-none"
                        placeholder="{% trans 'email@example.com' %}">
                </div>
                <button type="submit" class="w-full px-4 py-2.5 bg-navy text-white rounded-xl font-bold hover:bg-blue transition text-sm inline-flex items-center justify-center gap-2">
                    <i data-lucide="send" class="w-4 h-4"></i> {% trans "Send Appreciation" %}
                </button>
            </form>
        </section>
        {% endif %}
    </div>
</main>

<script>
function switchTab(tabName) {
    document.querySelectorAll('.tab-panel').forEach(panel => panel.classList.add('hidden'));
    document.getElementById('panel-' + tabName).classList.remove('hidden');
    document.querySelectorAll('nav button').forEach(tab => {
        tab.classList.remove('tab-active');
        tab.classList.add('tab-inactive');
    });
    document.getElementById('tab-' + tabName).classList.remove('tab-inactive');
    document.getElementById('tab-' + tabName).classList.add('tab-active');
    if (window.lucide) lucide.createIcons();
}

document.getElementById('id_staff')?.addEventListener('change', function() {
    var selected = this.options[this.selectedIndex];
    var deptId = selected.getAttribute('data-department');
    var deptSelect = document.getElementById('id_department');
    if (deptId) {
        deptSelect.value = deptId;
        if (deptSelect.tomselect) {
            deptSelect.tomselect.setValue(deptId);
        }
    }
});

document.querySelectorAll('.toggle-switch').forEach(function(toggle) {
    toggle.addEventListener('click', function() {
        var checkbox = this.querySelector('input[type="checkbox"]');
        if (checkbox) {
            checkbox.checked = this.classList.contains('active');
        }
    });
});

document.addEventListener('DOMContentLoaded', function() {
    if (typeof lucide !== 'undefined') lucide.createIcons();
});
</script>
{% endblock %}