@extends('layouts.app')

@section('title', 'Configurações do Instagram')

@section('content')
<div class="profile-container" 
     x-data="instagramSettings"
     data-success="{{ session('success') }}">
    
    <div>
        <h1 class="color-primary text-center mb-5">Instagram</h1>

        @if ($instagramAccount)
            <div class="ig-card-container mb-3">
                <div class="ig-card-picture">
                    <img src="{{ $pageDetails['picture_url'] ?? asset('default-avatar.png') }}" alt="Foto da Página">
                </div>
                <div class="ig-card-info">
                    <h5 class="ig-card-title">Página: {{ $pageDetails['name'] ?? 'Não conectada' }}</h5>
                    <p class="ig-card-subtitle">Instagram: @<strong>{{ $instagramAccount->username }}</strong></p>
                    
                    @if (auth()->user()->is_tester)
                        <button type="button" class="btn btn-primary btn-sm" 
                                @click="openMentionsModal('{{ route('instagram.page-details') }}')">
                            Ver menções da página
                        </button>
                        
                        <button type="button" class="btn btn-secondary btn-sm" 
                                @click="openCommentsModal()">
                            Importar de Comentários
                        </button>
                    @endif
                </div>
            </div>

            <form method="POST" action="{{ route('profile.settings.update') }}">
                @csrf
                <h4 class="color-primary mt-4 mb-3">Importação de Stories</h4>
                <div class="mb-3">
                    <label for="story_fetch_hours" class="form-label">Buscar stories postados nas últimas...</label>
                    <select name="story_fetch_hours" id="story_fetch_hours" class="form-select">
                        @php $currentHours = $instagramAccount->story_fetch_hours ?? 24; @endphp
                        @for ($i = 1; $i <= 24; $i++)
                            <option value="{{ $i }}" {{ $currentHours == $i ? 'selected' : '' }}>
                                {{ $i }} hora{{ $i > 1 ? 's' : '' }}
                            </option>
                        @endfor
                    </select>
                    <div class="form-text mt-2" style="font-style: italic; color: #838383;">
                        Esta configuração define o período máximo de tempo para a busca de stories na sua galeria.
                    </div>
                </div>
                <div class="d-grid gap-2 mt-4">
                    <button type="submit" class="btn btn-primary btn-block">Salvar Configurações</button>
                </div>
            </form>

            <h4 class="color-primary mt-5 mb-3">Desconectar Conta</h4>
            <div class="d-grid gap-2 mb-2">
                <button type="button" class="btn btn-danger btn-block" 
                        @click="confirmDisconnect('{{ route('profile.instagram.disconnect') }}')">
                    Desconectar Conta do Instagram
                </button>                
            </div>
            <p style="font-style: italic; font-size: 0.8rem; color: #838383;">
                Essa ação removerá a permissão do VagalumeTV de acessar seus stories. Você poderá reconectar a qualquer momento.
            </p>

        @else
            <div class="text-center">
                <p>Você ainda não conectou sua conta do Instagram.</p>
                <a href="{{ route('login.instagram.redirect') }}" class="btn btn-instagram">
                    <i class="fab fa-instagram me-2"></i> Conectar com o Instagram Business
                </a>
            </div>
        @endif
    </div>

    <template id="comments-modal-template">
        <div class="row g-0">
            <div class="col-md-4 col-lg-3 border-end border-secondary">
                <div class="p-3 border-bottom border-secondary bg-light">
                    <h6 class="color-primary m-0">Seus Posts Recentes</h6>
                </div>
                <div id="posts-list" class="posts-list-container custom-scroll p-2" style="height: 500px; overflow-y: auto;">
                    @if(isset($posts))
                        @forelse ($posts as $post)
                            <a href="#" class="post-item list-group-item list-group-item-action mb-2 rounded border" 
                               data-post-id="{{ $post['id'] }}"
                               data-fetch-url="{{ route('instagram.comments.fetch', $post['id']) }}">
                                
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <small class="text-muted">
                                        <i class="far fa-clock me-1"></i>
                                        {{ \Carbon\Carbon::parse($post['created_time'])->format('d/m H:i') }}
                                    </small>
                                </div>
                                <div class="text-truncate small" style="max-width: 100%;">
                                    {{ $post['message'] ?? 'Post sem texto' }}
                                </div>
                            </a>
                        @empty
                            <div class="text-center p-4 text-muted">Nenhum post recente.</div>
                        @endforelse
                    @endif
                </div>
            </div>

            <div class="col-md-8 col-lg-9 bg-white">
                <div class="p-3 border-bottom border-secondary">
                    <h6 class="color-primary m-0">Mídias Encontradas</h6>
                </div>
                
                <div id="comments-loader" class="text-center p-5" style="display: none;">
                    <div class="spinner-border text-primary" role="status"></div>
                    <p class="mt-2 text-muted">Buscando comentários...</p>
                </div>

                <div id="comments-container" class="comments-grid-container custom-scroll p-3" style="height: 500px; overflow-y: auto;">
                    <div id="comments-placeholder" class="d-flex flex-column align-items-center justify-content-center h-100 text-muted opacity-50">
                        <i class="far fa-hand-point-left fa-3x mb-3"></i>
                        <p>Selecione um post ao lado para ver as mídias.</p>
                    </div>
                </div>
            </div>
        </div>
    </template>
</div>
@endsection