{% extends "base.html" %}

{% block title %}Deklaracja #{{ application.id }} - Admin - Norda Biznes Partner{% endblock %}

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

    .detail-header h1 {
        font-size: var(--font-size-2xl);
        color: var(--text-primary);
        margin: 0;
    }

    .back-link {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-xs);
        color: var(--text-secondary);
        text-decoration: none;
        margin-bottom: var(--spacing-sm);
    }

    .back-link:hover {
        color: var(--primary);
    }

    .status-badge {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-xs);
        padding: var(--spacing-sm) var(--spacing-lg);
        border-radius: var(--radius-full);
        font-size: var(--font-size-base);
        font-weight: 600;
    }

    .status-draft { background: var(--warning-light); color: var(--warning); }
    .status-submitted { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
    .status-under_review { background: rgba(168, 85, 247, 0.1); color: #a855f7; }
    .status-pending_user_approval { background: rgba(14, 165, 233, 0.1); color: #0ea5e9; }
    .status-changes_requested { background: rgba(251, 146, 60, 0.1); color: #fb923c; }
    .status-approved { background: var(--success-light); color: var(--success); }
    .status-rejected { background: var(--error-light); color: var(--error); }

    .content-grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: var(--spacing-xl);
    }

    @media (max-width: 1024px) {
        .content-grid {
            grid-template-columns: 1fr;
        }
    }

    .section {
        background: var(--surface);
        padding: var(--spacing-xl);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow);
        margin-bottom: var(--spacing-xl);
    }

    .section h2 {
        font-size: var(--font-size-lg);
        margin: 0 0 var(--spacing-lg) 0;
        color: var(--text-primary);
        border-bottom: 2px solid var(--border);
        padding-bottom: var(--spacing-sm);
    }

    .data-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }

    .data-grid.single-col {
        grid-template-columns: 1fr;
    }

    .data-item {
        padding: var(--spacing-sm);
        background: var(--background);
        border-radius: var(--radius);
    }

    .data-label {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        margin-bottom: var(--spacing-xs);
    }

    .data-value {
        font-weight: 500;
        color: var(--text-primary);
    }

    .data-value.empty {
        color: var(--text-secondary);
        font-style: italic;
    }

    .tags {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-xs);
    }

    .tag {
        display: inline-block;
        padding: var(--spacing-xs) var(--spacing-sm);
        background: var(--primary-light);
        color: var(--primary);
        border-radius: var(--radius);
        font-size: var(--font-size-sm);
    }

    .actions-section {
        /* Removed sticky - was causing overlap with workflow history */
    }

    .action-buttons {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .btn-action {
        padding: var(--spacing-md);
        border-radius: var(--radius);
        font-size: var(--font-size-base);
        font-weight: 500;
        cursor: pointer;
        transition: var(--transition);
        text-align: center;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-sm);
    }

    .btn-approve {
        background: var(--success);
        color: white;
    }

    .btn-approve:hover {
        opacity: 0.9;
    }

    .btn-reject {
        background: var(--error);
        color: white;
    }

    .btn-reject:hover {
        opacity: 0.9;
    }

    .btn-changes {
        background: var(--warning);
        color: white;
    }

    .btn-changes:hover {
        opacity: 0.9;
    }

    .btn-review {
        background: var(--primary);
        color: white;
    }

    .btn-review:hover {
        opacity: 0.9;
    }

    .form-group {
        margin-bottom: var(--spacing-md);
    }

    .form-group label {
        display: block;
        font-weight: 500;
        margin-bottom: var(--spacing-xs);
    }

    .form-control {
        width: 100%;
        padding: var(--spacing-sm);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        font-size: var(--font-size-base);
    }

    .form-control:focus {
        outline: none;
        border-color: var(--primary);
    }

    .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        align-items: center;
        justify-content: center;
    }

    .modal.active {
        display: flex;
    }

    .modal-content {
        background: var(--surface);
        padding: var(--spacing-xl);
        border-radius: var(--radius-lg);
        max-width: 500px;
        width: 90%;
    }

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

    .modal-header h3 {
        margin: 0;
    }

    .modal-close {
        background: none;
        border: none;
        font-size: var(--font-size-xl);
        cursor: pointer;
        color: var(--text-secondary);
    }

    .modal-buttons {
        display: flex;
        gap: var(--spacing-md);
        justify-content: flex-end;
        margin-top: var(--spacing-lg);
    }

    .btn-cancel {
        background: var(--surface);
        border: 1px solid var(--border);
        color: var(--text-primary);
        padding: var(--spacing-sm) var(--spacing-lg);
        border-radius: var(--radius);
        cursor: pointer;
    }

    .alert {
        padding: var(--spacing-md);
        border-radius: var(--radius);
        margin-bottom: var(--spacing-lg);
    }

    .alert-info {
        background: rgba(59, 130, 246, 0.1);
        border: 1px solid rgba(59, 130, 246, 0.3);
        color: #3b82f6;
    }

    .alert-warning {
        background: var(--warning-light);
        border: 1px solid var(--warning);
        color: var(--warning);
    }

    .action-help {
        font-size: var(--font-size-xs);
        color: var(--text-secondary);
        margin-top: var(--spacing-xs);
        padding-left: var(--spacing-sm);
        border-left: 2px solid var(--border);
    }

    .btn-secondary {
        background: var(--surface);
        border: 1px solid var(--border);
        color: var(--text-primary);
    }

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

    .registry-actions {
        margin-bottom: var(--spacing-lg);
        padding: var(--spacing-md);
        background: var(--background);
        border-radius: var(--radius);
    }

    .registry-actions h4 {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        margin: 0 0 var(--spacing-sm) 0;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .lookup-status {
        margin-top: var(--spacing-sm);
        padding: var(--spacing-sm) var(--spacing-md);
        border-radius: var(--radius);
        font-size: var(--font-size-sm);
    }

    .lookup-status.loading {
        background: rgba(59, 130, 246, 0.1);
        color: #3b82f6;
    }

    .lookup-status.success {
        background: var(--success-light);
        color: var(--success);
    }

    .lookup-status.error {
        background: var(--error-light);
        color: var(--error);
    }

    .registry-info-box {
        margin: var(--spacing-md) 0;
        padding: var(--spacing-md);
        background: rgba(59, 130, 246, 0.05);
        border: 1px solid rgba(59, 130, 246, 0.2);
        border-radius: var(--radius);
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
    }

    .registry-info-box strong {
        color: var(--text-primary);
    }

    .registry-info-box ul {
        margin: var(--spacing-sm) 0;
        padding-left: var(--spacing-lg);
    }

    .registry-info-box li {
        margin-bottom: var(--spacing-xs);
    }

    .registry-info-box small {
        display: block;
        margin-top: var(--spacing-sm);
        font-style: italic;
        color: var(--text-secondary);
    }

    .registry-result {
        margin-top: var(--spacing-md);
        padding: var(--spacing-md);
        background: var(--surface);
        border-radius: var(--radius);
        border: 1px solid var(--success);
        display: none;
    }

    .registry-result.active {
        display: block;
    }

    .registry-result.error {
        border-color: var(--error);
    }

    .registry-result h5 {
        margin: 0 0 var(--spacing-sm) 0;
        color: var(--success);
        font-size: var(--font-size-sm);
    }

    .registry-result.error h5 {
        color: var(--error);
    }

    .registry-diff {
        font-size: var(--font-size-sm);
    }

    .registry-diff-row {
        display: flex;
        justify-content: space-between;
        padding: var(--spacing-xs) 0;
        border-bottom: 1px solid var(--border);
    }

    .registry-diff-row:last-child {
        border-bottom: none;
    }

    .registry-diff-label {
        color: var(--text-secondary);
    }

    .registry-diff-old {
        color: var(--error);
        text-decoration: line-through;
    }

    .registry-diff-new {
        color: var(--success);
        font-weight: 500;
    }

    .action-legend {
        margin-top: var(--spacing-lg);
        padding-top: var(--spacing-md);
        border-top: 1px solid var(--border);
    }

    .action-legend h4 {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        margin: 0 0 var(--spacing-sm) 0;
    }

    .legend-item {
        display: flex;
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-sm);
        font-size: var(--font-size-xs);
    }

    .legend-icon {
        width: 16px;
        height: 16px;
        border-radius: 3px;
        flex-shrink: 0;
    }

    .legend-icon.approve { background: var(--success); }
    .legend-icon.changes { background: var(--warning); }
    .legend-icon.reject { background: var(--error); }
    .legend-icon.review { background: var(--primary); }

    .legend-text {
        color: var(--text-secondary);
    }

    /* Workflow History Timeline */
    .workflow-timeline {
        position: relative;
        padding-left: var(--spacing-xl);
    }

    .workflow-timeline::before {
        content: '';
        position: absolute;
        left: 8px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: var(--border);
    }

    .workflow-event {
        position: relative;
        padding-bottom: var(--spacing-md);
    }

    .workflow-event::before {
        content: '';
        position: absolute;
        left: calc(-1 * var(--spacing-xl) + 4px);
        top: 4px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--success);
    }

    .workflow-event.pending::before {
        background: #0ea5e9;
        box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2);
    }

    .workflow-event.sub-event {
        margin-left: var(--spacing-lg);
        padding-left: var(--spacing-md);
        border-left: 2px dashed rgba(14, 165, 233, 0.3);
    }

    .workflow-event.sub-event::before {
        left: calc(-1 * var(--spacing-xl) - var(--spacing-lg) + 4px);
        background: #0ea5e9;
    }

    .workflow-arrow {
        color: #0ea5e9;
        font-weight: bold;
        margin-right: var(--spacing-xs);
    }

    .workflow-event-title {
        font-weight: 500;
        color: var(--text-primary);
        margin-bottom: var(--spacing-xs);
    }

    .workflow-event-meta {
        font-size: var(--font-size-xs);
        color: var(--text-secondary);
    }

    .workflow-event-comment {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        font-style: italic;
        margin-top: var(--spacing-xs);
        padding: var(--spacing-xs) var(--spacing-sm);
        background: var(--background);
        border-radius: var(--radius);
    }
</style>
{% endblock %}

{% block content %}
<a href="{{ url_for('admin.admin_membership') }}" class="back-link">
    ← Powrót do listy deklaracji
</a>

<div class="detail-header">
    <div>
        <h1>Deklaracja #{{ application.id }}</h1>
        <p class="text-muted">{{ application.company_name }}</p>
    </div>
    <span class="status-badge status-{{ application.status }}">
        {{ application.status_label }}
    </span>
</div>

<div class="content-grid">
    <div class="main-content">
        <!-- Dane firmy -->
        <div class="section">
            <h2>Dane firmy</h2>

            <!-- Pobieranie z rejestru -->
            {% if application.nip and application.status in ['submitted', 'under_review'] %}
            <div class="registry-actions">
                <h4>Weryfikacja w rejestrze</h4>
                <button class="btn-action btn-secondary" onclick="lookupRegistry()" id="btnLookupRegistry">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <circle cx="11" cy="11" r="8"/>
                        <path d="M21 21l-4.35-4.35"/>
                    </svg>
                    Pobierz aktualne dane z KRS/CEIDG
                </button>

                <div id="lookupStatus" class="lookup-status" style="display: none;"></div>

                <div class="registry-info-box">
                    <strong>Jak to działa?</strong>
                    <ul>
                        <li><strong>Dla spółek:</strong> NIP → Biała Lista VAT (Min. Finansów) → numer KRS → KRS Open API (Min. Sprawiedliwości) → dane firmy</li>
                        <li><strong>Dla JDG:</strong> NIP → CEIDG (dane.biznes.gov.pl) → dane firmy</li>
                    </ul>
                    <small>KRS Open API nie obsługuje wyszukiwania po NIP, dlatego najpierw pobieramy KRS z Białej Listy VAT.</small>
                </div>

                <div class="registry-result" id="registryResult">
                    <h5 id="registryResultTitle">Dane z rejestru</h5>
                    <div class="registry-diff" id="registryDiff"></div>
                    <div style="margin-top: var(--spacing-md);">
                        <button class="btn-action btn-secondary" onclick="openProposeModal()" id="btnApplyRegistry" style="display: none;">
                            Zaproponuj zmiany użytkownikowi
                        </button>
                        <p style="font-size: var(--font-size-xs); color: var(--text-secondary); margin-top: var(--spacing-xs);">
                            Użytkownik otrzyma powiadomienie i będzie mógł zaakceptować lub odrzucić proponowane zmiany.
                        </p>
                    </div>
                </div>
            </div>
            {% endif %}

            <div class="data-grid">
                <div class="data-item">
                    <div class="data-label">Nazwa</div>
                    <div class="data-value">{{ application.company_name or '-' }}</div>
                </div>
                <div class="data-item">
                    <div class="data-label">NIP</div>
                    <div class="data-value">{{ application.nip or '-' }}</div>
                </div>
                <div class="data-item">
                    <div class="data-label">KRS</div>
                    <div class="data-value">{{ application.krs_number or '-' }}</div>
                </div>
                <div class="data-item">
                    <div class="data-label">REGON</div>
                    <div class="data-value">{{ application.regon or '-' }}</div>
                </div>
                <div class="data-item">
                    <div class="data-label">Źródło danych</div>
                    <div class="data-value">{{ application.registry_source or 'Ręcznie' }}</div>
                </div>
                <div class="data-item">
                    <div class="data-label">Forma prawna</div>
                    <div class="data-value">{{ application.business_type_label }}</div>
                </div>
            </div>
        </div>

        <!-- Adres -->
        <div class="section">
            <h2>Adres</h2>
            <div class="data-grid">
                <div class="data-item">
                    <div class="data-label">Kod pocztowy</div>
                    <div class="data-value">{{ application.address_postal_code or '-' }}</div>
                </div>
                <div class="data-item">
                    <div class="data-label">Miejscowość</div>
                    <div class="data-value">{{ application.address_city or '-' }}</div>
                </div>
                <div class="data-item">
                    <div class="data-label">Ulica</div>
                    <div class="data-value">{{ application.address_street or '-' }}</div>
                </div>
                <div class="data-item">
                    <div class="data-label">Nr budynku</div>
                    <div class="data-value">{{ application.address_number or '-' }}</div>
                </div>
            </div>
        </div>

        <!-- Kontakt -->
        <div class="section">
            <h2>Dane kontaktowe</h2>
            <div class="data-grid">
                <div class="data-item">
                    <div class="data-label">Email</div>
                    <div class="data-value">{{ application.email or '-' }}</div>
                </div>
                <div class="data-item">
                    <div class="data-label">Telefon</div>
                    <div class="data-value">{{ application.phone or '-' }}</div>
                </div>
                <div class="data-item">
                    <div class="data-label">Strona WWW</div>
                    <div class="data-value">
                        {% if application.website %}
                        <a href="{{ application.website }}" target="_blank">{{ application.website }}</a>
                        {% else %}-{% endif %}
                    </div>
                </div>
                <div class="data-item">
                    <div class="data-label">Nazwa skrócona</div>
                    <div class="data-value">{{ application.short_name or '-' }}</div>
                </div>
            </div>
        </div>

        <!-- Delegaci -->
        <div class="section">
            <h2>Delegaci do Walnego Zgromadzenia</h2>
            <div class="data-grid single-col">
                <div class="data-item">
                    <div class="data-label">Delegat 1 (główny)</div>
                    <div class="data-value">{{ application.delegate_1 or '-' }}</div>
                </div>
                {% if application.delegate_2 %}
                <div class="data-item">
                    <div class="data-label">Delegat 2</div>
                    <div class="data-value">{{ application.delegate_2 }}</div>
                </div>
                {% endif %}
                {% if application.delegate_3 %}
                <div class="data-item">
                    <div class="data-label">Delegat 3</div>
                    <div class="data-value">{{ application.delegate_3 }}</div>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- Sekcje -->
        <div class="section">
            <h2>Sekcje tematyczne</h2>
            <div class="tags">
                {% for label in application.sections_labels %}
                <span class="tag">{{ label }}</span>
                {% else %}
                <span class="text-muted">Brak wybranych sekcji</span>
                {% endfor %}
            </div>
            {% if application.sections_other %}
            <div style="margin-top: var(--spacing-md);">
                <div class="data-label">Inna sekcja</div>
                <div class="data-value">{{ application.sections_other }}</div>
            </div>
            {% endif %}
        </div>

        <!-- Opis -->
        {% if application.description %}
        <div class="section">
            <h2>Opis działalności</h2>
            <p>{{ application.description }}</p>
        </div>
        {% endif %}

        <!-- Zgody RODO -->
        <div class="section">
            <h2>Zgody i oświadczenie</h2>
            <div class="data-grid">
                <div class="data-item">
                    <div class="data-label">Zgoda email</div>
                    <div class="data-value">
                        {% if application.consent_email %}✅ Tak{% else %}❌ Nie{% endif %}
                        {% if application.consent_email_address %}
                        <br><small>{{ application.consent_email_address }}</small>
                        {% endif %}
                    </div>
                </div>
                <div class="data-item">
                    <div class="data-label">Zgoda SMS</div>
                    <div class="data-value">
                        {% if application.consent_sms %}✅ Tak{% else %}❌ Nie{% endif %}
                        {% if application.consent_sms_phone %}
                        <br><small>{{ application.consent_sms_phone }}</small>
                        {% endif %}
                    </div>
                </div>
                <div class="data-item">
                    <div class="data-label">Oświadczenie</div>
                    <div class="data-value">
                        {% if application.declaration_accepted %}
                        ✅ Zaakceptowane
                        <br><small>{{ application.declaration_accepted_at.strftime('%Y-%m-%d %H:%M') if application.declaration_accepted_at else '' }}</small>
                        <br><small>IP: {{ application.declaration_ip_address or '-' }}</small>
                        {% else %}
                        ❌ Nie zaakceptowane
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="sidebar">
        <!-- Akcje -->
        <div class="section actions-section">
            <h2>Akcje</h2>

            {% if application.status == 'submitted' %}
            <div class="alert alert-info">
                Deklaracja oczekuje na rozpatrzenie.
            </div>
            <div class="action-buttons">
                <button class="btn-action btn-review" onclick="startReview()">
                    Rozpocznij rozpatrywanie
                </button>
            </div>
            <p class="action-help">
                Zmieni status na "W trakcie rozpatrywania" i odblokuje opcje zatwierdzenia, odrzucenia lub prośby o poprawki.
            </p>

            {% elif application.status == 'under_review' %}
            {# Check if user accepted changes from workflow history #}
            {% set user_accepted = namespace(found=false, name='', timestamp='') %}
            {% if application.workflow_history %}
                {% for event in application.workflow_history|reverse %}
                    {% if event.event == 'user_accepted_changes' and not user_accepted.found %}
                        {% set user_accepted.found = true %}
                        {% set user_accepted.name = event.user_name %}
                        {% set user_accepted.timestamp = event.timestamp[:16].replace('T', ' ') %}
                    {% endif %}
                {% endfor %}
            {% endif %}

            {% if user_accepted.found %}
            <div style="background: rgba(34, 197, 94, 0.15); border: 2px solid #22c55e; border-radius: var(--radius); padding: var(--spacing-md); margin-bottom: var(--spacing-lg); color: #15803d;">
                <div style="font-size: var(--font-size-lg); font-weight: 600; margin-bottom: var(--spacing-sm);">
                    ✓ Zmiany zaakceptowane przez użytkownika
                </div>
                <div style="font-size: var(--font-size-sm);">
                    <strong>{{ user_accepted.name }}</strong> zaakceptował(a) proponowane zmiany danych z rejestru KRS/CEIDG.
                </div>
                <div style="font-size: var(--font-size-xs); color: #166534; margin-top: var(--spacing-xs);">
                    {{ user_accepted.timestamp }}
                </div>
                <div style="margin-top: var(--spacing-md); padding-top: var(--spacing-sm); border-top: 1px solid rgba(34, 197, 94, 0.3); font-weight: 500;">
                    → Możesz teraz zatwierdzić deklarację członkowską
                </div>
            </div>
            {% endif %}

            <div class="action-buttons">
                <button class="btn-action btn-approve" onclick="openApproveModal()">
                    ✓ Zatwierdź
                </button>
                <button class="btn-action btn-changes" onclick="openChangesModal()">
                    Poproś o poprawki
                </button>
                <button class="btn-action btn-reject" onclick="openRejectModal()">
                    ✗ Odrzuć
                </button>
            </div>

            <div class="form-group" style="margin-top: var(--spacing-lg);">
                <label>Kategoria firmy</label>
                <select class="form-control" id="categorySelect">
                    <option value="">Wybierz kategorię...</option>
                    {% for cat in categories %}
                    <option value="{{ cat.id }}">{{ cat.name }}</option>
                    {% endfor %}
                </select>
            </div>

            <div class="action-legend">
                <h4>Co robią przyciski?</h4>
                <div class="legend-item">
                    <div class="legend-icon approve"></div>
                    <div class="legend-text"><strong>Zatwierdź</strong> — Utworzy nową firmę w katalogu, przypisze użytkownika jako właściciela i nada numer członkowski.</div>
                </div>
                <div class="legend-item">
                    <div class="legend-icon changes"></div>
                    <div class="legend-text"><strong>Poproś o poprawki</strong> — Wyśle deklarację z powrotem do użytkownika z prośbą o korektę. Użytkownik zobaczy Twój komentarz.</div>
                </div>
                <div class="legend-item">
                    <div class="legend-icon reject"></div>
                    <div class="legend-text"><strong>Odrzuć</strong> — Trwale odrzuci deklarację. Użytkownik zobaczy podany powód i będzie mógł złożyć nową.</div>
                </div>
            </div>

            {% elif application.status == 'approved' %}
            <div class="alert alert-info">
                ✓ Deklaracja zatwierdzona
                {% if application.member_number %}
                <br><strong>Nr członkowski: {{ application.member_number }}</strong>
                {% endif %}
                {% if application.company_id %}
                <br><a href="{{ url_for('public.company_detail_by_slug', slug=application.company.slug) }}">Zobacz firmę →</a>
                {% endif %}
            </div>

            {% elif application.status == 'rejected' %}
            <div class="alert alert-warning">
                ✗ Deklaracja odrzucona
                {% if application.review_comment %}
                <br><small>{{ application.review_comment }}</small>
                {% endif %}
            </div>

            {% elif application.status == 'pending_user_approval' %}
            <div class="alert" style="background: rgba(14, 165, 233, 0.1); border: 1px solid rgba(14, 165, 233, 0.3); color: #0ea5e9;">
                <strong>Oczekuje na akceptację użytkownika</strong>
                <br>Zaproponowano zmiany danych z rejestru. Użytkownik musi je zaakceptować lub odrzucić.
                {% if application.proposed_changes_at %}
                <br><small>Zaproponowano: {{ application.proposed_changes_at.strftime('%Y-%m-%d %H:%M') }}</small>
                {% endif %}
                {% if application.proposed_changes_comment %}
                <br><small>Komentarz: {{ application.proposed_changes_comment }}</small>
                {% endif %}
            </div>

            {% elif application.status == 'changes_requested' %}
            <div class="alert alert-warning">
                Oczekuje na poprawki od zgłaszającego.
                {% if application.review_comment %}
                <br><small>{{ application.review_comment }}</small>
                {% endif %}
            </div>
            {% endif %}
        </div>

        <!-- Historia workflow -->
        {% if application.workflow_history %}
        <div class="section">
            <h2>Historia workflow</h2>
            <div class="workflow-timeline">
                {% for event in application.workflow_history %}
                    {% if event.event == 'admin_proposed_changes' %}
                    <div class="workflow-event sub-event">
                        <div class="workflow-event-title">
                            <span class="workflow-arrow">↓</span>
                            Propozycja zmian
                        </div>
                        <div class="workflow-event-meta">
                            Od: <strong>{{ event.user_name }}</strong>
                            <br>{{ event.timestamp[:16].replace('T', ' ') }}
                            {% if event.details.source %}
                            <br>Źródło: {{ event.details.source }}
                            {% endif %}
                        </div>
                        {% if event.details.comment %}
                        <div class="workflow-event-comment">
                            „{{ event.details.comment }}"
                        </div>
                        {% endif %}
                        {% if event.details.changes %}
                        <div style="font-size: var(--font-size-xs); margin-top: var(--spacing-xs); color: var(--text-secondary);">
                            {% for change in event.details.changes %}
                            <div>{{ change }}</div>
                            {% endfor %}
                        </div>
                        {% endif %}
                    </div>
                    {% elif event.event == 'user_accepted_changes' %}
                    <div class="workflow-event sub-event">
                        <div class="workflow-event-title">
                            <span class="workflow-arrow">↑</span>
                            Zmiany zaakceptowane
                        </div>
                        <div class="workflow-event-meta">
                            Przez: <strong>{{ event.user_name }}</strong>
                            <br>{{ event.timestamp[:16].replace('T', ' ') }}
                        </div>
                    </div>
                    {% elif event.event == 'user_rejected_changes' %}
                    <div class="workflow-event sub-event" style="border-color: var(--warning);">
                        <div class="workflow-event-title" style="color: var(--warning);">
                            <span class="workflow-arrow" style="color: var(--warning);">↑</span>
                            Zmiany odrzucone
                        </div>
                        <div class="workflow-event-meta">
                            Przez: <strong>{{ event.user_name }}</strong>
                            <br>{{ event.timestamp[:16].replace('T', ' ') }}
                        </div>
                        {% if event.details.reason %}
                        <div class="workflow-event-comment">
                            „{{ event.details.reason }}"
                        </div>
                        {% endif %}
                    </div>
                    {% endif %}
                {% endfor %}

                {# Current pending status #}
                {% if application.status == 'pending_user_approval' %}
                <div class="workflow-event sub-event pending">
                    <div class="workflow-event-title">
                        <span class="workflow-arrow">⏳</span>
                        Oczekuje na akceptację użytkownika
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
        {% endif %}

        <!-- Info o zgłaszającym -->
        <div class="section">
            <h2>Zgłaszający</h2>
            <div class="data-grid single-col">
                <div class="data-item">
                    <div class="data-label">Użytkownik</div>
                    <div class="data-value">{{ application.user.name if application.user else '-' }}</div>
                </div>
                <div class="data-item">
                    <div class="data-label">Email</div>
                    <div class="data-value">{{ application.user.email if application.user else '-' }}</div>
                </div>
                <div class="data-item">
                    <div class="data-label">Data zgłoszenia</div>
                    <div class="data-value">{{ application.created_at.strftime('%Y-%m-%d %H:%M') if application.created_at else '-' }}</div>
                </div>
                <div class="data-item">
                    <div class="data-label">Data wysłania</div>
                    <div class="data-value">{{ application.submitted_at.strftime('%Y-%m-%d %H:%M') if application.submitted_at else '-' }}</div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal: Zatwierdź -->
<div class="modal" id="approveModal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Zatwierdź deklarację</h3>
            <button class="modal-close" onclick="closeModal('approveModal')">&times;</button>
        </div>
        <p>Zostanie utworzona nowa firma w katalogu i przypisana do zgłaszającego użytkownika.</p>
        <div class="form-group">
            <label>Komentarz (opcjonalnie)</label>
            <textarea class="form-control" id="approveComment" rows="3" placeholder="Komentarz dla zgłaszającego..."></textarea>
        </div>
        <div class="modal-buttons">
            <button class="btn-cancel" onclick="closeModal('approveModal')">Anuluj</button>
            <button class="btn-action btn-approve" onclick="approve()">Zatwierdź</button>
        </div>
    </div>
</div>

<!-- Modal: Odrzuć -->
<div class="modal" id="rejectModal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Odrzuć deklarację</h3>
            <button class="modal-close" onclick="closeModal('rejectModal')">&times;</button>
        </div>
        <div class="form-group">
            <label>Powód odrzucenia <span style="color: var(--error);">*</span></label>
            <textarea class="form-control" id="rejectComment" rows="3" placeholder="Podaj powód odrzucenia..." required></textarea>
        </div>
        <div class="modal-buttons">
            <button class="btn-cancel" onclick="closeModal('rejectModal')">Anuluj</button>
            <button class="btn-action btn-reject" onclick="reject()">Odrzuć</button>
        </div>
    </div>
</div>

<!-- Modal: Poprawki -->
<div class="modal" id="changesModal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Poproś o poprawki</h3>
            <button class="modal-close" onclick="closeModal('changesModal')">&times;</button>
        </div>
        <div class="form-group">
            <label>Co wymaga poprawienia? <span style="color: var(--error);">*</span></label>
            <textarea class="form-control" id="changesComment" rows="3" placeholder="Opisz wymagane poprawki..." required></textarea>
        </div>
        <div class="modal-buttons">
            <button class="btn-cancel" onclick="closeModal('changesModal')">Anuluj</button>
            <button class="btn-action btn-changes" onclick="requestChanges()">Wyślij</button>
        </div>
    </div>
</div>

<!-- Modal: Zaproponuj zmiany z rejestru -->
<div class="modal" id="proposeModal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Zaproponuj zmiany użytkownikowi</h3>
            <button class="modal-close" onclick="closeModal('proposeModal')">&times;</button>
        </div>
        <p style="margin-bottom: var(--spacing-md);">
            Użytkownik otrzyma powiadomienie o proponowanych zmianach i będzie mógł je zaakceptować lub odrzucić.
            Dopiero po akceptacji zmiany zostaną zastosowane.
        </p>
        <div id="proposedChangesSummary" style="background: var(--background); padding: var(--spacing-md); border-radius: var(--radius); margin-bottom: var(--spacing-md); font-size: var(--font-size-sm);"></div>
        <div class="form-group">
            <label>Komentarz dla użytkownika (opcjonalnie)</label>
            <textarea class="form-control" id="proposeComment" rows="2" placeholder="Wyjaśnij dlaczego proponujesz te zmiany..."></textarea>
        </div>
        <div class="modal-buttons">
            <button class="btn-cancel" onclick="closeModal('proposeModal')">Anuluj</button>
            <button class="btn-action btn-review" onclick="proposeChanges()">Wyślij do użytkownika</button>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
const appId = {{ application.id }};
const appNip = '{{ application.nip or "" }}';
const csrfToken = '{{ csrf_token() }}';
let registryData = null;

// Ładne powiadomienia zamiast alert()
function showNotification(message, type = 'info') {
    // type: 'success', 'error', 'warning', 'info'
    let container = document.querySelector('.flash-messages');
    if (!container) {
        container = document.createElement('div');
        container.className = 'flash-messages';
        container.setAttribute('role', 'alert');
        container.setAttribute('aria-live', 'polite');
        document.body.appendChild(container);
    }

    const flash = document.createElement('div');
    flash.className = `flash flash-${type}`;
    flash.innerHTML = `
        <span>${message}</span>
        <button class="flash-close" onclick="this.parentElement.remove()" aria-label="Close">&times;</button>
    `;
    container.appendChild(flash);

    // Auto-dismiss after 5 seconds
    setTimeout(() => {
        flash.style.animation = 'slideOut 0.3s ease-out';
        setTimeout(() => flash.remove(), 300);
    }, 5000);
}

function setLookupStatus(message, type) {
    const statusEl = document.getElementById('lookupStatus');
    if (statusEl) {
        statusEl.textContent = message;
        statusEl.className = 'lookup-status ' + type;
        statusEl.style.display = message ? 'block' : 'none';
    }
}

// Pobieranie danych z rejestru
async function lookupRegistry() {
    if (!appNip) {
        showNotification('Brak NIP w deklaracji', 'warning');
        return;
    }

    const btn = document.getElementById('btnLookupRegistry');
    const resultDiv = document.getElementById('registryResult');
    const diffDiv = document.getElementById('registryDiff');
    const titleEl = document.getElementById('registryResultTitle');
    const applyBtn = document.getElementById('btnApplyRegistry');

    btn.disabled = true;
    btn.innerHTML = '<span class="loading-spinner"></span> Pobieranie...';
    setLookupStatus('Sprawdzam NIP w Białej Liście VAT (Ministerstwo Finansów)...', 'loading');

    try {
        const response = await fetch('/api/membership/lookup-nip', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken },
            body: JSON.stringify({ nip: appNip })
        });

        const result = await response.json();
        resultDiv.classList.add('active');

        if (result.success && result.data) {
            registryData = result.data;
            resultDiv.classList.remove('error');
            titleEl.textContent = `✓ Dane z ${result.source}`;

            // Pokaż różnice
            const currentData = {
                company_name: '{{ application.company_name|e }}',
                address_postal_code: '{{ application.address_postal_code|e }}',
                address_city: '{{ application.address_city|e }}',
                address_street: '{{ application.address_street|e }}',
                address_number: '{{ application.address_number|e }}',
                regon: '{{ application.regon|e }}',
                krs_number: '{{ application.krs_number|e }}'
            };

            let diffHtml = '';
            const fields = [
                { key: 'name', label: 'Nazwa', current: currentData.company_name },
                { key: 'address_postal_code', label: 'Kod pocztowy', current: currentData.address_postal_code },
                { key: 'address_city', label: 'Miejscowość', current: currentData.address_city },
                { key: 'address_street', label: 'Ulica', current: currentData.address_street },
                { key: 'address_number', label: 'Nr budynku', current: currentData.address_number },
                { key: 'regon', label: 'REGON', current: currentData.regon },
                { key: 'krs', label: 'KRS', current: currentData.krs_number }
            ];

            let hasDifferences = false;
            fields.forEach(f => {
                const newVal = result.data[f.key] || '';
                const oldVal = f.current || '';
                if (newVal && newVal !== oldVal) {
                    hasDifferences = true;
                    diffHtml += `
                        <div class="registry-diff-row">
                            <span class="registry-diff-label">${f.label}:</span>
                            <span>
                                ${oldVal ? `<span class="registry-diff-old">${oldVal}</span> → ` : ''}
                                <span class="registry-diff-new">${newVal}</span>
                            </span>
                        </div>
                    `;
                } else if (newVal) {
                    diffHtml += `
                        <div class="registry-diff-row">
                            <span class="registry-diff-label">${f.label}:</span>
                            <span>${newVal} ✓</span>
                        </div>
                    `;
                }
            });

            diffDiv.innerHTML = diffHtml || '<p>Dane zgodne z rejestrem.</p>';
            applyBtn.style.display = hasDifferences ? 'inline-flex' : 'none';

            if (result.source === 'KRS') {
                setLookupStatus('✓ Dane pobrane z KRS Open API (Ministerstwo Sprawiedliwości)', 'success');
            } else if (result.source === 'CEIDG') {
                setLookupStatus('✓ Dane pobrane z CEIDG (jednoosobowa działalność)', 'success');
            }
        } else {
            registryData = null;
            resultDiv.classList.add('error');
            titleEl.textContent = '✗ Nie znaleziono w rejestrze';
            diffDiv.innerHTML = `<p>${result.message || 'Firma o podanym NIP nie została znaleziona w KRS ani CEIDG.'}</p>`;
            applyBtn.style.display = 'none';
            setLookupStatus('Firma nie znaleziona w KRS ani CEIDG', 'error');
        }
    } catch (e) {
        resultDiv.classList.add('active', 'error');
        titleEl.textContent = '✗ Błąd połączenia';
        diffDiv.innerHTML = '<p>Nie udało się połączyć z rejestrem. Spróbuj ponownie.</p>';
        setLookupStatus('Błąd połączenia z rejestrem', 'error');
    } finally {
        btn.disabled = false;
        btn.innerHTML = `
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="11" cy="11" r="8"/>
                <path d="M21 21l-4.35-4.35"/>
            </svg>
            Pobierz aktualne dane z KRS/CEIDG
        `;
    }
}

function openProposeModal() {
    if (!registryData) {
        showNotification('Najpierw pobierz dane z rejestru', 'warning');
        return;
    }

    // Show summary of proposed changes
    const currentData = {
        company_name: '{{ application.company_name|e }}',
        address_postal_code: '{{ application.address_postal_code|e }}',
        address_city: '{{ application.address_city|e }}',
        address_street: '{{ application.address_street|e }}',
        address_number: '{{ application.address_number|e }}',
        regon: '{{ application.regon|e }}',
        krs_number: '{{ application.krs_number|e }}'
    };

    const fields = [
        { key: 'name', label: 'Nazwa', current: currentData.company_name },
        { key: 'address_postal_code', label: 'Kod pocztowy', current: currentData.address_postal_code },
        { key: 'address_city', label: 'Miejscowość', current: currentData.address_city },
        { key: 'address_street', label: 'Ulica', current: currentData.address_street },
        { key: 'address_number', label: 'Nr budynku', current: currentData.address_number },
        { key: 'regon', label: 'REGON', current: currentData.regon },
        { key: 'krs', label: 'KRS', current: currentData.krs_number }
    ];

    let summaryHtml = '<strong>Proponowane zmiany:</strong><ul style="margin: var(--spacing-sm) 0; padding-left: var(--spacing-lg);">';
    fields.forEach(f => {
        const newVal = registryData[f.key] || '';
        const oldVal = f.current || '';
        if (newVal && newVal !== oldVal) {
            summaryHtml += `<li><strong>${f.label}:</strong> ${oldVal || '(brak)'} → ${newVal}</li>`;
        }
    });
    summaryHtml += '</ul>';

    document.getElementById('proposedChangesSummary').innerHTML = summaryHtml;
    document.getElementById('proposeModal').classList.add('active');
}

async function proposeChanges() {
    if (!registryData) {
        showNotification('Najpierw pobierz dane z rejestru', 'warning');
        return;
    }

    const comment = document.getElementById('proposeComment').value.trim();

    try {
        const response = await fetch(`/admin/membership/${appId}/propose-changes`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken },
            body: JSON.stringify({
                registry_data: registryData,
                comment: comment
            })
        });

        const result = await response.json();
        if (result.success) {
            showNotification('Propozycja zmian została wysłana do użytkownika. Oczekuje na akceptację.', 'success');
            closeModal('proposeModal');
            setTimeout(() => location.reload(), 1500);
        } else {
            showNotification(result.error || 'Wystąpił błąd', 'error');
        }
    } catch (e) {
        showNotification('Błąd połączenia z serwerem', 'error');
    }
}

function openApproveModal() {
    document.getElementById('approveModal').classList.add('active');
}

function openRejectModal() {
    document.getElementById('rejectModal').classList.add('active');
}

function openChangesModal() {
    document.getElementById('changesModal').classList.add('active');
}

function closeModal(id) {
    document.getElementById(id).classList.remove('active');
}

async function startReview() {
    try {
        const response = await fetch(`/admin/membership/${appId}/start-review`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken }
        });
        const result = await response.json();
        if (result.success) {
            showNotification('Rozpoczęto rozpatrywanie deklaracji', 'success');
            setTimeout(() => location.reload(), 1000);
        } else {
            showNotification(result.error || 'Wystąpił błąd', 'error');
        }
    } catch (e) {
        showNotification('Błąd połączenia z serwerem', 'error');
    }
}

async function approve() {
    const categoryId = document.getElementById('categorySelect')?.value;
    const comment = document.getElementById('approveComment').value;

    try {
        const response = await fetch(`/admin/membership/${appId}/approve`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken },
            body: JSON.stringify({ category_id: categoryId || null, comment: comment })
        });
        const result = await response.json();
        if (result.success) {
            showNotification(`Deklaracja zatwierdzona! Nr członkowski: ${result.member_number}`, 'success');
            closeModal('approveModal');
            setTimeout(() => location.reload(), 1500);
        } else {
            showNotification(result.error || 'Wystąpił błąd', 'error');
        }
    } catch (e) {
        showNotification('Błąd połączenia z serwerem', 'error');
    }
}

async function reject() {
    const comment = document.getElementById('rejectComment').value.trim();
    if (!comment) {
        showNotification('Podaj powód odrzucenia', 'warning');
        return;
    }

    try {
        const response = await fetch(`/admin/membership/${appId}/reject`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken },
            body: JSON.stringify({ comment: comment })
        });
        const result = await response.json();
        if (result.success) {
            showNotification('Deklaracja została odrzucona', 'info');
            closeModal('rejectModal');
            setTimeout(() => location.reload(), 1500);
        } else {
            showNotification(result.error || 'Wystąpił błąd', 'error');
        }
    } catch (e) {
        showNotification('Błąd połączenia z serwerem', 'error');
    }
}

async function requestChanges() {
    const comment = document.getElementById('changesComment').value.trim();
    if (!comment) {
        showNotification('Opisz wymagane poprawki', 'warning');
        return;
    }

    try {
        const response = await fetch(`/admin/membership/${appId}/request-changes`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken },
            body: JSON.stringify({ comment: comment })
        });
        const result = await response.json();
        if (result.success) {
            showNotification('Prośba o poprawki została wysłana', 'success');
            closeModal('changesModal');
            setTimeout(() => location.reload(), 1500);
        } else {
            showNotification(result.error || 'Wystąpił błąd', 'error');
        }
    } catch (e) {
        showNotification('Błąd połączenia z serwerem', 'error');
    }
}

// Close modals on outside click
document.querySelectorAll('.modal').forEach(modal => {
    modal.addEventListener('click', function(e) {
        if (e.target === this) {
            this.classList.remove('active');
        }
    });
});
{% endblock %}
