{% extends 'layouts/authenticated.html.twig' %}

{% block page_title %}{{ page_title }}{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

    {# Header #}
    <div class="mb-6">
        <a href="{{ path('user_media_index') }}" class="inline-flex items-center text-sm text-gray-500 hover:text-gray-700 mb-4">
            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
            </svg>
            Retour à mes médias
        </a>
        <h1 class="text-3xl font-bold text-gray-900">{{ page_title }}</h1>
        <p class="mt-2 text-sm text-gray-600">
            Gérez les médias partagés avec vous et ceux que vous avez partagés avec d'autres utilisateurs.
        </p>
    </div>

    {# Tabs #}
    <div class="mb-6 border-b border-gray-200">
        <nav class="-mb-px flex space-x-8" aria-label="Tabs">
            <a href="{{ path('user_media_shared', {'tab': 'with-me'}) }}"
               class="{% if activeTab == 'with-me' %}border-blue-500 text-blue-600{% else %}border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300{% endif %} whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
                <svg class="w-5 h-5 inline-block mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
                </svg>
                Partagés avec moi
                <span class="ml-2 py-0.5 px-2 rounded-full text-xs font-medium {% if activeTab == 'with-me' %}bg-blue-100 text-blue-800{% else %}bg-gray-100 text-gray-800{% endif %}">
                    {{ activeTab == 'with-me' ? media|length : mediaAccess|filter(ma => ma.user == app.user)|length }}
                </span>
            </a>
            <a href="{{ path('user_media_shared', {'tab': 'by-me'}) }}"
               class="{% if activeTab == 'by-me' %}border-blue-500 text-blue-600{% else %}border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300{% endif %} whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
                <svg class="w-5 h-5 inline-block mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
                </svg>
                Partagés par moi
                <span class="ml-2 py-0.5 px-2 rounded-full text-xs font-medium {% if activeTab == 'by-me' %}bg-blue-100 text-blue-800{% else %}bg-gray-100 text-gray-800{% endif %}">
                    {{ activeTab == 'by-me' ? mediaAccess|length : mediaAccess|filter(ma => ma.grantedBy == app.user)|length }}
                </span>
            </a>
        </nav>
    </div>

    {# Content #}
    {% if media|length > 0 %}
        <div class="bg-white shadow overflow-hidden sm:rounded-lg">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Fichier
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Type
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Taille
                        </th>
                        {% if activeTab == 'with-me' %}
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Partagé par
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Expire le
                            </th>
                        {% else %}
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Partagé avec
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Date
                            </th>
                        {% endif %}
                        <th scope="col" class="relative px-6 py-3">
                            <span class="sr-only">Actions</span>
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    {% if activeTab == 'with-me' %}
                        {# Media shared WITH user #}
                        {% for item in media %}
                            {% set access = mediaAccess|filter(ma => ma.media.id == item.id)|first %}
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div class="flex-shrink-0 h-10 w-10">
                                            {% if item.category == 'image' %}
                                                <img class="h-10 w-10 rounded object-cover" src="{{ path('app_media_serve', {'path': item.filePath}) }}" alt="{{ item.originalFileName }}">
                                            {% else %}
                                                <div class="h-10 w-10 rounded bg-gray-200 flex items-center justify-center">
                                                    <svg class="w-6 h-6 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                                                    </svg>
                                                </div>
                                            {% endif %}
                                        </div>
                                        <div class="ml-4">
                                            <div class="text-sm font-medium text-gray-900">{{ item.originalFileName }}</div>
                                            <div class="text-sm text-gray-500">{{ item.mimeType }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                                        {{ item.type|replace({'_': ' '})|title }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    {{ item.formattedFileSize ?? ((item.fileSize / 1024)|round(2) ~ ' KB') }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                    {{ access ? access.grantedBy.email : item.uploadedBy.email }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    {% if access and access.expiresAt %}
                                        {{ access.expiresAt|date('d/m/Y') }}
                                    {% else %}
                                        <span class="text-gray-400">Jamais</span>
                                    {% endif %}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <a href="{{ path('user_media_show', {'id': item.id}) }}" class="text-blue-600 hover:text-blue-900 mr-3">
                                        Voir
                                    </a>
                                    <a href="{{ path('user_media_download', {'id': item.id}) }}" data-turbo="false" download class="text-green-600 hover:text-green-900">
                                        Télécharger
                                    </a>
                                </td>
                            </tr>
                        {% endfor %}
                    {% else %}
                        {# Media shared BY user #}
                        {% for item in media %}
                            {% set accesses = mediaAccess|filter(ma => ma.media.id == item.id) %}
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div class="flex-shrink-0 h-10 w-10">
                                            {% if item.category == 'image' %}
                                                <img class="h-10 w-10 rounded object-cover" src="{{ path('app_media_serve', {'path': item.filePath}) }}" alt="{{ item.originalFileName }}">
                                            {% else %}
                                                <div class="h-10 w-10 rounded bg-gray-200 flex items-center justify-center">
                                                    <svg class="w-6 h-6 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                                                    </svg>
                                                </div>
                                            {% endif %}
                                        </div>
                                        <div class="ml-4">
                                            <div class="text-sm font-medium text-gray-900">{{ item.originalFileName }}</div>
                                            <div class="text-sm text-gray-500">{{ item.mimeType }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                                        {{ item.type|replace({'_': ' '})|title }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    {{ item.formattedFileSize ?? ((item.fileSize / 1024)|round(2) ~ ' KB') }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex -space-x-2">
                                        {% for access in accesses|slice(0, 3) %}
                                            <div class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-blue-500 text-white text-xs font-medium border-2 border-white" title="{{ access.user.email }}">
                                                {{ access.user.email|slice(0, 2)|upper }}
                                            </div>
                                        {% endfor %}
                                        {% if accesses|length > 3 %}
                                            <div class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-gray-300 text-gray-700 text-xs font-medium border-2 border-white">
                                                +{{ accesses|length - 3 }}
                                            </div>
                                        {% endif %}
                                    </div>
                                    <div class="text-xs text-gray-500 mt-1">
                                        {{ accesses|length }} personne{{ accesses|length > 1 ? 's' : '' }}
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    {{ accesses|first ? accesses|first.grantedAt|date('d/m/Y') : '-' }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <a href="{{ path('user_media_show', {'id': item.id}) }}" class="text-blue-600 hover:text-blue-900 mr-3">
                                        Gérer
                                    </a>
                                    <a href="{{ path('user_media_download', {'id': item.id}) }}" data-turbo="false" download class="text-green-600 hover:text-green-900">
                                        Télécharger
                                    </a>
                                </td>
                            </tr>
                        {% endfor %}
                    {% endif %}
                </tbody>
            </table>
        </div>
    {% else %}
        {# Empty State #}
        <div class="text-center py-12">
            <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
            </svg>
            <h3 class="mt-2 text-sm font-medium text-gray-900">
                {% if activeTab == 'with-me' %}
                    Aucun média partagé avec vous
                {% else %}
                    Aucun média partagé par vous
                {% endif %}
            </h3>
            <p class="mt-1 text-sm text-gray-500">
                {% if activeTab == 'with-me' %}
                    Lorsque d'autres utilisateurs partageront des médias avec vous, ils apparaîtront ici.
                {% else %}
                    Commencez à partager vos médias avec d'autres utilisateurs depuis la page de détails.
                {% endif %}
            </p>
            <div class="mt-6">
                <a href="{{ path('user_media_index') }}" class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                    </svg>
                    Retour à mes médias
                </a>
            </div>
        </div>
    {% endif %}

</div>
{% endblock %}