{% extends 'base.html.twig' %}

{% block title %}Gestion des outils - Admin{% endblock %}

{% block body %}
<div class="max-w-[1400px] mx-auto">

    {# Header #}
    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6 mb-8">
        {% include '_molecules/page-header/page-header.html.twig' with {
            title: 'Gestion des outils',
            subtitle: 'Liste des outils disponibles sur la plateforme Bubul. Ajoutez ou modifiez les outils directement depuis cette interface.',
            icon: 'settings',
            backHref: path('app_dashboard'),
            backLabel: 'Retour au dashboard'
        } only %}

        {% include '_atoms/button/button.html.twig' with {
            label: 'Nouvel outil',
            variant: 'primary',
            size: 'lg',
            icon: 'plus',
            href: path('admin_tool_new')
        } only %}
    </div>

    {# Compteur #}
    <div class="flex items-center gap-3 mb-6">
        <span class="inline-flex items-center justify-center min-w-[32px] h-8 px-3 bg-primary text-white rounded-full text-sm font-bold">
            {{ tools|length }}
        </span>
        <span class="text-gray-500">outil{{ tools|length > 1 ? 's' : '' }} enregistré{{ tools|length > 1 ? 's' : '' }}</span>
    </div>

    {# Tableau des outils #}
    <div class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
        <table class="w-full">
            <thead class="bg-gray-50 border-b border-gray-200">
                <tr>
                    <th class="w-16 px-4 py-3"></th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Nom</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Code</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Description</th>
                    <th class="px-4 py-3 text-center text-xs font-semibold text-gray-500 uppercase tracking-wider">Tokens</th>
                    <th class="px-4 py-3 text-center text-xs font-semibold text-gray-500 uppercase tracking-wider">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                {% for tool in tools %}
                    <tr class="hover:bg-gray-50 transition-colors">
                        <td class="px-4 py-4">
                            {% set tc = tool_colors[tool.code] ?? 'primary' %}
                            {% set hex = (tool_color_details[tool.code] ?? {}).primary ?? null %}
                            {% set hexSecondary = (tool_color_details[tool.code] ?? {}).secondary ?? null %}
                            <div class="w-10 h-10 rounded-xl flex items-center justify-center {{ hex ? '' : 'bg-' ~ tc ~ '/10' }}"
                                 {% if hex %}style="background: {{ hex }}18;"{% endif %}>
                                {% include '_atoms/icon/icon.html.twig' with {
                                    name: tool.sidebarIcon,
                                    size: 'md',
                                    color: tc,
                                    colorPrimary: hex,
                                    colorSecondary: hexSecondary
                                } only %}
                            </div>
                        </td>
                        <td class="px-4 py-4">
                            <span class="font-semibold text-gray-900">{{ tool.name }}</span>
                        </td>
                        <td class="px-4 py-4">
                            <code class="text-sm bg-gray-100 px-2 py-1 rounded font-mono text-primary">{{ tool.code }}</code>
                        </td>
                        <td class="px-4 py-4 max-w-xs">
                            <span class="text-sm text-gray-500 line-clamp-2">{{ tool.description|default('—') }}</span>
                        </td>
                        <td class="px-4 py-4 text-center">
                            {% if tool.isTokenable %}
                                {% include '_atoms/badge/badge.html.twig' with {
                                    label: 'Oui',
                                    variant: 'success',
                                    size: 'sm'
                                } only %}
                            {% else %}
                                {% include '_atoms/badge/badge.html.twig' with {
                                    label: 'Non',
                                    variant: 'gray',
                                    size: 'sm'
                                } only %}
                            {% endif %}
                        </td>
                        <td class="px-4 py-4 text-center">
                            {% include '_atoms/button/button.html.twig' with {
                                variant: 'ghost',
                                size: 'sm',
                                icon: 'edit',
                                href: path('admin_tool_edit', {id: tool.id}),
                                attr: { title: 'Modifier' }
                            } only %}
                        </td>
                    </tr>
                {% else %}
                    <tr>
                        <td colspan="6" class="px-4 py-12 text-center">
                            {% include '_molecules/empty-state/empty-state.html.twig' with {
                                title: 'Aucun outil enregistré',
                                description: 'Créez le premier outil pour commencer.',
                                icon: 'settings',
                                variant: 'minimal',
                                actions: [{
                                    label: 'Créer un outil',
                                    href: path('admin_tool_new'),
                                    variant: 'primary',
                                    icon: 'plus'
                                }]
                            } only %}
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

</div>
{% endblock %}