{{-- Interactive 1–5 star picker (internal workflow only). --}}
@php
    $widgetId = $widgetId ?? 'mec-star-rating-widget';
    $inputId = $inputId ?? 'workflow-star-rating-value';
    $inputName = $inputName ?? 'workflow_star_rating';
    $labelId = $labelId ?? 'mec-star-rating-label';
    $existingRating = (int) ($existingRating ?? 0);
    if ($existingRating < 0 || $existingRating > 5) {
        $existingRating = 0;
    }
    $heading = $heading ?? __('Report quality rating');
    $hint = $hint ?? __('Click a star to rate this report (1–5). Internal use only — not shown in the published report.');
    $required = (bool) ($required ?? true);
    $wrapperClass = trim((string) ($wrapperClass ?? 'mec-star-rating'));
    $errorKey = $errorKey ?? 'workflow_star_rating';
@endphp

<p class="mec-star-rating__heading mb-1">{{ $heading }}</p>
@if ($hint !== '')
    <p class="mec-star-rating__hint mb-3">{{ $hint }}</p>
@endif
<div
    class="{{ $wrapperClass }} @error($errorKey) is-invalid @enderror"
    id="{{ $widgetId }}"
    data-rating="{{ $existingRating }}"
    role="group"
    aria-label="{{ $heading }}"
>
    <input
        type="hidden"
        name="{{ $inputName }}"
        id="{{ $inputId }}"
        value="{{ $existingRating > 0 ? $existingRating : '' }}"
        @if ($required) data-mec-star-required="1" @endif
    >
    <div class="mec-star-rating__stars">
        @for ($star = 1; $star <= 5; $star++)
            <button
                type="button"
                class="mec-star-rating__star{{ $existingRating >= $star ? ' is-active' : '' }}"
                data-value="{{ $star }}"
                aria-label="{{ __(':n stars', ['n' => $star]) }}"
                title="{{ __(':n stars', ['n' => $star]) }}"
            >
                <i class="fas fa-star" aria-hidden="true"></i>
            </button>
        @endfor
    </div>
    <p class="mec-star-rating__value-label mb-0 mt-2" id="{{ $labelId }}" aria-live="polite">
        @if ($existingRating > 0)
            {{ __(':n of 5 stars', ['n' => $existingRating]) }}
        @else
            {{ __('Select a rating') }}
        @endif
    </p>
</div>
@error($errorKey)
    <span class="invalid-feedback d-block mt-2">{{ $message }}</span>
@enderror

@once
    <style>
        .mec-star-rating__heading {
            font-size: 0.8rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: #4b5563;
            margin-bottom: 0.35rem;
        }
        .mec-star-rating__hint {
            font-size: 0.875rem;
            color: #6b7280;
            max-width: 36rem;
            margin-left: auto;
            margin-right: auto;
        }
        .mec-star-rating {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .mec-star-rating__stars {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.55rem;
        }
        .mec-star-rating__star {
            appearance: none;
            -webkit-appearance: none;
            border: 0;
            background: transparent;
            padding: 0.15rem;
            margin: 0;
            cursor: pointer;
            line-height: 1;
            color: #d1d5db;
            font-size: 2.75rem;
            transition: color 0.12s ease;
        }
        .mec-star-rating__star:focus {
            outline: none;
        }
        .mec-star-rating__star:focus-visible {
            outline: 2px solid #f5b301;
            outline-offset: 3px;
            border-radius: 0.25rem;
        }
        .mec-star-rating__star.is-active {
            color: #f5b301;
            text-shadow: 0 1px 2px rgba(180, 120, 0, 0.25);
        }
        .mec-star-rating__value-label {
            font-size: 0.95rem;
            font-weight: 600;
            color: #374151;
            min-height: 1.4em;
        }
        .mec-star-rating.is-invalid {
            outline: 2px solid #dc3545;
            border-radius: 0.5rem;
            padding: 0.65rem 1rem;
        }
        .mec-star-rating.is-invalid .mec-star-rating__value-label {
            color: #dc3545;
        }
    </style>
    <script>
        window.pmsBindMecStarRating = window.pmsBindMecStarRating || function (opts) {
            opts = opts || {};
            var root = document.getElementById(opts.widgetId || 'mec-star-rating-widget');
            if (!root || root.getAttribute('data-mec-star-bound') === '1') {
                return;
            }
            root.setAttribute('data-mec-star-bound', '1');

            var input = document.getElementById(opts.inputId || 'workflow-star-rating-value');
            var label = document.getElementById(opts.labelId || 'mec-star-rating-label');
            var stars = Array.prototype.slice.call(root.querySelectorAll('.mec-star-rating__star'));
            var selected = parseInt(root.getAttribute('data-rating') || '0', 10) || 0;
            var selectText = @json(__('Select a rating'));
            var ofFiveTpl = @json(__(':n of 5 stars'));

            function paint() {
                stars.forEach(function (btn) {
                    var v = parseInt(btn.getAttribute('data-value'), 10);
                    btn.classList.toggle('is-active', selected > 0 && v <= selected);
                    btn.setAttribute('aria-pressed', selected === v ? 'true' : 'false');
                });
                if (label) {
                    label.textContent = selected > 0
                        ? ofFiveTpl.replace(':n', String(selected))
                        : selectText;
                }
            }

            function setRating(value) {
                selected = value;
                root.setAttribute('data-rating', String(value));
                if (input) {
                    input.value = value > 0 ? String(value) : '';
                    input.disabled = false;
                }
                stars.forEach(function (btn) {
                    btn.disabled = false;
                    btn.removeAttribute('aria-disabled');
                });
                root.classList.remove('is-invalid');
                paint();
                if (typeof window.pmsMarkReportFormDirty === 'function') {
                    window.pmsMarkReportFormDirty();
                }
            }

            root.addEventListener('click', function (e) {
                var btn = e.target && e.target.closest
                    ? e.target.closest('.mec-star-rating__star')
                    : null;
                if (!btn || !root.contains(btn)) {
                    return;
                }
                e.preventDefault();
                e.stopPropagation();
                setRating(parseInt(btn.getAttribute('data-value'), 10) || 0);
            });

            paint();
        };
    </script>
@endonce

<script>
    (function () {
        var opts = {
            widgetId: @json($widgetId),
            inputId: @json($inputId),
            labelId: @json($labelId)
        };
        function run() {
            if (typeof window.pmsBindMecStarRating === 'function') {
                window.pmsBindMecStarRating(opts);
            }
        }
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', run);
        } else {
            run();
        }
        window.addEventListener('load', function () {
            var root = document.getElementById(opts.widgetId);
            if (!root) {
                return;
            }
            root.querySelectorAll('.mec-star-rating__star').forEach(function (btn) {
                btn.disabled = false;
                btn.removeAttribute('aria-disabled');
            });
            var input = document.getElementById(opts.inputId);
            if (input) {
                input.disabled = false;
            }
        });
    })();
</script>