@extends('layouts.app')

@section('title', __('patients::messages.patients.title'))

@php
    use App\Modules\Patients\Enums\Gender;
    use App\Modules\Patients\Models\Patient;

    /*
     | Metrics are counted here rather than in the controller, deliberately.
     |
     | The controller is shared with the API vertical and its contract is
     | settled; the brief was a redesign that leaves the backend alone. The
     | dashboard already establishes the same pattern for read-only display
     | counts, and the branch scope applies through the model either way.
     |
     | Skipped on a *filter* request, not on every partial one.
     |
     | Filtering re-renders this view on every keystroke, and these four counts
     | do not change while somebody types — recomputing them would put four
     | queries behind each letter, and the cards sit outside the region a filter
     | replaces anyway.
     |
     | A navigation is the opposite case: the whole of <main> is being replaced,
     | so leaving the cards out means arriving at the screen without them and
     | having to reload the page to see them.
     */
    $showMetrics = \App\Support\Http\PartialRequest::needsFullContent();

    if ($showMetrics) {
        $totalPatients = Patient::query()->count();
        $newThisMonth = Patient::query()->where('registered_at', '>=', now()->startOfMonth())->count();
        $malePatients = Patient::query()->where('gender', Gender::Male->value)->count();
        $femalePatients = Patient::query()->where('gender', Gender::Female->value)->count();

        $pct = static fn (int $part): int => $totalPatients > 0 ? (int) round($part / $totalPatients * 100) : 0;
    }

@endphp

@section('content')
    {{-- ── Page head ──────────────────────────────────────────────────────── --}}
    <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-4">
        <div>
            <h1 class="px-title">{{ __('patients::messages.patients.title') }}</h1>
            <p class="px-subtitle">{{ __('patients::messages.patients.subtitle') }}</p>
        </div>

        @can('create', Patient::class)
            <a href="{{ route('patients.create') }}" class="btn px-btn-primary d-inline-flex align-items-center gap-2">
                <i class="bi bi-plus-lg" aria-hidden="true"></i>
                {{ __('patients::messages.patients.register') }}
            </a>
        @endcan
    </div>

    {{-- ── Metrics ────────────────────────────────────────────────────────── --}}
    @if ($showMetrics)
        <div class="px-metrics">
            <div class="px-metric px-metric--violet">
                <span class="px-metric__icon"><i class="bi bi-people-fill" aria-hidden="true"></i></span>
                <div class="min-w-0">
                    <p class="px-metric__label">{{ __('patients::messages.patients.total') }}</p>
                    <p class="px-metric__value">{{ number_format($totalPatients) }}</p>
                    <p class="px-metric__trend px-metric__trend--up">
                        <i class="bi bi-arrow-up-short" aria-hidden="true"></i>
                        {{ __('patients::messages.patients.new_this_month', ['count' => number_format($newThisMonth)]) }}
                    </p>
                </div>
            </div>

            <div class="px-metric px-metric--blue">
                <span class="px-metric__icon"><i class="bi bi-person-plus-fill" aria-hidden="true"></i></span>
                <div class="min-w-0">
                    <p class="px-metric__label">{{ __('patients::messages.patients.new_patients') }}</p>
                    <p class="px-metric__value">{{ number_format($newThisMonth) }}</p>
                    <p class="px-metric__trend">{{ __('patients::messages.patients.this_month') }}</p>
                </div>
            </div>

            <div class="px-metric px-metric--green">
                <span class="px-metric__icon"><i class="bi bi-gender-male" aria-hidden="true"></i></span>
                <div class="min-w-0">
                    <p class="px-metric__label">{{ __('patients::messages.patients.male') }}</p>
                    <p class="px-metric__value">{{ number_format($malePatients) }}</p>
                    <p class="px-metric__trend">{{ $pct($malePatients) }}% {{ __('patients::messages.patients.of_total') }}</p>
                </div>
            </div>

            <div class="px-metric px-metric--pink">
                <span class="px-metric__icon"><i class="bi bi-gender-female" aria-hidden="true"></i></span>
                <div class="min-w-0">
                    <p class="px-metric__label">{{ __('patients::messages.patients.female') }}</p>
                    <p class="px-metric__value">{{ number_format($femalePatients) }}</p>
                    <p class="px-metric__trend">{{ $pct($femalePatients) }}% {{ __('patients::messages.patients.of_total') }}</p>
                </div>
            </div>
        </div>
    @endif

    {{-- ── Filters ────────────────────────────────────────────────────────── --}}
    <div class="px-panel p-3 p-md-4 mb-3">
        {{-- data-clinic-filter keeps the live filtering: typing swaps the table
             below without reloading. Without JS it is an ordinary GET form. --}}
        @php
            $activeField = \App\Modules\Patients\Enums\PatientSearchField::tryFrom($filters['search_field'] ?? '')
                ?? $defaultSearchField;

            // Placeholder per field, handed to the script so the box re-labels
            // itself the moment a pill changes.
            $searchRules = [];

            foreach ($searchFields as $searchField) {
                $searchRules[$searchField->value] = ['placeholder' => $searchField->placeholder()];
            }
        @endphp

        <form method="GET" action="{{ route('patients.index') }}" data-clinic-filter
              data-clinic-search-scope
              data-rules="{{ json_encode($searchRules, JSON_THROW_ON_ERROR) }}">
            {{--
                Which column the term is aimed at.

                Radios rather than buttons, inside the filter form, so the
                choice travels with the search as an ordinary form field:
                changing it re-runs the live filter through the same path
                typing does, and the whole thing still works with JavaScript
                off. The labels and minimum lengths belong to the register, so
                they come from Patients' own enum.

                Outside the grid below, not a full-width row inside it: the
                pills and the box they aim are one control, and a grid gutter
                between them read as two separate settings.
            --}}
            <div class="px-segmented mb-1" role="radiogroup" aria-label="{{ __('patients::messages.search.field') }}"
                 data-clinic-search-fields>
                <span class="px-segmented__label" aria-hidden="true">
                    {{ __('patients::messages.search.field') }}
                </span>

                @foreach ($searchFields as $searchField)
                    <label class="px-segmented__option">
                        <input type="radio" name="search_field" value="{{ $searchField->value }}"
                               @checked($searchField === $activeField)>
                        {{ $searchField->label() }}
                    </label>
                @endforeach
            </div>

            <div class="row g-3 align-items-end">
            <div class="col-12 col-lg-4">
                {{-- Hidden, not deleted.

                     "Search" above a box whose placeholder already reads
                     "Search by Mobile no.", under pills that already say
                     "Search by", is the same word three times. It stays in the
                     markup for anyone using a screen reader, who gets the
                     placeholder read as a hint rather than as the field's
                     name. --}}
                <label for="search" class="visually-hidden">{{ __('common.search') }}</label>
                <div class="px-search">
                    <i class="bi bi-search" aria-hidden="true"></i>
                    <input type="search" id="search" name="search" class="form-control px-input"
                           data-clinic-search-input
                           value="{{ $filters['search'] ?? '' }}"
                           placeholder="{{ $activeField->placeholder() }}">
                </div>
            </div>

            <div class="col-6 col-lg-2">
                <label for="gender" class="px-field-label">{{ __('patients::messages.fields.gender') }}</label>
                <select id="gender" name="gender" class="form-select px-select">
                    <option value="">{{ __('common.all') }}</option>
                    @foreach ($genders as $value => $label)
                        <option value="{{ $value }}" @selected(($filters['gender'] ?? '') === $value)>{{ $label }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-6 col-lg-2">
                <label for="blood_group" class="px-field-label">{{ __('patients::messages.fields.blood_group') }}</label>
                <select id="blood_group" name="blood_group" class="form-select px-select">
                    <option value="">{{ __('common.all') }}</option>
                    @foreach ($bloodGroups as $value => $label)
                        <option value="{{ $value }}" @selected(($filters['blood_group'] ?? '') === $value)>{{ $label }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-6 col-lg-2">
                <label for="is_active" class="px-field-label">{{ __('common.status') }}</label>
                <select id="is_active" name="is_active" class="form-select px-select">
                    <option value="">{{ __('common.all') }}</option>
                    <option value="1" @selected(($filters['is_active'] ?? '') === '1')>{{ __('common.active') }}</option>
                    <option value="0" @selected(($filters['is_active'] ?? '') === '0')>{{ __('common.inactive') }}</option>
                </select>
            </div>

            <div class="col-6 col-lg-2 d-flex gap-2">
                <button type="submit" class="btn px-btn-ghost flex-grow-1 d-inline-flex align-items-center justify-content-center gap-2">
                    <i class="bi bi-funnel" aria-hidden="true"></i> {{ __('common.filter') }}
                </button>
                <a href="{{ route('patients.index') }}" class="btn px-btn-ghost d-inline-flex align-items-center" title="{{ __('common.reset') }}">
                    <i class="bi bi-arrow-counterclockwise" aria-hidden="true"></i>
                    <span class="visually-hidden">{{ __('common.reset') }}</span>
                </a>
            </div>

            {{-- Registration window. Collapsed because most searches never need
                 it, and an eight-control filter bar is where people stop
                 reading. Opened automatically when a value is already set, so
                 an active filter is never hidden from the person it affects. --}}
            {{-- Block form deliberately: the single-line inline variant
                 mis-parses the nested parentheses below and silently drops
                 everything after it. --}}
            @php
                $hasDateFilter = ($filters['registered_from'] ?? '') !== ''
                    || ($filters['registered_to'] ?? '') !== '';
            @endphp

            <div class="col-12">
                <button class="btn btn-link btn-sm p-0 text-decoration-none" type="button"
                        data-bs-toggle="collapse" data-bs-target="#px-advanced"
                        aria-expanded="{{ $hasDateFilter ? 'true' : 'false' }}" aria-controls="px-advanced">
                    {{ __('patients::messages.patients.advanced_filters') }}
                    <i class="bi bi-chevron-down" aria-hidden="true"></i>
                </button>

                <div class="collapse {{ $hasDateFilter ? 'show' : '' }}" id="px-advanced">
                    <div class="row g-3 mt-0">
                        <div class="col-6 col-lg-3">
                            <label for="registered_from" class="px-field-label">{{ __('patients::messages.patients.registered_from') }}</label>
                            <input type="date" id="registered_from" name="registered_from"
                                   class="form-control px-input" value="{{ $filters['registered_from'] ?? '' }}">
                        </div>
                        <div class="col-6 col-lg-3">
                            <label for="registered_to" class="px-field-label">{{ __('patients::messages.patients.registered_to') }}</label>
                            <input type="date" id="registered_to" name="registered_to"
                                   class="form-control px-input" value="{{ $filters['registered_to'] ?? '' }}">
                        </div>
                    </div>
                </div>
            </div>
            </div>
        </form>
    </div>

    {{-- ── Table ──────────────────────────────────────────────────────────── --}}
    <x-results>
        <div class="px-panel overflow-hidden">
            <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 px-3 px-md-4 py-3 border-bottom"
                 style="border-color: var(--clinic-border) !important;">
                <p class="mb-0 small text-body-secondary">
                    {{ __('patients::messages.patients.showing', [
                        'from' => number_format($patients->firstItem() ?? 0),
                        'to' => number_format($patients->lastItem() ?? 0),
                        'total' => number_format($patients->total()),
                    ]) }}
                </p>
            </div>

            <div class="table-responsive">
                <table class="table px-table align-middle">
                    <thead>
                        <tr>
                            {{-- The MRN sits under the name rather than in a column of its own.
                                 It is an identifier people read off a card or repeat down a
                                 phone, not a value anyone scans a whole column of, and a
                                 fixed-width column of it was pushing the clinical fields off
                                 the right of narrower screens. --}}
                            <th scope="col">{{ __('patients::messages.patients.singular') }}</th>
                            <th scope="col">{{ __('patients::messages.fields.age') }}</th>
                            <th scope="col">{{ __('patients::messages.fields.gender') }}</th>
                            <th scope="col">{{ __('patients::messages.fields.blood_group') }}</th>
                            <th scope="col">{{ __('patients::messages.patients.registered_on') }}</th>
                            <th scope="col">{{ __('common.status') }}</th>
                            <th scope="col" class="text-end">{{ __('common.actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($patients as $patient)
                            @php
                                $genderPill = match ($patient->gender?->value) {
                                    'male' => 'px-pill--blue',
                                    'female' => 'px-pill--pink',
                                    default => 'px-pill--grey',
                                };

                                // blood_group is a plain string column, not an enum.
                                $bloodGroup = (string) $patient->blood_group;

                                $bloodPill = match (mb_substr($bloodGroup, 0, 1)) {
                                    'A' => mb_strlen($bloodGroup) > 2 ? 'px-pill--amber' : 'px-pill--blue',
                                    'B' => 'px-pill--violet',
                                    'O' => 'px-pill--green',
                                    default => 'px-pill--grey',
                                };
                            @endphp

                            <tr>
                                <td>
                                    {{-- No avatar. A coloured pair of initials beside every row was
                                         decoration competing with the name being scanned for, and
                                         the allergy marker beside it is the one thing here that
                                         genuinely needs to catch the eye. --}}
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="min-w-0">
                                            <a href="{{ route('patients.show', $patient) }}" class="fw-semibold text-body text-decoration-none d-block text-truncate">
                                                {{ $patient->fullName() }}
                                            </a>
                                            {{-- Name, then phone, then MRN — each on its own
                                                 line. Stacked rather than run together because
                                                 two monospace strings side by side read as one
                                                 long number, and the phone is what reception
                                                 reaches for most often, so it sits nearest the
                                                 name. --}}
                                            @if ($patient->phone)
                                                <span class="small text-body-secondary d-flex align-items-center gap-1">
                                                    <i class="bi bi-telephone" aria-hidden="true"></i>
                                                    <span class="font-monospace">{{ $patient->phone }}</span>
                                                </span>
                                            @endif

                                            <span class="small text-body-secondary font-monospace d-block">{{ $patient->mrn }}</span>
                                        </div>

                                        {{-- An allergy marker on the listing itself. By the time
                                             someone has opened the record they are already
                                             committed to a course of action; the warning is
                                             cheapest here. --}}
                                        @if (($patient->active_allergy_count ?? 0) > 0)
                                            <span class="px-pill px-pill--red" title="{{ __('patients::messages.clinical.allergies') }}">
                                                <i class="bi bi-exclamation-triangle-fill" aria-hidden="true"></i>
                                                {{ $patient->active_allergy_count }}
                                            </span>
                                        @endif
                                    </div>
                                </td>

                                <td class="small">{{ $patient->ageLabel() }}</td>

                                <td><span class="px-pill {{ $genderPill }}">{{ $patient->gender->label() }}</span></td>

                                <td>
                                    @if ($bloodGroup !== '')
                                        <span class="px-pill {{ $bloodPill }} font-monospace">{{ $bloodGroup }}</span>
                                    @else
                                        <span class="text-body-secondary small">—</span>
                                    @endif
                                </td>

                                <td class="small text-body-secondary">{{ $patient->registered_at?->format('d M Y') }}</td>

                                <td>
                                    <span class="px-pill {{ $patient->is_active ? 'px-pill--green' : 'px-pill--grey' }}">
                                        <span class="px-dot" aria-hidden="true"></span>
                                        {{ $patient->is_active ? __('common.active') : __('common.inactive') }}
                                    </span>
                                </td>

                                <td class="text-end">
                                    <div class="d-inline-flex gap-1">
                                        <a href="{{ route('patients.show', $patient) }}" class="px-action" title="{{ __('common.view') }}">
                                            <i class="bi bi-eye" aria-hidden="true"></i>
                                            <span class="visually-hidden">{{ __('common.view') }}</span>
                                        </a>

                                        @can('update', $patient)
                                            <a href="{{ route('patients.edit', $patient) }}" class="px-action" title="{{ __('common.edit') }}">
                                                <i class="bi bi-pencil" aria-hidden="true"></i>
                                                <span class="visually-hidden">{{ __('common.edit') }}</span>
                                            </a>
                                        @endcan
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7">
                                    <div class="px-empty py-4">
                                        <div class="px-empty__art" aria-hidden="true">
                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
                                                 stroke-linecap="round" stroke-linejoin="round">
                                                <rect x="2.5" y="5" width="19" height="14" rx="2" />
                                                <circle cx="9" cy="11" r="2.2" /><path d="M5.5 16a3.5 3.5 0 0 1 7 0M15 10h4M15 14h3" />
                                            </svg>
                                        </div>

                                        <p class="px-empty__title">{{ __('patients::messages.patients.empty') }}</p>
                                        <p class="px-empty__text mb-0">{{ __('patients::messages.patients.empty_text') }}</p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if ($patients->hasPages())
                <div class="px-pagination d-flex justify-content-center justify-content-md-end px-3 px-md-4 py-3 border-top"
                     style="border-color: var(--clinic-border) !important;">
                    {{ $patients->links() }}
                </div>
            @endif
        </div>
    </x-results>
@endsection