<?php

use Livewire\Component;
use App\Models\Inquiry;
use App\Models\Post;
use App\Models\ReporterApplication;
use App\Models\Subscriber;

new class extends Component
{
    public function render()
    {
        return $this->view()->layout('layouts::auth');
    }

    public function with()
    {
        return [
            'inquiryCount'        => Inquiry::where('status', 'new')->count(),
            'postCount'           => Post::where('status', 'published')->count(),
            'draftCount'          => Post::where('status', 'draft')->count(),
            'totalViews'          => Post::sum('view_count'),
            'newApplications'     => ReporterApplication::where('status', 'pending')->count(),
            'subscriberCount'     => Subscriber::where('status', 'active')->count(),
            'recentInquiries'     => Inquiry::latest()->take(5)->get(),
            'topPosts'            => Post::with('category')->where('status', 'published')->orderBy('view_count', 'desc')->take(5)->get(),
        ];
    }
};
?>

<div>
    <header class="section-header flex justify-between items-center mb-8">
        <div>
            <h1 class="text-2xl font-semibold tracking-tight text-gray-900">Overview</h1>
            <p class="text-sm text-gray-500 mt-1">Summary of foundation activities and metrics.</p>
        </div>
        <button class="px-4 py-2 bg-sage text-white text-sm font-medium rounded-md hover:bg-sage-dark transition-colors" style="background-color: #99BC85;">Download Report</button>
    </header>

    <!-- Stats Grid -->
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4 mb-8">
        <div class="card p-5 lg:col-span-1">
            <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-2">Published</p>
            <p class="text-2xl font-black text-gray-900 truncate" title="{{ $postCount }}">{{ $postCount }}</p>
            <p class="text-[10px] text-gray-400 mt-1">Articles live</p>
        </div>
        <div class="card p-5 lg:col-span-1">
            <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-2">Drafts</p>
            <p class="text-2xl font-black text-amber-500 truncate" title="{{ $draftCount }}">{{ $draftCount }}</p>
            <p class="text-[10px] text-gray-400 mt-1">Unpublished</p>
        </div>
        <div class="card p-5 lg:col-span-1">
            <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-2">Total Views</p>
            <p class="text-2xl font-black text-gray-900 truncate" title="{{ number_format($totalViews) }}">{{ number_format($totalViews) }}</p>
            <p class="text-[10px] text-gray-400 mt-1">All-time reads</p>
        </div>
        <div class="card p-5 lg:col-span-1 {{ $inquiryCount > 0 ? 'border-l-2 border-l-brand-red' : '' }}">
            <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-2">Inquiries</p>
            <p class="text-2xl font-black {{ $inquiryCount > 0 ? 'text-brand-red' : 'text-gray-900' }} truncate" title="{{ $inquiryCount }}">{{ $inquiryCount }}</p>
            <p class="text-[10px] text-gray-400 mt-1">Unread messages</p>
        </div>
        <div class="card p-5 lg:col-span-1 {{ $newApplications > 0 ? 'border-l-2 border-l-amber-400' : '' }}">
            <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-2">Applications</p>
            <p class="text-2xl font-black {{ $newApplications > 0 ? 'text-amber-500' : 'text-gray-900' }} truncate" title="{{ $newApplications }}">{{ $newApplications }}</p>
            <p class="text-[10px] text-gray-400 mt-1">Pending review</p>
        </div>
        <div class="card p-5 lg:col-span-1">
            <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-2">Subscribers</p>
            <p class="text-2xl font-black text-gray-900 truncate" title="{{ $subscriberCount }}">{{ $subscriberCount }}</p>
            <p class="text-[10px] text-gray-400 mt-1">Active emails</p>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <!-- Recent Inquiries -->
        <div class="card">
            <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center">
                <h2 class="text-sm font-semibold text-gray-900">Recent Inquiries</h2>
                <a href="{{ route('admin.inquiries') }}" wire:navigate class="text-xs text-sage font-medium hover:underline" style="color: #99BC85;">View All</a>
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full">
                    <thead>
                        <tr>
                            <th class="px-6 py-3 text-left text-[10px] font-bold text-gray-400 uppercase tracking-widest">Sender</th>
                            <th class="px-6 py-3 text-left text-[10px] font-bold text-gray-400 uppercase tracking-widest">Subject</th>
                            <th class="px-6 py-3 text-right text-[10px] font-bold text-gray-400 uppercase tracking-widest">Action</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-50">
                        @forelse($recentInquiries as $inquiry)
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-gray-900">{{ $inquiry->name }}</div>
                                    <div class="text-xs text-gray-500">{{ $inquiry->email }}</div>
                                </td>
                                <td class="px-6 py-4">
                                    <div class="text-sm text-gray-600 truncate max-w-[150px]">{{ $inquiry->subject }}</div>
                                </td>
                                <td class="px-6 py-4 text-right">
                                    <a href="{{ route('admin.inquiries.view', $inquiry->id) }}" wire:navigate class="text-xs font-semibold text-sage hover:underline" style="color: #99BC85;">Read</a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="3" class="px-6 py-10 text-center text-gray-400 text-xs italic">No recent inquiries</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Top Posts by Views -->
        <div class="card">
            <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center">
                <h2 class="text-sm font-semibold text-gray-900">Most Read Articles</h2>
                <a href="{{ route('admin.blog') }}" wire:navigate class="text-xs font-medium hover:underline" style="color: #99BC85;">Manage Blog</a>
            </div>
            <div class="p-6 space-y-5">
                @forelse($topPosts as $post)
                    <div class="flex items-center gap-4">
                        <span class="text-2xl font-black text-gray-100 font-sans w-8 text-center shrink-0">{{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}</span>
                        <div class="flex-1 min-w-0">
                            <h3 class="text-sm font-semibold text-gray-900 truncate font-odia">{{ $post->title }}</h3>
                            <p class="text-xs text-gray-400 mt-0.5">{{ $post->category->name }} &middot; {{ $post->created_at->format('d M Y') }}</p>
                        </div>
                        <div class="text-right shrink-0">
                            <span class="text-sm font-black text-gray-900">{{ number_format($post->view_count) }}</span>
                            <p class="text-[10px] text-gray-400 uppercase">Views</p>
                        </div>
                    </div>
                @empty
                    <p class="text-center text-gray-400 text-xs italic py-4">No posts published yet</p>
                @endforelse
            </div>
        </div>
    </div>
</div>
