@extends('layouts.admin')
@section('title', $collection->exists ? $collection->title : 'Add collection')
@section('content')
@php
  $imageSelected = old('image_media_asset_id')
      ? \App\Models\MediaAsset::query()->with('variants')->find(old('image_media_asset_id'))
      : ($imageAsset ?? null);
  $type = old('type', $collection->type ?? 'manual');
@endphp

<form id="collection-form" method="post" action="{{ $collection->exists ? route('admin.collections.update', $collection) : route('admin.collections.store') }}">
@csrf
@if($collection->exists) @method('PUT') @endif

<x-admin.page
    :title="$collection->exists ? $collection->title : 'Add collection'"
    subtitle="Modern merchandising editor — media, manual picks or smart rules, publishing, and SEO."
>
    <x-slot:actions>
        @if($collection->exists && $collection->published)
            <a href="{{ $collection->storefrontUrl() }}" target="_blank" class="admin-btn">
                <i data-lucide="external-link" class="h-3.5 w-3.5"></i> View storefront
            </a>
        @endif
        <a href="{{ route('admin.collections.index') }}" class="admin-btn">Back</a>
        <button type="submit" class="admin-btn admin-btn-primary">
            <i data-lucide="save" class="h-3.5 w-3.5"></i>
            {{ $collection->exists ? 'Save collection' : 'Create collection' }}
        </button>
    </x-slot:actions>

    @if($errors->any())
        <div class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">{{ $errors->first() }}</div>
    @endif

    <div class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_20rem]">
        <div class="space-y-5">
            <x-admin.section title="Basics">
                <x-admin.field label="Title" name="title" required>
                    <input name="title" value="{{ old('title', $collection->title) }}" required class="admin-input text-base font-medium" placeholder="Best sellers">
                </x-admin.field>
                <x-admin.field label="Description" name="description" class="mt-4">
                    <textarea name="description" rows="5" class="admin-input">{{ old('description', $collection->description) }}</textarea>
                </x-admin.field>
                <x-admin.field label="Handle" name="handle" class="mt-4" help="collections/your-handle">
                    <div class="flex overflow-hidden rounded-lg border border-[var(--color-admin-border)]">
                        <span class="bg-[#f6f6f7] px-3 py-2 text-xs text-[#6d7175]">/collections/</span>
                        <input name="handle" value="{{ old('handle', $collection->handle) }}" class="admin-input rounded-none border-0">
                    </div>
                </x-admin.field>
            </x-admin.section>

            <x-admin.section title="Collection image" hint="Chosen from the Media gallery for PLP headers and navigation tiles.">
                <x-admin.media-field
                    name="image_media_asset_id"
                    mode="single"
                    label="Hero / tile image"
                    help="Select one image from Media gallery."
                    :selected="$imageSelected ? [$imageSelected] : []"
                    :max="1"
                />
            </x-admin.section>

            <x-admin.section title="Collection type" hint="Manual: curate products. Smart: auto-include products that match rules.">
                <div class="grid gap-3 sm:grid-cols-2" data-collection-type-toggle>
                    <label class="rounded-xl border border-[var(--color-admin-border)] p-4 cursor-pointer has-[:checked]:border-[#1a1c1e] has-[:checked]:bg-[#fafbfb]">
                        <input type="radio" name="type" value="manual" class="mr-2" @checked($type === 'manual') data-type-radio>
                        <span class="font-medium">Manual</span>
                        <p class="mt-1 text-xs text-[#6d7175]">Hand-pick products and control order.</p>
                    </label>
                    <label class="rounded-xl border border-[var(--color-admin-border)] p-4 cursor-pointer has-[:checked]:border-[#1a1c1e] has-[:checked]:bg-[#fafbfb]">
                        <input type="radio" name="type" value="smart" class="mr-2" @checked($type === 'smart') data-type-radio>
                        <span class="font-medium">Smart</span>
                        <p class="mt-1 text-xs text-[#6d7175]">Match by tag, grade, type, vendor, or title.</p>
                    </label>
                </div>
                <x-admin.field label="Sort order" name="sort_order" class="mt-4">
                    <select name="sort_order" class="admin-input max-w-xs">
                        @foreach([
                            'manual' => 'Manual',
                            'best-selling' => 'Best selling',
                            'title-asc' => 'Title A–Z',
                            'title-desc' => 'Title Z–A',
                            'price-asc' => 'Price ↑',
                            'price-desc' => 'Price ↓',
                            'created-desc' => 'Newest',
                        ] as $val => $label)
                            <option value="{{ $val }}" @selected(old('sort_order', $collection->sort_order ?: 'manual') === $val)>{{ $label }}</option>
                        @endforeach
                    </select>
                </x-admin.field>
            </x-admin.section>

            <div data-manual-panel class="{{ $type === 'manual' ? '' : 'hidden' }}">
                <x-admin.section title="Products" hint="Select products included in this collection.">
                    <div class="mb-3 flex items-center justify-between text-xs text-[#6d7175]">
                        <span data-product-count>{{ $collection->exists ? $collection->products->count() : 0 }} selected</span>
                        <input type="search" placeholder="Filter products…" class="admin-input max-w-xs" data-product-filter>
                    </div>
                    <div class="max-h-96 overflow-y-auto rounded-xl border border-[var(--color-admin-border)]" data-product-list>
                        @forelse($allProducts ?? [] as $p)
                            <label class="flex items-center gap-3 border-b border-[var(--color-admin-border)] px-3 py-2.5 text-sm last:border-0 hover:bg-[#fafbfb]" data-product-row data-title="{{ Str::lower($p->title) }}">
                                <input type="checkbox" name="product_ids[]" value="{{ $p->id }}" @checked(collect(old('product_ids', $collection->exists ? $collection->products->pluck('id')->all() : []))->contains($p->id)) data-product-check>
                                <span class="min-w-0 flex-1 truncate font-medium">{{ $p->title }}</span>
                                <x-admin.badge :tone="$p->status === 'active' ? 'success' : 'muted'">{{ $p->status }}</x-admin.badge>
                            </label>
                        @empty
                            <p class="p-6 text-sm text-[#8c9196]">No products in catalogue yet.</p>
                        @endforelse
                    </div>
                </x-admin.section>
            </div>

            <div data-smart-panel class="{{ $type === 'smart' ? '' : 'hidden' }}">
                <x-admin.section title="Smart conditions" hint="Products matching these rules are included automatically when you save or sync.">
                    <div class="mb-3 flex flex-wrap items-center justify-between gap-2">
                        <p class="text-sm text-[#6d7175]">Preview match: <strong class="text-[#202223]">{{ number_format($previewCount ?? 0) }}</strong> products</p>
                        @if($collection->exists)
                            <button type="submit" form="collection-sync-form" class="admin-btn">
                                <i data-lucide="refresh-cw" class="h-3.5 w-3.5"></i> Re-sync now
                            </button>
                        @endif
                    </div>
                    <ul class="mb-4 space-y-2 text-sm">
                        @forelse($collection->rules ?? [] as $rule)
                            <li class="flex items-center justify-between gap-3 rounded-xl border border-[var(--color-admin-border)] bg-[#fafbfb] px-3 py-2.5">
                                <div>
                                    <span class="text-[#8c9196]">{{ $rule->boolean }}</span>
                                    <strong>{{ $rule->column }}</strong>
                                    {{ str_replace('_', ' ', $rule->relation) }}
                                    <code class="rounded bg-white px-1.5 py-0.5 text-xs">{{ $rule->condition }}</code>
                                </div>
                                @if($collection->exists)
                                    <button type="submit" form="rule-delete-{{ $rule->id }}" class="text-xs font-medium text-[var(--color-danger)]" onclick="return confirm('Remove this condition?')">Remove</button>
                                @endif
                            </li>
                        @empty
                            <li class="rounded-xl border border-dashed border-[var(--color-admin-border)] px-4 py-6 text-center text-[#8c9196]">
                                No rules yet — add a condition below after creating the collection.
                            </li>
                        @endforelse
                    </ul>
                    @if(! $collection->exists)
                        <p class="admin-help">Create the collection first, then add smart conditions on this screen.</p>
                    @endif
                </x-admin.section>
            </div>

            <x-admin.section title="Search engine listing">
                <div class="mb-4 rounded-lg border border-[var(--color-admin-border)] bg-[#fafbfb] p-4 text-sm">
                    <div class="text-[#1a0dab]">{{ old('seo_title', $collection->seo_title ?: $collection->title ?: 'Collection title') }}</div>
                    <div class="text-xs text-[#006621]">{{ url('/collections/'.(old('handle', $collection->handle) ?: 'handle')) }}</div>
                    <div class="mt-1 text-[#4d5156]">{{ old('seo_description', $collection->seo_description ?: \Illuminate\Support\Str::limit(strip_tags((string) $collection->description), 150)) }}</div>
                </div>
                <x-admin.field label="SEO title" name="seo_title">
                    <input name="seo_title" maxlength="70" value="{{ old('seo_title', $collection->seo_title) }}" class="admin-input">
                </x-admin.field>
                <x-admin.field label="Meta description" name="seo_description" class="mt-4">
                    <textarea name="seo_description" rows="3" maxlength="320" class="admin-input">{{ old('seo_description', $collection->seo_description) }}</textarea>
                </x-admin.field>
            </x-admin.section>
        </div>

        <div class="space-y-5 xl:sticky xl:top-20 xl:self-start">
            <x-admin.section title="Publishing">
                <x-admin.field label="Status" name="status">
                    <select name="status" class="admin-input">
                        @foreach(['draft' => 'Draft', 'active' => 'Active', 'archived' => 'Archived'] as $val => $label)
                            <option value="{{ $val }}" @selected(old('status', $collection->status ?? 'active') === $val)>{{ $label }}</option>
                        @endforeach
                    </select>
                </x-admin.field>
                <div class="mt-4 space-y-2 text-sm">
                    <label class="flex items-center gap-2"><input type="checkbox" name="published" value="1" @checked(old('published', $collection->published ?? true))> Published on Online Store</label>
                    <label class="flex items-center gap-2"><input type="checkbox" name="featured" value="1" @checked(old('featured', $collection->featured ?? false))> Featured</label>
                    <label class="flex items-center gap-2"><input type="checkbox" name="show_in_nav" value="1" @checked(old('show_in_nav', $collection->show_in_nav ?? true))> Show in navigation</label>
                </div>
                @if($collection->exists && $collection->rules_synced_at)
                    <p class="admin-help mt-3">Last smart sync {{ $collection->rules_synced_at->diffForHumans() }}</p>
                @endif
            </x-admin.section>

            @if($collection->exists)
                <x-admin.section title="Actions">
                    <form method="post" action="{{ route('admin.collections.duplicate', $collection) }}" class="mb-2">
                        @csrf
                        <button class="admin-btn w-full justify-center">
                            <i data-lucide="copy" class="h-3.5 w-3.5"></i> Duplicate
                        </button>
                    </form>
                    <button
                        type="submit"
                        form="collection-delete-form"
                        class="admin-btn w-full justify-center text-[var(--color-danger)]"
                        onclick="return confirm('Delete this collection?')"
                    >
                        Delete collection
                    </button>
                </x-admin.section>
            @endif
        </div>
    </div>

    <x-admin.sticky-save form="collection-form" hint="Type, membership, media, and publish flags save together." />
</x-admin.page>
</form>

@if($collection->exists)
    <form id="collection-delete-form" method="post" action="{{ route('admin.collections.destroy', $collection) }}" class="hidden">
        @csrf
        @method('DELETE')
    </form>
    <form id="collection-sync-form" method="post" action="{{ route('admin.collections.sync', $collection) }}" class="hidden">
        @csrf
    </form>
    @foreach($collection->rules as $rule)
        <form id="rule-delete-{{ $rule->id }}" method="post" action="{{ route('admin.collections.rules.destroy', [$collection, $rule]) }}" class="hidden">
            @csrf
            @method('DELETE')
        </form>
    @endforeach

    @if($collection->type === 'smart' || $type === 'smart')
        <form method="post" action="{{ route('admin.collections.rules.store', $collection) }}" class="mt-5">
            @csrf
            <x-admin.section title="Add condition">
                <div class="flex flex-wrap gap-2">
                    <select name="column" class="admin-input max-w-[10rem]">
                        @foreach(['tag','grade','title','product_type','vendor'] as $col)
                            <option value="{{ $col }}">{{ str_replace('_', ' ', $col) }}</option>
                        @endforeach
                    </select>
                    <select name="relation" class="admin-input max-w-[10rem]">
                        <option value="contains">contains</option>
                        <option value="equals">equals</option>
                        <option value="starts_with">starts with</option>
                    </select>
                    <input name="condition" required class="admin-input max-w-xs" placeholder="value">
                    <select name="boolean" class="admin-input max-w-[5rem]">
                        <option value="AND">AND</option>
                        <option value="OR">OR</option>
                    </select>
                    <button class="admin-btn admin-btn-primary">Add rule</button>
                </div>
            </x-admin.section>
        </form>
    @endif
@endif

<script>
(() => {
  const radios = document.querySelectorAll('[data-type-radio]');
  const manual = document.querySelector('[data-manual-panel]');
  const smart = document.querySelector('[data-smart-panel]');
  const sync = () => {
    const value = document.querySelector('[data-type-radio]:checked')?.value || 'manual';
    manual?.classList.toggle('hidden', value !== 'manual');
    smart?.classList.toggle('hidden', value !== 'smart');
  };
  radios.forEach((r) => r.addEventListener('change', sync));
  sync();

  const filter = document.querySelector('[data-product-filter]');
  const countEl = document.querySelector('[data-product-count]');
  const updateCount = () => {
    if (!countEl) return;
    const n = document.querySelectorAll('[data-product-check]:checked').length;
    countEl.textContent = `${n} selected`;
  };
  filter?.addEventListener('input', () => {
    const q = filter.value.trim().toLowerCase();
    document.querySelectorAll('[data-product-row]').forEach((row) => {
      row.classList.toggle('hidden', q && !row.dataset.title.includes(q));
    });
  });
  document.querySelectorAll('[data-product-check]').forEach((el) => el.addEventListener('change', updateCount));
  updateCount();
})();
</script>
@endsection