<?php

use App\Enums\PostStatus;
use App\Models\AdminLog;
use App\Models\Post;
use Illuminate\Support\Facades\DB;
use Livewire\Volt\Component;
use Livewire\WithPagination;

new class extends Component
{
    use WithPagination;

    public string $search = '';
    public string $statusFilter = '';
    public string $sortBy = 'updated_at';
    public string $sortDir = 'desc';
    public int $perPage = 10;

    public ?Post $postToDelete = null;
    public bool $showDeleteModal = false;

    public function updatedSearch(): void
    {
        $this->resetPage();
    }

    public function updatedStatusFilter(): void
    {
        $this->resetPage();
    }

    public function updatedPerPage(): void
    {
        $this->resetPage();
    }

    public function sort(string $column): void
    {
        if ($this->sortBy === $column) {
            $this->sortDir = $this->sortDir === 'asc' ? 'desc' : 'asc';
        } else {
            $this->sortBy = $column;
            $this->sortDir = 'asc';
        }
    }

    public function clearFilters(): void
    {
        $this->search = '';
        $this->statusFilter = '';
        $this->resetPage();
    }

    public function togglePublish(int $id): void
    {
        DB::transaction(function () use ($id) {
            $post = Post::lockForUpdate()->find($id);

            if (! $post) {
                session()->flash('error', __('posts.post_not_found'));

                return;
            }

            $oldStatus = $post->status->value;
            $newStatus = $post->status === PostStatus::Published ? PostStatus::Draft : PostStatus::Published;

            $post->update([
                'status' => $newStatus,
                'published_at' => $newStatus === PostStatus::Published ? now() : null,
            ]);

            AdminLog::create([
                'admin_id' => auth()->id(),
                'action' => 'status_change',
                'target_type' => 'post',
                'target_id' => $post->id,
                'old_values' => ['status' => $oldStatus],
                'new_values' => ['status' => $newStatus->value],
                'ip_address' => request()->ip(),
                'created_at' => now(),
            ]);

            session()->flash('success', __('posts.post_status_updated'));
        });
    }

    public function delete(int $id): void
    {
        $this->postToDelete = Post::find($id);

        if (! $this->postToDelete) {
            session()->flash('error', __('posts.post_not_found'));

            return;
        }

        $this->showDeleteModal = true;
    }

    public function confirmDelete(): void
    {
        if (! $this->postToDelete) {
            return;
        }

        DB::transaction(function () {
            $post = Post::lockForUpdate()->find($this->postToDelete->id);

            if (! $post) {
                session()->flash('error', __('posts.post_not_found'));

                return;
            }

            AdminLog::create([
                'admin_id' => auth()->id(),
                'action' => 'delete',
                'target_type' => 'post',
                'target_id' => $post->id,
                'old_values' => $post->toArray(),
                'ip_address' => request()->ip(),
                'created_at' => now(),
            ]);

            $post->delete();

            session()->flash('success', __('posts.post_deleted'));
        });

        $this->showDeleteModal = false;
        $this->postToDelete = null;
    }

    public function cancelDelete(): void
    {
        $this->showDeleteModal = false;
        $this->postToDelete = null;
    }

    public function with(): array
    {
        return [
            'posts' => Post::query()
                ->when($this->search, fn ($q) => $q->where(function ($q) {
                    $q->whereRaw("JSON_EXTRACT(title, '$.\"ar\"') LIKE ?", ["%{$this->search}%"])
                        ->orWhereRaw("JSON_EXTRACT(title, '$.\"en\"') LIKE ?", ["%{$this->search}%"])
                        ->orWhereRaw("JSON_EXTRACT(body, '$.\"ar\"') LIKE ?", ["%{$this->search}%"])
                        ->orWhereRaw("JSON_EXTRACT(body, '$.\"en\"') LIKE ?", ["%{$this->search}%"]);
                }))
                ->when($this->statusFilter, fn ($q) => $q->where('status', $this->statusFilter))
                ->orderBy($this->sortBy, $this->sortDir)
                ->paginate($this->perPage),
            'statuses' => PostStatus::cases(),
        ];
    }
}; ?>

<div class="max-w-7xl mx-auto">
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
        <div>
            <flux:heading size="xl">{{ __('posts.posts') }}</flux:heading>
            <p class="text-sm text-zinc-500 dark:text-zinc-400 mt-1">{{ __('posts.posts_description') }}</p>
        </div>
        <flux:button href="{{ route('admin.posts.create') }}" variant="primary" icon="plus" wire:navigate>
            {{ __('posts.create_post') }}
        </flux:button>
    </div>

    @if(session('success'))
        <flux:callout variant="success" class="mb-6">
            {{ session('success') }}
        </flux:callout>
    @endif

    @if(session('error'))
        <flux:callout variant="danger" class="mb-6">
            {{ session('error') }}
        </flux:callout>
    @endif

    <!-- Filters -->
    <div class="bg-white dark:bg-zinc-800 rounded-lg p-4 border border-zinc-200 dark:border-zinc-700 mb-6">
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
            <flux:field>
                <flux:input
                    wire:model.live.debounce.300ms="search"
                    placeholder="{{ __('posts.search_placeholder') }}"
                    icon="magnifying-glass"
                />
            </flux:field>

            <flux:field>
                <flux:select wire:model.live="statusFilter">
                    <option value="">{{ __('admin.all_statuses') }}</option>
                    @foreach($statuses as $status)
                        <option value="{{ $status->value }}">{{ __('enums.post_status.' . $status->value) }}</option>
                    @endforeach
                </flux:select>
            </flux:field>

            <flux:field>
                <flux:select wire:model.live="perPage">
                    <option value="10">10 {{ __('admin.per_page') }}</option>
                    <option value="25">25 {{ __('admin.per_page') }}</option>
                    <option value="50">50 {{ __('admin.per_page') }}</option>
                </flux:select>
            </flux:field>

            @if($search || $statusFilter)
                <div class="flex items-end">
                    <flux:button wire:click="clearFilters" variant="ghost">
                        {{ __('common.clear') }}
                    </flux:button>
                </div>
            @endif
        </div>
    </div>

    <!-- Sort Headers -->
    <div class="hidden lg:flex bg-zinc-100 dark:bg-zinc-700 rounded-t-lg px-4 py-2 text-sm font-medium text-zinc-600 dark:text-zinc-300 gap-4 mb-0">
        <button wire:click="sort('title')" class="flex items-center gap-1 flex-1 hover:text-zinc-900 dark:hover:text-white">
            {{ __('posts.title') }}
            @if($sortBy === 'title')
                <flux:icon name="{{ $sortDir === 'asc' ? 'chevron-up' : 'chevron-down' }}" class="w-4 h-4" />
            @endif
        </button>
        <span class="w-24">{{ __('admin.current_status') }}</span>
        <button wire:click="sort('updated_at')" class="flex items-center gap-1 w-32 hover:text-zinc-900 dark:hover:text-white">
            {{ __('posts.last_updated') }}
            @if($sortBy === 'updated_at')
                <flux:icon name="{{ $sortDir === 'asc' ? 'chevron-up' : 'chevron-down' }}" class="w-4 h-4" />
            @endif
        </button>
        <button wire:click="sort('created_at')" class="flex items-center gap-1 w-32 hover:text-zinc-900 dark:hover:text-white">
            {{ __('posts.created') }}
            @if($sortBy === 'created_at')
                <flux:icon name="{{ $sortDir === 'asc' ? 'chevron-up' : 'chevron-down' }}" class="w-4 h-4" />
            @endif
        </button>
        <span class="w-48">{{ __('common.actions') }}</span>
    </div>

    <!-- Posts List -->
    <div class="space-y-0">
        @forelse($posts as $post)
            <div wire:key="post-{{ $post->id }}" class="bg-white dark:bg-zinc-800 p-4 border border-zinc-200 dark:border-zinc-700 {{ $loop->first ? 'rounded-t-lg lg:rounded-t-none' : '' }} {{ $loop->last ? 'rounded-b-lg' : '' }} {{ !$loop->first ? 'border-t-0' : '' }}">
                <div class="flex flex-col lg:flex-row lg:items-center gap-4">
                    <!-- Title -->
                    <div class="flex-1">
                        <a href="{{ route('admin.posts.edit', $post) }}" class="font-semibold text-zinc-900 dark:text-zinc-100 hover:text-blue-600 dark:hover:text-blue-400" wire:navigate>
                            {{ $post->getTitle() }}
                        </a>
                        <div class="text-sm text-zinc-500 dark:text-zinc-400 mt-1 line-clamp-2">
                            {{ $post->getExcerpt() }}
                        </div>
                    </div>

                    <!-- Status Badge -->
                    <div class="lg:w-24">
                        <flux:badge :color="$post->status === \App\Enums\PostStatus::Published ? 'green' : 'amber'" size="sm">
                            {{ __('enums.post_status.' . $post->status->value) }}
                        </flux:badge>
                    </div>

                    <!-- Last Updated -->
                    <div class="lg:w-32">
                        <div class="text-sm text-zinc-900 dark:text-zinc-100">
                            {{ $post->updated_at->diffForHumans() }}
                        </div>
                    </div>

                    <!-- Created -->
                    <div class="lg:w-32">
                        <div class="text-sm text-zinc-500 dark:text-zinc-400">
                            {{ $post->created_at->format('Y-m-d') }}
                        </div>
                    </div>

                    <!-- Actions -->
                    <div class="lg:w-48 flex flex-wrap gap-2">
                        <flux:button
                            href="{{ route('admin.posts.edit', $post) }}"
                            variant="filled"
                            size="sm"
                            wire:navigate
                        >
                            {{ __('common.edit') }}
                        </flux:button>
                        <flux:button
                            wire:click="togglePublish({{ $post->id }})"
                            variant="{{ $post->status === \App\Enums\PostStatus::Published ? 'ghost' : 'primary' }}"
                            size="sm"
                        >
                            {{ $post->status === \App\Enums\PostStatus::Published ? __('posts.unpublish') : __('posts.publish') }}
                        </flux:button>
                        <flux:button
                            wire:click="delete({{ $post->id }})"
                            variant="danger"
                            size="sm"
                        >
                            {{ __('common.delete') }}
                        </flux:button>
                    </div>
                </div>
            </div>
        @empty
            <div class="text-center py-12 text-zinc-500 dark:text-zinc-400 bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700">
                <flux:icon name="document-text" class="w-12 h-12 mx-auto mb-4" />
                <p>{{ __('posts.no_posts') }}</p>
                <div class="mt-4">
                    <flux:button href="{{ route('admin.posts.create') }}" variant="primary" icon="plus" wire:navigate>
                        {{ __('posts.create_post') }}
                    </flux:button>
                </div>
            </div>
        @endforelse
    </div>

    <div class="mt-6">
        {{ $posts->links() }}
    </div>

    {{-- Delete Confirmation Modal --}}
    <flux:modal wire:model="showDeleteModal">
        <div class="space-y-4">
            <flux:heading size="lg">{{ __('posts.delete_post') }}</flux:heading>

            <flux:callout variant="danger">
                {{ __('posts.delete_post_warning') }}
            </flux:callout>

            @if($postToDelete)
                <p class="text-zinc-700 dark:text-zinc-300">
                    {{ __('posts.deleting_post', ['title' => $postToDelete->getTitle()]) }}
                </p>
            @endif

            <div class="flex gap-3 justify-end pt-4">
                <flux:button wire:click="cancelDelete">
                    {{ __('common.cancel') }}
                </flux:button>
                <flux:button variant="danger" wire:click="confirmDelete">
                    {{ __('posts.delete_permanently') }}
                </flux:button>
            </div>
        </div>
    </flux:modal>
</div>