@extends('admin.layouts.app')

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

@section('content')
<div class="admin-content">
    {{-- Header --}}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0">Admin Dashboard</h1>
            <p class="text-muted mb-0">Welcome back! Here's what's happening with MyFamily Moments.</p>
        </div>
        <div class="d-flex align-items-center gap-3">
            <div class="position-relative">
                <button class="btn btn-outline-primary" id="btnNotifications">
                    <i class="fas fa-bell"></i>
                    @if(($unreadCount ?? 0) > 0)
                        <span class="notification-badge" id="notificationCount">{{ $unreadCount }}</span>
                    @endif
                </button>
            </div>
            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#broadcastModal" id="btnBroadcast">
                <i class="fas fa-bullhorn me-2"></i>Send Broadcast
            </button>
        </div>
    </div>

    {{-- Statistics --}}
    <div class="row mb-4">
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="stat-card primary">
                <div class="stat-icon" style="background: linear-gradient(135deg, var(--primary), var(--secondary));">
                    <i class="fas fa-users"></i>
                </div>
                <h3 class="fw-bold mb-1" id="totalUsers">—</h3>
                <p class="text-muted mb-2">Total Users</p>
                <small class="text-success" id="usersDeltaWrap" style="display:none;">
                    <i class="fas fa-arrow-up me-1"></i><span id="usersDelta">0%</span> from last month
                </small>
            </div>
        </div>

        <div class="col-lg-3 col-md-6 mb-3">
            <div class="stat-card success">
                <div class="stat-icon" style="background: linear-gradient(135deg, var(--success), #20c997);">
                    <i class="fas fa-dollar-sign"></i>
                </div>
                <h3 class="fw-bold mb-1" id="monthlyRevenue">—</h3>
                <p class="text-muted mb-2">Monthly Revenue</p>
                <small class="text-success" id="revDeltaWrap" style="display:none;">
                    <i class="fas fa-arrow-up me-1"></i><span id="revDelta">0%</span> from last month
                </small>
            </div>
        </div>

        <div class="col-lg-3 col-md-6 mb-3">
            <div class="stat-card warning">
                <div class="stat-icon" style="background: linear-gradient(135deg, var(--warning), #fd7e14);">
                    <i class="fas fa-images"></i>
                </div>
                <h3 class="fw-bold mb-1" id="totalPhotos">—</h3>
                <p class="text-muted mb-2">Photos Uploaded</p>
                <small class="text-info">
                    <i class="fas fa-info-circle me-1"></i><span id="photosToday">—</span> today
                </small>
            </div>
        </div>

        <div class="col-lg-3 col-md-6 mb-3">
            <div class="stat-card info">
                <div class="stat-icon" style="background: linear-gradient(135deg, var(--info), #20c997);">
                    <i class="fas fa-home"></i>
                </div>
                <h3 class="fw-bold mb-1" id="activeFamilies">—</h3>
                <p class="text-muted mb-2">Active Families</p>
                <small class="text-success">
                    <i class="fas fa-arrow-up me-1"></i><span id="famDelta">—</span>% from last month
                </small>
            </div>
        </div>
    </div>

    <div class="row">
        {{-- Charts --}}
        <div class="col-lg-8">
            <div class="chart-container mb-4">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="mb-0">
                        <i class="fas fa-chart-line me-2 text-primary"></i>User Growth
                    </h5>
                    <div class="real-time-indicator">
                        <div class="real-time-dot"></div>
                        <span>Live Data</span>
                    </div>
                </div>
                <canvas id="userGrowthChart" style="height:300px;"></canvas>
            </div>

            <div class="chart-container">
                <h5 class="mb-3">
                    <i class="fas fa-dollar-sign me-2 text-success"></i>Revenue Analytics
                </h5>
                <canvas id="revenueChart" style="height:300px;"></canvas>
            </div>
        </div>

        {{-- Notifications + Recent Activity --}}
        <div class="col-lg-4">
            <div class="notification-panel mb-4">
                <div class="p-3 border-bottom d-flex justify-content-between align-items-center">
                    <h6 class="mb-0">
                        <i class="fas fa-bell me-2 text-primary"></i>Live Notifications
                    </h6>
                    <button class="btn btn-sm btn-outline-primary" id="btnMarkAllRead">Mark All Read</button>
                </div>
                <div id="notificationsList">
                    {{-- Will be filled by AJAX --}}
                </div>
            </div>

            <div class="chart-container">
                <h6 class="mb-3">
                    <i class="fas fa-history me-2 text-info"></i>Recent Activity
                </h6>

                @foreach($recentActivity as $a)
                    <div class="activity-item">
                        @if(Str::contains($a['type'],'payment'))
                            <div class="activity-icon bg-success bg-opacity-10">
                                <i class="fas fa-dollar-sign text-success"></i>
                            </div>
                        @elseif(Str::contains($a['type'],'storage'))
                            <div class="activity-icon bg-warning bg-opacity-10">
                                <i class="fas fa-exclamation-triangle text-warning"></i>
                            </div>
                        @else
                            <img src="https://via.placeholder.com/40x40/6366f1/ffffff?text={{ Str::substr($a['who'],0,1) }}"
                                 alt="{{ $a['who'] }}" class="activity-avatar">
                        @endif
                        <div>
                            <p class="mb-1 fw-semibold">{{ $a['who'] }}</p>
                            <small class="text-muted">{{ $a['title'] }}</small>
                            <div class="text-muted mt-1" style="font-size: .75rem;">{{ $a['when']->diffForHumans() }}</div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>

{{-- Broadcast Modal --}}
<div class="modal fade" id="broadcastModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form class="modal-content" id="broadcastForm">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title">Send Broadcast Notification</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label">Recipient Type</label>
                    <select class="form-select" name="recipient_type" required>
                        <option value="">Select recipients</option>
                        <option value="all">All Users</option>
                        <option value="premium">Premium Users Only</option>
                        <option value="free">Free Users Only</option>
                        <option value="trial">Trial Users Only</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">Notification Type</label>
                    <select class="form-select" name="notification_type" required>
                        <option value="">Select type</option>
                        <option value="info">Information</option>
                        <option value="warning">Warning</option>
                        <option value="success">Success</option>
                        <option value="promotion">Promotion</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">Title</label>
                    <input type="text" class="form-control" name="title" placeholder="Notification title" required>
                </div>
                <div class="mb-3">
                    <label class="form-label">Message</label>
                    <textarea class="form-control" rows="4" name="message" placeholder="Notification message" required></textarea>
                </div>
                <div class="mb-3 form-check">
                    <input class="form-check-input" type="checkbox" name="send_email" id="sendEmail" value="1">
                    <label class="form-check-label" for="sendEmail">Also send via email</label>
                </div>
                <div id="broadcastError" class="text-danger small d-none"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary" id="broadcastSubmit">
                    <span class="default-text"><i class="fas fa-paper-plane me-2"></i>Send Notification</span>
                    <span class="sending-text d-none"><i class="fas fa-spinner fa-spin me-2"></i>Sending…</span>
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('script')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
const CSRF = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

function fetchMetrics() {
    fetch("{{ route('admin.dashboard.metrics') }}", { headers: {'X-Requested-With':'XMLHttpRequest'} })
        .then(r=>r.json()).then(d=>{
            document.getElementById('totalUsers').textContent   = d.totalUsers;
            document.getElementById('usersDelta').textContent   = d.usersDelta + '%';
            document.getElementById('usersDeltaWrap').style.display='inline';

            document.getElementById('monthlyRevenue').textContent = d.monthlyRevenue;
            document.getElementById('revDelta').textContent       = d.revDelta + '%';
            document.getElementById('revDeltaWrap').style.display = 'inline';

            document.getElementById('totalPhotos').textContent  = d.totalPhotos;
            document.getElementById('photosToday').textContent  = d.photosToday;
            document.getElementById('activeFamilies').textContent = d.activeFamilies;
            document.getElementById('famDelta').textContent     = d.famDelta;
        }).catch(()=>{});
}

let userChart, revenueChart;
function fetchCharts() {
    fetch("{{ route('admin.dashboard.charts') }}", { headers: {'X-Requested-With':'XMLHttpRequest'} })
        .then(r=>r.json()).then(d=>{
            const ctx1 = document.getElementById('userGrowthChart').getContext('2d');
            const ctx2 = document.getElementById('revenueChart').getContext('2d');

            userChart?.destroy();
            revenueChart?.destroy();

            userChart = new Chart(ctx1, {
                type: 'line',
                data: {
                    labels: d.labels,
                    datasets: [{ label:'New Users', data: d.users, tension: .35 }]
                },
                options: { responsive:true, maintainAspectRatio:false }
            });

            revenueChart = new Chart(ctx2, {
                type: 'line',
                data: {
                    labels: d.labels,
                    datasets: [{ label:'Revenue ($)', data: d.revenue, tension: .35 }]
                },
                options: { responsive:true, maintainAspectRatio:false }
            });
        }).catch(()=>{});
}

function fetchNotifications() {
    fetch("{{ route('admin.dashboard.notifications') }}", { headers: {'X-Requested-With':'XMLHttpRequest'} })
        .then(r=>r.json()).then(({data})=>{
            const wrap = document.getElementById('notificationsList');
            wrap.innerHTML = '';
            if (!data.length) {
                wrap.innerHTML = `<div class="p-3 text-muted">No notifications</div>`;
                document.getElementById('notificationCount')?.classList.add('d-none');
                return;
            }
            let unread = 0;
            data.forEach(n=>{
                if(!n.read_at) unread++;
                const item = document.createElement('div');
                item.className = 'notification-item ' + (n.read_at ? '' : 'unread');
                item.innerHTML = `
                    <div class="d-flex align-items-start">
                        <div class="notification-icon" style="background:${n.color};">
                            <i class="fas ${n.icon}"></i>
                        </div>
                        <div class="flex-grow-1">
                            <p class="mb-1 fw-semibold">${n.title}</p>
                            ${n.body ? `<small class="text-muted">${n.body}</small>`:''}
                            <div class="text-muted mt-1" style="font-size:.75rem;">${n.time}</div>
                        </div>
                    </div>`;
                wrap.appendChild(item);
            });
            const badge = document.getElementById('notificationCount');
            if (badge) { badge.textContent = unread; badge.classList.toggle('d-none', unread===0); }
        }).catch(()=>{});
}

document.getElementById('btnMarkAllRead').addEventListener('click', ()=>{
    fetch("{{ route('admin.dashboard.notifications.markAllRead') }}", {
        method:'POST',
        headers: {'X-Requested-With':'XMLHttpRequest','X-CSRF-TOKEN': CSRF}
    }).then(()=>fetchNotifications());
});

document.getElementById('btnNotifications').addEventListener('click', ()=>{
    // could open a side panel; for now, just refresh list
    fetchNotifications();
});

const broadcastForm = document.getElementById('broadcastForm');
const submitBtn = document.getElementById('broadcastSubmit');
broadcastForm.addEventListener('submit', (e)=>{
    e.preventDefault();
    const err = document.getElementById('broadcastError');
    err.classList.add('d-none'); err.textContent = '';

    // swap to "Sending…" state
    submitBtn.disabled = true;
    submitBtn.querySelector('.default-text').classList.add('d-none');
    submitBtn.querySelector('.sending-text').classList.remove('d-none');

    const formData = new FormData(broadcastForm);
    fetch("{{ route('admin.broadcast.store') }}", {
        method:'POST',
        headers: {'X-Requested-With':'XMLHttpRequest','X-CSRF-TOKEN': CSRF},
        body: formData
    })
    .then(async r=>{
        if (!r.ok) {
            const j = await r.json().catch(()=>({message:'Validation error'}));
            throw j;
        }
        return r.json();
    })
    .then(()=> {
        // Success: reset form + close
        broadcastForm.reset();
        bootstrap.Modal.getInstance(document.getElementById('broadcastModal')).hide();
    })
    .catch((j)=>{
        err.textContent = (j?.message) || 'Failed to send broadcast.';
        err.classList.remove('d-none');
    })
    .finally(()=>{
        submitBtn.disabled = false;
        submitBtn.querySelector('.sending-text').classList.add('d-none');
        submitBtn.querySelector('.default-text').classList.remove('d-none');
    });
});

// Initial loads
fetchMetrics();
fetchCharts();
fetchNotifications();

// Optional: refresh some parts periodically
setInterval(fetchMetrics, 60_000);
setInterval(fetchNotifications, 45_000);
</script>
@endpush