@php
    use App\Helpers\CountryHelper;
@endphp
@extends('adminlte::page') {{-- Menggunakan layout AdminLTE yang sudah Anda instal --}}

@section('title', 'Dashboard Saya') {{-- Judul halaman di tab browser --}}

@section('content_header')
    <h1>Dashboard Pengguna</h1> {{-- Judul besar di dalam halaman dashboard --}}
@stop

@section('content')
    {{-- Menampilkan nama pengguna yang sedang login --}}
    <p>Selamat datang, **{{ Auth::user()->name }}**!</p>

    {{-- Profile Visibility Status Banner --}}
    @if(Auth::user()->isProfilePrivate())
        <div class="alert alert-warning alert-dismissible">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            <h5><i class="icon fas fa-lock"></i> Profil Privat Aktif</h5>
            <p class="mb-0">
                Profil Anda saat ini bersifat privat dan tidak dapat diakses oleh publik. 
                <a href="{{ route('profile.settings') }}" class="alert-link">Klik di sini</a> untuk mengubah pengaturan visibilitas profil.
            </p>
        </div>
    @else
        <div class="alert alert-success alert-dismissible">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            <h5><i class="icon fas fa-globe"></i> Profil Publik Aktif</h5>
            <p class="mb-0">
                Profil Anda dapat diakses oleh semua orang. Anda dapat membagikan link profil Anda ke sosial media.
            </p>
        </div>
    @endif

	{{-- Card Profil Pengguna --}}
<div class="card mb-4">
    <div class="card-body">
        <div class="row align-items-center">
            {{-- Avatar dan Info --}}
            <div class="col-12 col-md-8 d-flex align-items-center mb-3 mb-md-0">
                <img src="{{ Auth::user()->profile_picture_url ?? asset('img/user-a-solid.svg') }}" 
                     alt="Avatar" class="rounded-circle mr-3" width="60" height="60">

                <div>
                    <h5 class="mb-1">{{ '@' . Auth::user()->username }}</h5>
                    <a href="{{ url('/u/' . Auth::user()->username) }}" target="_blank" class="text-primary d-block text-break">
                        {{ url('/u/' . Auth::user()->username) }}
                    </a>
                    <div class="mt-1">
                        <span class="badge badge-{{ Auth::user()->isProfilePublic() ? 'success' : 'warning' }}">
                            <i class="fas {{ Auth::user()->isProfilePublic() ? 'fa-globe' : 'fa-lock' }} mr-1"></i>
                            {{ Auth::user()->isProfilePublic() ? 'Publik' : 'Privat' }}
                        </span>
                    </div>
                </div>
            </div>

            {{-- Tombol Share (hanya tampil jika profile public) --}}
            <div class="col-12 col-md-4 text-md-right">
                @if(Auth::user()->isProfilePublic())
                    <button class="btn btn-outline-success w-100 w-md-auto" onclick="openModal()">
                        <i class="fas fa-share-alt mr-1"></i> Bagikan
                    </button>
                @else
                    <button class="btn btn-outline-secondary w-100 w-md-auto" disabled>
                        <i class="fas fa-lock mr-1"></i> Profil Privat
                    </button>
                    <div class="mt-2">
                        <small class="text-muted">
                            <a href="{{ route('profile.settings') }}" class="text-primary">
                                <i class="fas fa-cog mr-1"></i>Ubah ke Publik
                            </a>
                        </small>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

{{-- Card Status Integrasi Sosial Media --}}
<div class="row mb-4">
    @foreach([
        ['name' => 'YouTube', 'icon' => 'fab fa-youtube', 'route' => 'admin.youtube.index', 'status' => Auth::user()->youtube_channel_id, 'label' => Auth::user()->youtube_channel_title],
        ['name' => 'Telegram', 'icon' => 'fab fa-telegram', 'route' => 'admin.telegram.index', 'status' => Auth::user()->telegram_channel_username, 'label' => Auth::user()->telegram_channel_name],
        ['name' => 'Discord', 'icon' => 'fab fa-discord', 'route' => 'admin.discord.index', 'status' => Auth::user()->discord_server_id, 'label' => Auth::user()->discord_server_name],
        ['name' => 'TikTok', 'icon' => 'fab fa-tiktok', 'route' => 'admin.tiktok.index', 'status' => Auth::user()->tiktok_user_id, 'label' => Auth::user()->tiktok_display_name],
    ] as $integration)
        <div class="col-md-3 mb-3">
            <div class="card h-100 shadow-sm">
                <div class="card-body text-center">
                    <i class="{{ $integration['icon'] }} fa-2x mb-2"></i>
                    <h5 class="card-title mb-1">{{ $integration['name'] }} Integration</h5>
                    @if($integration['status'])
                        <span class="badge badge-success mb-2">Connected</span>
                        <div class="small text-muted">{{ $integration['label'] }}</div>
                        <a href="{{ route($integration['route']) }}" class="btn btn-outline-primary btn-sm mt-2">Manage</a>
                    @else
                        <span class="badge badge-secondary mb-2">Not Connected</span>
                        <a href="{{ route($integration['route']) }}" class="btn btn-primary btn-sm mt-2">Connect</a>
                    @endif
                </div>
            </div>
        </div>
    @endforeach
</div>

{{-- Modal Share Modern (hanya tampil jika profile public) --}}
@if(Auth::user()->isProfilePublic())
<div class="modal fade" id="shareModal" tabindex="-1" role="dialog" aria-labelledby="shareModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="shareModalLabel">Bagikan Profil Publik</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="closeModal()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body text-center">
        <img src="{{ Auth::user()->profile_picture_url ?? asset('img/user-a-solid.svg') }}" alt="Avatar" class="rounded-circle mb-2" style="width:64px;height:64px;object-fit:cover;">
        <h6 class="mb-1">{{ '@' . Auth::user()->username }}</h6>
        <div class="input-group mb-2">
          <input type="text" class="form-control text-center" id="profileLinkInput" value="{{ url('/u/' . Auth::user()->username) }}" readonly>
          <div class="input-group-append">
            <button class="btn btn-success" type="button" onclick="copyLink()"><i class="fas fa-copy"></i></button>
          </div>
        </div>
        <div class="mb-3">
          <small class="text-muted">Bagikan link profil Anda ke teman atau sosial media:</small>
        </div>
        <div class="d-flex flex-wrap justify-content-center gap-2 mb-3">
          <a class="btn btn-sm btn-success" target="_blank" href="https://wa.me/?text={{ urlencode(url('/u/' . Auth::user()->username)) }}"><i class="fab fa-whatsapp mr-1"></i> WhatsApp</a>
          <a class="btn btn-sm btn-info text-white" target="_blank" href="https://twitter.com/intent/tweet?url={{ urlencode(url('/u/' . Auth::user()->username)) }}"><i class="fab fa-twitter mr-1"></i> Twitter</a>
          <a class="btn btn-sm btn-primary" target="_blank" href="https://t.me/share/url?url={{ urlencode(url('/u/' . Auth::user()->username)) }}"><i class="fab fa-telegram mr-1"></i> Telegram</a>
          <a class="btn btn-sm btn-primary" style="background:#4267B2;" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(url('/u/' . Auth::user()->username)) }}"><i class="fab fa-facebook mr-1"></i> Facebook</a>
        </div>
        <div class="mb-2">
          <img src="https://quickchart.io/qr?text={{ urlencode(url('/u/' . Auth::user()->username)) }}&size=120" alt="QR Code" class="rounded" style="border:1px solid #eee;">
          <div><small class="text-muted">Scan QR untuk buka profil</small></div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-link text-danger" data-dismiss="modal" onclick="closeModal()">Tutup</button>
      </div>
    </div>
  </div>
</div>
@endif

{{-- Statistik Dashboard --}}
<div class="row mb-4">
    <div class="col-md-3">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h3 class="card-title">Total Klik</h3>
            </div>
            <div class="card-body text-center">
                <h2 class="text-primary">{{ number_format($totalClicks) }}</h2>
                <p class="text-muted mb-0">Semua waktu</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card">
            <div class="card-header bg-success text-white">
                <h3 class="card-title">Klik Hari Ini</h3>
            </div>
            <div class="card-body text-center">
                <h2 class="text-success">{{ number_format($todayClicks) }}</h2>
                <p class="text-muted mb-0">Hari ini</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card">
            <div class="card-header bg-info text-white">
                <h3 class="card-title">Total Link</h3>
            </div>
            <div class="card-body text-center">
                <h2 class="text-info">{{ number_format($totalShortlinks) }}</h2>
                <p class="text-muted mb-0">Total Link</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card">
            <div class="card-header bg-warning text-white">
                <h3 class="card-title">Status Profil</h3>
            </div>
            <div class="card-body text-center">
                <h2 class="text-warning">
                    <i class="fas {{ Auth::user()->isProfilePublic() ? 'fa-globe' : 'fa-lock' }}"></i>
                </h2>
                <p class="text-muted mb-0">{{ Auth::user()->isProfilePublic() ? 'Publik' : 'Privat' }}</p>
            </div>
        </div>
    </div>
</div>

{{-- Summary Shortlink Terbaru --}}
<div class="card">
    <div class="card-header">
        <h3 class="card-title">Shortlink Terbaru</h3>
    </div>
    <div class="card-body">
        @if($recentShortlinks->isEmpty())
            <p class="text-muted text-center">Belum ada shortlink dibuat.</p>
        @else
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>URL Asli</th>
                            <th>Klik</th>
                            <th>Dibuat</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($recentShortlinks as $shortlink)
                            @php
                                // Parse URL asli dari shortlink
                                parse_str(ltrim($shortlink->original, '?'), $params);
                                $originalUrl = null;
                                
                                // Coba berbagai parameter yang mungkin ada
                                if (isset($params['web1'])) {
                                    $originalUrl = urldecode(base64_decode(urldecode($params['web1'])));
                                } elseif (isset($params['lnk1'])) {
                                    $originalUrl = urldecode(base64_decode(urldecode($params['lnk1'])));
                                } elseif (isset($params['yt1'])) {
                                    $originalUrl = urldecode(base64_decode(urldecode($params['yt1'])));
                                }
                                
                                $originalUrl = $originalUrl ?: '-';
                                
                                // Trim URL untuk tampilan yang rapi
                                $displayUrl = strlen($originalUrl) > 50 ? substr($originalUrl, 0, 50) . '...' : $originalUrl;
                            @endphp
                            <tr>
                                <td><code>{{ $shortlink->id }}</code></td>
                                <td title="{{ $originalUrl }}">
                                    <span class="text-break">{{ $displayUrl }}</span>
                                </td>
                                <td>
                                    <span class="badge badge-info">{{ number_format($shortlink->clicks) }}</span>
                                </td>
                                <td>{{ $shortlink->created_at ? \Carbon\Carbon::parse($shortlink->created_at)->format('d/m/Y H:i') : 'N/A' }}</td>
                                <td>
                                    <a href="{{ route('admin.shortlinks.edit', $shortlink->id) }}" class="btn btn-sm btn-primary">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <a href="{{ url('/admin/stats/' . $shortlink->id) }}" class="btn btn-sm btn-info ml-1" target="_blank">
                                        <i class="fas fa-chart-bar mr-1"></i>Statistik
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="text-center mt-3">
                <a href="{{ route('admin.my-links') }}" class="btn btn-primary">
                    <i class="fas fa-arrow-right mr-1"></i> Lihat Semua Shortlink
                </a>
            </div>
        @endif
    </div>
</div>

{{-- Social Sharing Section --}}
@include('components.social-sharing-buttons-admin', [
    'shareTitle' => 'Bagikan Dashboard',
    'showDescription' => true,
    'shareDescription' => 'Bagikan dashboard KunciLink.id Anda ke sosial media atau salin link untuk dibagikan.',
    'title' => 'Dashboard KunciLink.id - ' . Auth::user()->name,
    'description' => 'Lihat dashboard ' . Auth::user()->name . ' di KunciLink.id - Platform social unlock terbaik Indonesia.'
])

{{-- Statistik Detail --}}
<div class="row mt-4">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header bg-secondary text-white">
                <h3 class="card-title">Top 5 Negara</h3>
            </div>
            <div class="card-body p-2">
                @if($clicksByCountry->isEmpty())
                    <p class="text-muted">Belum ada data.</p>
                @else
                    <ul class="list-group">
                        @foreach ($clicksByCountry as $item)
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                {{ $item->country ?? 'Unknown' }}
                                <span class="badge bg-secondary rounded-pill">{{ $item->total }}</span>
                            </li>
                        @endforeach
                    </ul>
                @endif
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-header bg-secondary text-white">
                <h3 class="card-title">Top 5 Device</h3>
            </div>
            <div class="card-body p-2">
                @if($clicksByDevice->isEmpty())
                    <p class="text-muted">Belum ada data.</p>
                @else
                    <ul class="list-group">
                        @foreach ($clicksByDevice as $item)
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                {{ $item->device ?? 'Unknown' }}
                                <span class="badge bg-secondary rounded-pill">{{ $item->total }}</span>
                            </li>
                        @endforeach
                    </ul>
                @endif
            </div>
        </div>
    </div>
</div>
@stop




@push('js')
<script>
    function openModal() {
        // Bootstrap 4/5 modal
        $('#shareModal').modal('show');
    }

    function closeModal() {
        $('#shareModal').modal('hide');
    }
    function copyLink() {
        const input = document.getElementById('profileLinkInput');
        input.select();
        input.setSelectionRange(0, 99999);
        document.execCommand('copy');
        showToast('Link profil disalin!');
    }
    function showToast(msg) {
        let toast = document.createElement('div');
        toast.className = 'toast position-fixed p-2 text-white bg-success rounded shadow';
        toast.style.bottom = '30px';
        toast.style.left = '50%';
        toast.style.transform = 'translateX(-50%)';
        toast.style.zIndex = 99999;
        toast.innerText = msg;
        document.body.appendChild(toast);
        setTimeout(() => { toast.remove(); }, 1800);
    }
</script>
@endpush