@props([])

{{--
| The release editor's fields — one definition, two hosts.
|
| The standalone page (versions/form.blade.php) and the upload modal on the
| index both render this, so a field can never exist on one and not the other.
| Plain named inputs with server-rendered values: the page submits normally, and
| the modal reads the same fields out of the form with FormData.
|
| Requires in scope: $version (a UpdateVersion, possibly unsaved), $errorFor
| (a closure returning an Alpine expression or null — the modal shows XHR
| validation errors, the page shows @error output).
--}}

@php
    $old = fn (string $field, $fallback = null) => old($field, $version->$field ?? $fallback);

    $products = ['cms' => 'TaxPilot CMS', 'ai' => 'TaxPilot AI'];
    $channels = [
        'stable' => ['Stable', 'Every installation'],
        'beta'   => ['Beta', 'Opt-in installs only'],
    ];
@endphp

<div class="space-y-4">
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
        <div>
            <label for="version-number" class="filter-label">Version <span class="text-red-500">*</span></label>
            <input id="version-number" name="version" type="text" required maxlength="50"
                   value="{{ $old('version') }}" x-ref="versionInput"
                   placeholder="1.3.2" inputmode="decimal"
                   class="filter-input font-mono @error('version') !border-red-400 @enderror">
            <p class="mt-1.5 text-[11px] text-slate-500 dark:text-slate-400">
                Semantic versioning — <code class="font-mono">1.3.2</code> or <code class="font-mono">1.3.2-beta</code>.
            </p>
            @error('version')<p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>@enderror
            <p x-show="errorFor('version')" x-cloak class="mt-1 text-xs text-red-600 dark:text-red-400" x-text="errorFor('version')"></p>
        </div>

        <div>
            <label for="version-name" class="filter-label">Release name</label>
            <input id="version-name" name="release_name" type="text" maxlength="255"
                   value="{{ $old('release_name') }}" placeholder="Autumn Release"
                   class="filter-input @error('release_name') !border-red-400 @enderror">
            <p class="mt-1.5 text-[11px] text-slate-500 dark:text-slate-400">Optional. Shown beside the number.</p>
            @error('release_name')<p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>@enderror
        </div>
    </div>

    <div>
        <span class="filter-label">Product <span class="text-red-500">*</span></span>
        <div class="mt-1.5 grid grid-cols-2 gap-2">
            @foreach ($products as $value => $label)
                <label class="flex cursor-pointer items-center gap-2.5 rounded-xl border border-slate-200 p-2.5
                              transition hover:border-brand-300 has-[:checked]:border-brand-500
                              has-[:checked]:bg-brand-50 has-[:checked]:ring-1 has-[:checked]:ring-brand-500
                              dark:border-white/[0.08] dark:hover:border-brand-500/50
                              dark:has-[:checked]:border-brand-500 dark:has-[:checked]:bg-brand-500/10">
                    <input type="radio" name="product" value="{{ $value }}" class="peer sr-only"
                           @checked($old('product', 'cms') === $value)>
                    <span class="grid size-7 shrink-0 place-items-center rounded-lg bg-slate-100 text-slate-500
                                 peer-checked:bg-brand-600 peer-checked:text-white
                                 dark:bg-white/5 dark:text-slate-300">
                        <x-icon name="package" class="size-3.5" />
                    </span>
                    <span class="text-xs font-semibold text-slate-800 dark:text-slate-100">{{ $label }}</span>
                </label>
            @endforeach
        </div>
        <p class="mt-1.5 text-[11px] text-slate-500 dark:text-slate-400">
            An installation only ever receives releases of the product it asks for.
        </p>
        @error('product')<p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>@enderror
    </div>

    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
        <div>
            <span class="filter-label">Channel <span class="text-red-500">*</span></span>
            <div class="mt-1.5 grid grid-cols-2 gap-2">
                @foreach ($channels as $value => [$label, $description])
                    <label class="flex cursor-pointer flex-col rounded-xl border border-slate-200 p-2.5
                                  transition hover:border-brand-300 has-[:checked]:border-brand-500
                                  has-[:checked]:bg-brand-50 has-[:checked]:ring-1 has-[:checked]:ring-brand-500
                                  dark:border-white/[0.08] dark:hover:border-brand-500/50
                                  dark:has-[:checked]:border-brand-500 dark:has-[:checked]:bg-brand-500/10">
                        <input type="radio" name="channel" value="{{ $value }}" class="peer sr-only"
                               @checked($old('channel', 'stable') === $value)>
                        <span class="text-xs font-semibold text-slate-800 dark:text-slate-100">{{ $label }}</span>
                        <span class="mt-0.5 text-[10px] leading-tight text-slate-500 dark:text-slate-400">{{ $description }}</span>
                    </label>
                @endforeach
            </div>
            @error('channel')<p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>@enderror
        </div>

        <div class="grid grid-cols-2 gap-4">
            <div>
                <label for="version-date" class="filter-label">Release date</label>
                <input id="version-date" name="release_date" type="date"
                       value="{{ $old('release_date') ? \Illuminate\Support\Carbon::parse($old('release_date'))->toDateString() : '' }}"
                       class="filter-input @error('release_date') !border-red-400 @enderror">
                @error('release_date')<p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>@enderror
            </div>

            <div>
                <label for="version-min" class="filter-label">Min supported</label>
                <input id="version-min" name="min_supported_version" type="text" maxlength="50"
                       value="{{ $old('min_supported_version') }}" placeholder="1.0.0"
                       class="filter-input font-mono @error('min_supported_version') !border-red-400 @enderror">
                @error('min_supported_version')<p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>@enderror
                <p x-show="errorFor('min_supported_version')" x-cloak class="mt-1 text-xs text-red-600 dark:text-red-400"
                   x-text="errorFor('min_supported_version')"></p>
            </div>
        </div>
    </div>

    {{-- package_type is a select the request still validates, but attachPackage
         overwrites it by reading the archive. It stays here so a package-less
         draft has a value, with the truth stated rather than hidden. --}}
    <div>
        <label for="version-type" class="filter-label">Package type <span class="text-red-500">*</span></label>
        <select id="version-type" name="package_type" class="filter-select mt-1 w-full !py-2">
            @foreach (['full' => 'Full package', 'patch' => 'Patch'] as $value => $label)
                <option value="{{ $value }}" @selected($old('package_type', 'full') === $value)>{{ $label }}</option>
            @endforeach
        </select>
        <p class="mt-1.5 text-[11px] text-slate-500 dark:text-slate-400">
            Re-detected from inside the archive on upload — what is in the ZIP wins.
        </p>
        @error('package_type')<p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>@enderror
    </div>

    <div>
        <label for="version-notes" class="filter-label">Release notes</label>
        <textarea id="version-notes" name="release_notes" rows="7" maxlength="20000"
                  placeholder="## New Features&#10;- …&#10;&#10;## Bug Fixes&#10;- …&#10;&#10;## Security&#10;- …"
                  class="filter-input font-mono !text-[12px] @error('release_notes') !border-red-400 @enderror">{{ $old('release_notes') }}</textarea>
        <p class="mt-1.5 text-[11px] text-slate-500 dark:text-slate-400">
            Markdown. Group into New Features / Improvements / Bug Fixes / Security Fixes / Database Changes.
        </p>
        @error('release_notes')<p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>@enderror
    </div>

    <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
        <label class="flex cursor-pointer items-start gap-3 rounded-xl border border-slate-200 p-3 transition
                      hover:border-slate-300 has-[:checked]:border-red-400 has-[:checked]:bg-red-50/60
                      dark:border-white/[0.08] dark:hover:border-white/15
                      dark:has-[:checked]:border-red-500/40 dark:has-[:checked]:bg-red-500/10">
            <input type="checkbox" name="force_update" value="1" class="checkbox mt-0.5" @checked($old('force_update'))>
            <span class="min-w-0">
                <span class="block text-xs font-semibold text-slate-800 dark:text-slate-100">Force update</span>
                <span class="block text-[11px] leading-tight text-slate-500 dark:text-slate-400">
                    Blocks the CMS until the update is applied.
                </span>
            </span>
        </label>

        <label class="flex cursor-pointer items-start gap-3 rounded-xl border border-slate-200 p-3 transition
                      hover:border-slate-300 has-[:checked]:border-amber-400 has-[:checked]:bg-amber-50/60
                      dark:border-white/[0.08] dark:hover:border-white/15
                      dark:has-[:checked]:border-amber-500/40 dark:has-[:checked]:bg-amber-500/10">
            <input type="checkbox" name="security_update" value="1" class="checkbox mt-0.5" @checked($old('security_update'))>
            <span class="min-w-0">
                <span class="block text-xs font-semibold text-slate-800 dark:text-slate-100">Security update</span>
                <span class="block text-[11px] leading-tight text-slate-500 dark:text-slate-400">
                    Marks the release as a priority patch.
                </span>
            </span>
        </label>
    </div>

    {{-- ── Package ─────────────────────────────────────────────────── --}}
    <div>
        <span class="filter-label">Update package (ZIP)</span>

        @if ($version->exists && $version->hasPackage())
            <div class="mt-1.5 rounded-xl border border-slate-200 bg-slate-50 p-3 dark:border-white/[0.08] dark:bg-white/[0.03]">
                <p class="flex flex-wrap items-center gap-2 text-xs text-slate-700 dark:text-slate-200">
                    <x-icon name="package" class="size-3.5 shrink-0 text-slate-400" />
                    <span class="font-mono">{{ $version->downloadName() }}</span>
                    <span class="text-slate-400">·</span>
                    <span>{{ number_format($version->file_size / 1048576, 1) }} MB</span>
                </p>
                <p class="mt-1 break-all font-mono text-[10px] text-slate-500 dark:text-slate-400">
                    sha256: {{ $version->checksum_sha256 }}
                </p>
                <p class="mt-2 text-[11px] text-amber-600 dark:text-amber-400">
                    Re-uploading replaces this file, clears its signature and returns the release to draft.
                </p>
            </div>
        @endif

        {{-- Drag and drop, with a real file input behind it: the input is what
             submits, the dropzone only ever sets its files.

             No nested x-data here on purpose — x-ref registers on the closest
             component root, and pickFile() lives on the page component. A local
             scope would hide the input from the very method that fills it. --}}
        <label @dragover.prevent="dragging = true"
               @dragleave.prevent="dragging = false"
               @drop.prevent="dragging = false; pickFile($event.dataTransfer?.files)"
               :class="dragging && '!border-brand-500 !bg-brand-50 dark:!bg-brand-500/10'"
               class="mt-1.5 flex cursor-pointer flex-col items-center justify-center rounded-xl border-2
                      border-dashed border-slate-200 px-4 py-6 text-center transition
                      hover:border-brand-300 hover:bg-slate-50
                      dark:border-white/[0.12] dark:hover:border-brand-500/50 dark:hover:bg-white/[0.03]">

            <input type="file" name="package" accept=".zip,application/zip" class="sr-only"
                   x-ref="packageInput" @change="pickFile($event.target.files)">

            <span class="grid size-10 place-items-center rounded-xl bg-brand-50 text-brand-600
                         dark:bg-brand-500/10 dark:text-brand-400" aria-hidden="true">
                <x-icon name="cloud-upload" class="size-5" />
            </span>

            <span x-show="! fileName" class="mt-2.5 block">
                <span class="block text-xs font-semibold text-slate-700 dark:text-slate-200">
                    Drop the ZIP here, or click to choose
                </span>
                <span class="mt-0.5 block text-[11px] text-slate-500 dark:text-slate-400">
                    Up to {{ config('updates.max_package_mb', 512) }} MB. The SHA-256 and size are computed on upload.
                </span>
            </span>

            <span x-show="fileName" x-cloak class="mt-2.5 block">
                <span class="block font-mono text-xs font-semibold text-slate-800 dark:text-slate-100" x-text="fileName"></span>
                <span class="mt-0.5 block text-[11px] text-slate-500 dark:text-slate-400" x-text="fileSize"></span>
                <button type="button" @click.prevent.stop="clearFile()"
                        class="mt-1.5 text-[11px] font-semibold text-red-600 hover:underline dark:text-red-400">
                    Remove
                </button>
            </span>
        </label>

        @error('package')<p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>@enderror
        <p x-show="errorFor('package')" x-cloak class="mt-1 text-xs text-red-600 dark:text-red-400" x-text="errorFor('package')"></p>

        <p class="mt-2 flex items-start gap-1.5 text-[11px] leading-relaxed text-slate-500 dark:text-slate-400">
            <x-icon name="lock" class="size-3.5 shrink-0 translate-y-px" />
            A package must also be signed offline with <code class="font-mono">updates:sign</code> before it can be
            published — clients reject unsigned releases.
        </p>
    </div>
</div>