{% extends "layouts/app.html" %}
{% from "components/card.html" import stat_card %}

{% block title %}Configuration - Claude Monitor{% endblock %}

{% block main_content %}
<div class="space-y-8" x-data="{ activeTab: 'skills', selectedFeature: null, selectedRepoPath: '{{ selected_repo.path if selected_repo else '' }}' }">
    <!-- Page Title -->
    <div class="flex items-center justify-between flex-wrap gap-4">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Configuration</h1>
            <p class="mt-2 text-gray-600">Claude Code configuration viewer</p>
        </div>

        <div class="flex items-center gap-4">
            <!-- Repository Selector -->
            {% if repositories %}
            <div class="w-64">
                <label for="repo-select" class="block text-sm font-medium text-gray-700 mb-2">Repository</label>
                <select
                    id="repo-select"
                    x-model="selectedRepoPath"
                    @change="window.location.href = '/configuration?repo=' + encodeURIComponent($event.target.value)"
                    class="w-full rounded-lg border-gray-300 border py-2 px-3 focus:ring-2 focus:ring-[#0770E3] focus:border-[#0770E3]"
                >
                    {% for repo in repositories %}
                    <option value="{{ repo.path }}" {% if selected_repo and repo.path == selected_repo.path %}selected{% endif %}>
                        {{ repo.name }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            {% endif %}

            <!-- Action Buttons -->
            <div class="flex gap-2 mt-7">
                <!-- Export Button -->
                {% if selected_repo %}
                <a :href="'/export/configuration/' + encodeURIComponent(selectedRepoPath)"
                   class="px-4 py-2 bg-[#0770E3] text-white rounded-lg hover:bg-[#0660C3] transition-colors flex items-center gap-2"
                   download>
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                    </svg>
                    Export
                </a>
                {% endif %}

                <!-- Refresh Button -->
                <button onclick="window.location.reload()"
                        class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors flex items-center gap-2">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                    </svg>
                    Refresh
                </button>
            </div>
        </div>
    </div>

    <!-- Summary Cards -->
    {% if features %}
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
        {{ stat_card(
            label="Skills",
            value=(features.counts.skills|default(0)|int)|string,
            icon='<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path></svg>'
        ) }}

        {{ stat_card(
            label="MCPs",
            value=(features.counts.mcps|default(0)|int)|string,
            icon='<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>'
        ) }}

        {{ stat_card(
            label="Commands",
            value=(features.counts.commands|default(0)|int)|string,
            icon='<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>'
        ) }}

        {{ stat_card(
            label="Plugins",
            value=(features.counts.plugins|default(0)|int)|string,
            icon='<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z"></path></svg>'
        ) }}

        {{ stat_card(
            label="Hooks",
            value=(features.counts.hooks|default(0)|int)|string,
            icon='<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>'
        ) }}

        {{ stat_card(
            label="Agents",
            value=(features.counts.agents|default(0)|int)|string,
            icon='<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>'
        ) }}
    </div>
    {% endif %}

    <!-- Feature Tabs and List -->
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
        <!-- Tab Headers -->
        <div class="border-b border-gray-200 bg-gray-50">
            <nav class="flex -mb-px overflow-x-auto" aria-label="Tabs">
                <button @click="activeTab = 'skills'"
                        :class="activeTab === 'skills' ? 'border-[#0770E3] text-[#0770E3]' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                        class="whitespace-nowrap py-4 px-6 border-b-2 font-medium text-sm focus:outline-none transition-colors">
                    Skills ({{ (features.counts.skills|default(0)|int) }})
                </button>
                <button @click="activeTab = 'mcps'"
                        :class="activeTab === 'mcps' ? 'border-[#0770E3] text-[#0770E3]' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                        class="whitespace-nowrap py-4 px-6 border-b-2 font-medium text-sm focus:outline-none transition-colors">
                    MCPs ({{ (features.counts.mcps|default(0)|int) }})
                </button>
                <button @click="activeTab = 'commands'"
                        :class="activeTab === 'commands' ? 'border-[#0770E3] text-[#0770E3]' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                        class="whitespace-nowrap py-4 px-6 border-b-2 font-medium text-sm focus:outline-none transition-colors">
                    Commands ({{ (features.counts.commands|default(0)|int) }})
                </button>
                <button @click="activeTab = 'plugins'"
                        :class="activeTab === 'plugins' ? 'border-[#0770E3] text-[#0770E3]' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                        class="whitespace-nowrap py-4 px-6 border-b-2 font-medium text-sm focus:outline-none transition-colors">
                    Plugins ({{ (features.counts.plugins|default(0)|int) }})
                </button>
                <button @click="activeTab = 'hooks'"
                        :class="activeTab === 'hooks' ? 'border-[#0770E3] text-[#0770E3]' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                        class="whitespace-nowrap py-4 px-6 border-b-2 font-medium text-sm focus:outline-none transition-colors">
                    Hooks ({{ (features.counts.hooks|default(0)|int) }})
                </button>
                <button @click="activeTab = 'agents'"
                        :class="activeTab === 'agents' ? 'border-[#0770E3] text-[#0770E3]' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                        class="whitespace-nowrap py-4 px-6 border-b-2 font-medium text-sm focus:outline-none transition-colors">
                    Agents ({{ (features.counts.agents|default(0)|int) }})
                </button>
            </nav>
        </div>

        <!-- Feature List Container -->
        <div id="feature-list" class="p-6">
            {% include "partials/feature_list.html" %}
        </div>
    </div>

    {% if not repositories %}
    <!-- No Data Message -->
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-12 text-center">
        <svg class="mx-auto h-16 w-16 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
        </svg>
        <h3 class="mt-4 text-lg font-medium text-gray-900">No Claude Code Configurations Found</h3>
        <p class="mt-2 text-gray-600">No .claude/ directories found in your system. Make sure you have used Claude Code before running this tool.</p>
    </div>
    {% endif %}
</div>
{% endblock %}