@extends('layouts.app')

@section('content')
@php use Illuminate\Support\Carbon; @endphp

@php
    $toggleDirection = fn (string $column) => $sort === $column && $direction === 'asc' ? 'desc' : 'asc';
    $sortUrl = fn (string $column) => route('albums.index', array_merge(request()->query(), ['sort' => $column, 'direction' => $toggleDirection($column)]));
    $sortIndicator = function (string $column) use ($sort, $direction) {
        if ($sort !== $column) {
            return '↕';
        }

        return $direction === 'asc' ? '↑' : '↓';
    };
@endphp

<div style="max-width:1240px; margin:0 auto; padding:32px 24px 40px;">
    <section style="background:var(--sca-yellow); color:var(--sca-black); border:1px solid var(--sca-black); padding:24px; margin-bottom:20px;">
        <div style="display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap;">
            <div>
                <div style="font-size:12px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; margin-bottom:10px;">Collection management</div>
                <h1 style="font-size:38px; line-height:1; margin:0 0 10px; font-family:var(--sca-font-display);">Album listing</h1>
                <p style="margin:0; max-width:700px; font-size:15px; line-height:1.6;">Browse, filter, and update the collection using the Secret Chord Analogue brand palette with strong black, white, and yellow contrast.</p>
            </div>

            <a href="{{ route('albums.create') }}" class="sca-btn sca-btn-primary" style="min-width:160px;">
                Add album
            </a>
        </div>
    </section>

    <section class="sca-panel" style="padding:20px; margin-bottom:20px;">
        <form method="GET" style="display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px; align-items:end;">
            <label style="display:flex; flex-direction:column; gap:6px; font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;">
                View
                <select name="filter" style="min-height:44px; padding:10px 12px;">
                    <option value="all" @selected(($filter ?? 'all') === 'all')>All albums</option>
                    <option value="restored" @selected(($filter ?? '') === 'restored')>Restored</option>
                    <option value="never_restored" @selected(($filter ?? '') === 'never_restored')>Never restored</option>
                    <option value="recently_restored" @selected(($filter ?? '') === 'recently_restored')>Recently restored</option>
                </select>
            </label>

            <label style="display:flex; flex-direction:column; gap:6px; font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;">
                Genre
                <select name="genre" style="min-height:44px; padding:10px 12px;">
                    <option value="">All genres</option>
                    @foreach($genres as $genreOption)
                        <option value="{{ $genreOption }}" @selected(($genre ?? '') === $genreOption)>{{ $genreOption }}</option>
                    @endforeach
                </select>
            </label>

            <label style="display:flex; flex-direction:column; gap:6px; font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;">
                Decade
                <select name="decade_year" style="min-height:44px; padding:10px 12px;">
                    <option value="">All decades</option>
                    @foreach($decadeYears as $year)
                        <option value="{{ $year }}" @selected((string) ($decadeYear ?? '') === (string) $year)>{{ $year }}s</option>
                    @endforeach
                </select>
            </label>

            <label style="display:flex; flex-direction:column; gap:6px; font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;">
                Acquired
                <select name="acquisition_type" style="min-height:44px; padding:10px 12px;">
                    <option value="">All sources</option>
                    <option value="new" @selected(($acquisitionType ?? '') === 'new')>New</option>
                    <option value="second_hand" @selected(($acquisitionType ?? '') === 'second_hand')>Second hand</option>
                </select>
            </label>

            <label style="display:flex; flex-direction:column; gap:6px; font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;">
                Digitised
                <select name="digitised" style="min-height:44px; padding:10px 12px;">
                    <option value="">All</option>
                    <option value="y" @selected(($digitisedFilter ?? '') === 'y')>Digitised</option>
                    <option value="n" @selected(($digitisedFilter ?? '') === 'n')>Not digitised</option>
                </select>
            </label>

            <div style="display:grid; grid-template-columns:minmax(200px, 1fr) auto auto; gap:10px; align-items:end;">
                <label style="display:flex; flex-direction:column; gap:6px; font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;">
                    Lookup
                    <input type="text" name="lookup" value="{{ $lookup ?? '' }}" placeholder="Search artist or album" style="min-height:44px; padding:10px 12px;">
                </label>
                <button type="submit" class="sca-btn sca-btn-secondary" style="min-width:140px;">Apply filters</button>
                <a href="{{ route('albums.index') }}" class="sca-btn" style="min-width:120px;">Reset</a>
            </div>
        </form>
    </section>

    <section class="sca-panel" style="padding:0; overflow:hidden;">
        <div style="display:flex; justify-content:space-between; gap:12px; align-items:center; padding:14px 18px; background:var(--sca-black); color:var(--sca-white); flex-wrap:wrap;">
            <div style="font-size:12px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;">{{ $albums->total() }} album{{ $albums->total() === 1 ? '' : 's' }}</div>
            <div style="font-size:12px; letter-spacing:0.08em; text-transform:uppercase;">Sorted by {{ ucfirst($sort) }} · {{ strtoupper($direction) }}@if(($lookup ?? '') !== '') · Lookup: {{ $lookup }}@endif</div>
        </div>

        <div style="overflow-x:auto;">
            <table style="width:100%; min-width:980px; border-collapse:collapse; font-size:14px;">
                <thead>
                    <tr style="background:#fff7df;">
                        <th style="padding:14px 16px;"><a href="{{ $sortUrl('artist') }}" style="text-decoration:none; font-weight:700;">Artist {{ $sortIndicator('artist') }}</a></th>
                        <th style="padding:14px 16px;"><a href="{{ $sortUrl('title') }}" style="text-decoration:none; font-weight:700;">Title {{ $sortIndicator('title') }}</a></th>
                        <th style="padding:14px 16px;">Format</th>
                        <th style="padding:14px 16px;">Location</th>
                        <th style="padding:14px 16px;"><a href="{{ $sortUrl('digitised') }}" style="text-decoration:none; font-weight:700;">Digitised {{ $sortIndicator('digitised') }}</a></th>
                        <th style="padding:14px 16px;"><a href="{{ $sortUrl('genre') }}" style="text-decoration:none; font-weight:700;">Genre {{ $sortIndicator('genre') }}</a></th>
                        <th style="padding:14px 16px;"><a href="{{ $sortUrl('decade') }}" style="text-decoration:none; font-weight:700;">Decade {{ $sortIndicator('decade') }}</a></th>
                        <th style="padding:14px 16px;">Needs Treatment</th>
                        <th style="padding:14px 16px;"><a href="{{ $sortUrl('restored') }}" style="text-decoration:none; font-weight:700;">Last treated {{ $sortIndicator('restored') }}</a></th>
                        <th style="padding:14px 16px; text-align:right;">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($albums as $album)
                        <tr style="background:{{ $loop->odd ? 'var(--sca-white)' : '#fffdf7' }};">
                            <td style="padding:14px 16px; vertical-align:top; font-weight:700;">{{ $album->artist?->name }}</td>
                            <td style="padding:14px 16px; vertical-align:top;">
                                <div style="font-weight:700; margin-bottom:4px;">{{ $album->title }}</div>
                                @if($album->edition_pressing)
                                    <div style="font-size:12px; color:#4a4a4a;">{{ $album->edition_pressing }}</div>
                                @endif
                            </td>
                            <td style="padding:14px 16px; vertical-align:top;">{{ $album->format_size }}</td>
                            <td style="padding:14px 16px; vertical-align:top;">{{ $album->storage_location }}</td>
                            <td style="padding:14px 16px; vertical-align:top;">
                                <span style="display:inline-flex; align-items:center; min-height:28px; padding:4px 10px; border:1px solid var(--sca-black); background:{{ $album->digitised ? 'var(--sca-yellow)' : 'var(--sca-white)' }}; font-weight:700;">
                                    {{ $album->digitised ? 'Yes' : 'No' }}
                                </span>
                            </td>
                            <td style="padding:14px 16px; vertical-align:top;">{{ $album->music_genre ?: '—' }}</td>
                            <td style="padding:14px 16px; vertical-align:top;">{{ $album->decade_year ? $album->decade_year.'s' : '—' }}</td>
                            <td style="padding:14px 16px; vertical-align:top;">
                                <span class="sca-badge {{ $album->needs_treatment ? 'sca-badge-accent' : '' }}">
                                    {{ $album->needs_treatment ? 'Yes' : 'No' }}
                                </span>
                            </td>
                            <td style="padding:14px 16px; vertical-align:top;">{{ $album->last_treated_on ? Carbon::parse($album->last_treated_on)->format('Y-m-d') : '—' }}</td>
                            <td style="padding:14px 16px; vertical-align:top; text-align:right;">
                                <a href="{{ route('albums.edit', $album) }}" class="sca-btn" style="min-width:96px;">Edit</a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="10" style="padding:28px 16px; text-align:center;">No albums matched the current filters.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </section>

    <div style="margin-top:20px;">
        {{ $albums->links() }}
    </div>
</div>
@endsection