{% extends "base.html" %}

{% block title %}Skills{% endblock %}

{% block content %}
{% set lang = get_lang(request) %}
<div class="page-header">
    <h1>{{ t('skills.title', lang) }}</h1>
    <p class="subtitle">{{ t('skills.subtitle', lang) }}</p>
</div>

<!-- Audit Summary -->
<div class="stats-grid">
    <div class="stat-card">
        <div class="stat-label">{{ t('skills.total', lang) }}</div>
        <div class="stat-value">{{ audit.summary.total_skills }}</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">{{ t('skills.stale', lang) }}</div>
        <div class="stat-value" style="color: var(--text-dim);">{{ audit.summary.stale }}</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">{{ t('skills.auto_created', lang) }}</div>
        <div class="stat-value" style="color: var(--success);">{{ audit.summary.auto_created }}</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">{{ t('skills.auto_improvements', lang) }}</div>
        <div class="stat-value" style="color: var(--success);">{{ audit.summary.total_improvements }}</div>
    </div>
    {% if auto_improve == "off" %}
    <div class="stat-card">
        <div class="stat-label">{{ t('skills.pending_events', lang) }}</div>
        <div class="stat-value" style="color: {% if audit.summary.unresolved_events > 0 %}var(--warning){% else %}var(--text-dim){% endif %};">{{ audit.summary.unresolved_events }}</div>
    </div>
    {% endif %}
</div>

<!-- Audit Recommendations -->
{% if audit.recommendations %}
<div class="signal-panel">
    <h3>{{ t('skills.recommendations', lang) }}</h3>
    {% for rec in audit.recommendations %}
    <div class="signal-item">
        <span class="signal-dot {% if rec.priority == 'high' %}active{% else %}inactive{% endif %}"></span>
        <span class="badge badge-{% if rec.type == 'improve' %}error{% elif rec.type == 'create' %}insight{% else %}pattern{% endif %}">
            {{ rec.type }}
        </span>
        {% if rec.skill_name is defined %}
        <strong>{{ rec.skill_name }}</strong> &mdash;
        {% endif %}
        {{ rec.reason }}
    </div>
    {% endfor %}
</div>
{% endif %}

<!-- Improvable Skills -->
{% set improvable_skills = skills | selectattr('improvable') | list %}
{% set external_skills = skills | rejectattr('improvable') | list %}

{% if improvable_skills %}
<h3 style="margin: 1.5rem 0 0.75rem;">{{ t('skills.improvable_skills', lang) }}</h3>
<div class="chart-card">
    <table class="data-table">
        <thead>
            <tr>
                <th>{{ t('skills.name', lang) }}</th>
                <th>{{ t('skills.category', lang) }}</th>
                <th>{{ t('skills.effectiveness', lang) }}</th>
                <th>{{ t('skills.executions', lang) }}</th>
                <th>{{ t('skills.events', lang) }}</th>
                <th>{{ t('skills.version', lang) }}</th>
                <th>{{ t('skills.last_used', lang) }}</th>
                <th>{{ t('skills.trend', lang) }}</th>
            </tr>
        </thead>
        <tbody>
            {% for skill in improvable_skills %}
            <tr hx-get="/skills/api/detail/{{ skill.id }}" hx-target="#skill-modal" hx-swap="innerHTML" style="cursor: pointer;">
                <td>
                    <div style="font-weight: 500;">{{ skill.name }}</div>
                    {% set sdesc = skill.summary_ja if (lang == 'ja' and skill.summary_ja) else skill.summary %}
                    {% if sdesc %}
                    <div style="font-size: 0.75rem; color: var(--text-dim); margin-top: 0.125rem;">{{ sdesc[:80] }}{% if sdesc|length > 80 %}...{% endif %}</div>
                    {% endif %}
                </td>
                <td>
                    {% if skill.category != "—" %}
                    <span class="badge badge-skill">{{ skill.category }}</span>
                    {% else %}
                    <span style="color: var(--text-dim);">&mdash;</span>
                    {% endif %}
                </td>
                <td>
                    {% if skill.effectiveness > 0 %}
                    <div class="eff-bar">
                        <div class="eff-bar-fill" style="width: {{ (skill.effectiveness * 100)|round }}%; background: {% if skill.effectiveness >= 0.7 %}var(--accent){% elif skill.effectiveness >= 0.5 %}var(--warning){% else %}var(--error){% endif %};"></div>
                    </div>
                    <span style="margin-left: 0.5rem; font-size: 0.8125rem;">{{ "%.2f"|format(skill.effectiveness) }}</span>
                    {% else %}
                    <span style="color: var(--text-dim);">&mdash;</span>
                    {% endif %}
                </td>
                <td>{{ skill.total_executions }}</td>
                <td>
                    {% if skill.total_events > 0 %}
                        {{ skill.total_events }}
                    {% else %}
                        <span style="color: var(--text-dim);">&mdash;</span>
                    {% endif %}
                </td>
                <td>
                    v{{ skill.version }}
                    {% if skill.improvements > 0 %}
                    <span style="font-size: 0.6875rem; color: var(--success);">(+{{ skill.improvements }})</span>
                    {% endif %}
                </td>
                <td style="color: var(--text-dim); font-size: 0.8125rem;">
                    {% if skill.last_used_at %}
                        {{ skill.last_used_at[:10] }}
                    {% else %}
                        &mdash;
                    {% endif %}
                </td>
                <td>
                    {% if skill.trend == "up" %}
                        <span class="trend-up">&#9650;</span>
                    {% elif skill.trend == "down" %}
                        <span class="trend-down">&#9660;</span>
                    {% elif skill.trend == "new" %}
                        <span class="badge badge-milestone">new</span>
                    {% else %}
                        <span class="trend-flat">&mdash;</span>
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}

<!-- External Skills -->
{% if external_skills %}
{% set src_update = update_status.get(external_skills[0].source, {}) if external_skills else {} %}
<h3 style="margin: 1.5rem 0 0.75rem;">
    {{ t('skills.external_skills', lang) }}
    {% if src_update and not src_update.get('up_to_date', true) %}
    <span class="badge badge-error" style="font-size: 0.75rem; margin-left: 0.5rem;">{{ src_update.get('behind', 0) }} commits behind</span>
    {% elif src_update and src_update.get('up_to_date') %}
    <span class="badge badge-milestone" style="font-size: 0.75rem; margin-left: 0.5rem;">up to date</span>
    {% endif %}
</h3>
<div class="chart-card">
    <table class="data-table">
        <thead>
            <tr>
                <th>{{ t('skills.name', lang) }}</th>
                <th>{{ t('skills.source', lang) }}</th>
                <th>{{ t('skills.version', lang) }}</th>
                <th>{{ t('skills.last_used', lang) }}</th>
            </tr>
        </thead>
        <tbody>
            {% for skill in external_skills %}
            <tr hx-get="/skills/api/detail/{{ skill.id }}" hx-target="#skill-modal" hx-swap="innerHTML" style="cursor: pointer;">
                <td>
                    <div style="font-weight: 500;">{{ skill.name }}</div>
                    {% set sdesc = skill.summary_ja if (lang == 'ja' and skill.summary_ja) else skill.summary %}
                    {% if sdesc %}
                    <div style="font-size: 0.75rem; color: var(--text-dim); margin-top: 0.125rem;">{{ sdesc[:80] }}{% if sdesc|length > 80 %}...{% endif %}</div>
                    {% endif %}
                </td>
                <td>
                    {% if skill.source %}
                    <span class="badge badge-skill">{{ skill.source }}{% if skill.source_version %} v{{ skill.source_version }}{% endif %}</span>
                    {% else %}
                    <span style="color: var(--text-dim);">&mdash;</span>
                    {% endif %}
                </td>
                <td style="font-size: 0.8125rem;">
                    {% if skill.skill_version %}
                        v{{ skill.skill_version }}
                    {% else %}
                        <span style="color: var(--text-dim);">&mdash;</span>
                    {% endif %}
                </td>
                <td style="color: var(--text-dim); font-size: 0.8125rem;">
                    {% if skill.last_used_at %}
                        {{ skill.last_used_at[:10] }}
                    {% else %}
                        &mdash;
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}

<!-- Plugin Skills -->
{% if plugin_skills %}
{% set plugin_names = plugin_skills | map(attribute='plugin') | unique | list %}
<h3 style="margin: 1.5rem 0 0.75rem;">
    {{ t('skills.plugin_skills', lang) }}
    {% for pname in plugin_names %}
    {% set pstatus = update_status.get('plugin:' ~ pname, {}) %}
    {% if pstatus and not pstatus.get('up_to_date', true) %}
    <span class="badge badge-error" style="font-size: 0.75rem; margin-left: 0.5rem;">{{ pname }}: {{ pstatus.get('version', '?') }} &rarr; {{ pstatus.get('latest_version', '?') }}</span>
    {% endif %}
    {% endfor %}
</h3>
<div class="chart-card">
    <table class="data-table">
        <thead>
            <tr>
                <th>{{ t('skills.name', lang) }}</th>
                <th>{{ t('skills.plugin', lang) }}</th>
                <th>{{ t('skills.version', lang) }}</th>
            </tr>
        </thead>
        <tbody>
            {% for skill in plugin_skills %}
            <tr>
                <td>
                    <div style="font-weight: 500;">{{ skill.name }}</div>
                    {% set desc = skill.description_ja if (lang == 'ja' and skill.description_ja) else skill.description %}
                    {% if desc %}
                    <div style="font-size: 0.75rem; color: var(--text-dim); margin-top: 0.125rem;">{{ desc[:80] }}{% if desc|length > 80 %}...{% endif %}</div>
                    {% endif %}
                </td>
                <td><span class="badge badge-insight">{{ skill.plugin }}</span></td>
                <td style="font-size: 0.8125rem;">
                    {% if skill.latest_version and not skill.up_to_date %}
                    <span style="color: var(--text-dim); text-decoration: line-through;">v{{ skill.version }}</span>
                    <span style="color: var(--error);">&rarr; v{{ skill.latest_version }}</span>
                    {% else %}
                    <span style="color: var(--text-dim);">v{{ skill.version or '—' }}</span>
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}

{% if not skills and not plugin_skills %}
<div class="empty-state">
    <p>{{ t('skills.no_skills', lang) }}</p>
</div>
{% endif %}
{% endblock %}