<?php

use App\Models\CmsArticle;
use Flux\Flux;
use function Livewire\Volt\{layout, title, state, computed, on};

layout('components.layouts.app');
title('Magazin verwalten');

state([
    'search' => '',
    'showForm' => false,
    'editingId' => null,
    'editLocale' => 'de',
    'slug' => '',
    'articleTitle' => '',
    'subtitle' => '',
    'image' => '',
    'category' => '',
    'date_label' => '',
    'read_time' => '',
    'authorName' => '',
    'authorBio' => '',
    'authorAvatar' => '',
    'intro' => '',
    'sections' => [],
    'is_published' => true,
    'order' => 0,
]);

on(['media-selected' => function ($mediaId, $url, $field) {
    $media = $mediaId ? \FluxCms\Core\Models\CmsMedia::find($mediaId) : null;
    if ($field === 'article_image' && $media) {
        $this->image = $media->filename;
    }
    if ($field === 'author_avatar' && $media) {
        $this->authorAvatar = $media->filename;
    }
}]);

$articles = computed(
    fn () => CmsArticle::query()
        ->when($this->search, fn ($q, $s) => $q->where('slug', 'like', "%{$s}%")
            ->orWhereRaw("JSON_UNQUOTE(JSON_EXTRACT(title, '$.de')) LIKE ?", ["%{$s}%"]))
        ->ordered()
        ->get(),
);

$openCreate = function () {
    $this->editingId = null;
    $this->reset(['slug', 'articleTitle', 'subtitle', 'image', 'category', 'date_label', 'read_time', 'authorName', 'authorBio', 'authorAvatar', 'intro', 'sections']);
    $this->is_published = true;
    $this->order = 0;
    $this->sections = [['title' => '', 'content' => '']];
    $this->showForm = true;
};

$openEdit = function (int $id) {
    $article = CmsArticle::find($id);
    if (! $article) {
        return;
    }

    $this->editingId = $id;
    $this->slug = $article->slug;
    $this->image = $article->image ?? '';
    $this->category = $article->category ?? '';
    $this->date_label = $article->date_label ?? '';
    $this->read_time = $article->read_time ?? '';
    $this->is_published = $article->is_published;
    $this->order = $article->order ?? 0;

    $author = $article->author ?? [];
    $this->authorName = $author['name'] ?? '';
    $this->authorBio = $author['bio'] ?? '';
    $this->authorAvatar = $author['avatar'] ?? '';

    $this->loadLocaleFields($article, $this->editLocale);
    $this->showForm = true;
};

$loadLocaleFields = function (CmsArticle $article, string $locale) {
    $this->articleTitle = $article->getTranslation('title', $locale) ?? '';
    $this->subtitle = $article->getTranslation('subtitle', $locale) ?? '';

    $content = $article->getTranslation('content', $locale);
    $this->intro = $content['intro'] ?? '';
    $this->sections = $content['sections'] ?? [['title' => '', 'content' => '']];
};

$switchLocale = function (string $locale) {
    $this->editLocale = $locale;
    if ($this->editingId) {
        $article = CmsArticle::find($this->editingId);
        if ($article) {
            $this->loadLocaleFields($article, $locale);
        }
    }
};

$addSection = function () {
    $this->sections[] = ['title' => '', 'content' => ''];
};

$removeSection = function (int $index) {
    unset($this->sections[$index]);
    $this->sections = array_values($this->sections);
};

$save = function () {
    $validated = validator([
        'slug' => $this->slug,
        'articleTitle' => $this->articleTitle,
        'subtitle' => $this->subtitle,
        'image' => $this->image,
        'category' => $this->category,
        'date_label' => $this->date_label,
        'read_time' => $this->read_time,
        'authorName' => $this->authorName,
        'intro' => $this->intro,
        'is_published' => $this->is_published,
        'order' => $this->order,
    ], [
        'slug' => 'required|string|max:255',
        'articleTitle' => 'required|string|max:500',
        'subtitle' => 'nullable|string|max:1000',
        'image' => 'nullable|string|max:500',
        'category' => 'nullable|string|max:255',
        'date_label' => 'nullable|string|max:100',
        'read_time' => 'nullable|string|max:50',
        'authorName' => 'nullable|string|max:255',
        'intro' => 'nullable|string',
        'is_published' => 'boolean',
        'order' => 'integer|min:0',
    ])->validate();

    $article = $this->editingId
        ? CmsArticle::findOrFail($this->editingId)
        : CmsArticle::query()->make();

    $article->slug = $validated['slug'];
    $article->setTranslation('title', $this->editLocale, $validated['articleTitle']);
    $article->setTranslation('subtitle', $this->editLocale, $validated['subtitle'] ?? '');

    $contentData = [
        'intro' => $validated['intro'] ?? '',
        'sections' => collect($this->sections)
            ->filter(fn ($s) => ! empty($s['title']) || ! empty($s['content']))
            ->values()
            ->toArray(),
    ];
    $article->setTranslation('content', $this->editLocale, $contentData);

    $article->image = $validated['image'] ?? null;
    $article->category = $validated['category'] ?? null;
    $article->date_label = $validated['date_label'] ?? null;
    $article->read_time = $validated['read_time'] ?? null;
    $article->author = [
        'name' => $this->authorName,
        'bio' => $this->authorBio,
        'avatar' => $this->authorAvatar,
    ];
    $article->is_published = $validated['is_published'];
    $article->order = $validated['order'];
    $article->save();

    $this->showForm = false;
    $this->editingId = null;

    Flux::toast(variant: 'success', heading: 'Gespeichert', text: 'Artikel wurde erfolgreich gespeichert.');
};

$togglePublished = function (int $id) {
    $article = CmsArticle::findOrFail($id);
    $article->update(['is_published' => ! $article->is_published]);
    Flux::toast(heading: 'Status geändert', text: $article->is_published ? 'Veröffentlicht' : 'Entwurf');
};

$deleteArticle = function (int $id) {
    $article = CmsArticle::findOrFail($id);
    $article->delete();
    Flux::toast(variant: 'success', heading: 'Gelöscht', text: 'Artikel wurde entfernt.');
};

$cancelForm = function () {
    $this->showForm = false;
    $this->editingId = null;
};

?>

<div>
    <div class="mb-6 flex items-center justify-between">
        <flux:heading size="xl">Magazin Beiträge</flux:heading>
        <div class="flex items-center gap-2">
            @foreach (config('flux-cms.locales', ['de' => 'DE', 'en' => 'EN']) as $code => $label)
                <flux:button size="xs" :variant="$editLocale === $code ? 'primary' : 'ghost'"
                    wire:click="switchLocale('{{ $code }}')">{{ strtoupper($code) }}</flux:button>
            @endforeach
            <flux:button variant="primary" icon="plus" wire:click="openCreate">Neuer Artikel</flux:button>
        </div>
    </div>

    <div class="mb-4">
        <flux:input wire:model.live.debounce.300ms="search" placeholder="Artikel suchen..." icon="magnifying-glass"
            size="sm" class="w-64" />
    </div>

    @if ($showForm)
        <flux:card class="mb-6">
            <div class="mb-4 flex items-center justify-between">
                <flux:heading size="lg">{{ $editingId ? 'Artikel bearbeiten' : 'Neuer Artikel' }}</flux:heading>
                <div class="flex gap-1">
                    @foreach (config('flux-cms.locales', ['de' => 'DE', 'en' => 'EN']) as $code => $label)
                        <flux:button size="xs" :variant="$editLocale === $code ? 'primary' : 'ghost'"
                            wire:click="switchLocale('{{ $code }}')">{{ strtoupper($code) }}</flux:button>
                    @endforeach
                </div>
            </div>

            <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                <flux:input wire:model="slug" label="Slug" placeholder="escrow-system-dubai-investoren" />
                <flux:input wire:model="articleTitle" label="Titel ({{ strtoupper($editLocale) }})" placeholder="Artikeltitel" />
                <div class="md:col-span-2">
                    <flux:input wire:model="subtitle" label="Untertitel ({{ strtoupper($editLocale) }})" placeholder="Kurze Beschreibung" />
                </div>
                <flux:input wire:model="category" label="Kategorie" placeholder="z.B. Dubai Investment" />
                <flux:input wire:model="date_label" label="Datum (Anzeige)" placeholder="März 10, 2026" />
                <flux:input wire:model="read_time" label="Lesezeit" placeholder="6 min read" />
                <flux:input wire:model="order" label="Sortierung" type="number" />
            </div>

            {{-- Bild --}}
            <div class="mt-4">
                <label class="mb-1 block text-sm font-medium text-zinc-700 dark:text-zinc-300">Artikelbild</label>
                <div class="flex items-start gap-3">
                    @if ($image)
                        <div class="h-16 w-24 shrink-0 overflow-hidden rounded-lg border border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-800">
                            <img src="{{ media_url($image) }}" class="h-full w-full object-cover" />
                        </div>
                    @endif
                    <div class="flex-1">
                        <livewire:admin.cms.media-picker
                            :value="null"
                            field="article_image"
                            type="image"
                            profile="card"
                            label="Bild wählen"
                            :key="'article-img-' . ($editingId ?? 'new')" />
                        <p class="mt-1 text-xs text-zinc-400">{{ $image ?: 'Kein Bild' }}</p>
                    </div>
                </div>
            </div>

            {{-- Autor --}}
            <div class="mt-6">
                <flux:heading size="sm" class="mb-3">Autor</flux:heading>
                <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
                    <flux:input wire:model="authorName" label="Name" placeholder="Marcel Scheibe" />
                    <flux:input wire:model="authorBio" label="Bio" placeholder="Kurze Biografie" />
                    <div>
                        <label class="mb-1 block text-sm font-medium text-zinc-700 dark:text-zinc-300">Avatar</label>
                        <div class="flex items-center gap-2">
                            @if ($authorAvatar)
                                <div class="h-10 w-10 shrink-0 overflow-hidden rounded-full border border-zinc-200 dark:border-zinc-700">
                                    <img src="{{ media_url($authorAvatar) }}" class="h-full w-full object-cover" />
                                </div>
                            @endif
                            <livewire:admin.cms.media-picker
                                :value="null"
                                field="author_avatar"
                                type="image"
                                label="Avatar wählen"
                                :key="'author-avatar-' . ($editingId ?? 'new')" />
                        </div>
                    </div>
                </div>
            </div>

            {{-- Inhalt --}}
            <div class="mt-6">
                <flux:heading size="sm" class="mb-3">Inhalt ({{ strtoupper($editLocale) }})</flux:heading>
                <flux:textarea wire:model="intro" label="Einleitung" rows="4" placeholder="Einleitungstext des Artikels..." />

                <div class="mt-4">
                    <div class="mb-2 flex items-center justify-between">
                        <label class="text-sm font-medium text-zinc-700 dark:text-zinc-300">Abschnitte</label>
                        <flux:button size="xs" variant="ghost" icon="plus" wire:click="addSection">Abschnitt hinzufügen</flux:button>
                    </div>
                    <div class="space-y-4">
                        @foreach ($sections as $i => $section)
                            <div wire:key="section-{{ $i }}" class="rounded-lg border border-zinc-200 p-4 dark:border-zinc-700">
                                <div class="mb-2 flex items-center justify-between">
                                    <span class="text-xs font-medium text-zinc-500">Abschnitt {{ $i + 1 }}</span>
                                    @if (count($sections) > 1)
                                        <flux:button size="xs" variant="ghost" icon="trash" wire:click="removeSection({{ $i }})" />
                                    @endif
                                </div>
                                <flux:input wire:model="sections.{{ $i }}.title" label="Überschrift" placeholder="Abschnitt-Titel" class="mb-3" />
                                <flux:textarea wire:model="sections.{{ $i }}.content" label="Text" rows="3" placeholder="Abschnitt-Inhalt..." />
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

            <div class="mt-4">
                <flux:switch wire:model="is_published" label="Veröffentlicht" />
            </div>

            <div class="mt-4 flex gap-2">
                <flux:button variant="primary" wire:click="save">Speichern</flux:button>
                <flux:button variant="ghost" wire:click="cancelForm">Abbrechen</flux:button>
            </div>
        </flux:card>
    @endif

    <flux:card>
        <div class="divide-y dark:divide-zinc-700">
            @forelse ($this->articles as $article)
                <div wire:key="article-{{ $article->id }}" class="flex items-center justify-between gap-4 py-3">
                    <div class="flex min-w-0 flex-1 items-center gap-3">
                        @if ($article->image)
                            <div class="h-12 w-20 shrink-0 overflow-hidden rounded-lg bg-zinc-100 dark:bg-zinc-700">
                                <img src="{{ media_url($article->image) }}" alt="" class="h-full w-full object-cover" loading="lazy" />
                            </div>
                        @else
                            <div class="flex h-12 w-20 shrink-0 items-center justify-center rounded-lg bg-zinc-100 dark:bg-zinc-700">
                                <x-heroicon-o-newspaper class="h-6 w-6 text-zinc-400" />
                            </div>
                        @endif
                        <div class="min-w-0">
                            <div class="flex items-center gap-2">
                                <span class="truncate font-medium text-zinc-800 dark:text-zinc-200">
                                    {{ strip_tags($article->getTranslation('title', $editLocale)) }}
                                </span>
                                @if ($article->category)
                                    <flux:badge size="sm" color="blue">{{ $article->category }}</flux:badge>
                                @endif
                                @unless ($article->is_published)
                                    <flux:badge size="sm" color="amber">Entwurf</flux:badge>
                                @endunless
                            </div>
                            <p class="text-sm text-zinc-500">
                                {{ $article->author['name'] ?? '–' }} · {{ $article->date_label ?? '–' }} · {{ $article->read_time ?? '–' }}
                            </p>
                        </div>
                    </div>
                    <div class="flex shrink-0 items-center gap-1">
                        <flux:button size="sm" variant="ghost" icon="pencil" wire:click="openEdit({{ $article->id }})" />
                        <flux:button size="sm" variant="ghost" :icon="$article->is_published ? 'eye' : 'eye-slash'"
                            wire:click="togglePublished({{ $article->id }})" />
                        <flux:button size="sm" variant="ghost" icon="trash"
                            wire:click="deleteArticle({{ $article->id }})"
                            wire:confirm="Artikel wirklich löschen?" />
                    </div>
                </div>
            @empty
                <div class="py-12 text-center">
                    <x-heroicon-o-newspaper class="mx-auto mb-4 h-12 w-12 text-zinc-400" />
                    <flux:heading>Keine Artikel</flux:heading>
                    <flux:text>Erstelle den ersten Magazin-Beitrag mit dem Button oben.</flux:text>
                </div>
            @endforelse
        </div>
    </flux:card>
</div>