{% extends 'layouts/demo-base.html' %}

{% block pageTitle %}{{ conceptInfo.name }} Demo Dashboard - BuyerKiosk{% endblock %}

{% block content %}
<div class="demo-admin">
    <!-- Demo Header Bar -->
    <nav class="navbar navbar-dark bg-{{ conceptInfo.color }} sticky-top">
        <div class="container-fluid">
            <a class="navbar-brand" href="/demo/{{ concept }}/admin/">
                <img src="/images/buyerkiosk-logo.svg" alt="BuyerKiosk" height="30" class="d-inline-block align-text-top me-2" style="filter: brightness(0) invert(1);">
                <span class="fw-semibold">{{ conceptInfo.name }} Demo</span>
            </a>

            <div class="d-flex align-items-center gap-3">
                <!-- Session Timer -->
                <span class="badge bg-light text-dark">
                    <i class="fa-solid fa-clock me-1"></i>
                    <span id="session-timer">{{ remainingTime }}</span>
                </span>

                <!-- Switch Concept -->
                <a href="/demo/select-concept" class="btn btn-outline-light btn-sm">
                    <i class="fa-solid fa-arrows-rotate me-1"></i>
                    Switch Store
                </a>

                <!-- End Demo -->
                <a href="/demo/logout" class="btn btn-outline-light btn-sm">
                    <i class="fa-solid fa-arrow-right-from-bracket me-1"></i>
                    End Demo
                </a>
            </div>
        </div>
    </nav>

    <!-- Demo Banner -->
    <div class="alert alert-info alert-dismissible fade show m-0 rounded-0 border-0" role="alert">
        <div class="container-fluid">
            <i class="fa-solid fa-circle-info me-2"></i>
            <strong>Demo Mode:</strong> You're exploring {{ conceptInfo.name }}. All data is simulated and resets automatically.
            <a href="#" class="alert-link ms-2" data-bs-toggle="modal" data-bs-target="#demoHelpModal">Learn more</a>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    </div>

    <!-- Sidebar + Content -->
    <div class="d-flex">
        <!-- Sidebar -->
        <nav class="demo-sidebar bg-dark text-white">
            <div class="p-3">
                <h6 class="text-uppercase text-muted small mb-3">Navigation</h6>
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link text-white active" href="/demo/{{ concept }}/admin/">
                            <i class="fa-solid fa-gauge-high me-2"></i>
                            Dashboard
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-white-50" href="/demo/{{ concept }}/admin/queue">
                            <i class="fa-solid fa-cash-register me-2"></i>
                            Buy Queue
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-white-50" href="/demo/{{ concept }}/admin/workbook">
                            <i class="fa-solid fa-book-open me-2"></i>
                            Workbook
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-white-50 disabled" href="#">
                            <i class="fa-solid fa-calendar-days me-2"></i>
                            Events
                            <span class="badge bg-secondary ms-1">Soon</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-white-50 disabled" href="#">
                            <i class="fa-solid fa-chart-line me-2"></i>
                            Reports
                            <span class="badge bg-secondary ms-1">Soon</span>
                        </a>
                    </li>
                </ul>
            </div>
        </nav>

        <!-- Main Content -->
        <main class="demo-content flex-grow-1 p-4">
            <div class="container-fluid">
                <!-- Welcome Header -->
                <div class="row mb-4">
                    <div class="col-12">
                        <h1 class="h2 fw-bold mb-1">
                            <i class="fa-solid {{ conceptInfo.icon }} text-{{ conceptInfo.color }} me-2"></i>
                            Welcome to {{ conceptInfo.name }}
                        </h1>
                        <p class="text-muted mb-0">{{ conceptInfo.description }}</p>
                    </div>
                </div>

                <!-- Quick Stats -->
                <div class="row g-4 mb-4">
                    <div class="col-md-3">
                        <div class="card border-0 shadow-sm h-100">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0">
                                        <div class="bg-primary-subtle rounded-3 p-3">
                                            <i class="fa-solid fa-users fa-2x text-primary"></i>
                                        </div>
                                    </div>
                                    <div class="flex-grow-1 ms-3">
                                        <h3 class="mb-0">12</h3>
                                        <p class="text-muted mb-0 small">Customers Today</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card border-0 shadow-sm h-100">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0">
                                        <div class="bg-success-subtle rounded-3 p-3">
                                            <i class="fa-solid fa-dollar-sign fa-2x text-success"></i>
                                        </div>
                                    </div>
                                    <div class="flex-grow-1 ms-3">
                                        <h3 class="mb-0">$2,847</h3>
                                        <p class="text-muted mb-0 small">Purchases Today</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card border-0 shadow-sm h-100">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0">
                                        <div class="bg-warning-subtle rounded-3 p-3">
                                            <i class="fa-solid fa-clock fa-2x text-warning"></i>
                                        </div>
                                    </div>
                                    <div class="flex-grow-1 ms-3">
                                        <h3 class="mb-0">3</h3>
                                        <p class="text-muted mb-0 small">In Queue</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card border-0 shadow-sm h-100">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0">
                                        <div class="bg-info-subtle rounded-3 p-3">
                                            <i class="fa-solid fa-tags fa-2x text-info"></i>
                                        </div>
                                    </div>
                                    <div class="flex-grow-1 ms-3">
                                        <h3 class="mb-0">156</h3>
                                        <p class="text-muted mb-0 small">Items Tagged</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Feature Cards -->
                <div class="row g-4">
                    <div class="col-md-6">
                        <div class="card border-0 shadow-sm h-100">
                            <div class="card-body">
                                <h5 class="card-title">
                                    <i class="fa-solid fa-cash-register text-primary me-2"></i>
                                    Buy Queue
                                </h5>
                                <p class="card-text text-muted">
                                    Manage your buying process with our streamlined queue system. Process offers, track inventory, and serve customers efficiently.
                                </p>
                                <a href="/demo/{{ concept }}/admin/queue" class="btn btn-primary">
                                    <i class="fa-solid fa-arrow-right me-1"></i>
                                    Open Buy Queue
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card border-0 shadow-sm h-100">
                            <div class="card-body">
                                <h5 class="card-title">
                                    <i class="fa-solid fa-book-open text-success me-2"></i>
                                    Workbook
                                </h5>
                                <p class="card-text text-muted">
                                    Your daily operations hub. Access the daybook, manage inventory, view reports, and coordinate your team all in one place.
                                </p>
                                <a href="/demo/{{ concept }}/admin/workbook" class="btn btn-success">
                                    <i class="fa-solid fa-arrow-right me-1"></i>
                                    Open Workbook
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    {{ include('demo/partials/cta-banner.html', { concept: concept, conceptInfo: conceptInfo }) }}
    {{ include('demo/partials/contact-form.html') }}
</div>

<!-- Demo Help Modal -->
<div class="modal fade" id="demoHelpModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fa-solid fa-circle-info text-info me-2"></i>
                    About This Demo
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <h6>What you can explore:</h6>
                <ul>
                    <li><strong>Buy Queue</strong> - See how customers check in and get processed</li>
                    <li><strong>Workbook</strong> - Explore daily operations and inventory management</li>
                    <li><strong>Dashboard</strong> - View real-time store metrics and KPIs</li>
                </ul>

                <h6 class="mt-4">Demo limitations:</h6>
                <ul>
                    <li>All data is simulated and resets periodically</li>
                    <li>Some features require a full account</li>
                    <li>Your session expires after 24 hours</li>
                </ul>

                <div class="alert alert-success mt-4">
                    <i class="fa-solid fa-lightbulb me-2"></i>
                    <strong>Ready for the real thing?</strong> Contact our sales team to set up your store!
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <a href="mailto:support@buyerkiosk.com" class="btn btn-primary">
                    <i class="fa-solid fa-envelope me-1"></i>
                    Contact Sales
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block styles %}
<style>
.demo-admin {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.demo-sidebar {
    width: 240px;
    min-height: calc(100vh - 56px - 48px);
}

.demo-sidebar .nav-link {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    margin-bottom: 0.25rem;
}

.demo-sidebar .nav-link:hover {
    background: rgba(255, 255, 255, 0.1);
}

.demo-sidebar .nav-link.active {
    background: rgba(255, 255, 255, 0.15);
}

.demo-content {
    background: var(--neutral-50);
    min-height: calc(100vh - 56px - 48px);
}

/* Color-specific subtle backgrounds */
.bg-primary-subtle { background-color: rgba(59, 130, 246, 0.1) !important; }
.bg-success-subtle { background-color: rgba(34, 197, 94, 0.1) !important; }
.bg-warning-subtle { background-color: rgba(234, 179, 8, 0.1) !important; }
.bg-info-subtle { background-color: rgba(14, 165, 233, 0.1) !important; }

@media (max-width: 768px) {
    .demo-sidebar {
        display: none;
    }
}
</style>
{% endblock %}

{% block scripts %}
<script>
// Session timer countdown
(function() {
    let remainingSeconds = {{ remainingTime }};
    const timerEl = document.getElementById('session-timer');

    function formatTime(seconds) {
        const hours = Math.floor(seconds / 3600);
        const mins = Math.floor((seconds % 3600) / 60);
        if (hours > 0) {
            return hours + 'h ' + mins + 'm remaining';
        }
        return mins + ' min remaining';
    }

    function updateTimer() {
        if (remainingSeconds <= 0) {
            window.location.href = '/demo?message=' + encodeURIComponent('Your demo session has expired.');
            return;
        }
        timerEl.textContent = formatTime(remainingSeconds);
        remainingSeconds--;
    }

    updateTimer();
    setInterval(updateTimer, 60000); // Update every minute
})();
</script>

{{ include('demo/partials/flows-init.html', { sessionId: sessionId, tourProgress: tourProgress, concept: concept }) }}
{% endblock %}