@extends('layouts.app')

@section('title', 'Shortlink Details - ' . $shortlink->id)

@section('content')
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">Shortlink Details</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('super-admin.dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('super-admin.shortlinks.index') }}">Shortlinks</a></li>
                        <li class="breadcrumb-item active">{{ $shortlink->id }}</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <!-- Shortlink Info -->
            <div class="row">
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Shortlink Information</h3>
                            <div class="card-tools">
                                <span class="badge {{ $shortlink->is_active ? 'badge-success' : 'badge-secondary' }}">
                                    {{ $shortlink->is_active ? 'Active' : 'Inactive' }}
                                </span>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-3"><strong>Shortlink ID:</strong></div>
                                <div class="col-md-9">
                                    <code>{{ $shortlink->id }}</code>
                                    <a href="{{ url($shortlink->id) }}" target="_blank" class="btn btn-sm btn-outline-primary ml-2">
                                        <i class="fas fa-external-link-alt"></i> Visit
                                    </a>
                                </div>
                            </div>
                            <hr>
                            <div class="row">
                                <div class="col-md-3"><strong>Original URL:</strong></div>
                                <div class="col-md-9">
                                    <div class="text-break">{{ $shortlink->original }}</div>
                                </div>
                            </div>
                            <hr>
                            <div class="row">
                                <div class="col-md-3"><strong>Custom Label:</strong></div>
                                <div class="col-md-9">{{ $shortlink->custom_label ?: 'Not set' }}</div>
                            </div>
                            <hr>
                            <div class="row">
                                <div class="col-md-3"><strong>Description:</strong></div>
                                <div class="col-md-9">{{ $shortlink->description ?: 'No description' }}</div>
                            </div>
                            <hr>
                            <div class="row">
                                <div class="col-md-3"><strong>Created:</strong></div>
                                <div class="col-md-9">{{ $shortlink->created_at->format('F d, Y H:i:s') }}</div>
                            </div>
                            <hr>
                            <div class="row">
                                <div class="col-md-3"><strong>Last Updated:</strong></div>
                                <div class="col-md-9">{{ $shortlink->updated_at->format('F d, Y H:i:s') }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <!-- User Info -->
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Owner Information</h3>
                        </div>
                        <div class="card-body">
                            @if($shortlink->user)
                                <div class="text-center mb-3">
                                    <img src="{{ $shortlink->user->profile_picture_url ?: 'https://via.placeholder.com/80x80?text=User' }}" 
                                         alt="User Avatar" class="img-circle" width="80" height="80">
                                </div>
                                <div class="text-center">
                                    <h5>{{ $shortlink->user->name }}</h5>
                                    <p class="text-muted">{{ $shortlink->user->email }}</p>
                                    <p class="text-muted">@if($shortlink->user->username){{ '@' . $shortlink->user->username }}@endif</p>
                                    <span class="badge badge-{{ $shortlink->user->role === 'super_admin' ? 'danger' : ($shortlink->user->role === 'admin' ? 'warning' : 'info') }}">
                                        {{ ucfirst($shortlink->user->role) }}
                                    </span>
                                </div>
                                <hr>
                                <div class="text-center">
                                    <a href="{{ route('super-admin.users.show', $shortlink->user) }}" class="btn btn-primary btn-sm">
                                        <i class="fas fa-user"></i> View User Profile
                                    </a>
                                </div>
                            @else
                                <div class="text-center text-muted">
                                    <i class="fas fa-user-slash fa-3x mb-3"></i>
                                    <p>No user associated</p>
                                </div>
                            @endif
                        </div>
                    </div>

                    <!-- Quick Actions -->
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Quick Actions</h3>
                        </div>
                        <div class="card-body">
                            <form method="POST" action="{{ route('super-admin.shortlinks.toggle-status', $shortlink) }}" class="mb-2">
                                @csrf
                                @method('PATCH')
                                <button type="submit" class="btn {{ $shortlink->is_active ? 'btn-warning' : 'btn-success' }} btn-block">
                                    <i class="fas {{ $shortlink->is_active ? 'fa-pause' : 'fa-play' }}"></i>
                                    {{ $shortlink->is_active ? 'Deactivate' : 'Activate' }} Shortlink
                                </button>
                            </form>
                            <form method="POST" action="{{ route('super-admin.shortlinks.destroy', $shortlink) }}" 
                                  onsubmit="return confirm('Are you sure you want to delete this shortlink? This action cannot be undone.')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger btn-block">
                                    <i class="fas fa-trash"></i> Delete Shortlink
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Analytics Cards -->
            <div class="row">
                <div class="col-lg-3 col-6">
                    <div class="small-box bg-info">
                        <div class="inner">
                            <h3>{{ number_format($analytics['total_clicks']) }}</h3>
                            <p>Total Clicks</p>
                        </div>
                        <div class="icon">
                            <i class="fas fa-mouse-pointer"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-6">
                    <div class="small-box bg-success">
                        <div class="inner">
                            <h3>{{ number_format($analytics['unique_ips']) }}</h3>
                            <p>Unique Visitors</p>
                        </div>
                        <div class="icon">
                            <i class="fas fa-users"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-6">
                    <div class="small-box bg-warning">
                        <div class="inner">
                            <h3>{{ number_format($analytics['clicks_today']) }}</h3>
                            <p>Clicks Today</p>
                        </div>
                        <div class="icon">
                            <i class="fas fa-calendar-day"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-6">
                    <div class="small-box bg-danger">
                        <div class="inner">
                            <h3>{{ number_format($analytics['clicks_this_month']) }}</h3>
                            <p>This Month</p>
                        </div>
                        <div class="icon">
                            <i class="fas fa-calendar-alt"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Charts Row -->
            <div class="row">
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Click Activity (Last 30 Days)</h3>
                        </div>
                        <div class="card-body">
                            <canvas id="clicksChart" height="100"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Top Countries</h3>
                        </div>
                        <div class="card-body">
                            @if($topCountries->count() > 0)
                                @foreach($topCountries as $country)
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <span>{{ $country->country ?: 'Unknown' }}</span>
                                    <span class="badge badge-primary">{{ number_format($country->clicks) }}</span>
                                </div>
                                @endforeach
                            @else
                                <p class="text-muted text-center">No country data available</p>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <!-- Recent Clicks -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Recent Clicks (Last 20)</h3>
                </div>
                <div class="card-body table-responsive p-0">
                    <table class="table table-hover text-nowrap">
                        <thead>
                            <tr>
                                <th>Date &amp; Time</th>
                                <th>IP Address</th>
                                <th>Country</th>
                                <th>Device/Browser</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recentClicks as $click)
                            <tr>
                                <td>{{ $click->created_at->format('M d, Y H:i:s') }}</td>
                                <td><code>{{ $click->ip_address }}</code></td>
                                <td>
                                    @if($click->country)
                                        <span class="badge badge-info">{{ $click->country }}</span>
                                    @else
                                        <span class="text-muted">Unknown</span>
                                    @endif
                                </td>
                                <td>
                                    <small>{{ $click->device ?: 'Unknown' }}</small>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="4" class="text-center text-muted py-4">
                                    <i class="fas fa-mouse-pointer fa-2x mb-2"></i>
                                    <br>No clicks recorded yet.
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>
</div>
@endsection

@push('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
@endpush

@push('scripts')
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
$(document).ready(function() {
    // Prepare data for clicks chart
    var clicksData = @json($clicksByDay);
    
    // Create array of last 30 days
    var last30Days = [];
    var clicksMap = {};
    
    // Map clicks data by date
    clicksData.forEach(function(item) {
        clicksMap[item.date] = item.clicks;
    });
    
    // Generate last 30 days with clicks data
    for (var i = 29; i >= 0; i--) {
        var date = new Date();
        date.setDate(date.getDate() - i);
        var dateStr = date.toISOString().split('T')[0];
        var label = date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
        
        last30Days.push({
            date: dateStr,
            label: label,
            clicks: clicksMap[dateStr] || 0
        });
    }
    
    // Create clicks chart
    var ctx = document.getElementById('clicksChart').getContext('2d');
    var clicksChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: last30Days.map(function(item) { return item.label; }),
            datasets: [{
                label: 'Clicks',
                data: last30Days.map(function(item) { return item.clicks; }),
                borderColor: 'rgb(75, 192, 192)',
                backgroundColor: 'rgba(75, 192, 192, 0.1)',
                tension: 0.1,
                fill: true
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        stepSize: 1
                    }
                }
            },
            plugins: {
                legend: {
                    display: false
                }
            }
        }
    });
});
</script>
@endpush