{% extends 'admin/base.html' %}
{% block title %}{{ t('ai_visibility.title') }}{% endblock %}

{% block extra_css %}
<style>
    /* Layout only — every color comes from the admin theme tokens,
       so dark/light mode works with zero extra rules. */
    .aiv-chart { display: flex; align-items: flex-end; gap: 2px;
                 height: 90px; padding: 8px 0; }
    .aiv-chart--labeled { height: 110px; padding-top: 26px; }
    .aiv-chart__bar { flex: 1; min-width: 2px; border-radius: 2px 2px 0 0;
                      background: var(--adm-primary); position: relative; }
    .aiv-chart__bar:hover { opacity: .75; }
    .aiv-chart__bar--empty { background: var(--adm-border-light); height: 2px !important; }
    /* Instant CSS tooltip (native title is too slow/flaky on 2px bars). */
    .aiv-chart__bar::after {
        content: attr(data-tip);
        position: absolute; bottom: 100%; inset-inline-start: 50%;
        transform: translateX(-50%); margin-bottom: 6px;
        background: var(--adm-primary); color: var(--adm-on-primary);
        padding: 2px 8px; border-radius: 4px; font-size: 12px; line-height: 1.5;
        white-space: nowrap; opacity: 0; pointer-events: none; z-index: 5;
        transition: opacity .1s; }
    .aiv-chart__bar:hover::after { opacity: 1; }
    .aiv-chart__bar:first-child::after { inset-inline-start: 0; transform: none; }
    .aiv-chart__bar:last-child::after { inset-inline-start: auto; inset-inline-end: 0; transform: none; }
    /* Always-visible value label for short periods (today / 7 days). */
    .aiv-chart__val { position: absolute; bottom: 100%; inset-inline-start: 50%;
                      transform: translateX(-50%); margin-bottom: 2px;
                      font-size: 12px; font-variant-numeric: tabular-nums; }
    .aiv-row-bar { height: 6px; border-radius: 3px; background: var(--adm-primary-light);
                   overflow: hidden; margin-top: 4px; }
    .aiv-row-bar > span { display: block; height: 100%; background: var(--adm-primary); }
    .aiv-label { word-break: break-all; }
    /* Hits column: same fixed width in every table, single line, bold. */
    .aiv-col-hits { width: 8.5em; white-space: nowrap;
                    font-weight: 600; font-variant-numeric: tabular-nums; }
</style>
{% endblock %}

{% block content %}
{% if current_user.can_access_settings() %}
<form method="POST" action="{{ url_for('ai_visibility.save_settings') }}">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<div class="page-header--with-action">
    <div class="page-header__content">
        <h2>📡 {{ t('ai_visibility.title') }}</h2>
        <p>{{ t('ai_visibility.subtitle') }}</p>
    </div>
    <button type="submit" class="btn btn-primary">💾 {{ t('ai_visibility.save') }}</button>
</div>
{% else %}
<div class="page-header">
    <h2>📡 {{ t('ai_visibility.title') }}</h2>
    <p>{{ t('ai_visibility.subtitle') }}</p>
</div>
{% endif %}

<!-- Summary cards -->
<div class="dash-stats">
    <div class="dash-stat">
        <span class="dash-stat__icon">🤖</span>
        <div class="dash-stat__value">{{ cards.ai_hits }}</div>
        <div class="dash-stat__label">{{ t('ai_visibility.card_ai_hits') }}</div>
    </div>
    <div class="dash-stat">
        <span class="dash-stat__icon">📄</span>
        <div class="dash-stat__value">{{ cards.llms }}</div>
        <div class="dash-stat__label">{{ t('ai_visibility.card_llms') }}</div>
    </div>
    <div class="dash-stat">
        <span class="dash-stat__icon">🔗</span>
        <div class="dash-stat__value">{{ cards.ai_refs }}</div>
        <div class="dash-stat__label">{{ t('ai_visibility.card_ai_refs') }}</div>
    </div>
    <div class="dash-stat">
        <span class="dash-stat__icon">👤</span>
        <div class="dash-stat__value">{{ cards.humans }}</div>
        <div class="dash-stat__label">{{ t('ai_visibility.card_humans') }}</div>
    </div>
</div>

<!-- Tabs + period -->
<div class="filter-bar">
    <a href="{{ url_for('ai_visibility.index', tab='ai', days=days) }}" class="filter-link {% if tab == 'ai' %}active{% endif %}">{{ t('ai_visibility.tab_ai') }}</a>
    <a href="{{ url_for('ai_visibility.index', tab='referrals', days=days) }}" class="filter-link {% if tab == 'referrals' %}active{% endif %}">{{ t('ai_visibility.tab_referrals') }}</a>
    <a href="{{ url_for('ai_visibility.index', tab='humans', days=days) }}" class="filter-link {% if tab == 'humans' %}active{% endif %}">{{ t('ai_visibility.tab_humans') }}</a>
    <a href="{{ url_for('ai_visibility.index', tab='scanners', days=days) }}" class="filter-link {% if tab == 'scanners' %}active{% endif %}">{{ t('ai_visibility.tab_scanners') }}</a>
    <div class="flex-1"></div>
    <a href="{{ url_for('ai_visibility.index', tab=tab, days='1') }}" class="filter-link {% if days == '1' %}active{% endif %}">{{ t('ai_visibility.period_1') }}</a>
    <a href="{{ url_for('ai_visibility.index', tab=tab, days='7') }}" class="filter-link {% if days == '7' %}active{% endif %}">{{ t('ai_visibility.period_7') }}</a>
    <a href="{{ url_for('ai_visibility.index', tab=tab, days='30') }}" class="filter-link {% if days == '30' %}active{% endif %}">{{ t('ai_visibility.period_30') }}</a>
    <a href="{{ url_for('ai_visibility.index', tab=tab, days='90') }}" class="filter-link {% if days == '90' %}active{% endif %}">{{ t('ai_visibility.period_90') }}</a>
</div>

<!-- Daily mini chart for the active tab -->
<div class="settings-section">
    <h3>{{ t('ai_visibility.chart_title_' + tab) }}</h3>
    {% set show_vals = series | length <= 14 %}
    <div class="aiv-chart {% if show_vals %}aiv-chart--labeled{% endif %}">
        {% for p in series %}
        <div class="aiv-chart__bar {% if p.count == 0 %}aiv-chart__bar--empty{% endif %}"
             style="height: {{ [p.pct, 3] | max }}%"
             data-tip="{{ p.day | format_date }} — {{ p.count }}">
            {%- if show_vals %}<span class="aiv-chart__val {% if p.count == 0 %}text-muted{% endif %}">{{ p.count }}</span>{% endif -%}
        </div>
        {% endfor %}
    </div>
    <p class="text-sm text-muted">
        {% if series | length > 1 %}{{ series[0].day | format_date }} → {{ series[-1].day | format_date }}{% else %}{{ series[0].day | format_date }}{% endif %}
        · {{ t('ai_visibility.chart_total') }}: {{ series_total }}
    </p>
</div>

{% macro rows_table(rows, label_header) %}
{% if rows %}
<table class="log-table">
    <thead>
        <tr>
            <th>{{ label_header }}</th>
            <th class="aiv-col-hits">{{ t('ai_visibility.col_hits') }}</th>
        </tr>
    </thead>
    <tbody>
        {% for r in rows %}
        <tr>
            <td>
                <span class="aiv-label">{{ r.label }}</span>
                <div class="aiv-row-bar"><span style="width: {{ r.pct }}%"></span></div>
            </td>
            <td class="aiv-col-hits">{{ r.count }} <span class="text-muted">({{ r.pct }}%)</span></td>
        </tr>
        {% endfor %}
    </tbody>
</table>
{% else %}
<p class="text-muted">{{ t('ai_visibility.empty') }}</p>
{% endif %}
{% endmacro %}

{% if tab == 'ai' %}
<div class="settings-section">
    <h3>🤖 {{ t('ai_visibility.ai_bots_title') }}</h3>
    <p class="text-sm text-muted">{{ t('ai_visibility.ai_bots_hint') }}</p>
    {{ rows_table(data.bots, t('ai_visibility.col_bot')) }}
</div>
<div class="settings-section">
    <h3>📄 {{ t('ai_visibility.ai_paths_title') }}</h3>
    {{ rows_table(data.paths, t('ai_visibility.col_page')) }}
</div>
<div class="settings-section">
    <h3>🔍 {{ t('ai_visibility.search_bots_title') }}</h3>
    <p class="text-sm text-muted">{{ t('ai_visibility.search_bots_hint') }}</p>
    {{ rows_table(data.search, t('ai_visibility.col_bot')) }}
</div>
<div class="settings-section">
    <h3>🧭 {{ t('ai_visibility.known_bots_title') }}</h3>
    <p class="text-sm text-muted">{{ t('ai_visibility.known_bots_hint') }}</p>
    {{ rows_table(data.known, t('ai_visibility.col_bot')) }}
</div>
<div class="settings-section">
    <h3>❓ {{ t('ai_visibility.other_bots_title') }}</h3>
    <p class="text-sm text-muted">{{ t('ai_visibility.other_bots_hint') }}</p>
    {{ rows_table(data.other, t('ai_visibility.col_bot')) }}
</div>

{% elif tab == 'referrals' %}
<div class="settings-section">
    <h3>🔗 {{ t('ai_visibility.ref_sources_title') }}</h3>
    <p class="text-sm text-muted">{{ t('ai_visibility.ref_hint') }}</p>
    {{ rows_table(data.sources, t('ai_visibility.col_assistant')) }}
</div>
<div class="settings-section">
    <h3>📄 {{ t('ai_visibility.ref_paths_title') }}</h3>
    {{ rows_table(data.paths, t('ai_visibility.col_page')) }}
</div>

{% elif tab == 'humans' %}
<div class="settings-section">
    <h3>👤 {{ t('ai_visibility.humans_title') }}</h3>
    <p class="text-sm text-muted">{{ t('ai_visibility.humans_hint') }}</p>
    {{ rows_table(data.paths, t('ai_visibility.col_page')) }}
</div>

{% else %}
<div class="settings-section">
    <h3>🛡️ {{ t('ai_visibility.scanners_title') }}</h3>
    <p class="text-sm text-muted">{{ t('ai_visibility.scanners_hint') }}</p>
    {{ rows_table(data.sources, t('ai_visibility.col_source')) }}
</div>
{% endif %}

<!-- Settings -->
{% if current_user.can_access_settings() %}
<div class="settings-section">
    <h3>⚙️ {{ t('ai_visibility.settings_title') }}</h3>
    <div class="form-group">
            <label class="checkbox-label">
                <input type="checkbox" name="enabled" value="true" {% if settings.enabled %}checked{% endif %}>
                {{ t('ai_visibility.setting_enabled') }}
            </label>
            <div class="help-text">{{ t('ai_visibility.setting_enabled_help') }}</div>
        </div>
        <div class="form-group">
            <label class="checkbox-label">
                <input type="checkbox" name="beacon" value="true" {% if settings.beacon %}checked{% endif %}>
                {{ t('ai_visibility.setting_beacon') }}
            </label>
            <div class="help-text">{{ t('ai_visibility.setting_beacon_help') }}</div>
        </div>
        <div class="form-group">
            <label for="retention_days">{{ t('ai_visibility.setting_retention') }}</label>
            <select id="retention_days" name="retention_days">
                <option value="90" {% if settings.retention == '90' %}selected{% endif %}>{{ t('ai_visibility.retention_90') }}</option>
                <option value="180" {% if settings.retention == '180' %}selected{% endif %}>{{ t('ai_visibility.retention_180') }}</option>
                <option value="365" {% if settings.retention == '365' %}selected{% endif %}>{{ t('ai_visibility.retention_365') }}</option>
                <option value="730" {% if settings.retention == '730' %}selected{% endif %}>{{ t('ai_visibility.retention_730') }}</option>
            </select>
            <div class="help-text">{{ t('ai_visibility.setting_retention_help') }}</div>
        </div>
        <div class="form-group">
            <label for="custom_bots">{{ t('ai_visibility.setting_custom') }}</label>
            <textarea id="custom_bots" name="custom_bots" rows="4" placeholder="newaibot = NewAI Bot">{{ settings.custom_bots }}</textarea>
            <div class="help-text">{{ t('ai_visibility.setting_custom_help') }}</div>
        </div>
</div>
</form>
{% endif %}
{% endblock %}