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

@section('breadcrumb')
<span class="text-slate-400 font-medium">Dashboard</span>
@endsection

@section('content')
{{-- Header --}}
<div class="flex items-center justify-between mb-6">
    <div>
        <h1 class="text-xl font-bold text-slate-900">
            Good {{ now()->hour < 12 ? 'morning' : (now()->hour < 17 ? 'afternoon' : 'evening') }}, {{ auth()->user()->name }} 👋
        </h1>
        <p class="text-sm text-slate-500 mt-0.5">Here's what's happening with {{ $tenant->name }} today.</p>
    </div>
    @if($subscription && $subscription->isTrialing())
    <div class="bg-amber-50 border border-amber-200 rounded-xl px-4 py-2.5 text-sm">
        <div class="font-semibold text-amber-800">Trial: {{ $subscription->daysUntilExpiry() }} days left</div>
        <a href="{{ route('admin.billing.index') }}" class="text-amber-600 hover:underline text-xs">Add payment method →</a>
    </div>
    @endif
</div>

{{-- Stat Cards --}}
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
    <div class="stat-card">
        <div class="flex items-start justify-between">
            <div>
                <div class="stat-label">Pages</div>
                <div class="stat-value">{{ number_format($stats['pages']) }}</div>
            </div>
            <div class="stat-icon bg-indigo-100 text-indigo-600">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
            </div>
        </div>
        <a href="{{ route('admin.pages.index') }}" class="stat-link">Manage pages →</a>
    </div>

    <div class="stat-card">
        <div class="flex items-start justify-between">
            <div>
                <div class="stat-label">Blog Posts</div>
                <div class="stat-value">{{ number_format($stats['posts']) }}</div>
            </div>
            <div class="stat-icon bg-sky-100 text-sky-600">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/></svg>
            </div>
        </div>
        <a href="{{ route('admin.posts.index') }}" class="stat-link">View blog →</a>
    </div>

    <div class="stat-card">
        <div class="flex items-start justify-between">
            <div>
                <div class="stat-label">Leads (this month)</div>
                <div class="stat-value">{{ number_format($stats['leads']) }}</div>
            </div>
            <div class="stat-icon bg-emerald-100 text-emerald-600">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
            </div>
        </div>
        <a href="{{ route('admin.crm.index') }}" class="stat-link">View CRM →</a>
    </div>

    <div class="stat-card">
        <div class="flex items-start justify-between">
            <div>
                <div class="stat-label">SEO Score</div>
                <div class="stat-value">{{ $stats['seo_score'] }}<span class="text-lg font-normal text-slate-400">/100</span></div>
            </div>
            <div class="stat-icon {{ $stats['seo_score'] >= 80 ? 'bg-emerald-100 text-emerald-600' : ($stats['seo_score'] >= 60 ? 'bg-amber-100 text-amber-600' : 'bg-rose-100 text-rose-600') }}">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
            </div>
        </div>
        <a href="{{ route('admin.seo.index') }}" class="stat-link">View SEO →</a>
    </div>
</div>

{{-- Main grid --}}
<div class="grid grid-cols-1 lg:grid-cols-3 gap-5 mb-5">

    {{-- Recent Activity --}}
    <div class="lg:col-span-2 card">
        <div class="card-header">
            <h2 class="card-title">Recent Activity</h2>
            <a href="{{ route('admin.activity') }}" class="text-xs text-indigo-600 hover:underline">View all →</a>
        </div>
        <div class="divide-y divide-slate-100">
            @forelse($recentActivity as $log)
            <div class="flex items-start gap-3 py-3">
                <div class="w-7 h-7 rounded-full bg-slate-100 flex items-center justify-center text-xs font-semibold text-slate-600 shrink-0">
                    {{ strtoupper(substr($log->user_name ?? 'S', 0, 1)) }}
                </div>
                <div class="flex-1 min-w-0">
                    <div class="text-sm text-slate-800">
                        <span class="font-medium">{{ $log->user_name ?? 'System' }}</span>
                        <span class="text-slate-500"> {{ str_replace('_', ' ', $log->event) }}</span>
                        @if($log->subject_label)
                        <span class="font-medium text-slate-700"> "{{ Str::limit($log->subject_label, 40) }}"</span>
                        @endif
                    </div>
                    <div class="text-xs text-slate-400 mt-0.5 flex items-center gap-2">
                        {{ $log->created_at->diffForHumans() }}
                        @if($log->is_impersonation)
                        <span class="bg-amber-100 text-amber-700 px-1.5 py-0.5 rounded text-[11px] font-medium">Impersonation</span>
                        @endif
                    </div>
                </div>
            </div>
            @empty
            <div class="py-8 text-center">
                <p class="text-sm text-slate-400">No activity yet. Start by creating your first page.</p>
            </div>
            @endforelse
        </div>
    </div>

    {{-- Pending Tasks + Lead Sources --}}
    <div class="space-y-5">
        {{-- Pending Tasks --}}
        <div class="card">
            <div class="card-header">
                <h2 class="card-title">Pending Tasks</h2>
                @if(count($pendingTasks) > 0)
                <span class="badge badge-amber">{{ count($pendingTasks) }}</span>
                @endif
            </div>
            @if(empty($pendingTasks))
            <div class="py-6 text-center text-sm text-slate-400">✓ All clear! No pending tasks.</div>
            @else
            <div class="space-y-2">
                @foreach($pendingTasks as $task)
                <a href="{{ $task['url'] }}" class="flex items-start gap-2.5 p-3 rounded-xl {{ $task['type'] === 'warning' ? 'bg-amber-50 hover:bg-amber-100' : 'bg-sky-50 hover:bg-sky-100' }} transition">
                    <svg class="w-4 h-4 mt-0.5 shrink-0 {{ $task['type'] === 'warning' ? 'text-amber-600' : 'text-sky-600' }}" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
                    <span class="text-sm {{ $task['type'] === 'warning' ? 'text-amber-800' : 'text-sky-800' }}">{{ $task['message'] }}</span>
                </a>
                @endforeach
            </div>
            @endif
        </div>

        {{-- Lead Sources --}}
        <div class="card">
            <div class="card-header">
                <h2 class="card-title">Lead Sources</h2>
                <span class="text-xs text-slate-400">this month</span>
            </div>
            @if($leadSources->isEmpty())
            <div class="py-6 text-center text-sm text-slate-400">No leads captured yet this month.</div>
            @else
            <div class="space-y-2.5">
                @php $maxLeads = $leadSources->max('count') @endphp
                @foreach($leadSources as $source)
                <div>
                    <div class="flex justify-between text-xs mb-1">
                        <span class="font-medium text-slate-700 capitalize">{{ $source->source ?? 'Direct' }}</span>
                        <span class="text-slate-500">{{ $source->count }}</span>
                    </div>
                    <div class="h-1.5 bg-slate-100 rounded-full overflow-hidden">
                        <div class="h-full rounded-full bg-indigo-500 transition-all" style="width: {{ $maxLeads > 0 ? round($source->count / $maxLeads * 100) : 0 }}%"></div>
                    </div>
                </div>
                @endforeach
            </div>
            @endif
        </div>
    </div>
</div>

{{-- Plan Usage Meters --}}
<div class="card">
    <div class="card-header">
        <h2 class="card-title">Plan Usage</h2>
        <a href="{{ route('admin.billing.index') }}" class="text-xs text-indigo-600 hover:underline">View billing →</a>
    </div>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        @foreach($usageMeters as $meter)
        <div>
            <div class="flex justify-between items-end mb-1.5">
                <span class="text-xs font-medium text-slate-700">{{ $meter['label'] }}</span>
                <span class="text-xs text-slate-400">
                    {{ $meter['is_unlimited'] ? '∞' : number_format($meter['used']) . '/' . number_format($meter['limit']) }}
                </span>
            </div>
            @if(!$meter['is_unlimited'])
            <div class="h-2 bg-slate-100 rounded-full overflow-hidden">
                <div class="h-full rounded-full transition-all {{ $meter['at_limit'] ? 'bg-rose-500' : ($meter['near_limit'] ? 'bg-amber-500' : 'bg-indigo-500') }}"
                     style="width: {{ $meter['percent'] }}%"></div>
            </div>
            @if($meter['at_limit'])
            <div class="mt-1">
                <a href="{{ route('admin.billing.index') }}" class="text-[11px] text-rose-600 hover:underline">Upgrade to get more →</a>
            </div>
            @endif
            @else
            <div class="h-2 bg-slate-100 rounded-full"><div class="h-full w-1/4 rounded-full bg-emerald-400"></div></div>
            @endif
        </div>
        @endforeach
    </div>
</div>
@endsection