<?php

use function Livewire\Volt\{layout};
layout('components.layouts.cms');

use FluxCms\Core\Models\CmsContent;
use FluxCms\Core\Models\CmsDownload;
use FluxCms\Core\Models\CmsFaq;
use FluxCms\Core\Models\CmsIndustry;
use FluxCms\Core\Models\CmsLinkedinPost;
use FluxCms\Core\Models\CmsNewsItem;
use function Livewire\Volt\{computed};

$stats = computed(
    fn() => [
        'contents' => CmsContent::count(),
        'groups' => CmsContent::distinct()->pluck('group')->count(),
        'news' => CmsNewsItem::count(),
        'industries' => CmsIndustry::count(),
        'faqs' => CmsFaq::count(),
        'linkedin' => CmsLinkedinPost::count(),
        'downloads' => CmsDownload::count(),
    ],
);

?>

<div>
    <flux:heading size="xl" class="mb-6">CMS Dashboard</flux:heading>

    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <a href="{{ route('cms.content.index') }}" wire:navigate>
            <flux:card class="hover:border-blue-500 transition-colors">
                <div class="flex items-center gap-3">
                    <flux:icon name="document-text" class="text-blue-500" />
                    <div>
                        <flux:heading size="lg">{{ $this->stats['contents'] }}</flux:heading>
                        <flux:text class="text-sm">Inhalte in {{ $this->stats['groups'] }} Gruppen</flux:text>
                    </div>
                </div>
            </flux:card>
        </a>

        <a href="{{ route('cms.news.index') }}" wire:navigate>
            <flux:card class="hover:border-green-500 transition-colors">
                <div class="flex items-center gap-3">
                    <flux:icon name="newspaper" class="text-green-500" />
                    <div>
                        <flux:heading size="lg">{{ $this->stats['news'] }}</flux:heading>
                        <flux:text class="text-sm">News Items</flux:text>
                    </div>
                </div>
            </flux:card>
        </a>

        <a href="{{ route('cms.faqs.index') }}" wire:navigate>
            <flux:card class="hover:border-amber-500 transition-colors">
                <div class="flex items-center gap-3">
                    <flux:icon name="question-mark-circle" class="text-amber-500" />
                    <div>
                        <flux:heading size="lg">{{ $this->stats['faqs'] }}</flux:heading>
                        <flux:text class="text-sm">FAQ Einträge</flux:text>
                    </div>
                </div>
            </flux:card>
        </a>

        <a href="{{ route('cms.linkedin.index') }}" wire:navigate>
            <flux:card class="hover:border-sky-500 transition-colors">
                <div class="flex items-center gap-3">
                    <flux:icon name="chat-bubble-left-right" class="text-sky-500" />
                    <div>
                        <flux:heading size="lg">{{ $this->stats['linkedin'] }}</flux:heading>
                        <flux:text class="text-sm">LinkedIn Beiträge</flux:text>
                    </div>
                </div>
            </flux:card>
        </a>

        <a href="{{ route('cms.industries.index') }}" wire:navigate>
            <flux:card class="hover:border-violet-500 transition-colors">
                <div class="flex items-center gap-3">
                    <flux:icon name="building-office" class="text-violet-500" />
                    <div>
                        <flux:heading size="lg">{{ $this->stats['industries'] }}</flux:heading>
                        <flux:text class="text-sm">Industries</flux:text>
                    </div>
                </div>
            </flux:card>
        </a>

        <a href="{{ route('cms.downloads.index') }}" wire:navigate>
            <flux:card class="hover:border-rose-500 transition-colors">
                <div class="flex items-center gap-3">
                    <flux:icon name="arrow-down-tray" class="text-rose-500" />
                    <div>
                        <flux:heading size="lg">{{ $this->stats['downloads'] }}</flux:heading>
                        <flux:text class="text-sm">Downloads</flux:text>
                    </div>
                </div>
            </flux:card>
        </a>
    </div>
</div>
