{% extends "base.html" %}

{% block title %}Panel Audyt GBP - Norda Biznes Partner{% endblock %}

{% block extra_css %}
<style>
    .admin-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--spacing-xl);
        flex-wrap: wrap;
        gap: var(--spacing-md);
    }

    .admin-header h1 {
        font-size: var(--font-size-3xl);
        color: var(--text-primary);
    }

    .data-source-info {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-xs);
        margin-top: var(--spacing-sm);
        padding: var(--spacing-xs) var(--spacing-sm);
        background: var(--info-light, #e0f2fe);
        border-radius: var(--radius);
        font-size: var(--font-size-sm);
        color: var(--info, #0284c7);
    }

    .data-source-info svg {
        flex-shrink: 0;
    }

    .data-source-info a {
        color: inherit;
        font-weight: 600;
        text-decoration: underline;
    }

    .header-actions {
        display: flex;
        gap: var(--spacing-sm);
        align-items: center;
    }

    /* Summary Cards */
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: var(--spacing-md);
        margin-bottom: var(--spacing-xl);
    }

    .stat-card {
        background: white;
        padding: var(--spacing-lg);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        text-align: center;
    }

    .stat-number {
        font-size: var(--font-size-2xl);
        font-weight: 700;
        display: block;
        margin-bottom: var(--spacing-xs);
    }

    .stat-number.green { color: var(--success); }
    .stat-number.yellow { color: var(--warning); }
    .stat-number.red { color: var(--error); }
    .stat-number.gray { color: var(--secondary); }
    .stat-number.blue { color: var(--primary); }

    .stat-label {
        color: var(--text-secondary);
        font-size: var(--font-size-sm);
    }

    /* Field Coverage Section */
    .section-title {
        font-size: var(--font-size-xl);
        font-weight: 600;
        margin-bottom: var(--spacing-md);
        color: var(--text-primary);
    }

    .field-coverage-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--spacing-md);
        margin-bottom: var(--spacing-xl);
    }

    .field-card {
        background: white;
        padding: var(--spacing-md);
        border-radius: var(--radius);
        box-shadow: var(--shadow-sm);
    }

    .field-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--spacing-sm);
    }

    .field-name {
        font-weight: 500;
        color: var(--text-primary);
    }

    .field-percent {
        font-weight: 700;
        font-size: var(--font-size-lg);
    }

    .progress-bar {
        height: 8px;
        background: var(--border);
        border-radius: 4px;
        overflow: hidden;
    }

    .progress-fill {
        height: 100%;
        border-radius: 4px;
        transition: width 0.3s ease;
    }

    .progress-fill.green { background: var(--success); }
    .progress-fill.yellow { background: var(--warning); }
    .progress-fill.red { background: var(--error); }

    /* Filters */
    .filters-bar {
        display: flex;
        gap: var(--spacing-md);
        margin-bottom: var(--spacing-lg);
        flex-wrap: wrap;
        align-items: center;
        background: white;
        padding: var(--spacing-md);
        border-radius: var(--radius);
        box-shadow: var(--shadow-sm);
    }

    .filter-group {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
    }

    .filter-group label {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        font-weight: 500;
    }

    .filter-group select,
    .filter-group input {
        padding: var(--spacing-sm) var(--spacing-md);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        font-size: var(--font-size-sm);
        min-width: 150px;
    }

    /* Table */
    .table-container {
        background: var(--surface);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow);
        overflow: hidden;
    }

    .gbp-table {
        width: 100%;
        border-collapse: collapse;
    }

    .gbp-table th,
    .gbp-table td {
        padding: var(--spacing-md);
        text-align: left;
        border-bottom: 1px solid var(--border);
    }

    .gbp-table th {
        background: var(--background);
        font-weight: 600;
        color: var(--text-secondary);
        font-size: var(--font-size-sm);
        text-transform: uppercase;
        cursor: pointer;
        user-select: none;
        white-space: nowrap;
    }

    .gbp-table th:hover {
        background: #e9ecef;
    }

    .gbp-table th .sort-icon {
        display: inline-block;
        margin-left: var(--spacing-xs);
        opacity: 0.3;
    }

    .gbp-table th.sorted .sort-icon {
        opacity: 1;
    }

    .gbp-table th.sorted-asc .sort-icon::after {
        content: '\2191';
    }

    .gbp-table th.sorted-desc .sort-icon::after {
        content: '\2193';
    }

    .gbp-table tbody tr:hover {
        background: var(--background);
    }

    .company-name-cell {
        font-weight: 500;
        max-width: 250px;
    }

    .company-name-cell a {
        color: var(--text-primary);
        text-decoration: none;
    }

    .company-name-cell a:hover {
        color: var(--primary);
    }

    /* Score badges */
    .score-cell {
        text-align: center;
        font-weight: 600;
    }

    .score-badge {
        display: inline-block;
        padding: 4px 12px;
        border-radius: var(--radius-sm);
        min-width: 45px;
    }

    .score-excellent {
        background: #dcfce7;
        color: #166534;
    }

    .score-good {
        background: #fef3c7;
        color: #92400e;
    }

    .score-poor {
        background: #fee2e2;
        color: #991b1b;
    }

    .score-na {
        background: var(--border);
        color: var(--text-secondary);
        font-style: italic;
        font-weight: normal;
    }

    /* Rating display */
    .rating-cell {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
    }

    .star-icon {
        color: #fbbf24;
    }

    /* Category badge */
    .category-badge {
        display: inline-block;
        padding: 2px 8px;
        border-radius: var(--radius-sm);
        font-size: 11px;
        font-weight: 500;
        background: var(--border);
        color: var(--text-secondary);
    }

    /* Date cell */
    .date-cell {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        white-space: nowrap;
    }

    .date-old {
        color: var(--warning);
    }

    .date-never {
        color: var(--error);
        font-style: italic;
    }

    /* Action buttons */
    .action-buttons {
        display: flex;
        gap: var(--spacing-xs);
    }

    .btn-icon {
        width: 32px;
        height: 32px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius);
        border: 1px solid var(--border);
        background: var(--surface);
        cursor: pointer;
        transition: var(--transition);
        text-decoration: none;
        color: var(--text-primary);
    }

    .btn-icon:hover {
        background: var(--background);
        border-color: var(--primary);
        color: var(--primary);
    }

    .btn-icon.audit {
        color: var(--success);
    }

    .btn-icon.audit:hover {
        background: #dcfce7;
        border-color: var(--success);
    }

    /* Legend */
    .legend {
        display: flex;
        gap: var(--spacing-lg);
        margin-bottom: var(--spacing-md);
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
    }

    .legend-item {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
    }

    .legend-dot {
        width: 12px;
        height: 12px;
        border-radius: 2px;
    }

    .legend-dot.excellent { background: #dcfce7; border: 1px solid #166534; }
    .legend-dot.good { background: #fef3c7; border: 1px solid #92400e; }
    .legend-dot.poor { background: #fee2e2; border: 1px solid #991b1b; }

    /* Empty state */
    .empty-state {
        text-align: center;
        padding: var(--spacing-2xl);
        color: var(--text-secondary);
    }

    /* Responsive */
    @media (max-width: 1200px) {
        .gbp-table {
            font-size: var(--font-size-sm);
        }

        .hide-mobile {
            display: none;
        }
    }

    @media (max-width: 768px) {
        .filters-bar {
            flex-direction: column;
            align-items: stretch;
        }

        .filter-group {
            flex-direction: column;
            align-items: stretch;
        }

        .stats-grid {
            grid-template-columns: 1fr 1fr;
        }

        .field-coverage-grid {
            grid-template-columns: 1fr;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="admin-header">
    <div>
        <h1>Panel Audyt GBP</h1>
        <p class="text-muted">Analiza kompletnosci profili Google Business Profile czlonkow Norda Biznes</p>
        <div class="data-source-info">
            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            <span>Dane z <a href="https://business.google.com/" target="_blank" rel="noopener">Google Business Profile</a> (via Places API)</span>
        </div>
    </div>
    <div class="header-actions">
        <a href="{{ url_for('api_gbp_audit_health') }}" class="btn btn-outline btn-sm" target="_blank">
            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
            </svg>
            API
        </a>
    </div>
</div>

<!-- Summary Stats -->
<div class="stats-grid">
    <div class="stat-card">
        <span class="stat-number green">{{ stats.excellent_count }}</span>
        <span class="stat-label">Doskonaly (90-100%)</span>
    </div>
    <div class="stat-card">
        <span class="stat-number yellow">{{ stats.good_count }}</span>
        <span class="stat-label">Dobry (70-89%)</span>
    </div>
    <div class="stat-card">
        <span class="stat-number red">{{ stats.poor_count }}</span>
        <span class="stat-label">Slaby (0-69%)</span>
    </div>
    <div class="stat-card">
        <span class="stat-number gray">{{ stats.not_audited_count }}</span>
        <span class="stat-label">Niezbadane</span>
    </div>
    <div class="stat-card">
        <span class="stat-number">{{ stats.avg_completeness|default('-', true) }}{% if stats.avg_completeness %}<small>%</small>{% endif %}</span>
        <span class="stat-label">Srednia kompletnosc</span>
    </div>
    <div class="stat-card">
        <span class="stat-number blue">{{ stats.avg_rating|default('-', true) }}{% if stats.avg_rating %}<small>/5</small>{% endif %}</span>
        <span class="stat-label">Srednia ocena Google</span>
    </div>
    <div class="stat-card">
        <span class="stat-number">{{ stats.total_reviews }}</span>
        <span class="stat-label">Lacznie recenzji</span>
    </div>
</div>

<!-- Field Coverage Section -->
<h2 class="section-title">Pokrycie pol GBP</h2>
<div class="field-coverage-grid">
    {% set fields = [
        ('name', 'Nazwa firmy', stats.field_coverage.name),
        ('address', 'Adres', stats.field_coverage.address),
        ('phone', 'Telefon', stats.field_coverage.phone),
        ('website', 'Strona WWW', stats.field_coverage.website),
        ('hours', 'Godziny otwarcia', stats.field_coverage.hours),
        ('categories', 'Kategorie', stats.field_coverage.categories),
        ('photos', 'Zdjecia', stats.field_coverage.photos),
        ('description', 'Opis', stats.field_coverage.description),
        ('services', 'Uslugi', stats.field_coverage.services),
        ('reviews', 'Recenzje', stats.field_coverage.reviews)
    ] %}
    {% for field_id, field_name, percent in fields %}
    <div class="field-card">
        <div class="field-card-header">
            <span class="field-name">{{ field_name }}</span>
            <span class="field-percent {{ 'green' if percent >= 80 else ('yellow' if percent >= 50 else 'red') }}">{{ percent }}%</span>
        </div>
        <div class="progress-bar">
            <div class="progress-fill {{ 'green' if percent >= 80 else ('yellow' if percent >= 50 else 'red') }}" style="width: {{ percent }}%"></div>
        </div>
    </div>
    {% endfor %}
</div>

<!-- Filters -->
<div class="filters-bar">
    <div class="filter-group">
        <label for="filterCategory">Kategoria:</label>
        <select id="filterCategory" onchange="applyFilters()">
            <option value="">Wszystkie</option>
            {% for category in categories %}
            <option value="{{ category }}">{{ category }}</option>
            {% endfor %}
        </select>
    </div>
    <div class="filter-group">
        <label for="filterScore">Kompletnosc:</label>
        <select id="filterScore" onchange="applyFilters()">
            <option value="">Wszystkie</option>
            <option value="excellent">Doskonaly (90-100%)</option>
            <option value="good">Dobry (70-89%)</option>
            <option value="poor">Slaby (0-69%)</option>
            <option value="none">Niezbadane</option>
        </select>
    </div>
    <div class="filter-group">
        <label for="filterSearch">Szukaj:</label>
        <input type="text" id="filterSearch" placeholder="Nazwa firmy..." oninput="applyFilters()">
    </div>
    <div class="filter-group" style="margin-left: auto;">
        <button class="btn btn-sm btn-outline" onclick="resetFilters()">Resetuj filtry</button>
    </div>
</div>

<!-- Legend -->
<div class="legend">
    <div class="legend-item">
        <div class="legend-dot excellent"></div>
        <span>90-100% (doskonaly)</span>
    </div>
    <div class="legend-item">
        <div class="legend-dot good"></div>
        <span>70-89% (dobry)</span>
    </div>
    <div class="legend-item">
        <div class="legend-dot poor"></div>
        <span>0-69% (slaby)</span>
    </div>
</div>

<!-- Table -->
{% if companies %}
<div class="table-container">
    <table class="gbp-table" id="gbpTable">
        <thead>
            <tr>
                <th data-sort="name">
                    Firma <span class="sort-icon"></span>
                </th>
                <th data-sort="category" class="hide-mobile">
                    Kategoria <span class="sort-icon"></span>
                </th>
                <th data-sort="completeness" class="sorted sorted-desc">
                    Kompletnosc <span class="sort-icon"></span>
                </th>
                <th data-sort="rating">
                    Ocena <span class="sort-icon"></span>
                </th>
                <th data-sort="reviews" class="hide-mobile">
                    Recenzje <span class="sort-icon"></span>
                </th>
                <th data-sort="photos" class="hide-mobile">
                    Zdjecia <span class="sort-icon"></span>
                </th>
                <th data-sort="date">
                    Ostatni audyt <span class="sort-icon"></span>
                </th>
                <th>Akcje</th>
            </tr>
        </thead>
        <tbody id="gbpTableBody">
            {% for company in companies %}
            <tr data-category="{{ company.category }}"
                data-name="{{ company.name|lower }}"
                data-completeness="{{ company.completeness_score if company.completeness_score is not none else -1 }}"
                data-rating="{{ company.average_rating if company.average_rating else -1 }}"
                data-reviews="{{ company.review_count }}"
                data-photos="{{ company.photo_count }}"
                data-date="{{ company.audit_date.isoformat() if company.audit_date else '1970-01-01' }}">
                <td class="company-name-cell">
                    <a href="{{ url_for('company_detail', company_id=company.id) }}">{{ company.name }}</a>
                </td>
                <td class="hide-mobile">
                    <span class="category-badge">{{ company.category or 'Inne' }}</span>
                </td>
                <td class="score-cell">
                    {% if company.completeness_score is not none %}
                    <span class="score-badge {{ 'score-excellent' if company.completeness_score >= 90 else ('score-good' if company.completeness_score >= 70 else 'score-poor') }}">
                        {{ company.completeness_score }}%
                    </span>
                    {% else %}
                    <span class="score-badge score-na">-</span>
                    {% endif %}
                </td>
                <td>
                    {% if company.average_rating %}
                    <div class="rating-cell">
                        <svg class="star-icon" width="16" height="16" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                        </svg>
                        <span>{{ company.average_rating }}</span>
                    </div>
                    {% else %}
                    <span class="text-muted">-</span>
                    {% endif %}
                </td>
                <td class="hide-mobile">
                    {{ company.review_count }}
                </td>
                <td class="hide-mobile">
                    {{ company.photo_count }}
                </td>
                <td class="date-cell">
                    {% if company.audit_date %}
                        {% set days_ago = (now - company.audit_date).days %}
                        <span class="{{ 'date-old' if days_ago > 30 else '' }}" title="{{ company.audit_date.strftime('%Y-%m-%d %H:%M') }}">
                            {{ company.audit_date.strftime('%d.%m.%Y') }}
                        </span>
                    {% else %}
                        <span class="date-never">Nigdy</span>
                    {% endif %}
                </td>
                <td>
                    <div class="action-buttons">
                        <a href="{{ url_for('company_detail', company_id=company.id) }}" class="btn-icon" title="Zobacz profil">
                            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                            </svg>
                        </a>
                        <a href="{{ url_for('gbp_audit_dashboard', slug=company.slug) }}" class="btn-icon audit" title="Uruchom audyt GBP">
                            <svg width="16" height="16" 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"/>
                            </svg>
                        </a>
                    </div>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% else %}
<div class="empty-state">
    <svg width="80" height="80" viewBox="0 0 80 80" fill="none" opacity="0.3">
        <circle cx="40" cy="40" r="30" stroke="currentColor" stroke-width="3"/>
        <path d="M30 40h20M40 30v20" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
    </svg>
    <h3>Brak firm do wyswietlenia</h3>
    <p>Nie znaleziono firm z danymi GBP.</p>
</div>
{% endif %}
{% endblock %}

{% block extra_js %}
// Sorting state
let currentSort = { column: 'completeness', direction: 'desc' };

// Sort table
function sortTable(column) {
    const tbody = document.getElementById('gbpTableBody');
    const rows = Array.from(tbody.querySelectorAll('tr'));
    const headers = document.querySelectorAll('.gbp-table th[data-sort]');

    // Toggle direction if same column
    if (currentSort.column === column) {
        currentSort.direction = currentSort.direction === 'asc' ? 'desc' : 'asc';
    } else {
        currentSort.column = column;
        currentSort.direction = 'desc';
    }

    // Update header classes
    headers.forEach(h => {
        h.classList.remove('sorted', 'sorted-asc', 'sorted-desc');
        if (h.dataset.sort === column) {
            h.classList.add('sorted', `sorted-${currentSort.direction}`);
        }
    });

    // Sort rows
    rows.sort((a, b) => {
        let aVal, bVal;

        if (column === 'name') {
            aVal = a.dataset.name || '';
            bVal = b.dataset.name || '';
        } else if (column === 'category') {
            aVal = a.dataset.category || '';
            bVal = b.dataset.category || '';
        } else if (column === 'date') {
            aVal = new Date(a.dataset.date).getTime();
            bVal = new Date(b.dataset.date).getTime();
        } else {
            aVal = parseFloat(a.dataset[column]) || -1;
            bVal = parseFloat(b.dataset[column]) || -1;
        }

        if (aVal < bVal) return currentSort.direction === 'asc' ? -1 : 1;
        if (aVal > bVal) return currentSort.direction === 'asc' ? 1 : -1;
        return 0;
    });

    // Re-append rows
    rows.forEach(row => tbody.appendChild(row));
}

// Setup sorting click handlers
document.querySelectorAll('.gbp-table th[data-sort]').forEach(th => {
    th.addEventListener('click', () => sortTable(th.dataset.sort));
});

// Filtering
function applyFilters() {
    const category = document.getElementById('filterCategory').value;
    const score = document.getElementById('filterScore').value;
    const search = document.getElementById('filterSearch').value.toLowerCase();

    const rows = document.querySelectorAll('#gbpTableBody tr');

    rows.forEach(row => {
        let show = true;

        // Category filter
        if (category && row.dataset.category !== category) {
            show = false;
        }

        // Score filter
        if (score && show) {
            const completenessScore = parseFloat(row.dataset.completeness);
            if (score === 'excellent' && (completenessScore < 90 || completenessScore < 0)) show = false;
            else if (score === 'good' && (completenessScore < 70 || completenessScore >= 90)) show = false;
            else if (score === 'poor' && (completenessScore < 0 || completenessScore >= 70)) show = false;
            else if (score === 'none' && completenessScore >= 0) show = false;
        }

        // Search filter
        if (search && show) {
            if (!row.dataset.name.includes(search)) {
                show = false;
            }
        }

        row.style.display = show ? '' : 'none';
    });
}

function resetFilters() {
    document.getElementById('filterCategory').value = '';
    document.getElementById('filterScore').value = '';
    document.getElementById('filterSearch').value = '';
    applyFilters();
}
{% endblock %}
