{{--
    Frontend Comments Component
    
    Usage: @include('comments::frontend.comments', ['model' => $page, 'modelType' => 'pages'])
    
    Required:
    - $model - The commentable model instance (Page, Product, etc.)
    - $modelType - String identifier for the model type ('pages', 'products', etc.)
    
    Optional:
    - $showRating - bool - Show rating stars (default: true)
    - $allowGuests - bool - Allow guest comments (default: config value)
    - $title - string - Section title (default: 'Comments')
--}}

@php
    $showRating = $showRating ?? true;
    $allowGuests = $allowGuests ?? config('comments.allow_guests', true);
    $title = $title ?? __('comments.comments');
    $modelId = $model->id;
@endphp

<div class="comments-section" id="commentsSection" 
     data-model-type="{{ $modelType }}" 
     data-model-id="{{ $modelId }}"
     data-allow-guests="{{ $allowGuests ? 'true' : 'false' }}"
     data-show-rating="{{ $showRating ? 'true' : 'false' }}">
    
    {{-- Header with Stats --}}
    <div class="comments-header">
        <h3 class="comments-title">{{ $title }}</h3>
        <div class="comments-stats-summary" id="commentStats">
            {{-- Filled by JS --}}
        </div>
    </div>

    {{-- Rating Summary --}}
    @if($showRating)
    <div class="rating-summary" id="ratingSummary" style="display: none;">
        <div class="rating-average">
            <span class="rating-number" id="avgRating">0</span>
            <div class="rating-stars" id="avgRatingStars"></div>
            <span class="rating-count" id="totalRatings">0 {{ __('comments.reviews') }}</span>
        </div>
        <div class="rating-bars" id="ratingBars">
            {{-- Filled by JS --}}
        </div>
    </div>
    @endif

    {{-- Comment Form --}}
    <div class="comment-form-wrapper" id="commentFormWrapper">
        @if(auth()->check() || $allowGuests)
            <form id="commentForm" class="comment-form">
                @csrf
                <input type="hidden" name="parent_id" id="parentId" value="">
                
                {{-- Honeypot --}}
                <div style="display: none;">
                    <input type="text" name="website" tabindex="-1" autocomplete="off">
                </div>

                {{-- Reply indicator --}}
                <div class="reply-indicator" id="replyIndicator" style="display: none;">
                    <span>{{ __('comments.replying_to') }} <strong id="replyToName"></strong></span>
                    <button type="button" class="btn-cancel-reply" onclick="cancelReply()">
                        <i class="fas fa-times"></i>
                    </button>
                </div>

                {{-- Guest fields --}}
                @guest
                <div class="guest-fields">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="guestName">{{ __('comments.your_name') }} <span class="required">*</span></label>
                            <input type="text" id="guestName" name="guest_name" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="guestEmail">{{ __('comments.your_email') }} <span class="required">*</span></label>
                            <input type="email" id="guestEmail" name="guest_email" class="form-control" required>
                        </div>
                    </div>
                </div>
                @endguest

                {{-- Rating --}}
                @if($showRating)
                <div class="form-group rating-input-group" id="ratingInputGroup">
                    <label>{{ __('comments.your_rating') }}</label>
                    <div class="star-rating-input">
                        @for($i = 5; $i >= 1; $i--)
                            <input type="radio" name="rating" value="{{ $i }}" id="star{{ $i }}">
                            <label for="star{{ $i }}" title="{{ $i }} {{ __('comments.stars') }}">
                                <i class="fas fa-star"></i>
                            </label>
                        @endfor
                    </div>
                </div>
                @endif

                {{-- Comment content --}}
                <div class="form-group">
                    <label for="commentContent">{{ __('comments.your_comment') }} <span class="required">*</span></label>
                    <textarea id="commentContent" name="content" class="form-control" rows="4" required 
                              placeholder="{{ __('comments.comment_placeholder') }}"></textarea>
                </div>

                {{-- Submit --}}
                <div class="form-actions">
                    <button type="submit" class="btn btn-primary btn-submit">
                        <i class="fas fa-paper-plane"></i>
                        {{ __('comments.submit') }}
                    </button>
                </div>
            </form>
        @else
            <div class="login-prompt">
                <p>{{ __('comments.login_to_comment') }}</p>
                <a href="{{ route('login') }}" class="btn btn-primary">{{ __('comments.login') }}</a>
            </div>
        @endif
    </div>

    {{-- Comments List --}}
    <div class="comments-list" id="commentsList">
        <div class="comments-loading" id="commentsLoading">
            <div class="spinner"></div>
            <span>{{ __('comments.loading') }}</span>
        </div>
    </div>

    {{-- Load More --}}
    <div class="comments-load-more" id="loadMoreWrapper" style="display: none;">
        <button type="button" class="btn btn-outline-primary" id="loadMoreBtn">
            {{ __('comments.load_more') }}
        </button>
    </div>
</div>

{{-- Comment Template --}}
<template id="commentTemplate">
    <div class="comment" data-id="">
        <div class="comment-avatar">
            <span class="avatar-initials"></span>
        </div>
        <div class="comment-body">
            <div class="comment-header">
                <span class="comment-author"></span>
                <span class="comment-date"></span>
            </div>
            <div class="comment-rating"></div>
            <div class="comment-content"></div>
            <div class="comment-actions">
                <button type="button" class="btn-reply" onclick="replyTo(this)">
                    <i class="fas fa-reply"></i> {{ __('comments.reply') }}
                </button>
            </div>
            <div class="comment-replies"></div>
        </div>
    </div>
</template>

@push('styles')
<link rel="stylesheet" href="{{ asset('vendor/comments/css/comments-frontend.css') }}">
@endpush

@push('scripts')
<script>
const COMMENTS_FRONTEND_CONFIG = {
    modelType: '{{ $modelType }}',
    modelId: {{ $modelId }},
    showRating: {{ $showRating ? 'true' : 'false' }},
    allowGuests: {{ $allowGuests ? 'true' : 'false' }},
    isLoggedIn: {{ auth()->check() ? 'true' : 'false' }},
    routes: {
        index: '{{ route("comments.frontend.index", [$modelType, $modelId]) }}',
        store: '{{ route("comments.frontend.store", [$modelType, $modelId]) }}',
    },
    translations: {
        loading: '{{ __("comments.loading") }}',
        no_comments: '{{ __("comments.no_comments_yet") }}',
        submit_success: '{{ __("comments.submitted") }}',
        submit_pending: '{{ __("comments.submitted_pending") }}',
        error: '{{ __("comments.error") }}',
        reply: '{{ __("comments.reply") }}',
        reviews: '{{ __("comments.reviews") }}',
    }
};
</script>
<script src="{{ asset('vendor/comments/js/comments-frontend.js') }}"></script>
@endpush
