@extends('layouts.app')

@section('title', 'Recordings')

@section('content')
    <div class="mb-8 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
        <div>
            <h1 class="text-2xl font-semibold tracking-tight">Recordings</h1>
            <p class="mt-1 text-sm text-stone-600">Manage pocket-recorder audio and transcripts.</p>
        </div>
        <form method="GET" action="{{ route('recordings.index') }}" class="flex gap-2">
            <input
                type="search"
                name="q"
                value="{{ $search ?? '' }}"
                placeholder="Search title, artist, transcript…"
                class="w-full min-w-[16rem] 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"
            >
            <button type="submit" class="rounded border border-stone-300 bg-white px-3 py-2 text-sm hover:bg-stone-50">
                Search
            </button>
        </form>
    </div>

    @if ($recordings->isEmpty())
        <div class="rounded border border-dashed border-stone-300 bg-white px-6 py-16 text-center">
            <p class="text-stone-600">No recordings yet.</p>
            <a href="{{ route('recordings.create') }}" class="mt-4 inline-block text-sm font-medium text-teal-700 hover:underline">
                Upload your first MP3
            </a>
        </div>
    @else
        <div class="overflow-hidden rounded border border-stone-200 bg-white shadow-sm">
            <table class="min-w-full divide-y divide-stone-200 text-sm">
                <thead class="bg-stone-50 text-left text-xs font-medium uppercase tracking-wide text-stone-500">
                    <tr>
                        <th class="px-4 py-3">Title</th>
                        <th class="px-4 py-3">Duration</th>
                        <th class="px-4 py-3">Status</th>
                        <th class="px-4 py-3">Uploaded</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-stone-100">
                    @foreach ($recordings as $recording)
                        <tr class="hover:bg-stone-50">
                            <td class="px-4 py-3">
                                <a href="{{ route('recordings.show', $recording) }}" class="font-medium text-teal-800 hover:underline">
                                    {{ $recording->title }}
                                </a>
                                @if ($recording->artist)
                                    <div class="text-xs text-stone-500">{{ $recording->artist }}</div>
                                @endif
                                @if ($snippet = $recording->transcriptSnippet($search ?: null))
                                    <p class="mt-1 max-w-xl text-xs leading-relaxed text-stone-500">
                                        {{ $snippet }}
                                    </p>
                                @endif
                            </td>
                            <td class="px-4 py-3 text-stone-600">{{ $recording->duration_formatted }}</td>
                            <td class="px-4 py-3">
                                @include('recordings.partials.status-badge', ['status' => $recording->transcription_status])
                                @if ($recording->isTranscribing() && $recording->transcription_progress)
                                    <div class="mt-1 max-w-[14rem] truncate text-xs text-amber-700" title="{{ $recording->transcription_progress }}">
                                        {{ $recording->transcription_percent ? $recording->transcription_percent.'% · ' : '' }}{{ $recording->transcription_progress }}
                                    </div>
                                @endif
                            </td>
                            <td class="px-4 py-3 text-stone-600">{{ $recording->created_at?->format('Y-m-d H:i') }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <div class="mt-6">
            {{ $recordings->links() }}
        </div>
    @endif
@endsection