@extends('dashboard.user.layouts.app')
@section('content')
    <div class="page-container">

        <div class="page-title-head d-flex align-items-sm-center flex-sm-row flex-column gap-2">
            <div class="flex-grow-1">
                <h4 class="fs-18 fw-semibold mb-0">{{ $title }}</h4>
            </div>

            <div class="text-end">
                <x-dashboard.breadcrumbs :breadcrumbs="$breadcrumbs" />
            </div>
        </div>

        <div class="row">
            <div class="col-12 mt-4">
                <!-- Section Header -->
                <div class="mb-4">
                    <h3 class="fw-semibold mb-1">Top Traders</h3>
                    <p class="text-muted mb-0">
                        Browse our top-performing traders and start copying their trades to earn profits automatically.
                    </p>
                </div>

                @if (!$traders->isEmpty())
                    <div class="row g-4">
                        @foreach ($traders as $trader)
                            @php
                                $pnl = $trader->sevenDayPnl();
                                $pnlColor = $pnl >= 0 ? '#10b981' : '#ef4444';
                                $pnlSign = $pnl >= 0 ? '+' : '';
                                $performances = $trader->recentPerformances;

                                // Build sparkline data points
                                $points = [];
                                if ($performances->count() > 0) {
                                    $cumulative = 0;
                                    foreach ($performances as $perf) {
                                        $val = (float) $perf->roi_percentage;
                                        $cumulative += $perf->direction->value === 'up' ? $val : -$val;
                                        $points[] = $cumulative;
                                    }
                                }
                            @endphp

                            <div class="col-md-6 col-lg-4">
                                <div class="card shadow-sm border-0 h-100 trader-card">
                                    <div class="card-body p-4">
                                        <!-- Header: Avatar + Name -->
                                        <div class="d-flex align-items-center mb-3">
                                            <a href="{{ asset($trader->image) }}" target="_blank">
                                                <img src="{{ asset($trader->image) }}" alt="{{ @$trader->user->name }}"
                                                    class="rounded-circle me-3" width="52" height="52"
                                                    style="object-fit: cover; border: 2px solid {{ $pnlColor }}20;">
                                            </a>
                                            <div>
                                                <h6 class="mb-0 fw-semibold">{{ @$trader->user->name }}</h6>
                                                <span class="{{ $trader->experience->badge() }}">
                                                    {{ $trader->experience->label() }}
                                                </span>
                                            </div>
                                        </div>

                                        <!-- 7d PnL -->
                                        <div class="d-flex justify-content-between align-items-center mb-3">
                                            <span class="text-muted small">7d PnL</span>
                                            <span class="fw-bold fs-5" style="color: {{ $pnlColor }}">
                                                {{ $pnlSign }}{{ number_format(abs($pnl), 2) }}%
                                            </span>
                                        </div>

                                        <!-- Sparkline Chart -->
                                        <div class="mb-3" style="height: 50px;">
                                            @if (count($points) > 1)
                                                @php
                                                    $minVal = min($points);
                                                    $maxVal = max($points);
                                                    $range = $maxVal - $minVal;
                                                    if ($range == 0) {
                                                        $range = 1;
                                                    }

                                                    $width = 200;
                                                    $height = 45;
                                                    $padding = 2;

                                                    $svgPoints = [];
                                                    $count = count($points);
                                                    for ($i = 0; $i < $count; $i++) {
                                                        $x = $padding + ($i / ($count - 1)) * ($width - 2 * $padding);
                                                        $y =
                                                            $height -
                                                            $padding -
                                                            (($points[$i] - $minVal) / $range) *
                                                                ($height - 2 * $padding);
                                                        $svgPoints[] = round($x, 1) . ',' . round($y, 1);
                                                    }
                                                    $polyline = implode(' ', $svgPoints);

                                                    // Fill area: close the polygon
                                                    $fillPoints =
                                                        $polyline .
                                                        ' ' .
                                                        round($width - $padding, 1) .
                                                        ',' .
                                                        $height .
                                                        ' ' .
                                                        $padding .
                                                        ',' .
                                                        $height;
                                                @endphp
                                                <svg viewBox="0 0 {{ $width }} {{ $height }}"
                                                    preserveAspectRatio="none" style="width: 100%; height: 100%;">
                                                    <!-- Gradient fill -->
                                                    <defs>
                                                        <linearGradient id="grad-{{ $trader->uuid }}" x1="0%"
                                                            y1="0%" x2="0%" y2="100%">
                                                            <stop offset="0%"
                                                                style="stop-color:{{ $pnlColor }};stop-opacity:0.3" />
                                                            <stop offset="100%"
                                                                style="stop-color:{{ $pnlColor }};stop-opacity:0.02" />
                                                        </linearGradient>
                                                    </defs>
                                                    <!-- Fill area -->
                                                    <polygon points="{{ $fillPoints }}"
                                                        fill="url(#grad-{{ $trader->uuid }})" />
                                                    <!-- Line -->
                                                    <polyline points="{{ $polyline }}" fill="none"
                                                        stroke="{{ $pnlColor }}" stroke-width="2"
                                                        stroke-linecap="round" stroke-linejoin="round" />
                                                </svg>
                                            @else
                                                <div class="d-flex align-items-center justify-content-center h-100">
                                                    <small class="text-muted">No chart data</small>
                                                </div>
                                            @endif
                                        </div>

                                        <!-- Stats Row -->
                                        <div class="row text-center mb-3 g-2">
                                            <div class="col-12">
                                                <div class="border rounded p-2">
                                                    <small class="text-muted d-block"
                                                        style="font-size: 11px;">Balance</small>
                                                    <span class="fw-semibold small">
                                                        {{ currency(@$trader->user->currency) . formatAmount($trader->balance) }}
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <div class="border rounded p-2">
                                                    <small class="text-muted d-block"
                                                        style="font-size: 11px;">Status</small>
                                                    <span class="{{ $trader->status->badge() }}">
                                                        {{ $trader->status->label() }}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- CTA -->
                                        @if (!in_array($trader->id, $userRequestTraderIds))
                                            <form action="{{ route('user.copy.trade.request', $trader->uuid) }}"
                                                method="POST"
                                                onsubmit="return confirm('Are you sure you want to send a link request to this trader?')">
                                                @csrf
                                                <button class="btn btn-outline-primary btn-sm w-100">
                                                    <i class="ti ti-send me-1"></i> Send Link Request
                                                </button>
                                            </form>
                                        @else
                                            <a href="{{ route('user.copy.trade.trader.details', $trader->uuid) }}"
                                                class="btn btn-outline-primary btn-sm w-100">
                                                <i class="ti ti-chart-line me-1"></i> View Trader
                                            </a>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="card shadow-sm">
                        <div class="card-body">
                            <div class="text-center py-4">
                                <i class="ti ti-info-circle-filled text-muted fs-4 mb-2 d-block"></i>
                                <p class="mb-0 text-muted">
                                    No active traders are available at the moment.
                                    Once new professional traders join the platform, they will appear here for copy trading.
                                </p>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>

    </div>

    <style>
        .trader-card {
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .trader-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
        }
    </style>
@endsection