{% extends "base.html" %}

{% block title %}Panel użytkownika - Norda Biznes Partner{% endblock %}

{% block extra_css %}
<style>
    /* MTBTRACKER-style dashboard cards */
    .dashboard-card {
        transition: all 0.3s ease;
        border: none;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        background: white;
        border-radius: var(--radius-lg, 12px);
        overflow: hidden;
    }
    .dashboard-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    }

    /* Stat icons - colorful circles */
    .stat-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        color: white;
    }
    .stat-icon.bg-primary { background: var(--primary, #0066cc); }
    .stat-icon.bg-success { background: #10b981; }
    .stat-icon.bg-warning { background: #f59e0b; }
    .stat-icon.bg-info { background: #06b6d4; }
    .stat-icon.bg-danger { background: #ef4444; }

    /* Admin section */
    .admin-section-highlight {
        border: 2px solid var(--primary, #0066cc);
        border-radius: 12px;
        background: rgba(0, 102, 204, 0.05);
        padding: var(--spacing-xl, 24px);
        margin-bottom: var(--spacing-xl, 24px);
    }

    /* Card header colors */
    .card-header-primary {
        background: var(--primary, #0066cc);
        color: white;
        padding: var(--spacing-md, 16px);
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: var(--spacing-sm, 8px);
    }
    .card-header-success {
        background: #10b981;
        color: white;
        padding: var(--spacing-md, 16px);
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: var(--spacing-sm, 8px);
    }
    .card-header-warning {
        background: #f59e0b;
        color: white;
        padding: var(--spacing-md, 16px);
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: var(--spacing-sm, 8px);
    }
    .card-header-info {
        background: #06b6d4;
        color: white;
        padding: var(--spacing-md, 16px);
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: var(--spacing-sm, 8px);
    }

    .card-body {
        padding: var(--spacing-lg, 20px);
    }

    /* Dashboard layout */
    .dashboard-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: var(--spacing-lg, 20px);
    }

    .dashboard-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--spacing-xl, 24px);
        flex-wrap: wrap;
        gap: var(--spacing-md, 16px);
    }

    .dashboard-header h2 {
        font-size: var(--font-size-2xl, 1.75rem);
        display: flex;
        align-items: center;
        gap: var(--spacing-sm, 8px);
        margin: 0;
    }

    .dashboard-header h2 svg {
        color: var(--primary, #0066cc);
    }

    .badge-admin {
        background: #f59e0b;
        color: white;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
    }

    /* Stats grid - 4 columns */
    .stats-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--spacing-md, 16px);
        margin-bottom: var(--spacing-xl, 24px);
    }

    .stat-card-body {
        padding: var(--spacing-lg, 20px);
        text-align: center;
    }

    .stat-card-body h5 {
        margin: var(--spacing-sm, 8px) 0;
        font-size: 1rem;
        color: var(--text-secondary, #666);
    }

    .stat-card-body h3 {
        font-size: 1.75rem;
        font-weight: 700;
        margin: 0;
    }

    .stat-card-body small {
        color: var(--text-secondary, #666);
        font-size: 0.8rem;
    }

    /* Admin function cards grid */
    .admin-functions-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: var(--spacing-md, 16px);
    }

    .admin-function-card {
        background: white;
        border-radius: var(--radius-lg, 12px);
        padding: var(--spacing-lg, 20px);
        text-align: center;
        text-decoration: none;
        color: var(--text-primary, #333);
        transition: all 0.3s ease;
        border: 1px solid var(--border, #e5e7eb);
    }

    .admin-function-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        border-color: var(--primary, #0066cc);
    }

    .admin-function-card svg {
        width: 48px;
        height: 48px;
        margin-bottom: var(--spacing-sm, 8px);
    }

    .admin-function-card h6 {
        margin: var(--spacing-sm, 8px) 0;
        font-size: 0.9rem;
    }

    .admin-function-card .btn-sm {
        font-size: 0.8rem;
        padding: 6px 12px;
    }

    /* Quick actions row */
    .quick-actions-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: var(--spacing-md, 16px);
        margin-bottom: var(--spacing-xl, 24px);
    }

    /* Profile card */
    .profile-card-content {
        text-align: center;
    }

    .profile-avatar {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: var(--bg-secondary, #f3f4f6);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto var(--spacing-md, 16px);
        color: var(--text-secondary, #666);
    }

    /* Conversation list */
    .conversation-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--spacing-md, 16px);
        border-bottom: 1px solid var(--border, #e5e7eb);
        text-decoration: none;
        color: inherit;
        transition: background 0.2s;
    }

    .conversation-item:hover {
        background: var(--bg-secondary, #f9fafb);
    }

    .conversation-item:last-child {
        border-bottom: none;
    }

    .conversation-title {
        font-weight: 600;
        color: var(--text-primary, #333);
        margin-bottom: 4px;
    }

    .conversation-meta {
        font-size: 0.85rem;
        color: var(--text-secondary, #666);
    }

    .badge-messages {
        background: var(--primary, #0066cc);
        color: white;
        padding: 4px 10px;
        border-radius: 12px;
        font-size: 0.75rem;
    }

    /* Empty state */
    .empty-state {
        text-align: center;
        padding: var(--spacing-xl, 24px);
        color: var(--text-secondary, #666);
    }

    .empty-state svg {
        opacity: 0.3;
        margin-bottom: var(--spacing-md, 16px);
    }

    /* Responsive */
    @media (max-width: 768px) {
        .stats-row {
            grid-template-columns: repeat(2, 1fr);
        }
        .admin-functions-grid {
            grid-template-columns: repeat(2, 1fr);
        }
        .quick-actions-row {
            grid-template-columns: 1fr;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="dashboard-container">
    <!-- Header -->
    <div class="dashboard-header">
        <div>
            <h2>
                <svg width="28" height="28" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
                </svg>
                Panel użytkownika
            </h2>
            <p style="color: var(--text-secondary); margin: 8px 0 0 0;">
                Witaj, <strong>{{ current_user.name }}</strong>!
                {% if current_user.is_admin %}
                <span class="badge-admin">Administrator</span>
                {% endif %}
            </p>
        </div>
        <div>
            <a href="{{ url_for('logout') }}" class="btn btn-outline">
                <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" style="margin-right: 4px;">
                    <path d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
                </svg>
                Wyloguj
            </a>
        </div>
    </div>

    <!-- Stats Row -->
    <div class="stats-row">
        <div class="dashboard-card">
            <div class="stat-card-body">
                <div class="stat-icon bg-primary" style="margin: 0 auto var(--spacing-sm, 8px);">
                    <svg width="28" height="28" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                    </svg>
                </div>
                <h5>Twoja firma</h5>
                {% if current_user.company_id %}
                <h3 style="color: var(--primary); font-size: 1rem;">{{ current_user.company.name if current_user.company else 'Przypisana' }}</h3>
                {% else %}
                <h3 style="color: var(--text-secondary); font-size: 1rem;">Brak</h3>
                {% endif %}
                <small>Profil firmowy</small>
            </div>
        </div>

        <div class="dashboard-card">
            <div class="stat-card-body">
                <div class="stat-icon bg-success" style="margin: 0 auto var(--spacing-sm, 8px);">
                    <svg width="28" height="28" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"/>
                    </svg>
                </div>
                <h5>Wiadomości</h5>
                <h3 style="color: #10b981;">{{ total_messages }}</h3>
                <small>Rozmowy z AI</small>
            </div>
        </div>

        <div class="dashboard-card">
            <div class="stat-card-body">
                <div class="stat-icon bg-warning" style="margin: 0 auto var(--spacing-sm, 8px);">
                    <svg width="28" height="28" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/>
                    </svg>
                </div>
                <h5>Rekomendacje</h5>
                <h3 style="color: #f59e0b;">0</h3>
                <small>Polecenia firm</small>
            </div>
        </div>

        <div class="dashboard-card">
            <div class="stat-card-body">
                <div class="stat-icon bg-info" style="margin: 0 auto var(--spacing-sm, 8px);">
                    <svg width="28" height="28" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"/>
                    </svg>
                </div>
                <h5>Forum</h5>
                <h3 style="color: #06b6d4;">{{ total_conversations }}</h3>
                <small>Twoje tematy</small>
            </div>
        </div>
    </div>

    {% if current_user.is_admin %}
    <!-- Admin Section -->
    <div class="admin-section-highlight">
        <h4 style="margin: 0 0 var(--spacing-lg, 20px) 0; display: flex; align-items: center; gap: 8px;">
            <svg width="24" height="24" fill="none" stroke="#f59e0b" stroke-width="2" viewBox="0 0 24 24">
                <path d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
            </svg>
            Funkcje administratora
        </h4>

        <div class="admin-functions-grid">
            <a href="{{ url_for('admin_recommendations') }}" class="admin-function-card">
                <svg fill="none" stroke="#f59e0b" stroke-width="2" viewBox="0 0 24 24">
                    <path d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/>
                </svg>
                <h6>Rekomendacje</h6>
                <span class="btn btn-sm btn-warning">Moderuj</span>
            </a>

            <a href="{{ url_for('admin_calendar') }}" class="admin-function-card">
                <svg fill="none" stroke="#06b6d4" stroke-width="2" viewBox="0 0 24 24">
                    <path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                </svg>
                <h6>Kalendarz</h6>
                <span class="btn btn-sm btn-info">Zarządzaj</span>
            </a>

            <a href="{{ url_for('admin_social_media') }}" class="admin-function-card">
                <svg fill="none" stroke="#8b5cf6" stroke-width="2" viewBox="0 0 24 24">
                    <path d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"/>
                </svg>
                <h6>Social Media</h6>
                <span class="btn btn-sm" style="background: #8b5cf6; color: white;">Edytuj</span>
            </a>

            <a href="{{ url_for('chat_analytics') }}" class="admin-function-card">
                <svg fill="none" stroke="#10b981" stroke-width="2" viewBox="0 0 24 24">
                    <path d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
                </svg>
                <h6>Analityka</h6>
                <span class="btn btn-sm btn-success">Statystyki</span>
            </a>

            <a href="{{ url_for('debug_panel') }}" class="admin-function-card">
                <svg fill="none" stroke="#ef4444" stroke-width="2" viewBox="0 0 24 24">
                    <path d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
                </svg>
                <h6>Debug Panel</h6>
                <span class="btn btn-sm btn-danger">Logi</span>
            </a>
        </div>
    </div>
    {% endif %}

    <!-- Main content grid -->
    <div class="quick-actions-row">
        <!-- Recent Conversations -->
        <div class="dashboard-card">
            <div class="card-header-primary">
                <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"/>
                </svg>
                Ostatnie rozmowy z AI
            </div>
            <div class="card-body" style="padding: 0;">
                {% if conversations %}
                    {% for conv in conversations[:5] %}
                    <a href="{{ url_for('chat') }}?conversation_id={{ conv.id }}" class="conversation-item">
                        <div>
                            <div class="conversation-title">{{ conv.title }}</div>
                            <div class="conversation-meta">{{ conv.updated_at.strftime('%d.%m.%Y %H:%M') }}</div>
                        </div>
                        <span class="badge-messages">{{ conv.message_count }} msg</span>
                    </a>
                    {% endfor %}
                {% else %}
                <div class="empty-state">
                    <svg width="48" height="48" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
                    </svg>
                    <p>Brak rozmów</p>
                    <a href="{{ url_for('chat') }}" class="btn btn-primary btn-sm">Rozpocznij chat</a>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- Quick Actions / Profile -->
        <div class="dashboard-card">
            <div class="card-header-success">
                <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path d="M13 10V3L4 14h7v7l9-11h-7z"/>
                </svg>
                Szybkie akcje
            </div>
            <div class="card-body">
                <div style="display: flex; flex-direction: column; gap: var(--spacing-sm, 8px);">
                    <a href="{{ url_for('index') }}" class="btn btn-outline" style="justify-content: flex-start; gap: 8px;">
                        <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                            <path d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                        </svg>
                        Katalog firm
                    </a>
                    <a href="{{ url_for('chat') }}" class="btn btn-outline" style="justify-content: flex-start; gap: 8px;">
                        <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                            <path d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"/>
                        </svg>
                        NordaGPT
                    </a>
                    <a href="{{ url_for('calendar.calendar_index') }}" class="btn btn-outline" style="justify-content: flex-start; gap: 8px;">
                        <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                            <path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                        </svg>
                        Kalendarz
                    </a>
                    <a href="{{ url_for('forum_index') }}" class="btn btn-outline" style="justify-content: flex-start; gap: 8px;">
                        <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                            <path d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"/>
                        </svg>
                        Forum
                    </a>
                    <a href="{{ url_for('messages_inbox') }}" class="btn btn-outline" style="justify-content: flex-start; gap: 8px;">
                        <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                            <path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                        </svg>
                        Wiadomości
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Profile Section -->
    <div class="dashboard-card">
        <div class="card-header-info">
            <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
            </svg>
            Twój profil
        </div>
        <div class="card-body">
            <div style="display: flex; align-items: center; gap: var(--spacing-lg, 20px); flex-wrap: wrap;">
                <div class="profile-avatar">
                    <svg width="40" height="40" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                    </svg>
                </div>
                <div style="flex: 1;">
                    <p style="margin: 0 0 4px 0;"><strong>Nazwa:</strong> {{ current_user.name }}</p>
                    <p style="margin: 0 0 4px 0;"><strong>Email:</strong> {{ current_user.email }}</p>
                    <p style="margin: 0;">
                        <strong>Rola:</strong>
                        {% if current_user.is_admin %}
                        <span class="badge-admin">Administrator</span>
                        {% else %}
                        <span style="background: var(--primary); color: white; padding: 2px 8px; border-radius: 12px; font-size: 0.75rem;">Użytkownik</span>
                        {% endif %}
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
