@extends('adminlte::page')

@section('title', 'Discord Integration - KunciLink')

@section('content_header')
    <div class="p-4 rounded mb-4" style="background: linear-gradient(90deg, #5865F2 0%, #7289DA 100%); color: #fff;">
        <div class="d-flex align-items-center">
            <i class="fab fa-discord fa-3x mr-3"></i>
            <div>
                <h1 class="mb-0" style="font-weight: 700; letter-spacing: 1px;">Discord Integration</h1>
                <div class="mt-1">Pantau pertumbuhan server Discord Anda secara otomatis</div>
            </div>
        </div>
    </div>
@stop

@section('content')
    <div class="row justify-content-center">
        <div class="col-lg-7 col-md-10">
            <div class="card shadow-lg border-0">
                <div class="card-body text-center">
                    
                    @if(Auth::user()->discord_invite_link)
                        {{-- Card Server Terhubung --}}
                        <div class="mb-4">
                            @if(Auth::user()->discord_server_icon)
                                <img src="{{ Auth::user()->discord_server_icon }}" class="rounded-circle shadow" width="110" height="110" style="object-fit:cover; border:4px solid #5865F2;">
                            @else
                                <div class="rounded-circle shadow d-inline-flex align-items-center justify-content-center" style="width:110px; height:110px; background: linear-gradient(135deg, #5865F2 0%, #7289DA 100%); border:4px solid #5865F2;">
                                    <i class="fab fa-discord fa-3x text-white"></i>
                                </div>
                            @endif
                            
                            <h2 class="mt-3 mb-1" style="font-weight: 600;">{{ Auth::user()->discord_server_name ?? 'Discord Server' }}</h2>
                            
                            {{-- Server Info dan Verification --}}
                            <div class="mb-2">
                                @if(Auth::user()->discord_invite_link)
                                    <a href="{{ Auth::user()->discord_invite_link }}" target="_blank" class="text-primary">
                                        <i class="fab fa-discord mr-1"></i>{{ Auth::user()->discord_server_name }}
                                    </a>
                                @else
                                    <span class="text-muted">
                                        <i class="fab fa-discord mr-1"></i>Server tidak tersedia
                                    </span>
                                @endif
                                @if(Auth::user()->discord_is_verified)
                                    <span class="badge badge-success ml-2">
                                        <i class="fas fa-check-circle mr-1"></i>Verified
                                    </span>
                                @endif
                            </div>
                            
                            <span class="badge badge-primary mb-2">Server Terhubung</span>
                            
                            {{-- Server Info --}}
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <small class="text-muted">
                                        <i class="fas fa-sync-alt mr-1"></i>
                                        Last sync: {{ Auth::user()->discord_last_sync_at ? \Carbon\Carbon::parse(Auth::user()->discord_last_sync_at)->diffForHumans() : 'Never' }}
                                    </small>
                                </div>
                                <div class="col-md-6">
                                    <small class="text-muted">
                                        <i class="fas fa-link mr-1"></i>
                                        @if(Auth::user()->discord_invite_link)
                                            <a href="{{ Auth::user()->discord_invite_link }}" target="_blank" class="text-primary">Invite link available</a>
                                        @else
                                            No invite link
                                        @endif
                                    </small>
                                </div>
                            </div>
                            
                            <div class="d-flex justify-content-center align-items-center mb-3" style="gap: 2rem;">
                                <div>
                                    <div class="h4 mb-0" style="font-weight:700; color:#5865F2;">
                                        <i class="fas fa-users mr-1"></i> {{ number_format(Auth::user()->discord_member_count ?? 0) }}
                                    </div>
                                    <div class="small text-muted">Total Members</div>
                                </div>
                                <div>
                                    <div class="h4 mb-0" style="font-weight:700; color:#28a745;">
                                        <i class="fas fa-server mr-1"></i> Server
                                    </div>
                                    <div class="small text-muted">Type</div>
                                </div>
                                <div>
                                    <div class="h4 mb-0" style="font-weight:700; color:#ffc107;">
                                        <i class="fas fa-clock mr-1"></i> 
                                        @if(Auth::user()->discord_last_sync_at)
                                            Active
                                        @else
                                            Inactive
                                        @endif
                                    </div>
                                    <div class="small text-muted">Status</div>
                                </div>
                            </div>
                            
                            {{-- Server Description --}}
                            @if(Auth::user()->discord_server_description)
                                <div class="mb-3">
                                    <div class="card">
                                        <div class="card-body">
                                            <h6 class="card-title">Deskripsi Server</h6>
                                            <p class="card-text small">{{ Str::limit(Auth::user()->discord_server_description, 200) }}</p>
                                            @if(strlen(Auth::user()->discord_server_description) > 200)
                                                <button class="btn btn-sm btn-link" onclick="showFullDescription()">Baca selengkapnya</button>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endif
                            
                            {{-- Action Buttons --}}
                            <div class="mb-3">
                                <a href="{{ route('admin.discord.sync') }}" class="btn btn-outline-primary btn-lg mr-2">
                                    <i class="fas fa-sync-alt mr-1"></i> Sync Data
                                </a>
                                <a href="{{ route('admin.discord.disconnect') }}" class="btn btn-outline-danger btn-lg" 
                                   onclick="return confirm('Apakah Anda yakin ingin memutuskan integrasi Discord?')">
                                    <i class="fas fa-unlink mr-1"></i> Putuskan Integrasi
                                </a>
                            </div>
                        </div>
                        
                        {{-- Modal untuk deskripsi lengkap --}}
                        @if(Auth::user()->discord_server_description && strlen(Auth::user()->discord_server_description) > 200)
                            <div class="modal fade" id="descriptionModal" tabindex="-1">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">Deskripsi Server Lengkap</h5>
                                            <button type="button" class="close" data-dismiss="modal">
                                                <span>&times;</span>
                                            </button>
                                        </div>
                                        <div class="modal-body">
                                            <p>{{ Auth::user()->discord_server_description }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    @else
                        {{-- Card Belum Terhubung --}}
                        <div class="mb-4">
                            <div class="rounded-circle shadow d-inline-flex align-items-center justify-content-center mb-3" style="width:120px; height:120px; background: linear-gradient(135deg, #5865F2 0%, #7289DA 100%);">
                                <i class="fab fa-discord fa-4x text-white"></i>
                            </div>
                            <h3 class="mb-2">Hubungkan Server Discord Anda</h3>
                            <p class="text-muted mb-4">Dapatkan insight member dan statistik server secara otomatis di dashboard KunciLink.</p>
                            
                            {{-- Connection Form --}}
                            <form method="POST" action="{{ route('admin.discord.connect') }}" class="mb-3">
                                @csrf
                                <div class="form-group">
                                    <label for="invite_code" class="form-label">Invite Link Server Discord:</label>
                                    <div class="input-group" style="max-width: 500px; margin: 0 auto;">
                                        <input type="text" 
                                               class="form-control @error('invite_code') is-invalid @enderror" 
                                               id="invite_code" 
                                               name="invite_code" 
                                               placeholder="https://discord.gg/abcdef atau abcdef" 
                                               value="{{ old('invite_code') }}"
                                               maxlength="100">
                                    </div>
                                    <small class="form-text text-muted">Contoh: https://discord.gg/abcdef atau abcdef</small>
                                    @error('invite_code')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                                <button type="submit" class="btn btn-primary btn-lg">
                                    <i class="fab fa-discord mr-2"></i> Hubungkan Server Discord
                                </button>
                            </form>
                            
                            {{-- Server Preview (AJAX) --}}
                            <div id="serverPreview" class="mt-3" style="display: none;">
                                <div class="card">
                                    <div class="card-body">
                                        <h6 class="card-title">Preview Server</h6>
                                        <div id="previewContent"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                    
                    <hr>
                    
                    <div class="row mt-3">
                        <div class="col-md-4 mb-3">
                            <div class="p-3 rounded shadow-sm bg-light h-100">
                                <i class="fas fa-chart-line fa-2x text-primary mb-2"></i>
                                <div class="font-weight-bold">Analytics Real-time</div>
                                <div class="small text-muted">Pantau pertumbuhan member dan statistik server Anda secara real-time.</div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="p-3 rounded shadow-sm bg-light h-100">
                                <i class="fas fa-sync-alt fa-2x text-success mb-2"></i>
                                <div class="font-weight-bold">Auto Sync</div>
                                <div class="small text-muted">Data server otomatis tersinkronisasi dengan dashboard KunciLink.</div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="p-3 rounded shadow-sm bg-light h-100">
                                <i class="fas fa-shield-alt fa-2x text-info mb-2"></i>
                                <div class="font-weight-bold">Keamanan & Privasi</div>
                                <div class="small text-muted">Data server Anda aman dan hanya dapat diakses oleh Anda.</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop

@section('js')
<script>
function showFullDescription() {
    $('#descriptionModal').modal('show');
}

// Server preview functionality
$(document).ready(function() {
    let typingTimer;
    const doneTypingInterval = 1000;
    
    $('#invite_code').on('keyup', function() {
        clearTimeout(typingTimer);
        const inviteCode = $(this).val().trim();
        
        if (inviteCode.length >= 3) {
            typingTimer = setTimeout(function() {
                getServerPreview(inviteCode);
            }, doneTypingInterval);
        } else {
            $('#serverPreview').hide();
        }
    });
    
    $('#invite_code').on('keydown', function() {
        clearTimeout(typingTimer);
    });
});

function getServerPreview(inviteCode) {
    $.ajax({
        url: '{{ route("admin.discord.get-server-info") }}',
        method: 'POST',
        data: {
            invite_code: inviteCode,
            _token: '{{ csrf_token() }}'
        },
        success: function(response) {
            if (response.success) {
                const data = response.data;
                let previewHtml = `
                    <div class="d-flex align-items-center">
                        ${data.icon ? `<img src="${data.icon}" class="rounded-circle mr-3" width="50" height="50">` : 
                          `<div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center mr-3" style="width:50px; height:50px;">
                              <i class="fab fa-discord"></i>
                           </div>`}
                        <div>
                            <h6 class="mb-1">${data.name}</h6>
                            <small class="text-muted">${data.member_count.toLocaleString()} members</small>
                        </div>
                    </div>
                `;
                
                if (data.description) {
                    previewHtml += `<p class="mt-2 small">${data.description.substring(0, 100)}${data.description.length > 100 ? '...' : ''}</p>`;
                }
                
                $('#previewContent').html(previewHtml);
                $('#serverPreview').show();
            } else {
                $('#serverPreview').hide();
            }
        },
        error: function() {
            $('#serverPreview').hide();
        }
    });
}
</script>
@stop