@extends('layouts.app')
@section('title', 'Dashboard')

@section('content')
<div class="page-header">
    <div>
        <div class="page-breadcrumb"><span>Home</span></div>
        <h1 class="page-title">Good {{ $greeting }}, {{ auth()->user()->first_name }} 👋</h1>
        <p class="page-subtitle">Here's what's happening with {{ auth()->user()->company->name }} today</p>
    </div>
    <div class="flex gap-2">
        <a href="{{ route('leads.create') }}" class="btn btn-secondary"><i class="fa-solid fa-plus"></i> New Lead</a>
        <a href="{{ route('bookings.create') }}" class="btn btn-primary"><i class="fa-solid fa-calendar-plus"></i> New Booking</a>
    </div>
</div>

{{-- KPI Stats --}}
<div class="stats-grid">
    <div class="stat-card primary">
        <div class="stat-icon primary"><i class="fa-solid fa-chart-line"></i></div>
        <div class="stat-value">{{ currency($stats['total_revenue']) }}</div>
        <div class="stat-label">Total Revenue ({{ now()->format('M Y') }})</div>
        <div class="stat-change {{ $stats['revenue_change'] >= 0 ? 'up' : 'down' }}">
            <i class="fa-solid fa-arrow-{{ $stats['revenue_change'] >= 0 ? 'up' : 'down' }}"></i>
            {{ abs($stats['revenue_change']) }}% vs last month
        </div>
    </div>
    <div class="stat-card success">
        <div class="stat-icon success"><i class="fa-solid fa-handshake"></i></div>
        <div class="stat-value">{{ $stats['deals_won'] }}</div>
        <div class="stat-label">Deals Won</div>
        <div class="stat-change {{ $stats['deals_change'] >= 0 ? 'up' : 'down' }}">
            <i class="fa-solid fa-arrow-{{ $stats['deals_change'] >= 0 ? 'up' : 'down' }}"></i>
            {{ abs($stats['deals_change']) }}% vs last month
        </div>
    </div>
    <div class="stat-card info">
        <div class="stat-icon info"><i class="fa-solid fa-bookmark"></i></div>
        <div class="stat-value">{{ $stats['active_bookings'] }}</div>
        <div class="stat-label">Active Bookings</div>
        <div class="stat-change up"><i class="fa-solid fa-arrow-up"></i> {{ $stats['bookings_upcoming'] }} upcoming</div>
    </div>
    <div class="stat-card warning">
        <div class="stat-icon warning"><i class="fa-solid fa-funnel-dollar"></i></div>
        <div class="stat-value">{{ currency($stats['pipeline_value']) }}</div>
        <div class="stat-label">Pipeline Value</div>
        <div class="stat-change up"><i class="fa-solid fa-filter"></i> {{ $stats['pipeline_deals'] }} active deals</div>
    </div>
    <div class="stat-card danger">
        <div class="stat-icon danger"><i class="fa-solid fa-stamp"></i></div>
        <div class="stat-value">{{ $stats['pending_approvals'] }}</div>
        <div class="stat-label">Pending Approvals</div>
        <div class="stat-change {{ $stats['pending_approvals'] > 0 ? 'down' : 'up' }}">
            @if($stats['pending_approvals'] > 0)<i class="fa-solid fa-clock"></i> Requires action@else <i class="fa-solid fa-check"></i> All clear@endif
        </div>
    </div>
</div>

{{-- Charts Row --}}
<div class="grid" style="grid-template-columns: 2fr 1fr; gap: 20px; margin-bottom: 24px;">
    <div class="card">
        <div class="card-header">
            <span class="card-title">Revenue Overview</span>
            <div class="flex gap-2">
                <button class="btn btn-ghost btn-sm active" data-range="30" onclick="updateRevenueChart(30, this)">30D</button>
                <button class="btn btn-ghost btn-sm" data-range="90" onclick="updateRevenueChart(90, this)">90D</button>
                <button class="btn btn-ghost btn-sm" data-range="365" onclick="updateRevenueChart(365, this)">1Y</button>
            </div>
        </div>
        <div class="card-body">
            <canvas id="revenueChart" style="height: 240px; max-height: 240px"></canvas>
        </div>
    </div>
    <div class="card">
        <div class="card-header"><span class="card-title">Pipeline by Stage</span></div>
        <div class="card-body">
            <canvas id="pipelineChart" style="height: 240px; max-height: 240px"></canvas>
        </div>
    </div>
</div>

{{-- Bottom Row --}}
<div class="grid" style="grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-bottom: 24px;">

    {{-- Recent Leads --}}
    <div class="card">
        <div class="card-header">
            <span class="card-title">Recent Leads</span>
            <a href="{{ route('leads.index') }}" class="btn btn-ghost btn-sm">View all</a>
        </div>
        <div style="padding: 0">
            @forelse($recentLeads as $lead)
            <div style="padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px;">
                <div class="user-avatar" style="width:32px;height:32px;font-size:11px;border-radius:8px">
                    {{ strtoupper(substr($lead->company_name ?? $lead->contact_name ?? 'L', 0, 2)) }}
                </div>
                <div style="flex:1;min-width:0">
                    <div class="font-bold text-sm truncate">{{ $lead->company_name ?? $lead->contact_name }}</div>
                    <div class="text-xs text-muted">{{ $lead->source }} · {{ $lead->created_at->diffForHumans() }}</div>
                </div>
                <span class="badge-pill {{ $lead->status_color }}">{{ $lead->status }}</span>
            </div>
            @empty
            <div style="padding:30px;text-align:center;color:var(--text-muted)">No recent leads</div>
            @endforelse
        </div>
    </div>

    {{-- Upcoming Bookings --}}
    <div class="card">
        <div class="card-header">
            <span class="card-title">Upcoming Bookings</span>
            <a href="{{ route('bookings.calendar') }}" class="btn btn-ghost btn-sm"><i class="fa-solid fa-calendar"></i></a>
        </div>
        <div style="padding: 0">
            @forelse($upcomingBookings as $booking)
            <div style="padding: 12px 16px; border-bottom: 1px solid var(--border);">
                <div class="flex items-center justify-between mb-2">
                    <span class="font-bold text-sm truncate">{{ $booking->event_name }}</span>
                    <span class="badge-pill {{ $booking->status_color }}">{{ $booking->status }}</span>
                </div>
                <div class="text-xs text-muted">
                    <i class="fa-solid fa-building opacity-60"></i> {{ $booking->property->name }} · {{ $booking->space->name }}
                </div>
                <div class="text-xs text-muted mt-1">
                    <i class="fa-solid fa-clock opacity-60"></i> {{ $booking->event_date->format('D, M j · g:ia') }}
                </div>
            </div>
            @empty
            <div style="padding:30px;text-align:center;color:var(--text-muted)">No upcoming bookings</div>
            @endforelse
        </div>
    </div>

    {{-- Team Performance --}}
    <div class="card">
        <div class="card-header">
            <span class="card-title">Team Performance</span>
            <a href="{{ route('performance.index') }}" class="btn btn-ghost btn-sm">Details</a>
        </div>
        <div style="padding: 16px">
            @foreach($teamPerformance as $member)
            <div style="margin-bottom: 16px;">
                <div class="flex items-center justify-between mb-1">
                    <div class="flex items-center gap-2">
                        <div class="user-avatar" style="width:26px;height:26px;font-size:10px">
                            {{ strtoupper(substr($member->name, 0, 2)) }}
                        </div>
                        <span class="text-sm font-bold">{{ $member->name }}</span>
                    </div>
                    <span class="font-mono text-sm text-muted">{{ currency($member->revenue) }}</span>
                </div>
                <div class="progress">
                    <div class="progress-bar" style="width: {{ min(100, $member->performance_pct) }}%"></div>
                </div>
                <div class="flex justify-between mt-1">
                    <span class="text-xs text-muted">{{ $member->deals_closed }} deals</span>
                    <span class="text-xs" style="color: {{ $member->performance_pct >= 80 ? 'var(--success)' : ($member->performance_pct >= 50 ? 'var(--warning)' : 'var(--danger)') }}">{{ $member->performance_pct }}%</span>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</div>

{{-- Pending Approvals + Recent Activity --}}
<div class="grid" style="grid-template-columns: 1fr 1fr; gap: 20px;">
    <div class="card">
        <div class="card-header">
            <span class="card-title">Pending Finance Approvals</span>
            <a href="{{ route('finance.approvals') }}" class="btn btn-ghost btn-sm">View all</a>
        </div>
        <div style="padding:0">
            @forelse($pendingApprovals as $approval)
            <div style="padding: 12px 16px; border-bottom: 1px solid var(--border);">
                <div class="flex items-center justify-between">
                    <div>
                        <div class="font-bold text-sm">{{ $approval->title }}</div>
                        <div class="text-xs text-muted">Requested by {{ $approval->requestedBy->name }} · {{ $approval->created_at->diffForHumans() }}</div>
                    </div>
                    <div class="text-right">
                        <div class="font-mono font-bold text-sm" style="color: var(--warning)">{{ currency($approval->amount) }}</div>
                        <div class="flex gap-1 mt-1">
                            @can('approve', $approval)
                            <form action="{{ route('finance.approvals.approve', $approval) }}" method="POST" style="display:inline">
                                @csrf <button class="btn btn-success btn-sm" type="submit">Approve</button>
                            </form>
                            <form action="{{ route('finance.approvals.reject', $approval) }}" method="POST" style="display:inline">
                                @csrf <button class="btn btn-danger btn-sm" type="submit">Reject</button>
                            </form>
                            @endcan
                        </div>
                    </div>
                </div>
                {{-- Approval Stage Progress --}}
                <div class="flex gap-1 mt-2">
                    @foreach($approval->stages as $stage)
                    <div style="flex:1;height:3px;border-radius:2px;background:{{ $stage->completed ? 'var(--success)' : ($stage->current ? 'var(--warning)' : 'var(--bg-hover)') }}" title="{{ $stage->name }}"></div>
                    @endforeach
                </div>
            </div>
            @empty
            <div style="padding:30px;text-align:center;color:var(--text-muted)"><i class="fa-solid fa-check-circle" style="color:var(--success);font-size:22px;margin-bottom:8px;display:block"></i>All approvals up to date</div>
            @endforelse
        </div>
    </div>

    <div class="card">
        <div class="card-header"><span class="card-title">Recent Activity</span></div>
        <div class="card-body">
            <div class="timeline">
                @foreach($recentActivity as $activity)
                <div class="timeline-item">
                    <div class="timeline-dot {{ $activity->color }}"></div>
                    <div class="timeline-time">{{ $activity->created_at->diffForHumans() }}</div>
                    <div class="timeline-content">
                        <strong>{{ $activity->user->name }}</strong> {{ $activity->description }}
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>

{{-- AI Assistant Quick Prompts --}}
<div class="card mt-4">
    <div class="card-header">
        <span class="card-title" style="display:flex;align-items:center;gap:8px">
            <i class="fa-solid fa-robot" style="color:var(--brand-primary)"></i> AI Assistant Suggestions
        </span>
        <a href="{{ route('ai.assistant') }}" class="btn btn-primary btn-sm">Open Full Assistant</a>
    </div>
    <div class="card-body">
        <div class="ai-suggest-box">
            <div class="ai-suggest-header"><i class="fa-solid fa-wand-magic-sparkles"></i> Based on your data, I suggest:</div>
            <div id="aiSuggestions">
                @foreach($aiSuggestions as $suggestion)
                <div class="ai-suggest-item" onclick="openAIAction('{{ $suggestion->action }}', '{{ $suggestion->data }}')">
                    <i class="{{ $suggestion->icon }}" style="color:var(--brand-primary);margin-right:8px"></i>
                    {{ $suggestion->text }}
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
// Revenue Chart
const revenueCtx = document.getElementById('revenueChart').getContext('2d');
const revenueData = @json($revenueChartData);

const gradient = revenueCtx.createLinearGradient(0, 0, 0, 240);
gradient.addColorStop(0, 'rgba(99,102,241,0.3)');
gradient.addColorStop(1, 'rgba(99,102,241,0)');

let revenueChart = new Chart(revenueCtx, {
    type: 'line',
    data: {
        labels: revenueData.labels,
        datasets: [{
            label: 'Revenue',
            data: revenueData.values,
            borderColor: '#6366f1',
            backgroundColor: gradient,
            borderWidth: 2,
            fill: true,
            tension: 0.4,
            pointBackgroundColor: '#6366f1',
            pointRadius: 4,
            pointHoverRadius: 6,
        }, {
            label: 'Bookings',
            data: revenueData.bookings,
            borderColor: '#10b981',
            backgroundColor: 'transparent',
            borderWidth: 2,
            fill: false,
            tension: 0.4,
            pointBackgroundColor: '#10b981',
            pointRadius: 3,
        }]
    },
    options: {
        responsive: true, maintainAspectRatio: false,
        plugins: { legend: { labels: { color: '#8892aa', font: { family: 'DM Sans', size: 12 } } } },
        scales: {
            x: { grid: { color: 'rgba(255,255,255,0.05)' }, ticks: { color: '#8892aa', font: { family: 'DM Sans' } } },
            y: { grid: { color: 'rgba(255,255,255,0.05)' }, ticks: { color: '#8892aa', font: { family: 'DM Sans' }, callback: v => '$' + (v >= 1000 ? (v/1000).toFixed(0) + 'K' : v) } }
        }
    }
});

// Pipeline Donut
new Chart(document.getElementById('pipelineChart').getContext('2d'), {
    type: 'doughnut',
    data: {
        labels: @json($pipelineStages->pluck('name')),
        datasets: [{
            data: @json($pipelineStages->pluck('count')),
            backgroundColor: ['#6366f1','#8b5cf6','#f59e0b','#10b981','#3b82f6'],
            borderWidth: 0,
        }]
    },
    options: {
        responsive: true, maintainAspectRatio: false, cutout: '70%',
        plugins: { legend: { position: 'bottom', labels: { color: '#8892aa', padding: 12, font: { family: 'DM Sans', size: 11 } } } }
    }
});

async function updateRevenueChart(days, btn) {
    document.querySelectorAll('[data-range]').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    const res = await fetch(`/api/revenue-chart?days=${days}`);
    const data = await res.json();
    revenueChart.data.labels = data.labels;
    revenueChart.data.datasets[0].data = data.values;
    revenueChart.data.datasets[1].data = data.bookings;
    revenueChart.update();
}

function openAIAction(action, data) {
    if(action === 'follow-up') window.location.href = `/marketing/followups/create?client=${data}`;
    else if(action === 'email') openModal('emailComposeModal');
    else window.location.href = `/ai/assistant?prompt=${encodeURIComponent(data)}`;
}
</script>
@endpush
@endsection