@extends('adminlte::page')

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

@section('content_header')
    <div class="p-4 rounded mb-4" style="background: linear-gradient(90deg, #000 0%, #ff0050 100%); color: #fff;">
        <div class="d-flex align-items-center">
            <i class="fab fa-tiktok fa-3x mr-3"></i>
            <div>
                <h1 class="mb-0" style="font-weight: 700; letter-spacing: 1px;">TikTok Integration</h1>
                <div class="mt-1">Pantau pertumbuhan akun TikTok 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(session('success'))
                        <div class="alert alert-success">{{ session('success') }}</div>
                    @endif
                    @if(session('error'))
                        <div class="alert alert-danger">{{ session('error') }}</div>
                    @endif
                    @if(Auth::user()->tiktok_access_token)
                        {{-- Card Akun TikTok Terhubung --}}
                        <div class="mb-4">
                            @if(Auth::user()->tiktok_avatar)
                                <img src="{{ Auth::user()->tiktok_avatar }}" class="rounded-circle shadow" width="110" height="110" style="object-fit:cover; border:4px solid #ff0050;">
                            @else
                                <div class="rounded-circle shadow d-inline-flex align-items-center justify-content-center" style="width:110px; height:110px; background: linear-gradient(135deg, #000 0%, #ff0050 100%); border:4px solid #ff0050;">
                                    <i class="fab fa-tiktok fa-3x text-white"></i>
                                </div>
                            @endif
                            <h2 class="mt-3 mb-1" style="font-weight: 600;">{{ Auth::user()->tiktok_display_name ?? 'TikTok User' }}</h2>
                            <div class="mb-2">
                                @if(Auth::user()->tiktok_username)
                                    <a href="https://www.tiktok.com/@{{ Auth::user()->tiktok_username }}" target="_blank" class="text-primary">
                                        <i class="fab fa-tiktok mr-1"></i>@{{ Auth::user()->tiktok_username }}
                                    </a>
                                @else
                                    <span class="text-muted">
                                        <i class="fab fa-tiktok mr-1"></i>Username tidak tersedia
                                    </span>
                                @endif
                            </div>
                            <span class="badge badge-primary mb-2">Akun Terhubung</span>
                            <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()->tiktok_last_sync_at ? \Carbon\Carbon::parse(Auth::user()->tiktok_last_sync_at)->diffForHumans() : 'Never' }}
                                    </small>
                                </div>
                                <div class="col-md-6">
                                    <small class="text-muted">
                                        <i class="fas fa-link mr-1"></i>
                                        <a href="https://www.tiktok.com/@{{ Auth::user()->tiktok_username }}" target="_blank" class="text-primary">Profile link</a>
                                    </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:#ff0050;">
                                        <i class="fas fa-users mr-1"></i> {{ number_format(Auth::user()->tiktok_follower_count ?? 0) }}
                                    </div>
                                    <div class="small text-muted">Followers</div>
                                </div>
                                <div>
                                    <div class="h4 mb-0" style="font-weight:700; color:#28a745;">
                                        <i class="fas fa-user-friends mr-1"></i> {{ number_format(Auth::user()->tiktok_following_count ?? 0) }}
                                    </div>
                                    <div class="small text-muted">Following</div>
                                </div>
                                <div>
                                    <div class="h4 mb-0" style="font-weight:700; color:#ffc107;">
                                        <i class="fas fa-video mr-1"></i> {{ number_format(Auth::user()->tiktok_video_count ?? 0) }}
                                    </div>
                                    <div class="small text-muted">Videos</div>
                                </div>
                            </div>
                            @if(Auth::user()->tiktok_bio)
                                <div class="mb-3">
                                    <div class="card">
                                        <div class="card-body">
                                            <h6 class="card-title">Bio</h6>
                                            <p class="card-text small">{{ Str::limit(Auth::user()->tiktok_bio, 200) }}</p>
                                            @if(strlen(Auth::user()->tiktok_bio) > 200)
                                                <button class="btn btn-sm btn-link" onclick="showFullDescription()">Baca selengkapnya</button>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endif
                            <div class="mb-3">
                                <a href="{{ route('admin.tiktok.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.tiktok.disconnect') }}" class="btn btn-outline-danger btn-lg" onclick="return confirm('Apakah Anda yakin ingin memutuskan integrasi TikTok?')">
                                    <i class="fas fa-unlink mr-1"></i> Putuskan Integrasi
                                </a>
                            </div>
                        </div>
                        @if(Auth::user()->tiktok_bio && strlen(Auth::user()->tiktok_bio) > 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">Bio Lengkap</h5>
                                            <button type="button" class="close" data-dismiss="modal">
                                                <span>&times;</span>
                                            </button>
                                        </div>
                                        <div class="modal-body">
                                            <p>{{ Auth::user()->tiktok_bio }}</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, #000 0%, #ff0050 100%);">
                                <i class="fab fa-tiktok fa-4x text-white"></i>
                            </div>
                            <h3 class="mb-2">Hubungkan Akun TikTok Anda</h3>
                            <p class="text-muted mb-4">Dapatkan insight followers dan statistik akun secara otomatis di dashboard KunciLink.</p>
                            <a href="{{ route('admin.tiktok.connect') }}" class="btn btn-primary btn-lg">
                                <i class="fab fa-tiktok mr-2"></i> Hubungkan Akun TikTok
                            </a>
                        </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 followers dan statistik akun 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 akun 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 TikTok 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');
}
</script>
@stop