@extends('frontend.main_master')
@section('body-class', 'profile-page panel-scrollable ai-comments-page')
@section('title', t('my-comments') . ' - ' . t('site-title'))

@php
    $typeMeta = [
        'natal' => [
            'label' => 'Natal',
            'icon' => 'fa-earth-americas',
            'bg' => '#eef6f4',
            'fg' => 'var(--astro-deep-teal)',
        ],
        'annual' => ['label' => 'Anual', 'icon' => 'fa-calendar-days', 'bg' => '#fef8ec', 'fg' => 'var(--astro-gold)'],
        'transit' => [
            'label' => 'Transit',
            'icon' => 'fa-arrows-rotate',
            'bg' => '#edf3f8',
            'fg' => 'var(--astro-ocean)',
        ],
        'synastry' => ['label' => 'Relación', 'icon' => 'fa-heart', 'bg' => '#fceef0', 'fg' => 'var(--astro-brick)'],
        'firdaria' => [
            'label' => 'Firdaria',
            'icon' => 'fa-hourglass-half',
            'bg' => '#eef3f4',
            'fg' => 'var(--astro-dark-teal)',
        ],
    ];
@endphp

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

@section('content')
    <div class="container pt-4 pt-lg-5 pb-0 ai-comments-container">
        <div class="ai-shell">
            {{-- HEADER --}}
            <div class="ai-hero mb-4 p-3 p-lg-4 text-white">
                <div class="d-flex flex-column flex-lg-row align-items-lg-end justify-content-between gap-3">
                    <div>
                        {{-- <div class="small text-white-50 mb-1">{{ t('messages-ai-analyze-center') }}</div> --}}
                        <h1 class="h4 fw-bold mb-1">{{ t('messages-ai-analyze-center') }}</h1>
                        {{-- <p class="text-white-50 mb-0 small">{{ t('my-ai-comments-description') }}</p> --}}
                    </div>
                    @if (!$comments->isEmpty())
                        <div class="d-flex align-items-center flex-wrap gap-2">
                            <div class="ai-pill d-inline-flex align-items-center gap-2">
                                <i class="fa-solid fa-layer-group small"></i>
                                <span>{{ $comments->total() }} {{ t('analysis') }}</span>
                            </div>
                            <div class="view-toggle btn-group btn-group-sm" role="group">
                                <button type="button" class="btn active rounded-start-3" id="btnGrid"><i
                                        class="fa-solid fa-table-cells"></i></button>
                                <button type="button" class="btn rounded-end-3" id="btnList"><i
                                        class="fa-solid fa-list"></i></button>
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            @if ($comments->isEmpty())
                <div class="ai-empty-card text-center py-5 px-4 shadow-sm border rounded-4">
                    <div class="ai-empty-icon-wrap mb-3 d-inline-flex align-items-center justify-content-center bg-light rounded-circle"
                        style="width:80px; height:80px;">
                        <i class="fa-regular fa-face-smile-wink fa-2x text-muted"></i>
                    </div>
                    <h5 class="fw-semibold mb-2">{{ t('no-comments-yet') }}</h5>
                    <a href="{{ url('/panel') }}" class="btn btn-sm px-4 text-white"
                        style="background: #136F63; border-radius: 50px;">{{ t('create-now') }}</a>
                </div>
            @else
                {{-- GRID VIEW --}}
                <div id="viewGrid" class="row g-3">
                    @foreach ($comments as $comment)
                        @php
                            $type = strtolower($comment->type);
                            $meta = $typeMeta[$type] ?? [
                                'label' => $comment->type,
                                'icon' => 'fa-star',
                                'bg' => '#f0f0f0',
                                'fg' => '#666',
                            ];
                        @endphp
                        <div class="col-md-6">
                            <div class="ai-grid-card p-3 h-100 d-flex flex-column">
                                <div class="d-flex align-items-center gap-2 mb-3">
                                    <div class="rounded-circle d-flex align-items-center justify-content-center"
                                        style="width: 36px; height: 36px; background: {{ $meta['bg'] }};">
                                        <i class="fa-solid {{ $meta['icon'] }}"
                                            style="color: {{ $meta['fg'] }}; font-size: .85rem;"></i>
                                    </div>
                                    <div class="overflow-hidden">
                                        <small class="d-block fw-bold text-uppercase opacity-75"
                                            style="color: {{ $meta['fg'] }}; font-size: 10px; letter-spacing: 1px;">{{ $meta['label'] }}</small>
                                        <span
                                            class="fw-semibold text-dark small text-truncate d-block">{{ $comment->title ?? 'Untitled Analysis' }}</span>
                                    </div>
                                </div>
                                <p class="ai-grid-preview text-muted small mb-3 lh-base flex-grow-1">
                                    {{ Str::limit(preg_replace('/^#{1,3}\s+/m', '', strip_tags($comment->content)), 150) }}
                                </p>
                                <div class="d-flex justify-content-between align-items-center mt-auto border-top pt-2">
                                    <small class="text-muted"
                                        style="font-size: 11px;">{{ $comment->created_at?->translatedFormat('d M Y') }}</small>
                                    <div class="d-flex gap-2">
                                        <button class="btn btn-link btn-sm p-0 ai-preview-btn ai-action-link"
                                            data-id="{{ $comment->id }}"><i
                                                class="fa-regular fa-eye me-1"></i>{{ t('preview') }}</button>
                                        <a href="{{ route('profile.ai_comments.pdf', $comment) }}"
                                            class="ai-action-link small"><i class="fa-regular fa-file-pdf me-1"></i>PDF</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                {{-- LIST VIEW --}}
                <div id="viewList" class="d-none">
                    @foreach ($comments as $comment)
                        @php
                            $type = strtolower($comment->type);
                            $meta = $typeMeta[$type] ?? [
                                'label' => $comment->type,
                                'icon' => 'fa-star',
                                'bg' => '#f0f0f0',
                                'fg' => '#666',
                            ];
                        @endphp
                        <div class="ai-row p-3 mb-2">
                            <div class="d-flex align-items-center gap-3">
                                <div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0"
                                    style="width: 44px; height: 44px; background: {{ $meta['bg'] }};">
                                    <i class="fa-solid {{ $meta['icon'] }}" style="color: {{ $meta['fg'] }};"></i>
                                </div>
                                <div class="flex-grow-1 overflow-hidden">
                                    <div class="d-flex justify-content-between">
                                        <span class="fw-bold text-dark">{{ $comment->title ?? 'Untitled Analysis' }}</span>
                                        <small class="text-muted">{{ $comment->created_at?->diffForHumans() }}</small>
                                    </div>
                                    <p class="ai-preview text-muted small mb-1">
                                        {{ Str::limit(strip_tags($comment->content), 180) }}</p>
                                    <div class="d-flex gap-3">
                                        <button class="btn btn-link btn-sm p-0 ai-preview-btn ai-action-link"
                                            data-id="{{ $comment->id }}">{{ t('preview') }}</button>
                                        <a href="{{ route('profile.ai_comments.pdf', $comment) }}"
                                            class="ai-action-link small">{{ t('download-pdf') }}</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="d-flex justify-content-center mt-4">
                    {{ $comments->links('pagination::bootstrap-5') }}
                </div>
            @endif
        </div>
    </div>

    {{-- PREVIEW MODAL --}}
    <div class="modal fade" id="previewModal" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content border-0 rounded-4 shadow-lg">
                <div class="modal-header border-0 bg-light">
                    <h5 class="modal-title fw-bold" id="previewTitle"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body px-4 pb-4" id="previewBody"></div>
                <div class="modal-footer border-0">
                    <a href="#" id="previewPdfLink" class="btn btn-sm text-white px-4"
                        style="background: #136F63; border-radius: 50px;">{{ t('download-as-pdf') }}</a>
                </div>
            </div>
        </div>
    </div>

    {{-- Content Storage --}}
    @foreach ($comments as $comment)
        <script type="text/plain" id="content-{{ $comment->id }}">{!! $comment->content !!}</script>
    @endforeach

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const btnGrid = document.getElementById('btnGrid');
            const btnList = document.getElementById('btnList');
            const viewGrid = document.getElementById('viewGrid');
            const viewList = document.getElementById('viewList');

            // View Switcher
            const switchView = (mode) => {
                if (mode === 'list') {
                    viewGrid.classList.add('d-none');
                    viewList.classList.remove('d-none');
                    btnList.classList.add('active');
                    btnGrid.classList.remove('active');
                } else {
                    viewList.classList.add('d-none');
                    viewGrid.classList.remove('active');
                    viewGrid.classList.remove('d-none');
                    btnGrid.classList.add('active');
                    btnList.classList.remove('active');
                }
                localStorage.setItem('ai_comments_view', mode);
            };

            if (localStorage.getItem('ai_comments_view') === 'list') switchView('list');

            btnGrid?.addEventListener('click', () => switchView('grid'));
            btnList?.addEventListener('click', () => switchView('list'));

            // Simple Markdown Parser
            const renderMd = (text) => {
                return text
                    .replace(/^### (.*$)/gim, '<h3>$1</h3>')
                    .replace(/^## (.*$)/gim, '<h2>$1</h2>')
                    .replace(/^# (.*$)/gim, '<h1>$1</h1>')
                    .replace(/^\- (.*$)/gim, '<li>$1</li>')
                    .replace(/\*\*(.*)\*\*/gim, '<strong>$1</strong>')
                    .replace(/\n$/gim, '<br>');
            };

            // Modal Logic
            document.addEventListener('click', function(e) {
                const btn = e.target.closest('.ai-preview-btn');
                if (!btn) return;

                const id = btn.dataset.id;
                const content = document.getElementById('content-' + id).textContent;

                document.getElementById('previewTitle').innerText = btn.closest('.ai-grid-card, .ai-row')
                    .querySelector('.fw-semibold, .fw-bold').innerText;
                document.getElementById('previewBody').innerHTML = renderMd(content);

                const modal = new bootstrap.Modal(document.getElementById('previewModal'));
                modal.show();
            });
        });
    </script>
@endsection