@extends('layouts.app')

@section('title', 'Mobile Dashboard')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="mobile-container max-w-md mx-auto">
        <div class="mobile-dashboard">
            <div class="dashboard-header">
                <h1>{{ __('mobile.dashboard') }}</h1>
                <div class="user-profile" id="profile-dropdown-trigger">
                    <img id="user-avatar" src="/img/default-avatar.png" alt="User Avatar" class="avatar">
                    <div id="settings-dropdown" class="settings-dropdown hidden">
                        <ul>
                            <li>
                                <a href="{{ route('mobile.profile') }}">
                                    {{ __('mobile.profile') }}
                                </a>
                            </li>
                            <li>
                                <a href="{{ route('mobile.settings') }}">
                                    {{ __('mobile.settings') }}
                                </a>
                            </li>
                            <li id="logout-trigger">
                                {{ __('mobile.logout') }}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="stats-cards">
                <div class="stat-card domains">
                    <div class="stat-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z"></path>
                            <path d="M2 12h20"></path>
                            <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
                        </svg>
                    </div>
                    <div class="stat-info">
                        <h3>{{ __('mobile.domains') }}</h3>
                        <p class="stat-value" id="domains-count">0</p>
                    </div>
                </div>

                <div class="stat-card websites">
                    <div class="stat-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
                            <line x1="8" y1="21" x2="16" y2="21"></line>
                            <line x1="12" y1="17" x2="12" y2="21"></line>
                        </svg>
                    </div>
                    <div class="stat-info">
                        <h3>{{ __('mobile.websites') }}</h3>
                        <p class="stat-value" id="websites-count">0</p>
                    </div>
                </div>

                <div class="stat-card ai-agents">
                    <div class="stat-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z"></path>
                            <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
                            <line x1="12" y1="19" x2="12" y2="22"></line>
                            <line x1="8" y1="22" x2="16" y2="22"></line>
                        </svg>
                    </div>
                    <div class="stat-info">
                        <h3>{{ __('mobile.ai_agents') }}</h3>
                        <p class="stat-value" id="ai-agents-count">0</p>
                    </div>
                </div>
            </div>

            <div class="recent-activity">
                <h2>{{ __('mobile.recent_activity') }}</h2>
                <ul class="activity-list" id="activity-list">
                    <li class="no-activity">{{ __('mobile.loading') }}</li>
                </ul>
            </div>

            <nav class="mobile-nav">
                <a href="{{ route('mobile.dashboard') }}" class="nav-item active">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <rect x="3" y="3" width="7" height="7"></rect>
                        <rect x="14" y="3" width="7" height="7"></rect>
                        <rect x="14" y="14" width="7" height="7"></rect>
                        <rect x="3" y="14" width="7" height="7"></rect>
                    </svg>
                    <span>{{ __('mobile.dashboard') }}</span>
                </a>
                <a href="{{ route('mobile.domains') }}" class="nav-item">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z"></path>
                        <path d="M2 12h20"></path>
                    </svg>
                    <span>{{ __('mobile.domains') }}</span>
                </a>
                <a href="{{ route('mobile.websites') }}" class="nav-item">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
                    </svg>
                    <span>{{ __('mobile.websites') }}</span>
                </a>
                <a href="{{ route('mobile.ai-agents') }}" class="nav-item">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z"></path>
                        <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
                    </svg>
                    <span>{{ __('mobile.ai_agents') }}</span>
                </a>
            </nav>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    /* Mobile-specific styles */
    @media (min-width: 768px) {
        .mobile-container {
            border: 12px solid #333;
            border-radius: 36px;
            padding: 8px;
            background: #fff;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
            height: 80vh;
            overflow-y: auto;
        }
    }
    
    .mobile-dashboard {
        padding: 1rem;
        padding-bottom: 5rem; /* Space for bottom nav */
    }
    
    .dashboard-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
    }
    
    .dashboard-header h1 {
        font-size: 1.5rem;
        font-weight: 600;
        margin: 0;
    }
    
    .user-profile {
        position: relative;
    }
    
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        cursor: pointer;
        border: 2px solid #4f46e5;
    }
    
    .settings-dropdown {
        position: absolute;
        top: 45px;
        right: 0;
        background: white;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        width: 150px;
        z-index: 10;
    }
    
    .settings-dropdown ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .settings-dropdown li {
        padding: 12px 16px;
        cursor: pointer;
        transition: background-color 0.2s;
    }
    
    .settings-dropdown li:hover {
        background-color: #f5f5f5;
    }
    
    .settings-dropdown a {
        text-decoration: none;
        color: inherit;
        display: block;
    }
    
    .hidden {
        display: none;
    }
    
    .stats-cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
        margin-bottom: 2rem;
    }
    
    .stat-card {
        background: white;
        border-radius: 12px;
        padding: 1rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .stat-icon {
        width: 32px;
        height: 32px;
        margin-bottom: 0.5rem;
        color: #4f46e5;
    }
    
    .stat-info h3 {
        font-size: 0.75rem;
        font-weight: 500;
        margin: 0 0 0.25rem 0;
        color: #6b7280;
    }
    
    .stat-value {
        font-size: 1.25rem;
        font-weight: 600;
        margin: 0;
        color: #111827;
    }
    
    .recent-activity {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        margin-bottom: 1rem;
    }
    
    .recent-activity h2 {
        font-size: 1.25rem;
        font-weight: 600;
        margin: 0 0 1rem 0;
    }
    
    .activity-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .activity-item {
        display: flex;
        align-items: center;
        padding: 0.75rem 0;
        border-bottom: 1px solid #f3f4f6;
    }
    
    .activity-item:last-child {
        border-bottom: none;
    }
    
    .activity-icon {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color: #e5e7eb;
        margin-right: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .activity-icon.domain {
        background-color: #dbeafe;
        color: #2563eb;
    }
    
    .activity-icon.website {
        background-color: #dcfce7;
        color: #16a34a;
    }
    
    .activity-icon.ai-agent {
        background-color: #f3e8ff;
        color: #9333ea;
    }
    
    .activity-details {
        flex: 1;
    }
    
    .activity-description {
        margin: 0 0 0.25rem 0;
        font-size: 0.875rem;
    }
    
    .activity-time {
        font-size: 0.75rem;
        color: #6b7280;
    }
    
    .no-activity {
        text-align: center;
        padding: 2rem 0;
        color: #6b7280;
        font-style: italic;
    }
    
    .mobile-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        display: flex;
        justify-content: space-around;
        padding: 0.75rem 0;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
        z-index: 100;
    }
    
    .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 0.75rem;
        color: #6b7280;
        text-decoration: none;
        cursor: pointer;
    }
    
    .nav-item svg {
        width: 24px;
        height: 24px;
        margin-bottom: 0.25rem;
    }
    
    .nav-item.active {
        color: #4f46e5;
    }
</style>
@endpush

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Toggle dropdown menu
        const profileDropdownTrigger = document.getElementById('profile-dropdown-trigger');
        const settingsDropdown = document.getElementById('settings-dropdown');
        
        profileDropdownTrigger.addEventListener('click', function() {
            settingsDropdown.classList.toggle('hidden');
        });
        
        // Close dropdown when clicking outside
        document.addEventListener('click', function(event) {
            if (!profileDropdownTrigger.contains(event.target) && !settingsDropdown.contains(event.target)) {
                settingsDropdown.classList.add('hidden');
            }
        });
        
        // Handle logout
        document.getElementById('logout-trigger').addEventListener('click', function() {
            axios.post('/logout')
                .then(() => {
                    window.location.href = '/login';
                })
                .catch(error => {
                    console.error('Error during logout:', error);
                });
        });
        
        // Fetch dashboard data
        axios.get('/api/mobile/dashboard/summary')
            .then(response => {
                if (response.data.status === 'success') {
                    const data = response.data.data;
                    
                    // Update stats
                    document.getElementById('domains-count').textContent = data.domains_count;
                    document.getElementById('websites-count').textContent = data.websites_count;
                    document.getElementById('ai-agents-count').textContent = data.ai_agents_count;
                    
                    // Update activity list
                    const activityList = document.getElementById('activity-list');
                    
                    if (data.recent_activities && data.recent_activities.length > 0) {
                        activityList.innerHTML = '';
                        
                        data.recent_activities.forEach(activity => {
                            const li = document.createElement('li');
                            li.className = 'activity-item';
                            
                            const iconClass = activity.type || 'default';
                            
                            li.innerHTML = `
                                <div class="activity-icon ${iconClass}"></div>
                                <div class="activity-details">
                                    <p class="activity-description">${activity.description}</p>
                                    <span class="activity-time">${formatTime(activity.created_at)}</span>
                                </div>
                            `;
                            
                            activityList.appendChild(li);
                        });
                    } else {
                        activityList.innerHTML = `<li class="no-activity">${window.translations?.mobile?.no_recent_activity || 'No recent activity'}</li>`;
                    }
                }
            })
            .catch(error => {
                console.error('Error fetching dashboard data:', error);
                document.getElementById('activity-list').innerHTML = `<li class="no-activity">${window.translations?.mobile?.error_loading || 'Error loading data'}</li>`;
            });
        
        // Format time helper function
        function formatTime(timestamp) {
            if (!timestamp) return '';
            
            const date = new Date(timestamp);
            const now = new Date();
            const diffInSeconds = Math.floor((now - date) / 1000);
            
            if (diffInSeconds < 60) {
                return window.translations?.mobile?.just_now || 'Just now';
            }
            
            const diffInMinutes = Math.floor(diffInSeconds / 60);
            if (diffInMinutes < 60) {
                return `${diffInMinutes} ${window.translations?.mobile?.minutes_ago || 'minutes ago'}`;
            }
            
            const diffInHours = Math.floor(diffInMinutes / 60);
            if (diffInHours < 24) {
                return `${diffInHours} ${window.translations?.mobile?.hours_ago || 'hours ago'}`;
            }
            
            const diffInDays = Math.floor(diffInHours / 24);
            return `${diffInDays} ${window.translations?.mobile?.days_ago || 'days ago'}`;
        }
        
        // Fetch user profile for avatar
        axios.get('/api/mobile/profile')
            .then(response => {
                if (response.data.status === 'success' && response.data.data.user.avatar) {
                    document.getElementById('user-avatar').src = response.data.data.user.avatar;
                }
            })
            .catch(error => {
                console.error('Error fetching user profile:', error);
            });
    });
</script>
@endpush