@extends('layouts.app')

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

@section('content')

<div class="profile-container flex-column align-items-center">
    <div style="width: 100%; max-width: 800px;">
        
        <div class="d-flex justify-content-between align-items-center mb-4 mt-2">
            <div class="d-flex align-items-center gap-3">
                <div class="ig-header-icon">
                    <i class="fab fa-instagram text-white fs-4"></i>
                </div>
                <div>
                    <h2 class="text-white m-0" style="font-weight: 600;">Instagram</h2>
                    <p class="text-muted m-0" style="font-size: 0.9rem;">Gerencie suas contas</p>
                </div>
            </div>
            
            @if(count($accountsData) > 0)
                <a href="{{ route('login.instagram.redirect') }}" class="btn btn-primary rounded-pill px-3 py-2">
                    <i class="fas fa-plus me-1 color-bg"></i> Nova Conta
                </a>
            @endif
        </div>

        @if (session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger">{{ session('error') }}</div>
        @endif
        
        @forelse ($accountsData as $data)
            @php
                $account = $data['model'];
                $pageDetails = $data['pageDetails'];
                $posts = $data['posts'];
            @endphp

            <div class="ig-settings-card mb-5">
                <div class="ig-settings-card-top-line"></div>
                
                <div class="d-flex justify-content-between align-items-center p-4 border-bottom border-secondary">
                    <div class="d-flex align-items-center gap-3">
                        <img src="{{ $pageDetails['picture_url'] ?? asset('default-avatar.png') }}" alt="Avatar" style="width: 55px; height: 55px; border-radius: 50%; border: 2px solid #3d3d3d; object-fit: cover;">
                        <div>
                            <h5 class="text-white m-0 mb-1" style="font-weight: 600;">{{ $pageDetails['name'] ?? 'Página não conectada' }}</h5>
                            <p class="text-muted m-0" style="font-size: 0.9rem;">{{ '@' . $account->username }}</p>

                            @if (auth()->user()->is_tester)
                                <div class="mt-2 d-flex gap-2">
                                    <button type="button" class="btn btn-outline-secondary btn-sm open-mentions-btn" style="font-size: 0.7rem; padding: 2px 8px;" data-bs-toggle="modal" data-bs-target="#mentionsModal-{{ $account->id }}" data-url="{{ route('instagram.page-details', $account->id) }}">Menções</button>
                                    <button type="button" class="btn btn-outline-secondary btn-sm" style="font-size: 0.7rem; padding: 2px 8px;" data-bs-toggle="modal" data-bs-target="#commentsModal-{{ $account->id }}">Comentários</button>
                                </div>
                            @endif
                        </div>
                    </div>
                    <div>
                        <span class="status-badge"><span class="status-dot"></span> Conectado</span>
                    </div>
                </div>

                <div class="p-4 border-secondary">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <button type="button" class="action-box p-3 open-reels-btn" data-bs-toggle="modal" data-bs-target="#reelsModal-{{ $account->id }}" data-url="{{ route('instagram.reels.fetch', $account->id) }}">
                                <div class="d-flex align-items-center">
                                    <div class="action-box-icon"><i class="fa-instagram-reel"></i></div> <div>
                                        <h6 class="text-white m-0 mb-1" style="font-weight: 600;">Importar Reels</h6>
                                        <p class="text-muted m-0" style="font-size: 0.8rem;">Buscar do perfil</p>
                                    </div>
                                </div>
                            </button>
                        </div>
                        
                        <div class="col-md-6">
                            <button type="button" class="action-box p-3 fetch-stories-btn" data-bs-toggle="modal" data-bs-target="#storiesModal-{{ $account->id }}" data-url="{{ route('instagram.stories', $account->id) }}">
                                <div class="d-flex align-items-center">
                                    <div class="action-box-icon"><i class="fab fa-instagram"></i></div> <div>
                                        <h6 class="text-white m-0 mb-1" style="font-weight: 600;">Importar Stories</h6>
                                        <p class="text-muted m-0" style="font-size: 0.8rem;">Stories recentes</p>
                                    </div>
                                </div>
                            </button>
                        </div>
                    </div>
                </div>

                <form method="POST" action="{{ route('profile.instagram.settings.update', $account->id) }}" class="p-4">
                    @csrf
                    
                    <h6 class="text-uppercase text-muted mb-3" style="font-size: 0.8rem; letter-spacing: 1.5px; font-weight: 600;">Configurações</h6>

                    <div class="setting-row d-flex justify-content-between align-items-center">
                        <div class="d-flex align-items-center gap-3">
                            <div class="text-muted fs-5"><i class="fas fa-sync-alt"></i></div>
                            <div>
                                <label class="form-check-label text-white m-0 mb-1 h6" for="reels_auto_download_{{ $account->id }}" style="cursor: pointer;">Auto importar Reels</label>
                                <p class="text-muted m-0" style="font-size: 0.85rem;">Importados ao publicar</p>
                            </div>
                        </div>
                        
                        <div class="form-check form-switch m-0 fs-5">
                            <input type="hidden" name="reels_auto_download" value="0">
                            <input class="form-check-input m-0" type="checkbox" role="switch" id="reels_auto_download_{{ $account->id }}" name="reels_auto_download" value="1" {{ $account->reels_auto_download ? 'checked' : '' }} style="cursor: pointer;">
                        </div>
                    </div>

                    <div class="setting-row d-flex justify-content-between align-items-center">
                        <div class="d-flex align-items-center gap-3">
                            <div class="text-muted fs-5"><i class="far fa-clock"></i></div>
                            <div>
                                <h6 class="text-white m-0 mb-1">Stories das últimas</h6>
                                <p class="text-muted m-0" style="font-size: 0.85rem;">Período de busca</p>
                            </div>
                        </div>
                        <div style="position: relative; display: inline-block;">
                            <select name="story_fetch_hours" id="story_fetch_hours_{{ $account->id }}" class="form-select bg-dark text-white border-secondary pe-4" style="width: auto; cursor: pointer; appearance: none; -webkit-appearance: none;">
                                @php $currentHours = $account->story_fetch_hours ?? 24; @endphp
                                @for ($i = 1; $i <= 24; $i++)
                                    <option value="{{ $i }}" {{ $currentHours == $i ? 'selected' : '' }}>
                                        {{ $i }}h
                                    </option>
                                @endfor
                            </select>
                            <i class="fas fa-chevron-down text-muted" style="position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 0.8rem;"></i>
                        </div>
                    </div>

                    <div class="d-flex gap-3 mt-4">
                        <button type="submit" class="btn btn-primary flex-grow-1 py-2">
                            Salvar
                        </button>
                        <button type="button" class="btn btn-outline-danger px-4 py-2" data-bs-toggle="modal" data-bs-target="#disconnectModal-{{ $account->id }}">
                            <i class="fas fa-unlink me-1"></i> Desconectar
                        </button>
                    </div>
                </form>
            </div>

            <div class="modal fade" id="disconnectModal-{{ $account->id }}" tabindex="-1">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Confirmar Desconexão</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <p>Tem certeza que deseja desconectar a conta <strong>{{ $account->username }}</strong>?</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                            <form method="POST" action="{{ route('profile.instagram.disconnect', $account->id) }}">
                                @csrf
                                <button type="submit" class="btn btn-danger">Sim, Desconectar</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="mentionsModal-{{ $account->id }}" tabindex="-1">
                <div class="modal-dialog modal-dialog-centered modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title text-truncate">Menções: {{ $account->username }}</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <p class="mentions-loader"><i class="fas fa-spinner fa-spin"></i> Buscando menções...</p>
                            <div class="mentions-grid-container mentions-list-grid"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade comments-modal" id="commentsModal-{{ $account->id }}" tabindex="-1">
                <div class="modal-dialog modal-dialog-centered modal-xl"> 
                    <div class="modal-content"> 
                        <div class="modal-header border-secondary">
                            <h5 class="modal-title text-truncate">Comentários: {{ $account->username }}</h5>
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body p-0"> 
                            <div class="row g-0"> 
                                <div class="col-md-4 col-lg-3">
                                    <div class="p-3 border-bottom border-secondary">
                                        <h6 class="color-primary m-0">Posts Recentes</h6>
                                    </div>
                                    <div class="posts-list-container custom-scroll p-2">
                                        @forelse ($posts as $post)
                                            <a href="#" class="post-item" data-post-id="{{ $post['id'] }}" data-fetch-url="{{ route('instagram.comments.fetch', ['account' => $account->id, 'postId' => $post['id']]) }}">
                                                <div class="post-date"><i class="far fa-clock me-1"></i>{{ \Carbon\Carbon::parse($post['created_time'])->format('d/m H:i') }}</div>
                                                <div class="post-message">{{ $post['message'] ?? 'Post sem texto' }}</div>
                                            </a>
                                        @empty
                                            <div class="text-center p-4 text-muted">Nenhum post recente.</div>
                                        @endforelse
                                    </div>
                                </div>
                                <div class="col-md-8 col-lg-9">
                                    <div class="p-3 border-bottom border-secondary"><h6 class="color-primary m-0">Mídias nos Comentários</h6></div>
                                    <div class="text-center p-5 comments-loader" style="display: none;">
                                        <div class="spinner-border text-primary" role="status"></div>
                                        <p class="mt-2 text-muted">Buscando...</p>
                                    </div>
                                    <div class="comments-grid-container custom-scroll comments-container">
                                        <div class="d-flex flex-column align-items-center justify-content-center h-100 text-muted opacity-50 comments-placeholder">
                                            <i class="far fa-hand-point-left fa-3x mb-3"></i>
                                            <p>Selecione um post ao lado.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- MODAL DE REELS --}}
            <div class="modal fade" id="reelsModal-{{ $account->id }}" tabindex="-1">
                <div class="modal-dialog modal-dialog-centered modal-xl">
                    <div class="modal-content" style="background-color: #262626; border: 1px solid #3d3d3d; border-radius: 12px; overflow: hidden;">
                        <div class="ig-settings-card-top-line"></div>
                        <div class="modal-header border-bottom border-secondary p-4">
                            <h5 class="modal-title text-white fw-bold">Reels: {{ $account->username }}</h5>
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body p-4">
                            <div class="text-center p-4 reels-loader" style="display: none;">
                                <i class="fas fa-spinner fa-spin fa-2x" style="color: #E6B34A;"></i>
                                <p class="mt-2 text-muted">Buscando Reels...</p>
                            </div>
                            <div class="custom-scroll reels-list-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 15px; max-height: 65vh; overflow-y: auto; padding: 10px;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- MODAL DE STORIES --}}
            <div class="modal fade" id="storiesModal-{{ $account->id }}" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-xl">
                    <div class="modal-content" style="background-color: #262626; border: 1px solid #3d3d3d; border-radius: 12px; overflow: hidden;">
                        <div class="ig-settings-card-top-line"></div>
                        <div class="modal-header border-bottom border-secondary p-4">
                            <h5 class="modal-title text-white fw-bold">Stories: {{ $account->username }}</h5>
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body p-4">
                            
                            <div class="d-flex flex-wrap justify-content-between align-items-center mb-4 p-3" style="background-color: #333; border-radius: 10px; border: 1px solid #3d3d3d;">
                                <div>
                                    <button type="button" class="btn btn-outline-secondary btn-sm select-all-btn">
                                        Selecionar Todos
                                    </button>
                                </div>
                                
                                <div class="d-flex align-items-center gap-3">
                                    <div class="d-flex align-items-center gap-2">
                                        <label class="text-muted mb-0" style="font-size: 0.85rem;">Busca/Galeria:</label>
                                        <div style="position: relative; display: inline-block;">
                                            <select class="form-select bg-dark text-white border-secondary pe-4 modal-story-hours-select" data-account-id="{{ $account->id }}" style="width: auto; cursor: pointer; appearance: none; -webkit-appearance: none; font-size: 0.85rem; padding-top: 4px; padding-bottom: 4px;">
                                                @php $currentHours = $account->story_fetch_hours ?? 24; @endphp
                                                @for ($i = 1; $i <= 24; $i++)
                                                    <option value="{{ $i }}" {{ $currentHours == $i ? 'selected' : '' }}>Últimas {{ $i }}h</option>
                                                @endfor
                                            </select>
                                            <i class="fas fa-chevron-down text-muted" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 0.7rem;"></i>
                                        </div>
                                    </div>
                                    
                                    <div style="width: 1px; height: 24px; background-color: #555;"></div>
                                    
                                    <span class="selected-count text-muted" style="font-size: 0.85rem;">0 selecionados</span>
                                    <button type="button" class="btn btn-primary btn-sm save-selected-btn px-3" disabled>
                                        <i class="fas fa-save me-1"></i> Salvar
                                    </button>
                                </div>
                            </div>
                            
                            <div class="text-center p-4 stories-loader" style="display: none;">
                                <i class="fas fa-spinner fa-spin fa-2x" style="color: #E6B34A;"></i>
                                <p class="mt-2 text-muted">Buscando Stories...</p>
                            </div>
                            
                            <div class="custom-scroll stories-list-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 15px; max-height: 55vh; overflow-y: auto; padding: 10px;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        @empty
            <div class="text-center mt-5">
                <div class="ig-header-icon mx-auto mb-4" style="width: 80px; height: 80px; border-radius: 20px;">
                    <i class="fab fa-instagram text-white" style="font-size: 3rem;"></i>
                </div>
                <h3 class="text-white">Nenhuma conta conectada</h3>
                <p class="text-muted">Conecte seu Instagram Business para importar Mídias.</p>
                <a href="{{ route('login.instagram.redirect') }}" class="btn btn-primary mt-3 px-4 py-2">
                    <i class="fab fa-instagram me-2"></i> Conectar Instagram
                </a>
            </div>
        @endforelse

    </div>
</div>
@endsection

@push('scripts')
    @vite('resources/js/profile-instagram-settings.js')
@endpush