@extends('layouts.app')

@section('title', 'Upload recording')

@section('content')
    <div class="mb-8">
        <h1 class="text-2xl font-semibold tracking-tight">Upload recordings</h1>
        <p class="mt-1 text-sm text-stone-600 dark:text-zinc-400">
            Drop one or many pocket-recorder files. Embedded metadata is extracted when available.
            Duplicate files (same name and size, or identical content) are skipped.
        </p>
    </div>

    <form
        method="POST"
        action="{{ route('recordings.store') }}"
        enctype="multipart/form-data"
        x-data="uploadDropzone(@js(['existingFingerprints' => $existingFingerprints ?? []]))"
        @submit="ensureFilesSelected($event)"
        class="max-w-2xl space-y-6 rounded border border-stone-200 bg-white p-6 shadow-sm dark:border-zinc-700 dark:bg-zinc-800"
    >
        @csrf

        <div>
            <label class="block text-sm font-medium text-stone-700 dark:text-zinc-200">Audio files</label>

            <div
                @dragenter.prevent="dragging = true"
                @dragover.prevent="dragging = true"
                @dragleave.prevent="dragging = false"
                @drop.prevent="onDrop($event)"
                @click="$refs.fileInput.click()"
                :class="dragging ? 'border-teal-600 bg-teal-50 dark:bg-teal-950/40' : 'border-stone-300 bg-stone-50 hover:border-teal-500 hover:bg-teal-50/40 dark:border-zinc-600 dark:bg-zinc-900/50 dark:hover:border-teal-500 dark:hover:bg-teal-950/30'"
                class="mt-2 flex cursor-pointer flex-col items-center justify-center rounded border-2 border-dashed px-6 py-12 text-center transition-colors"
            >
                <p class="text-sm font-medium text-stone-800 dark:text-zinc-100">Drop audio files here</p>
                <p class="mt-1 text-sm text-stone-600 dark:text-zinc-400">or click to browse</p>
                <p class="mt-3 text-xs text-stone-500 dark:text-zinc-500">MP3, WAV, OGG, FLAC, M4A, AAC, WebM, WMA, or AIFF · max 2 GB each · up to 50 files</p>
            </div>

            <input
                x-ref="fileInput"
                id="audio"
                type="file"
                name="audio[]"
                accept=".mp3,.wav,.ogg,.oga,.flac,.m4a,.mp4,.aac,.webm,.wma,.aiff,.aif,audio/*"
                multiple
                class="sr-only"
                @change="onBrowse($event)"
            >
        </div>

        <div x-show="files.length > 0" x-cloak class="space-y-2">
            <div class="flex items-center justify-between gap-3">
                <p class="text-sm font-medium text-stone-700 dark:text-zinc-200">
                    <span x-text="files.length"></span>
                    <span x-text="files.length === 1 ? 'file selected' : 'files selected'"></span>
                </p>
                <button type="button" @click="clearFiles()" class="text-sm text-stone-600 dark:text-zinc-400 hover:underline dark:text-zinc-400">
                    Clear all
                </button>
            </div>

            <ul class="divide-y divide-stone-100 rounded border border-stone-200 dark:divide-zinc-700 dark:border-zinc-700">
                <template x-for="(file, index) in files" :key="fileListKey(file, index)">
                    <li class="flex items-center justify-between gap-3 px-3 py-2 text-sm">
                        <div class="min-w-0">
                            <p class="truncate font-medium text-stone-800 dark:text-zinc-100" x-text="file.name"></p>
                            <p class="text-xs text-stone-500 dark:text-zinc-400" x-text="formatSize(file.size)"></p>
                        </div>
                        <button
                            type="button"
                            @click="removeFile(index)"
                            class="shrink-0 text-stone-500 hover:text-red-700 dark:text-zinc-400 dark:hover:text-red-400"
                        >
                            Remove
                        </button>
                    </li>
                </template>
            </ul>
        </div>

        <div x-show="files.length === 1" x-cloak>
            <label for="title" class="block text-sm font-medium text-stone-700 dark:text-zinc-200">Title (optional)</label>
            <input
                id="title"
                type="text"
                name="title"
                value="{{ old('title') }}"
                placeholder="Leave blank to use embedded title or filename"
                class="mt-2 w-full rounded border border-stone-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-teal-600 focus:outline-none focus:ring-1 focus:ring-teal-600 dark:border-zinc-600 dark:bg-zinc-900 dark:text-zinc-100"
            >
        </div>

        <p x-show="notice" x-cloak class="text-sm text-amber-800 dark:text-amber-300" x-text="notice"></p>
        <p x-show="error" x-cloak class="text-sm text-red-700 dark:text-red-300" x-text="error"></p>

        <div class="flex items-center gap-3">
            <button
                type="submit"
                :disabled="files.length === 0 || uploading"
                class="rounded bg-teal-700 px-4 py-2 text-sm font-medium text-white hover:bg-teal-800 disabled:cursor-not-allowed disabled:opacity-50"
            >
                <span x-text="uploadLabel"></span>
            </button>
            <a href="{{ route('recordings.index') }}" class="text-sm text-stone-600 dark:text-zinc-400 hover:underline dark:text-zinc-400">Cancel</a>
        </div>
    </form>
@endsection