@extends('superadmin.layouts.app')

@section('title', 'User Details')

@section('content')
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0">User 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.users.index') }}">Users</a></li>
                    <li class="breadcrumb-item active">{{ $user->name }}</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<section class="content">
    <div class="container-fluid">
        <!-- User Profile Card -->
        <div class="row">
            <div class="col-md-4">
                <div class="card card-primary card-outline">
                    <div class="card-body box-profile">
                        <div class="text-center">
                            @if($user->profile_picture_url)
                                <img class="profile-user-img img-fluid img-circle" src="{{ $user->profile_picture_url }}" alt="User profile picture">
                            @else
                                <div class="profile-user-img img-fluid img-circle bg-gray-200 d-inline-flex align-items-center justify-content-center" style="width: 128px; height: 128px;">
                                    <i class="fas fa-user fa-3x text-gray-400"></i>
                                </div>
                            @endif
                        </div>

                        <h3 class="profile-username text-center">{{ $user->name }}</h3>

                        <p class="text-muted text-center">
                            @if($user->role == 'super_admin')
                                <span class="badge badge-danger">Super Admin</span>
                            @elseif($user->role == 'admin')
                                <span class="badge badge-warning">Admin</span>
                            @else
                                <span class="badge badge-info">User</span>
                            @endif
                            
                            @if($user->banned_at)
                                <span class="badge badge-danger ml-1">Banned</span>
                            @else
                                <span class="badge badge-success ml-1">Active</span>
                            @endif
                        </p>

                        <ul class="list-group list-group-unbordered mb-3">
                            <li class="list-group-item">
                                <b>Email</b> <span class="float-right">{{ $user->email }}</span>
                            </li>
                            <li class="list-group-item">
                                <b>Username</b> <span class="float-right">{{ $user->username }}</span>
                            </li>
                            <li class="list-group-item">
                                <b>Shortlinks</b> <span class="float-right">{{ number_format($userStats['total_shortlinks']) }}</span>
                            </li>
                            <li class="list-group-item">
                                <b>Total Clicks</b> <span class="float-right">{{ number_format($userStats['total_clicks']) }}</span>
                            </li>
                            <li class="list-group-item">
                                <b>Joined</b> <span class="float-right">{{ $user->created_at->format('M d, Y') }}</span>
                            </li>
                        </ul>

                        <div class="row">
                            <div class="col-6">
                                <a href="{{ route('super-admin.users.edit', $user) }}" class="btn btn-primary btn-block">
                                    <i class="fas fa-edit"></i> Edit
                                </a>
                            </div>
                            <div class="col-6">
                                @if($user->role !== 'super_admin')
                                    @if($user->banned_at)
                                        <form method="POST" action="{{ route('super-admin.users.unban', $user) }}">
                                            @csrf
                                            <button type="submit" class="btn btn-success btn-block" onclick="return confirm('Unban this user?')">
                                                <i class="fas fa-user-check"></i> Unban
                                            </button>
                                        </form>
                                    @else
                                        <form method="POST" action="{{ route('super-admin.users.ban', $user) }}">
                                            @csrf
                                            <button type="submit" class="btn btn-warning btn-block" onclick="return confirm('Ban this user?')">
                                                <i class="fas fa-user-times"></i> Ban
                                            </button>
                                        </form>
                                    @endif
                                @else
                                    <button class="btn btn-secondary btn-block" disabled>
                                        <i class="fas fa-shield-alt"></i> Protected
                                    </button>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Additional Info Card -->
                <div class="card card-info">
                    <div class="card-header">
                        <h3 class="card-title">Additional Information</h3>
                    </div>
                    <div class="card-body">
                        <table class="table table-sm">
                            <tr>
                                <td><strong>User ID:</strong></td>
                                <td>{{ $user->id }}</td>
                            </tr>
                            @if($user->phone)
                            <tr>
                                <td><strong>Phone:</strong></td>
                                <td>{{ $user->phone }}</td>
                            </tr>
                            @endif
                            @if($user->google_id)
                            <tr>
                                <td><strong>Google ID:</strong></td>
                                <td>{{ $user->google_id }}</td>
                            </tr>
                            @endif
                            <tr>
                                <td><strong>Email Verified:</strong></td>
                                <td>
                                    @if($user->email_verified_at)
                                        <span class="badge badge-success">Yes</span>
                                        <small class="d-block">{{ $user->email_verified_at->format('M d, Y') }}</small>
                                    @else
                                        <span class="badge badge-warning">No</span>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <td><strong>Last Updated:</strong></td>
                                <td>{{ $user->updated_at->format('M d, Y H:i') }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>

            <div class="col-md-8">
                <!-- Statistics Cards -->
                <div class="row">
                    <div class="col-lg-3 col-6">
                        <div class="small-box bg-info">
                            <div class="inner">
                                <h3>{{ number_format($userStats['total_shortlinks']) }}</h3>
                                <p>Total Shortlinks</p>
                            </div>
                            <div class="icon">
                                <i class="fas fa-link"></i>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-6">
                        <div class="small-box bg-success">
                            <div class="inner">
                                <h3>{{ number_format($userStats['active_shortlinks']) }}</h3>
                                <p>Active Links</p>
                            </div>
                            <div class="icon">
                                <i class="fas fa-check-circle"></i>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-6">
                        <div class="small-box bg-warning">
                            <div class="inner">
                                <h3>{{ number_format($userStats['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-danger">
                            <div class="inner">
                                <h3>{{ $userStats['total_clicks'] > 0 ? number_format($userStats['total_clicks'] / max($userStats['total_shortlinks'], 1), 1) : '0' }}</h3>
                                <p>Avg Clicks/Link</p>
                            </div>
                            <div class="icon">
                                <i class="fas fa-chart-line"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Clicks Chart -->
                @if($clicksByMonth->count() > 0)
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Click Activity (Last 12 Months)</h3>
                    </div>
                    <div class="card-body">
                        <canvas id="clicksChart" style="height: 300px;"></canvas>
                    </div>
                </div>
                @endif

                <!-- Recent Shortlinks -->
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Recent Shortlinks</h3>
                    </div>
                    <div class="card-body">
                        @if($userStats['recent_activity']->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Original URL</th>
                                        <th>Custom Label</th>
                                        <th>Clicks</th>
                                        <th>Status</th>
                                        <th>Created</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($userStats['recent_activity'] as $shortlink)
                                    <tr>
                                        <td>{{ $shortlink->id }}</td>
                                        <td>
                                            <a href="{{ $shortlink->original }}" target="_blank" class="text-truncate d-block" style="max-width: 200px;">
                                                {{ $shortlink->original }}
                                            </a>
                                        </td>
                                        <td>{{ $shortlink->custom_label ?: '-' }}</td>
                                        <td>
                                            <span class="badge badge-info">{{ number_format($shortlink->clicks) }}</span>
                                        </td>
                                        <td>
                                            @if($shortlink->is_active)
                                                <span class="badge badge-success">Active</span>
                                            @else
                                                <span class="badge badge-secondary">Inactive</span>
                                            @endif
                                        </td>
                                        <td>{{ $shortlink->created_at->format('M d, Y') }}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        @else
                        <div class="text-center py-4">
                            <i class="fas fa-link fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">No shortlinks found</h5>
                            <p class="text-muted">This user hasn't created any shortlinks yet.</p>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@if($clicksByMonth->count() > 0)
<script>
$(document).ready(function() {
    // Clicks Chart
    var ctx = document.getElementById('clicksChart').getContext('2d');
    var clicksData = @json($clicksByMonth);
    
    var labels = [];
    var data = [];
    
    clicksData.reverse().forEach(function(item) {
        var monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                         'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
        labels.push(monthNames[item.month - 1] + ' ' + item.year);
        data.push(item.clicks);
    });
    
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: 'Clicks',
                data: data,
                borderColor: 'rgb(75, 192, 192)',
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                tension: 0.1,
                fill: true
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        stepSize: 1
                    }
                }
            },
            plugins: {
                legend: {
                    display: false
                }
            }
        }
    });
});
</script>
@endif
@endpush