<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Analytics Dashboard - Rosy's Photography</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
    <style>
        :root {
            --bg: #f8f9fa;
            --card-bg: #ffffff;
            --primary: #6366f1;
            --primary-light: #818cf8;
            --text: #1f2937;
            --text-light: #6b7280;
            --border: #e5e7eb;
            --success: #10b981;
            --warning: #f59e0b;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background: var(--bg);
            color: var(--text);
            line-height: 1.5;
        }

        /* Login screen */
        .login-screen {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .login-box {
            background: var(--card-bg);
            padding: 40px;
            border-radius: 16px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            width: 100%;
            max-width: 360px;
        }

        .login-box h1 {
            font-size: 1.5rem;
            margin-bottom: 8px;
            text-align: center;
        }

        .login-box p {
            color: var(--text-light);
            text-align: center;
            margin-bottom: 24px;
        }

        .login-box input {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid var(--border);
            border-radius: 8px;
            font-size: 1rem;
            margin-bottom: 16px;
        }

        .login-box input:focus {
            outline: none;
            border-color: var(--primary);
        }

        .login-box button {
            width: 100%;
            padding: 12px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.2s;
        }

        .login-box button:hover {
            background: var(--primary-light);
        }

        .login-error {
            color: #ef4444;
            text-align: center;
            margin-top: 12px;
            display: none;
        }

        /* Dashboard */
        .dashboard {
            display: none;
            min-height: 100vh;
        }

        .dashboard.active {
            display: block;
        }

        .header {
            background: var(--card-bg);
            border-bottom: 1px solid var(--border);
            padding: 16px 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header h1 {
            font-size: 1.25rem;
            font-weight: 600;
        }

        .header-actions {
            display: flex;
            gap: 12px;
            align-items: center;
        }

        .btn {
            padding: 8px 16px;
            border-radius: 8px;
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            border: none;
            transition: all 0.2s;
        }

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

        .btn-primary:hover {
            background: var(--primary-light);
        }

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

        .btn-secondary:hover {
            background: #d1d5db;
        }

        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        .main {
            padding: 24px;
            max-width: 1400px;
            margin: 0 auto;
        }

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

        .stat-card {
            background: var(--card-bg);
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }

        .stat-card .label {
            color: var(--text-light);
            font-size: 0.875rem;
            margin-bottom: 8px;
        }

        .stat-card .value {
            font-size: 2rem;
            font-weight: 600;
        }

        .stat-card .subtext {
            color: var(--text-light);
            font-size: 0.75rem;
            margin-top: 4px;
        }

        /* Data sections */
        .section {
            background: var(--card-bg);
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }

        .section h2 {
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .section h2 .icon {
            font-size: 1.25rem;
        }

        /* Tables */
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            text-align: left;
            padding: 10px 12px;
            border-bottom: 1px solid var(--border);
        }

        th {
            color: var(--text-light);
            font-weight: 500;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        td {
            font-size: 0.875rem;
        }

        tr:last-child td {
            border-bottom: none;
        }

        tr:hover td {
            background: var(--bg);
        }

        .badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 500;
        }

        .badge-mobile {
            background: #dbeafe;
            color: #1d4ed8;
        }

        .badge-desktop {
            background: #dcfce7;
            color: #166534;
        }

        .badge-tablet {
            background: #fef3c7;
            color: #b45309;
        }

        /* Grid layout */
        .two-col {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        @media (max-width: 900px) {
            .two-col {
                grid-template-columns: 1fr;
            }
        }

        /* Loading spinner */
        .loading {
            text-align: center;
            padding: 40px;
            color: var(--text-light);
        }

        .spinner {
            display: inline-block;
            width: 24px;
            height: 24px;
            border: 3px solid var(--border);
            border-top-color: var(--primary);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* Refresh status */
        .refresh-status {
            font-size: 0.75rem;
            color: var(--text-light);
        }

        .pending-badge {
            background: var(--warning);
            color: white;
            padding: 2px 8px;
            border-radius: 9999px;
            font-size: 0.75rem;
            margin-left: 8px;
        }

        /* Empty state */
        .empty {
            text-align: center;
            padding: 20px;
            color: var(--text-light);
            font-style: italic;
        }
    </style>
</head>
<body>
    <!-- Login Screen -->
    <div class="login-screen" id="loginScreen">
        <div class="login-box">
            <h1>Analytics Dashboard</h1>
            <p>Enter password to view stats</p>
            <input type="password" id="passwordInput" placeholder="Password" autofocus>
            <button onclick="login()">Login</button>
            <p class="login-error" id="loginError">Invalid password</p>
        </div>
    </div>

    <!-- Dashboard -->
    <div class="dashboard" id="dashboard">
        <header class="header">
            <h1>Analytics Dashboard</h1>
            <div class="header-actions">
                <span class="refresh-status" id="refreshStatus"></span>
                <button class="btn btn-secondary" onclick="loadStats()">Refresh</button>
                <button class="btn btn-primary" id="lookupBtn" onclick="runIpLookup()">
                    Update IP Locations
                </button>
                <a href="/photography/" class="btn btn-secondary">View Site</a>
            </div>
        </header>

        <main class="main">
            <!-- Stats Grid -->
            <div class="stats-grid" id="statsGrid">
                <div class="stat-card">
                    <div class="label">Total Visitors</div>
                    <div class="value" id="totalVisitors">-</div>
                </div>
                <div class="stat-card">
                    <div class="label">Today</div>
                    <div class="value" id="todayVisitors">-</div>
                </div>
                <div class="stat-card">
                    <div class="label">Return Visitors</div>
                    <div class="value" id="returnVisitors">-</div>
                </div>
                <div class="stat-card">
                    <div class="label">Page Views</div>
                    <div class="value" id="totalPageViews">-</div>
                    <div class="subtext" id="todayPageViews">- today</div>
                </div>
                <div class="stat-card">
                    <div class="label">Pending IP Lookups</div>
                    <div class="value" id="pendingLookups">-</div>
                </div>
            </div>

            <!-- Two column layout -->
            <div class="two-col">
                <!-- Top Locations -->
                <div class="section">
                    <h2><span class="icon">📍</span> Top Locations</h2>
                    <table>
                        <thead>
                            <tr>
                                <th>Location</th>
                                <th>Visitors</th>
                            </tr>
                        </thead>
                        <tbody id="topLocations">
                            <tr><td colspan="2" class="empty">Loading...</td></tr>
                        </tbody>
                    </table>
                </div>

                <!-- Top Referrers -->
                <div class="section">
                    <h2><span class="icon">🔗</span> Traffic Sources</h2>
                    <table>
                        <thead>
                            <tr>
                                <th>Source</th>
                                <th>Views</th>
                            </tr>
                        </thead>
                        <tbody id="topReferrers">
                            <tr><td colspan="2" class="empty">Loading...</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Top Pages -->
            <div class="section">
                <h2><span class="icon">📄</span> Top Pages</h2>
                <table>
                    <thead>
                        <tr>
                            <th>Page</th>
                            <th>Views</th>
                            <th>Avg Time</th>
                        </tr>
                    </thead>
                    <tbody id="topPages">
                        <tr><td colspan="3" class="empty">Loading...</td></tr>
                    </tbody>
                </table>
            </div>

            <!-- Photo Engagement -->
            <div class="section">
                <h2><span class="icon">📸</span> Photo Engagement</h2>
                <table>
                    <thead>
                        <tr>
                            <th>Photo</th>
                            <th>Event</th>
                            <th>Count</th>
                            <th>Avg View Time</th>
                        </tr>
                    </thead>
                    <tbody id="topEvents">
                        <tr><td colspan="4" class="empty">Loading...</td></tr>
                    </tbody>
                </table>
            </div>

            <!-- GPS Locations -->
            <div class="section">
                <h2><span class="icon">🛰️</span> GPS Locations (Browser Permission)</h2>
                <table>
                    <thead>
                        <tr>
                            <th>Coordinates</th>
                            <th>Accuracy</th>
                            <th>IP Location</th>
                            <th>Device</th>
                            <th>Page</th>
                            <th>Time</th>
                        </tr>
                    </thead>
                    <tbody id="gpsLocations">
                        <tr><td colspan="6" class="empty">Loading...</td></tr>
                    </tbody>
                </table>
            </div>

            <!-- Recent Visitors -->
            <div class="section">
                <h2><span class="icon">👥</span> Recent Visitors</h2>
                <table>
                    <thead>
                        <tr>
                            <th>Location</th>
                            <th>IP Addresses</th>
                            <th>Device</th>
                            <th>Browser</th>
                            <th>Visits</th>
                            <th>Last Seen</th>
                        </tr>
                    </thead>
                    <tbody id="recentVisitors">
                        <tr><td colspan="6" class="empty">Loading...</td></tr>
                    </tbody>
                </table>
            </div>
        </main>
    </div>

    <script>
        let password = '';

        // Check if password is saved
        const savedPassword = localStorage.getItem('_admin_pwd');
        if (savedPassword) {
            password = savedPassword;
            showDashboard();
        }

        // Enter key on password field
        document.getElementById('passwordInput').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') login();
        });

        async function login() {
            password = document.getElementById('passwordInput').value;

            // Test password by fetching stats
            try {
                const response = await fetch(`/analytics-api/stats?password=${encodeURIComponent(password)}`);
                if (response.ok) {
                    localStorage.setItem('_admin_pwd', password);
                    showDashboard();
                } else {
                    document.getElementById('loginError').style.display = 'block';
                }
            } catch (e) {
                document.getElementById('loginError').style.display = 'block';
            }
        }

        function showDashboard() {
            document.getElementById('loginScreen').style.display = 'none';
            document.getElementById('dashboard').classList.add('active');
            loadStats();
        }

        async function loadStats() {
            document.getElementById('refreshStatus').textContent = 'Loading...';

            try {
                const response = await fetch(`/analytics-api/stats?password=${encodeURIComponent(password)}`);
                if (!response.ok) {
                    if (response.status === 401) {
                        localStorage.removeItem('_admin_pwd');
                        location.reload();
                    }
                    return;
                }

                const data = await response.json();

                // Update summary stats
                document.getElementById('totalVisitors').textContent = data.summary.total_visitors;
                document.getElementById('todayVisitors').textContent = data.summary.today_visitors;
                document.getElementById('returnVisitors').textContent = data.summary.return_visitors;
                document.getElementById('totalPageViews').textContent = data.summary.total_page_views;
                document.getElementById('todayPageViews').textContent = `${data.summary.today_page_views} today`;
                document.getElementById('pendingLookups').textContent = data.summary.pending_ip_lookups;

                // Top locations
                const locationsHtml = data.top_locations.length ? data.top_locations.map(loc =>
                    `<tr><td>${loc.city || 'Unknown'}, ${loc.country || 'Unknown'}</td><td>${loc.visitors}</td></tr>`
                ).join('') : '<tr><td colspan="2" class="empty">No location data yet</td></tr>';
                document.getElementById('topLocations').innerHTML = locationsHtml;

                // Top referrers
                const referrersHtml = data.top_referrers.length ? data.top_referrers.map(ref =>
                    `<tr><td>${ref.source || 'Unknown'}</td><td>${ref.views}</td></tr>`
                ).join('') : '<tr><td colspan="2" class="empty">No referrer data yet</td></tr>';
                document.getElementById('topReferrers').innerHTML = referrersHtml;

                // Top pages
                const pagesHtml = data.top_pages.length ? data.top_pages.map(page => {
                    const avgTime = page.avg_time ? `${Math.round(page.avg_time)}s` : '-';
                    const url = page.page_url.replace('https://rosy.shitchell.com', '');
                    return `<tr><td>${url}</td><td>${page.views}</td><td>${avgTime}</td></tr>`;
                }).join('') : '<tr><td colspan="3" class="empty">No page view data yet</td></tr>';
                document.getElementById('topPages').innerHTML = pagesHtml;

                // Top events (photo engagement)
                const eventsHtml = data.top_events.length ? data.top_events.map(evt => {
                    const avgDuration = evt.avg_duration ? `${Math.round(evt.avg_duration)}s` : '-';
                    const target = evt.event_target || '-';
                    // Clean up filename for display
                    const displayTarget = target.length > 40 ? target.substring(0, 40) + '...' : target;
                    return `<tr><td title="${target}">${displayTarget}</td><td>${evt.event_type}</td><td>${evt.count}</td><td>${avgDuration}</td></tr>`;
                }).join('') : '<tr><td colspan="4" class="empty">No events tracked yet - view some photos!</td></tr>';
                document.getElementById('topEvents').innerHTML = eventsHtml;

                // GPS locations
                const gpsHtml = data.gps_locations && data.gps_locations.length ? data.gps_locations.map(loc => {
                    const coords = `${parseFloat(loc.geo_latitude).toFixed(4)}, ${parseFloat(loc.geo_longitude).toFixed(4)}`;
                    const mapsLink = `https://www.google.com/maps?q=${loc.geo_latitude},${loc.geo_longitude}`;
                    const accuracy = loc.geo_accuracy ? `±${Math.round(loc.geo_accuracy)}m` : '-';
                    const ipLocation = loc.city ? `${loc.city}, ${loc.country}` : 'Unknown';
                    const deviceBadge = `<span class="badge badge-${loc.device_type}">${loc.device_type}</span>`;
                    const page = loc.page_url.replace('https://rosy.shitchell.com', '');
                    const displayPage = page.length > 30 ? page.substring(0, 30) + '...' : page;
                    const time = new Date(loc.viewed_at).toLocaleString();
                    return `<tr>
                        <td><a href="${mapsLink}" target="_blank" style="font-family: monospace; font-size: 0.8rem;">${coords}</a></td>
                        <td>${accuracy}</td>
                        <td>${ipLocation}</td>
                        <td>${deviceBadge} ${loc.browser || '-'}</td>
                        <td title="${page}">${displayPage}</td>
                        <td>${time}</td>
                    </tr>`;
                }).join('') : '<tr><td colspan="6" class="empty">No GPS data yet - visitors need to allow location permission</td></tr>';
                document.getElementById('gpsLocations').innerHTML = gpsHtml;

                // Recent visitors
                const visitorsHtml = data.recent_visitors.length ? data.recent_visitors.map(v => {
                    const location = v.city ? `${v.city}, ${v.country}` : 'Unknown';
                    const ips = v.ip_addresses || '-';
                    const deviceBadge = `<span class="badge badge-${v.device_type}">${v.device_type}</span>`;
                    const lastSeen = new Date(v.last_seen).toLocaleString();
                    return `<tr>
                        <td>${location}</td>
                        <td style="font-family: monospace; font-size: 0.75rem;">${ips}</td>
                        <td>${deviceBadge}</td>
                        <td>${v.browser || '-'} / ${v.os || '-'}</td>
                        <td>${v.total_visits}</td>
                        <td>${lastSeen}</td>
                    </tr>`;
                }).join('') : '<tr><td colspan="6" class="empty">No visitors tracked yet</td></tr>';
                document.getElementById('recentVisitors').innerHTML = visitorsHtml;

                document.getElementById('refreshStatus').textContent = `Updated ${new Date().toLocaleTimeString()}`;

            } catch (e) {
                console.error('Failed to load stats:', e);
                document.getElementById('refreshStatus').textContent = 'Error loading stats';
            }
        }

        async function runIpLookup() {
            const btn = document.getElementById('lookupBtn');
            btn.disabled = true;
            btn.textContent = 'Looking up...';

            try {
                const response = await fetch('/analytics-api/lookup-ips', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ password: password })
                });

                const result = await response.json();

                if (result.success) {
                    btn.textContent = `Updated ${result.looked_up} IPs`;
                    setTimeout(() => {
                        btn.textContent = 'Update IP Locations';
                        btn.disabled = false;
                    }, 3000);
                    loadStats();
                } else {
                    btn.textContent = 'Error';
                    setTimeout(() => {
                        btn.textContent = 'Update IP Locations';
                        btn.disabled = false;
                    }, 3000);
                }
            } catch (e) {
                console.error('IP lookup error:', e);
                btn.textContent = 'Error';
                setTimeout(() => {
                    btn.textContent = 'Update IP Locations';
                    btn.disabled = false;
                }, 3000);
            }
        }

        // Auto-refresh every 60 seconds
        setInterval(loadStats, 60000);
    </script>
</body>
</html>
