@extends('layouts.app')

@section('content')
<div class="space-y-6">

    <!-- Header bar with quick action -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-2 border-b border-slate-800">
        <div>
            <h1 class="text-2xl font-black tracking-tight text-white flex items-center gap-2.5">
                Studio Command Center
            </h1>
            <p class="text-xs text-slate-400 mt-1">Real-time status of your text animations, media queue, and scheduled social broadcasts.</p>
        </div>

        <div class="flex items-center gap-2.5">
            <a href="{{ route('editor.create') }}" class="btn-primary text-xs">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                <span>New Video Animation</span>
            </a>
            <a href="{{ route('posts.create') }}" class="btn-secondary text-xs">
                <svg class="w-4 h-4 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                <span>Compose Post</span>
            </a>
        </div>
    </div>

    <!-- 6 Dashboard KPI Cards -->
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3.5">
        <!-- Total Projects -->
        <a href="{{ route('projects.index') }}" class="studio-card p-4 hover:border-amber-500/40 transition group">
            <div class="flex items-center justify-between text-slate-400 text-xs">
                <span>Projects</span>
                <span class="w-2 h-2 rounded-full bg-slate-600 group-hover:bg-amber-400 transition"></span>
            </div>
            <div class="text-2xl font-black text-white mt-2">{{ $stats['total_projects'] }}</div>
            <div class="text-[11px] text-slate-400 mt-1">All drafts & masters</div>
        </a>

        <!-- Ready Videos -->
        <a href="{{ route('media.index') }}?type=rendered_video" class="studio-card p-4 hover:border-amber-500/40 transition group">
            <div class="flex items-center justify-between text-slate-400 text-xs">
                <span>Videos Ready</span>
                <span class="w-2 h-2 rounded-full bg-emerald-400"></span>
            </div>
            <div class="text-2xl font-black text-white mt-2">{{ $stats['ready_videos'] }}</div>
            <div class="text-[11px] text-slate-400 mt-1">Rendered MP4 files</div>
        </a>

        <!-- Scheduled Posts -->
        <a href="{{ route('calendar.index') }}" class="studio-card p-4 hover:border-amber-500/40 transition group">
            <div class="flex items-center justify-between text-slate-400 text-xs">
                <span>Scheduled</span>
                <span class="w-2 h-2 rounded-full bg-amber-400 animate-pulse"></span>
            </div>
            <div class="text-2xl font-black text-amber-400 mt-2">{{ $stats['scheduled_posts'] }}</div>
            <div class="text-[11px] text-slate-400 mt-1">Waiting for cron trigger</div>
        </a>

        <!-- Successfully Published -->
        <a href="{{ route('publishing.index') }}?status=published" class="studio-card p-4 hover:border-amber-500/40 transition group">
            <div class="flex items-center justify-between text-slate-400 text-xs">
                <span>Published</span>
                <span class="w-2 h-2 rounded-full bg-emerald-500"></span>
            </div>
            <div class="text-2xl font-black text-emerald-400 mt-2">{{ $stats['published_posts'] }}</div>
            <div class="text-[11px] text-slate-400 mt-1">Confirmed on platforms</div>
        </a>

        <!-- Needs Attention -->
        <a href="{{ route('publishing.index') }}?status=failed" class="studio-card p-4 hover:border-rose-500/40 transition group">
            <div class="flex items-center justify-between text-slate-400 text-xs">
                <span>Attention</span>
                @if($stats['needs_attention'] > 0)
                    <span class="w-2 h-2 rounded-full bg-rose-500 animate-ping"></span>
                @else
                    <span class="w-2 h-2 rounded-full bg-slate-600"></span>
                @endif
            </div>
            <div class="text-2xl font-black {{ $stats['needs_attention'] > 0 ? 'text-rose-400' : 'text-slate-400' }} mt-2">
                {{ $stats['needs_attention'] }}
            </div>
            <div class="text-[11px] text-slate-400 mt-1">Failed or auth errors</div>
        </a>

        <!-- Connected Accounts -->
        <a href="{{ route('accounts.index') }}" class="studio-card p-4 hover:border-amber-500/40 transition group">
            <div class="flex items-center justify-between text-slate-400 text-xs">
                <span>Accounts</span>
                <span class="w-2 h-2 rounded-full bg-blue-400"></span>
            </div>
            <div class="text-2xl font-black text-white mt-2">{{ $stats['connected_accounts'] }}</div>
            <div class="text-[11px] text-slate-400 mt-1">Active OAuth links</div>
        </a>
    </div>

    <!-- Main Grid: Upcoming Scheduled Broadcasts & Recent Projects -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

        <!-- Column 1 & 2: Next Scheduled Broadcasts Queue -->
        <div class="lg:col-span-2 space-y-6">
            <div class="studio-card p-5">
                <div class="flex items-center justify-between pb-3 mb-4 border-b border-slate-800">
                    <div class="flex items-center gap-2">
                        <div class="w-2 h-2 rounded-full bg-amber-400"></div>
                        <h2 class="font-bold text-sm text-slate-100">Next Scheduled Publications (EAT Time)</h2>
                    </div>
                    <a href="{{ route('calendar.index') }}" class="text-xs text-amber-400 hover:underline">View Calendar &rarr;</a>
                </div>

                @if($nextScheduled->isEmpty())
                    <div class="text-center py-10 px-4">
                        <div class="w-12 h-12 rounded-full bg-slate-800/80 text-slate-500 flex items-center justify-center mx-auto mb-3">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        </div>
                        <p class="text-sm font-medium text-slate-300">No scheduled posts pending</p>
                        <p class="text-xs text-slate-500 mt-1 max-w-sm mx-auto">Render an animated text video in the studio, then schedule it for automatic publishing.</p>
                        <div class="mt-4 flex items-center justify-center gap-3">
                            <a href="{{ route('editor.create') }}" class="btn-primary text-xs">+ Create Video</a>
                            <a href="{{ route('posts.create') }}" class="btn-secondary text-xs">Schedule Video</a>
                        </div>
                    </div>
                @else
                    <div class="divide-y divide-slate-800/80">
                        @foreach($nextScheduled as $post)
                            <div class="py-3.5 flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                                <div class="flex items-start gap-3">
                                    <div class="w-10 h-10 rounded-lg bg-slate-800 flex-shrink-0 flex items-center justify-center text-amber-400 font-mono text-xs border border-slate-700">
                                        MP4
                                    </div>
                                    <div>
                                        <div class="font-semibold text-sm text-slate-100 line-clamp-1">{{ $post->title }}</div>
                                        <div class="text-xs text-slate-400 flex items-center gap-2 mt-0.5">
                                            <span class="font-mono text-amber-400">{{ $post->scheduled_at->format('M d, Y - H:i') }} EAT</span>
                                            <span>&bull;</span>
                                            <span>{{ $post->platformSettings->count() }} target platform(s)</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="flex items-center gap-2 self-end sm:self-center">
                                    <span class="text-[11px] font-semibold px-2 py-0.5 rounded badge-amber">
                                        {{ ucfirst($post->status) }}
                                    </span>
                                    <a href="{{ route('posts.show', $post) }}" class="p-1.5 rounded text-slate-400 hover:text-white hover:bg-slate-800 transition">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>

            <!-- Recent Projects -->
            <div class="studio-card p-5">
                <div class="flex items-center justify-between pb-3 mb-4 border-b border-slate-800">
                    <h2 class="font-bold text-sm text-slate-100">Recent Video Projects</h2>
                    <a href="{{ route('projects.index') }}" class="text-xs text-amber-400 hover:underline">All Projects &rarr;</a>
                </div>

                @if($recentProjects->isEmpty())
                    <div class="text-center py-6 text-xs text-slate-500">
                        No projects created yet. Launch the studio editor to create your first text video.
                    </div>
                @else
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        @foreach($recentProjects as $project)
                            <div class="p-3.5 rounded-lg bg-slate-900/80 border border-slate-800 hover:border-slate-700 transition flex flex-col justify-between">
                                <div>
                                    <div class="flex items-center justify-between gap-2">
                                        <span class="text-xs font-semibold text-slate-200 truncate">{{ $project->title }}</span>
                                        <span class="text-[10px] font-mono px-1.5 py-0.5 rounded bg-slate-800 text-amber-400 border border-slate-700">{{ $project->aspect_ratio }}</span>
                                    </div>
                                    <p class="text-xs text-slate-400 line-clamp-2 mt-1.5 italic font-serif">"{{ Str::limit($project->text_content, 80) }}"</p>
                                </div>
                                <div class="mt-3 pt-2.5 border-t border-slate-800/80 flex items-center justify-between text-[11px] text-slate-500">
                                    <span>Updated {{ $project->updated_at->diffForHumans() }}</span>
                                    <a href="{{ route('editor.edit', $project) }}" class="text-amber-400 hover:underline font-medium">Open Editor &rarr;</a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>

        <!-- Column 3: Studio Activity & System Status -->
        <div class="space-y-6">
            <!-- Background Cron & System Diagnostics -->
            <div class="studio-card p-5">
                <h2 class="font-bold text-sm text-slate-100 pb-3 mb-3 border-b border-slate-800 flex items-center justify-between">
                    <span>Hosting Engine Status</span>
                    <span class="text-[10px] font-mono px-2 py-0.5 rounded bg-emerald-950/80 text-emerald-400 border border-emerald-500/30">Active</span>
                </h2>
                <div class="space-y-2.5 text-xs">
                    <div class="flex items-center justify-between text-slate-400">
                        <span>Environment:</span>
                        <span class="font-mono text-slate-200">Namecheap cPanel / PHP {{ PHP_VERSION }}</span>
                    </div>
                    <div class="flex items-center justify-between text-slate-400">
                        <span>Timezone:</span>
                        <span class="font-mono text-amber-400">Africa/Nairobi (EAT)</span>
                    </div>
                    <div class="flex items-center justify-between text-slate-400">
                        <span>Video Engine:</span>
                        <span class="text-slate-200 font-medium">Browser-Native (H.264 / AAC)</span>
                    </div>
                    <div class="flex items-center justify-between text-slate-400">
                        <span>Scheduler:</span>
                        <span class="text-slate-200 font-medium">cPanel Cron (Atomic DB Locks)</span>
                    </div>
                </div>

                <div class="mt-4 pt-3 border-t border-slate-800 text-[11px] text-slate-400">
                    <div class="font-medium text-slate-300 mb-1">cPanel Cron Command:</div>
                    <div class="p-2 rounded bg-black/60 font-mono text-[10px] text-amber-300 break-all select-all">
                        * * * * * cd /home/username/public_html/studio && php artisan schedule:run >> /dev/null 2>&1
                    </div>
                </div>
            </div>

            <!-- Activity Audit Stream -->
            <div class="studio-card p-5">
                <h2 class="font-bold text-sm text-slate-100 pb-3 mb-3 border-b border-slate-800">
                    Audit & Activity Log
                </h2>

                @if($recentActivity->isEmpty())
                    <div class="text-xs text-slate-500 py-4 text-center">No recent actions recorded.</div>
                @else
                    <div class="space-y-3">
                        @foreach($recentActivity as $act)
                            <div class="text-xs flex items-start gap-2.5">
                                <span class="w-1.5 h-1.5 rounded-full bg-amber-400 mt-1.5 flex-shrink-0"></span>
                                <div class="flex-1">
                                    <div class="text-slate-200 font-medium">{{ $act->action }}</div>
                                    <div class="text-[10px] text-slate-500 font-mono">{{ $act->created_at->diffForHumans() }} &bull; {{ $act->ip_address }}</div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>

    </div>

</div>
@endsection