{{--
    Profile P&L Chart — 30-day daily curve, gradient-filled area.

    Uses pre-built SVG path from PilotPresenter::buildSparklinePath()
    (called inside forProfile with 720x180 viewBox).

    Receives:
      $profile : array — uses pnl_curve, pnl_curve_path, profit_30d
--}}
@php
    $hasData = !empty($profile['pnl_curve']);
    $totalProfit = (float) $profile['profit_30d'];

    // Sign + color for the headline total
    $totalClass = $totalProfit > 0 ? 'up' : ($totalProfit < 0 ? 'down' : '');
    $totalStr   = ($totalProfit > 0 ? '+' : ($totalProfit < 0 ? '-' : ''))
                . '$' . number_format(abs($totalProfit), 2);

    // Find best/worst day for axis labels
    $bestDay  = null;
    $worstDay = null;
    if ($hasData) {
        $sorted = collect($profile['pnl_curve'])->sortByDesc('profit')->values();
        $bestDay  = $sorted->first();
        $worstDay = $sorted->last();
    }

    // Date range labels
    $startDate = $hasData ? \Carbon\Carbon::parse($profile['pnl_curve'][0]['date'])->format('M j')      : null;
    $endDate   = $hasData ? \Carbon\Carbon::parse(end($profile['pnl_curve'])['date'])->format('M j')    : null;

    // Stroke color follows total direction
    $stroke = $totalProfit >= 0 ? '#15803d' : '#cc0000';
@endphp

<section class="ph-chart">
    <header class="ph-chart__head">
        <div>
            <p class="ph-chart__label">30-day performance</p>
            <h2 class="ph-chart__total {{ $totalClass }}">{{ $totalStr }}</h2>
        </div>
        @if($hasData && $bestDay && $worstDay)
        <div class="ph-chart__meta">
            <div class="ph-chart__meta-row">
                <span class="ph-chart__meta-label">Best day</span>
                <span class="ph-chart__meta-value up">+${{ number_format(abs((float) $bestDay['profit']), 2) }}</span>
            </div>
            <div class="ph-chart__meta-row">
                <span class="ph-chart__meta-label">Worst day</span>
                <span class="ph-chart__meta-value {{ (float) $worstDay['profit'] < 0 ? 'down' : '' }}">
                    @if((float) $worstDay['profit'] < 0)
                        -${{ number_format(abs((float) $worstDay['profit']), 2) }}
                    @else
                        ${{ number_format((float) $worstDay['profit'], 2) }}
                    @endif
                </span>
            </div>
        </div>
        @endif
    </header>

    @if($hasData)
    <div class="ph-chart__svg-wrap">
        <svg viewBox="0 0 720 180" preserveAspectRatio="none" class="ph-chart__svg" aria-hidden="true">
            <defs>
                <linearGradient id="phChartFill-{{ $profile['id'] }}" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%"   stop-color="{{ $stroke }}" stop-opacity="0.18"/>
                    <stop offset="100%" stop-color="{{ $stroke }}" stop-opacity="0"/>
                </linearGradient>
            </defs>
            {{-- Subtle baseline --}}
            <line x1="0" y1="90" x2="720" y2="90" stroke="#e5e7eb" stroke-width="1" stroke-dasharray="2 4"/>
            {{-- Area fill --}}
            <path d="{{ $profile['pnl_curve_path'] }} L720,180 L0,180 Z" fill="url(#phChartFill-{{ $profile['id'] }})"/>
            {{-- Line --}}
            <path d="{{ $profile['pnl_curve_path'] }}"
                  stroke="{{ $stroke }}"
                  stroke-width="2"
                  fill="none"
                  stroke-linejoin="round"
                  stroke-linecap="round"/>
        </svg>
    </div>
    <div class="ph-chart__axis">
        <span>{{ $startDate }}</span>
        <span>{{ $endDate }}</span>
    </div>
    @else
    <div class="ph-chart__empty">
        No trade history yet.
    </div>
    @endif
</section>