@extends('adminlte::page')

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

@section('content_header')
    <div class="p-4 rounded mb-4" style="background: linear-gradient(90deg, #0088cc 0%, #00a8ff 100%); color: #fff;">
        <div class="d-flex align-items-center">
            <i class="fab fa-telegram fa-3x mr-3"></i>
            <div>
                <h1 class="mb-0" style="font-weight: 700; letter-spacing: 1px;">Telegram Integration</h1>
                <div class="mt-1">Pantau pertumbuhan channel Telegram 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()->telegram_channel_username)
                        {{-- Card Channel Terhubung --}}
                        <div class="mb-4">
                            @if(Auth::user()->telegram_channel_photo)
                                <img src="{{ Auth::user()->telegram_channel_photo }}" class="rounded-circle shadow" width="110" height="110" style="object-fit:cover; border:4px solid #0088cc;">
                            @else
                                <div class="rounded-circle shadow d-inline-flex align-items-center justify-content-center" style="width:110px; height:110px; background: linear-gradient(135deg, #0088cc 0%, #00a8ff 100%); border:4px solid #0088cc;">
                                    <i class="fab fa-telegram fa-3x text-white"></i>
                                </div>
                            @endif
                            
                            <h2 class="mt-3 mb-1" style="font-weight: 600;">{{ Auth::user()->telegram_channel_name ?? 'KunciLink.id' }}</h2>
                            
                            {{-- Username dan Verification --}}
                            <div class="mb-2">
                                @if(Auth::user()->telegram_channel_username)
                                    <a href="https://t.me/{{ Auth::user()->telegram_channel_username }}" target="_blank" class="text-primary">
                                        <i class="fab fa-telegram mr-1"></i>{{ Auth::user()->telegram_channel_username }}
                                    </a>
                                @else
                                    <span class="text-muted">
                                        <i class="fab fa-telegram mr-1"></i>Username tidak tersedia
                                    </span>
                                @endif
                                @if(Auth::user()->telegram_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">Channel Terhubung</span>
                            
                            {{-- Channel 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()->telegram_last_sync_at ? \Carbon\Carbon::parse(Auth::user()->telegram_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()->telegram_invite_link)
                                            <a href="{{ Auth::user()->telegram_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:#0088cc;">
                                        <i class="fas fa-users mr-1"></i> {{ number_format(Auth::user()->telegram_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-broadcast-tower mr-1"></i> Channel
                                    </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()->telegram_last_sync_at)
                                            Active
                                        @else
                                            Inactive
                                        @endif
                                    </div>
                                    <div class="small text-muted">Status</div>
                                </div>
                            </div>
                            
                            {{-- Channel Description --}}
                            @if(Auth::user()->telegram_channel_description)
                                <div class="mb-3">
                                    <div class="card">
                                        <div class="card-body">
                                            <h6 class="card-title">Deskripsi Channel</h6>
                                            <p class="card-text small">{{ Str::limit(Auth::user()->telegram_channel_description, 200) }}</p>
                                            @if(strlen(Auth::user()->telegram_channel_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.telegram.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.telegram.disconnect') }}" class="btn btn-outline-danger btn-lg" 
                                   onclick="return confirm('Apakah Anda yakin ingin memutuskan integrasi Telegram?')">
                                    <i class="fas fa-unlink mr-1"></i> Putuskan Integrasi
                                </a>
                            </div>
                        </div>
                        
                        {{-- Modal untuk deskripsi lengkap --}}
                        @if(Auth::user()->telegram_channel_description && strlen(Auth::user()->telegram_channel_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 Channel Lengkap</h5>
                                            <button type="button" class="close" data-dismiss="modal">
                                                <span>&times;</span>
                                            </button>
                                        </div>
                                        <div class="modal-body">
                                            <p>{{ Auth::user()->telegram_channel_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, #0088cc 0%, #00a8ff 100%);">
                                <i class="fab fa-telegram fa-4x text-white"></i>
                            </div>
                            <h3 class="mb-2">Hubungkan Channel Telegram Anda</h3>
                            <p class="text-muted mb-4">Dapatkan insight member dan statistik channel secara otomatis di dashboard KunciLink.</p>
                            
                            {{-- Connection Form --}}
                            <form method="POST" action="{{ route('admin.telegram.connect') }}" class="mb-3">
                                @csrf
                                <div class="form-group">
                                    <label for="username" class="form-label">Username Channel Telegram:</label>
                                    <div class="input-group" style="max-width: 400px; margin: 0 auto;">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">@</span>
                                        </div>
                                        <input type="text" 
                                               class="form-control @error('username') is-invalid @enderror" 
                                               id="username" 
                                               name="username" 
                                               placeholder="channelname" 
                                               value="{{ old('username') }}"
                                               maxlength="32">
                                    </div>
                                    <small class="form-text text-muted">Contoh: kuncilinkid (tanpa @)</small>
                                    @error('username')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                                <button type="submit" class="btn btn-primary btn-lg">
                                    <i class="fab fa-telegram mr-2"></i> Hubungkan Channel Telegram
                                </button>
                            </form>
                            
                            {{-- Channel Preview (AJAX) --}}
                            <div id="channelPreview" class="mt-3" style="display: none;">
                                <div class="card">
                                    <div class="card-body">
                                        <h6 class="card-title">Preview Channel</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 channel 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 channel 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 channel 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');
}

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

function getChannelPreview(username) {
    $.ajax({
        url: '{{ route("admin.telegram.get-channel-info") }}',
        method: 'POST',
        data: {
            username: username,
            _token: '{{ csrf_token() }}'
        },
        success: function(response) {
            if (response.success) {
                const data = response.data;
                let previewHtml = `
                    <div class="d-flex align-items-center">
                        ${data.photo ? `<img src="${data.photo}" 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-telegram"></i>
                           </div>`}
                        <div>
                            <h6 class="mb-1">${data.title}</h6>
                            <small class="text-muted">@${data.username} • ${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);
                $('#channelPreview').show();
            } else {
                $('#channelPreview').hide();
            }
        },
        error: function() {
            $('#channelPreview').hide();
        }
    });
}
</script>
@stop