@php
    $selectedCategories = $preference->categories ?? [];
    $keywords = implode(', ', $preference->keywords ?? []);
@endphp

<x-app-shell title="Job Alert Preferences" max="max-w-4xl">
    <section class="surface p-5 sm:p-7">
        <div class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
            <div>
                <p class="eyebrow">Job alerts</p>
                <h1 class="page-title mt-2">Control your matched-job emails.</h1>
                <p class="body-copy mt-3 max-w-2xl">Choose how often alerts are sent, the minimum match quality, and the role categories or keywords you care about.</p>
            </div>
            <a class="btn-secondary shrink-0" href="{{ route('applicant.dashboard') }}">Dashboard</a>
        </div>
    </section>

    @if (session('status'))
        <div class="alert-success mt-5">{{ session('status') }}</div>
    @endif

    @if ($errors->any())
        <div class="alert-error mt-5">
            <p class="font-bold">Please fix the alert settings.</p>
            <ul class="mt-2 list-disc space-y-1 pl-5">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form method="POST" action="{{ route('job-alerts.preferences.update') }}" class="surface mt-5 grid gap-5 p-5 sm:p-6">
        @csrf
        @method('PATCH')

        <label class="option-tile">
            <input class="option-input" type="checkbox" name="enabled" value="1" @checked($preference->enabled)>
            <span>Send matched-job email alerts</span>
        </label>

        <div class="grid gap-4 sm:grid-cols-2">
            <label>
                <span class="field-label">Frequency</span>
                <select class="field-input" name="frequency" required>
                    <option value="daily" @selected($preference->frequency === 'daily')>Daily</option>
                    <option value="weekly" @selected($preference->frequency === 'weekly')>Weekly</option>
                </select>
            </label>

            <label>
                <span class="field-label">Minimum match score</span>
                <input class="field-input" type="number" min="0" max="100" name="minimum_match_score" value="{{ old('minimum_match_score', $preference->minimum_match_score) }}" required>
            </label>
        </div>

        <div>
            <p class="field-label">Categories</p>
            <div class="mt-3 grid gap-2 sm:grid-cols-2">
                @forelse ($categoryOptions as $category)
                    <label class="option-tile">
                        <input class="option-input" type="checkbox" name="categories[]" value="{{ $category }}" @checked(in_array($category, old('categories', $selectedCategories), true))>
                        <span>{{ str($category)->replace('-', ' ')->headline() }}</span>
                    </label>
                @empty
                    <p class="muted-copy">No active job categories are available yet. Alerts will use all categories.</p>
                @endforelse
            </div>
        </div>

        <label>
            <span class="field-label">Keywords</span>
            <textarea class="field-textarea" name="keywords" placeholder="Figma, customer success, Laravel, writing">{{ old('keywords', $keywords) }}</textarea>
            <span class="muted-copy mt-2 block">Separate keywords with commas or new lines.</span>
        </label>

        <button class="btn-primary w-full sm:w-auto" type="submit">Save alert preferences</button>
    </form>
</x-app-shell>