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

{% block content %}
<div class="max-w-4xl mx-auto mt-8 px-4 sm:px-6 lg:px-8">
    <div class="bg-white shadow-md rounded-lg overflow-hidden mb-8">
        <div class="px-4 py-5 sm:px-6 bg-gray-50 border-b border-gray-200 flex items-center justify-between">
            <h1 class="text-2xl font-bold text-gray-900 flex items-center">
                {% trans "Link Details" %}
                {% if '{' in link.original_url and '}' in link.original_url %}
                    <span class="ml-2 bg-purple-100 text-purple-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded-full flex items-center">
                        <i class="fas fa-magic mr-1"></i>{% trans "Template" %}
                    </span>
                {% elif link.link_type == 'LINK' %}
                    <span class="ml-2 bg-blue-100 text-blue-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded-full flex items-center">
                        <i class="fas fa-link mr-1"></i>{% trans "Link" %}
                    </span>
                {% else %}
                    <span class="ml-2 bg-green-100 text-green-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded-full flex items-center">
                        <i class="fas fa-code mr-1"></i>{% trans "Custom" %}
                    </span>
                {% endif %}
            </h1>
            <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2">
                <a href="{% url 'redirect_to_original' link.alias %}" target="_blank" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded text-sm sm:text-base inline-flex items-center justify-center">
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                    </svg>
                    {% trans "Go to link" %}
                </a>
                <a href="{% url 'link_update' link.pk %}" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded text-sm sm:text-base inline-flex items-center justify-center">
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                    </svg>
                    {% trans "Edit" %}
                </a>
            </div>
        </div>
        <div class="px-4 py-5 sm:p-6">
            <dl class="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2">
                <div class="sm:col-span-1">
                    <dt class="text-sm font-medium text-gray-500">{% trans "Alias" %}</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{ link.alias }}</dd>
                </div>
                <div class="sm:col-span-1">
                    <dt class="text-sm font-medium text-gray-500">{% trans "Click Count" %}</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{ link.click_count }}</dd>
                </div>
                <div class="sm:col-span-1">
                    <dt class="text-sm font-medium text-gray-500">{% trans "Created At" %}</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{ link.created_at|date:"Y-m-d H:i" }}</dd>
                </div>
                <div class="sm:col-span-1">
                    <dt class="text-sm font-medium text-gray-500">{% trans "Updated At" %}</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{ link.updated_at|date:"Y-m-d H:i" }}</dd>
                </div>
                {% if link.link_type == 'LINK' %}
                    <div class="sm:col-span-2">
                        <dt class="text-sm font-medium text-gray-500">{% trans "Original URL" %}</dt>
                        <dd class="mt-1 text-sm text-gray-900">
                            <a href="{{ link.original_url }}" target="_blank" class="text-blue-600 hover:underline">{{ link.original_url }}</a>
                        </dd>
                    </div>
                {% endif %}
                {% if link.description %}
                <div class="sm:col-span-2">
                    <dt class="text-sm font-medium text-gray-500">{% trans "Description" %}</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{ link.description }}</dd>
                </div>
                {% endif %}
            </dl>
        </div>
    </div>

    {% if link.link_type == 'CUSTOM' %}
    <div class="bg-white shadow-md rounded-lg overflow-hidden mb-8">
        <div class="px-4 py-5 sm:px-6 bg-gray-50 border-b border-gray-200">
            <h2 class="text-xl font-bold text-gray-900">{% trans "Custom Content" %}</h2>
        </div>
        <div class="px-4 py-5 sm:p-6">
            <div class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl max-w-none">
                {{ rendered_text|safe }}
            </div>
        </div>
    </div>
    {% endif %}

    <div class="bg-white shadow-md rounded-lg overflow-hidden">
        <div class="px-4 py-5 sm:px-6 bg-gray-50 border-b border-gray-200">
            <h2 class="text-xl font-bold text-gray-900">{% trans "Click Statistics" %}</h2>
        </div>
        <div class="px-4 py-5 sm:p-6">
            <canvas id="clickChart"></canvas>
        </div>
    </div>

    <div class="bg-white shadow-md rounded-lg overflow-hidden mt-8">
        <div class="px-4 py-5 sm:px-6 bg-gray-50 border-b border-gray-200">
            <h2 class="text-xl font-bold text-gray-900">{% trans "URL Change History" %}</h2>
        </div>
        <div class="px-4 py-5 sm:p-6">
            {% if change_logs %}
                <ul class="divide-y divide-gray-200">
                {% for log in change_logs %}
                    <li class="py-4">
                        <p class="text-sm text-gray-600">
                            {% trans "URL changed at" %} {{ log.changed_at|date:"Y-m-d H:i" }}
                        </p>
                        <p class="mt-1 text-sm text-red-600 line-through">{{ log.old_url }}</p>
                        <p class="mt-1 text-sm text-green-600">{{ log.new_url }}</p>
                    </li>
                {% endfor %}
                </ul>
            {% else %}
                <p class="text-sm text-gray-600">{% trans "No URL changes recorded." %}</p>
            {% endif %}
        </div>
    </div>

</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var ctx = document.getElementById('clickChart').getContext('2d');
        var clickData = {{ click_stats|safe }};

        var chart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: clickData.map(item => item.date),
                datasets: [{
                    label: '{% trans "Clicks" %}',
                    data: clickData.map(item => item.count),
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: '{% trans "Number of Clicks" %}'
                        }
                    },
                    x: {
                        title: {
                            display: true,
                            text: '{% trans "Date" %}'
                        }
                    }
                }
            }
        });
    });
</script>
{% endblock %}

{% block extra_css %}
<style>
    .prose {
        color: #374151;
        max-width: 65ch;
    }
    .prose p {
        margin-top: 1.25em;
        margin-bottom: 1.25em;
    }
    .prose a {
        color: #2563eb;
        text-decoration: underline;
    }
    .prose strong {
        font-weight: 600;
    }
    .prose ul {
        margin-top: 1.25em;
        margin-bottom: 1.25em;
        list-style-type: disc;
        padding-left: 1.625em;
    }
    .prose ol {
        margin-top: 1.25em;
        margin-bottom: 1.25em;
        list-style-type: decimal;
        padding-left: 1.625em;
    }
    .prose h1 {
        font-size: 2.25em;
        margin-top: 0;
        margin-bottom: 0.8888889em;
        line-height: 1.1111111;
    }
    .prose h2 {
        font-size: 1.5em;
        margin-top: 2em;
        margin-bottom: 1em;
        line-height: 1.3333333;
    }
    .prose h3 {
        font-size: 1.25em;
        margin-top: 1.6em;
        margin-bottom: 0.6em;
        line-height: 1.6;
    }
    .prose img {
        margin-top: 2em;
        margin-bottom: 2em;
    }
    .prose code {
        color: #111827;
        font-weight: 600;
    }
    .prose pre {
        color: #e5e7eb;
        background-color: #1f2937;
        overflow-x: auto;
        font-size: 0.875em;
        line-height: 1.7142857;
        margin-top: 1.7142857em;
        margin-bottom: 1.7142857em;
        border-radius: 0.375rem;
        padding-top: 0.8571429em;
        padding-right: 1.1428571em;
        padding-bottom: 0.8571429em;
        padding-left: 1.1428571em;
    }
</style>
{% endblock %}