{{--
    Full wire:ignore: Livewire must not remorph this tree while Echo/Alpine own the live UI.
    Status + whisper segments hydrate over HTTP while active (no wire:poll here).
--}}
<div
    wire:ignore
    wire:key="transcription-ui-{{ $recording->id }}-{{ $recording->transcription_status }}-{{ $recording->transcribed_at?->timestamp }}"
    x-data="transcriptionMonitor(@js([
        'statusUrl' => route('recordings.transcription-status', $recording),
        'userId' => (int) $recording->user_id,
        'initial' => $recording->transcriptionStatusPayload(),
    ]))"
    x-init="
        start();
        return () => destroy();
    "
>
    <div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
        <div>
            <flux:link href="{{ route('recordings.index') }}" wire:navigate class="text-sm">← Recordings</flux:link>
            <flux:heading size="xl" class="mt-2">{{ $recording->title }}</flux:heading>
            <div class="mt-2 flex flex-wrap items-center gap-2">
                <x-transcription-status-badge
                    :status="$recording->transcription_status"
                    :label="$recording->transcriptionStatusLabel()"
                    alpine-row="status"
                />
                <flux:text
                    class="text-xs"
                    x-show="status.driver_label"
                    x-cloak
                    x-text="status.driver_label"
                ></flux:text>
            </div>
        </div>
        <div class="flex flex-wrap items-center gap-2">
            <flux:button
                type="button"
                variant="primary"
                icon="play"
                @click="$refs.player.paused ? $refs.player.play() : $refs.player.pause()"
            >
                Play
            </flux:button>

            <flux:modal.trigger name="delete-recording">
                <flux:button type="button" variant="danger">Delete</flux:button>
            </flux:modal.trigger>

            <flux:modal name="delete-recording" class="max-w-md">
                <div class="space-y-6">
                    <div>
                        <flux:heading size="lg">Delete recording?</flux:heading>
                        <flux:text class="mt-2">
                            This permanently removes the recording and its audio file.
                        </flux:text>
                    </div>
                    <div class="flex justify-end gap-2">
                        <flux:modal.close>
                            <flux:button variant="ghost">Cancel</flux:button>
                        </flux:modal.close>
                        <flux:button type="button" variant="danger" wire:click="delete">Delete</flux:button>
                    </div>
                </div>
            </flux:modal>
        </div>
    </div>

    <flux:card class="mb-6">
        <flux:heading size="sm" class="uppercase tracking-wide text-zinc-500 dark:text-zinc-400">Audio</flux:heading>
        <audio
            x-ref="player"
            class="mt-4 w-full"
            controls
            preload="metadata"
            src="{{ route('recordings.audio', $recording) }}"
        >
            Your browser does not support audio playback.
        </audio>
    </flux:card>

    <div class="grid gap-6 lg:grid-cols-2">
        <flux:card>
            <flux:heading size="sm" class="uppercase tracking-wide text-zinc-500 dark:text-zinc-400">Metadata</flux:heading>
            <dl class="mt-4 space-y-3 text-sm">
                <div class="flex justify-between gap-4">
                    <dt><flux:text>Original file</flux:text></dt>
                    <dd class="text-right font-medium">{{ $recording->original_filename }}</dd>
                </div>
                <div class="flex justify-between gap-4">
                    <dt><flux:text>Duration</flux:text></dt>
                    <dd class="font-medium">{{ $recording->duration_formatted }}</dd>
                </div>
                <div class="flex justify-between gap-4">
                    <dt><flux:text>Artist</flux:text></dt>
                    <dd class="font-medium">{{ $recording->artist ?: '—' }}</dd>
                </div>
                <div class="flex justify-between gap-4">
                    <dt><flux:text>Album</flux:text></dt>
                    <dd class="font-medium">{{ $recording->album ?: '—' }}</dd>
                </div>
                <div class="flex justify-between gap-4">
                    <dt><flux:text>Recorded</flux:text></dt>
                    <dd class="font-medium">{{ $recording->recorded_at?->format('Y-m-d') ?: '—' }}</dd>
                </div>
                <div class="flex justify-between gap-4">
                    <dt><flux:text>Size</flux:text></dt>
                    <dd class="font-medium">{{ number_format($recording->file_size_bytes / 1024, 1) }} KB</dd>
                </div>
                <div class="flex justify-between gap-4">
                    <dt><flux:text>Uploaded</flux:text></dt>
                    <dd class="font-medium">{{ $recording->created_at?->format('Y-m-d H:i') }}</dd>
                </div>
            </dl>
        </flux:card>

        <flux:card>
            <flux:heading size="sm" class="uppercase tracking-wide text-zinc-500 dark:text-zinc-400">Transcribe</flux:heading>
            <div class="mt-4">
                <flux:button type="button" variant="primary" wire:click="startTranscription">
                    <span x-text="startButtonLabel"></span>
                </flux:button>
            </div>

            <div
                x-show="status.is_active"
                x-cloak
                class="mt-3"
            >
                <flux:button type="button" variant="outline" wire:click="cancelTranscription">
                    Stop transcription
                </flux:button>
            </div>
        </flux:card>
    </div>

    <flux:card class="mt-6">
        <div class="flex items-center justify-between gap-4">
            <flux:heading size="sm" class="uppercase tracking-wide text-zinc-500 dark:text-zinc-400">Transcript</flux:heading>
            <flux:button
                type="button"
                variant="ghost"
                size="sm"
                x-show="!status.is_active && status.has_transcript"
                x-cloak
                @click="navigator.clipboard.writeText(status.transcript || '')"
            >
                Copy
            </flux:button>
        </div>

        <div x-show="status.is_active" x-cloak class="mt-4">
            <flux:callout variant="warning" icon="arrow-path">
                <flux:callout.heading>
                    <span class="inline-flex items-center gap-2">
                        <flux:icon.loading
                            variant="micro"
                            class="size-4"
                            x-show="status.status === 'processing'"
                            x-cloak
                        />
                        <span x-text="status.progress || 'Working…'"></span>
                    </span>
                </flux:callout.heading>
                <flux:callout.text>
                    <span
                        class="tabular-nums"
                        x-show="status.status === 'processing' && Number(status.percent) > 0"
                        x-cloak
                    >
                        <span x-text="status.percent + '%'"></span>
                        ·
                    </span>
                    Elapsed <span x-text="status.elapsed_human || '0s'"></span>
                </flux:callout.text>
            </flux:callout>

            <div class="mt-3" x-show="status.status === 'processing' && Number(status.percent) > 0" x-cloak>
                <flux:progress color="amber" x-bind:value="status.percent || 0" />
            </div>

            <div
                class="mt-4 whitespace-pre-wrap text-sm leading-relaxed text-zinc-800 dark:text-zinc-100"
                x-show="status.transcript && !whisper.segments.length"
                x-text="status.transcript"
            ></div>

            <ul class="mt-3 space-y-1 text-xs text-zinc-600 dark:text-zinc-400">
                <li>
                    Engine:
                    <span class="font-medium" x-text="status.driver_label || '—'"></span>
                </li>
                <li x-show="whisper.language">
                    Detected language:
                    <span class="font-medium uppercase" x-text="whisper.language"></span>
                </li>
                <li x-show="whisper.duration">
                    Whisper duration:
                    <span class="font-medium" x-text="formatClock(whisper.duration)"></span>
                </li>
                <template x-if="status.duration_seconds">
                    <li>
                        Audio length:
                        <span class="font-medium" x-text="formatDuration(status.duration_seconds)"></span>
                        <span class="text-zinc-500">(longer files take longer)</span>
                    </li>
                </template>
                <li x-show="pollError" class="text-red-600 dark:text-red-400" x-text="pollError"></li>
            </ul>
        </div>

        <div x-show="!status.is_active && status.status === 'cancelled'" x-cloak class="mt-4">
            <flux:callout icon="stop-circle">
                <flux:callout.text>
                    Transcription stopped. Use the button above to start again.
                </flux:callout.text>
            </flux:callout>
        </div>

        <div x-show="!status.is_active && status.status === 'failed'" x-cloak class="mt-4">
            <flux:callout variant="danger" icon="exclamation-triangle">
                <flux:callout.heading>Transcription failed</flux:callout.heading>
                <flux:callout.text>
                    <span x-text="status.error || 'Check the logs and try again.'"></span>
                </flux:callout.text>
            </flux:callout>
        </div>

        <div x-show="!status.is_active && status.has_transcript" x-cloak>
            <p
                class="mt-4 whitespace-pre-wrap text-sm leading-relaxed text-zinc-800 dark:text-zinc-100"
                x-show="!whisper.segments.length"
                x-text="status.transcript"
            ></p>
            <flux:text
                class="mt-4 text-xs"
                x-show="status.transcribed_at"
                x-text="status.transcribed_at
                    ? ('Transcribed ' + formatTimestamp(status.transcribed_at)
                        + (status.transcription_duration_human ? (' · took ' + status.transcription_duration_human) : ''))
                    : ''"
            ></flux:text>
        </div>

        <div
            class="mt-4 space-y-4"
            x-show="whisper.language || whisper.segments.length || whisper.logprobs.length"
        >
            <div
                class="flex flex-wrap gap-2 text-xs text-zinc-600 dark:text-zinc-400"
                x-show="!status.is_active && (whisper.language || whisper.duration)"
            >
                <span x-show="whisper.language">
                    Language
                    <span class="font-medium uppercase text-zinc-800 dark:text-zinc-100" x-text="whisper.language"></span>
                </span>
                <span x-show="whisper.duration">
                    · Duration
                    <span class="font-medium text-zinc-800 dark:text-zinc-100" x-text="formatClock(whisper.duration)"></span>
                </span>
            </div>

            <template x-for="(segment, index) in whisper.segments" :key="segmentDomKey(segment, index)">
                <div class="rounded-lg border border-zinc-200 p-3 dark:border-zinc-700">
                    <div class="flex flex-wrap items-baseline justify-between gap-2 text-xs text-zinc-500 dark:text-zinc-400">
                        <span class="tabular-nums">
                            <span x-text="formatClock(segment.start)"></span>
                            –
                            <span x-text="formatClock(segment.end)"></span>
                        </span>
                        <span x-show="segment.avg_logprob != null">
                            avg logprob
                            <span class="font-medium text-zinc-700 dark:text-zinc-200" x-text="Number(segment.avg_logprob).toFixed(3)"></span>
                        </span>
                    </div>

                    <p class="mt-2 text-sm leading-relaxed text-zinc-800 dark:text-zinc-100" x-text="segment.text"></p>

                    <div class="mt-2 flex flex-wrap gap-1" x-show="segment.words && segment.words.length">
                        <template x-for="(word, wordIndex) in (segment.words || [])" :key="wordIndex">
                            <button
                                type="button"
                                class="rounded px-1.5 py-0.5 text-xs tabular-nums"
                                :class="wordConfidenceClass(word.probability)"
                                :title="(word.start != null ? formatClock(word.start) : '') + (word.probability != null ? (' · ' + Math.round(word.probability * 100) + '%') : '')"
                                @click="seekTo(word.start)"
                                x-text="word.word"
                            ></button>
                        </template>
                    </div>

                    <details class="mt-2 text-xs text-zinc-500 dark:text-zinc-400" x-show="segment.tokens && segment.tokens.length">
                        <summary class="cursor-pointer select-none">Tokens</summary>
                        <p class="mt-1 break-all font-mono" x-text="(segment.tokens || []).join(' ')"></p>
                    </details>

                    <p class="mt-1 text-xs text-zinc-500 dark:text-zinc-400" x-show="segment.no_speech_prob != null">
                        no-speech
                        <span class="font-medium" x-text="Number(segment.no_speech_prob).toFixed(3)"></span>
                        <span x-show="segment.compression_ratio != null">
                            · compression
                            <span class="font-medium" x-text="Number(segment.compression_ratio).toFixed(2)"></span>
                        </span>
                    </p>
                </div>
            </template>

            <details class="text-xs text-zinc-500 dark:text-zinc-400" x-show="whisper.logprobs.length">
                <summary class="cursor-pointer select-none">Token logprobs</summary>
                <ul class="mt-2 space-y-1 font-mono">
                    <template x-for="(row, index) in whisper.logprobs" :key="index">
                        <li>
                            <span x-text="row.token || '—'"></span>
                            <span x-show="row.logprob != null" x-text="' ' + Number(row.logprob).toFixed(3)"></span>
                        </li>
                    </template>
                </ul>
            </details>
        </div>

        <flux:text
            x-show="!status.is_active && status.status !== 'failed' && status.status !== 'cancelled' && !status.has_transcript"
            x-cloak
            class="mt-4"
        >
            No transcript yet. Transcription starts automatically after upload, or use the button above.
        </flux:text>
    </flux:card>
</div>