@php
    use App\Services\Targets\SalesForecastService;
    use App\Services\Targets\SalesScoreService;
    use App\Support\SalesPerformanceMetrics;

    $forecastPaceBadgeClasses = [
        SalesForecastService::PACE_AHEAD => 'bg-green-100 text-green-800 border-green-200',
        SalesForecastService::PACE_ON_TRACK => 'bg-indigo-100 text-indigo-900 border-indigo-200',
        SalesForecastService::PACE_AT_RISK => 'bg-amber-100 text-amber-900 border-amber-200',
        SalesForecastService::PACE_BEHIND => 'bg-red-100 text-red-800 border-red-200',
        SalesForecastService::PACE_NO_TARGET => 'bg-gray-100 text-gray-700 border-gray-200',
        SalesForecastService::PACE_NO_ELAPSED_DAYS => 'bg-gray-100 text-gray-600 border-gray-200',
    ];

    $forecastPaceLabels = [
        SalesForecastService::PACE_AHEAD => 'Ahead',
        SalesForecastService::PACE_ON_TRACK => 'On track',
        SalesForecastService::PACE_AT_RISK => 'At risk',
        SalesForecastService::PACE_BEHIND => 'Behind',
        SalesForecastService::PACE_NO_TARGET => 'No targets',
        SalesForecastService::PACE_NO_ELAPSED_DAYS => 'Period not started',
    ];

    $statusBadgeClasses = [
        SalesScoreService::STATUS_NO_TARGETS => 'bg-gray-100 text-gray-700 border-gray-200',
        SalesScoreService::STATUS_BEHIND => 'bg-red-100 text-red-800 border-red-200',
        SalesScoreService::STATUS_ON_TRACK => 'bg-amber-100 text-amber-900 border-amber-200',
        SalesScoreService::STATUS_STRONG => 'bg-indigo-100 text-indigo-900 border-indigo-200',
        SalesScoreService::STATUS_TOP_PERFORMER => 'bg-green-100 text-green-800 border-green-200',
        'achieved' => 'bg-green-100 text-green-800 border-green-200',
        'no_target' => 'bg-gray-100 text-gray-600 border-gray-200',
    ];

    $statusLabels = [
        SalesScoreService::STATUS_NO_TARGETS => 'No targets',
        SalesScoreService::STATUS_BEHIND => 'Behind',
        SalesScoreService::STATUS_ON_TRACK => 'On track',
        SalesScoreService::STATUS_STRONG => 'Strong',
        SalesScoreService::STATUS_TOP_PERFORMER => 'Top performer',
        'achieved' => 'Achieved',
        'no_target' => 'No target',
        'behind' => 'Behind',
        'on_track' => 'On track',
    ];

    $scoringModeLabels = [
        SalesScoreService::SCORING_MODE_FULL => 'Activity + sales performance',
        SalesScoreService::SCORING_MODE_ACTIVITY_ONLY => 'Activity targets only',
        SalesScoreService::SCORING_MODE_PERFORMANCE_ONLY => 'Sales performance targets only',
        SalesScoreService::SCORING_MODE_NONE => 'No targets configured',
    ];

    $finalScore = $score['final_score'] ?? null;
    $overallStatus = (string) ($score['status'] ?? SalesScoreService::STATUS_NO_TARGETS);
    $overallBadge = $statusBadgeClasses[$overallStatus] ?? $statusBadgeClasses[SalesScoreService::STATUS_NO_TARGETS];
    $overallLabel = $statusLabels[$overallStatus] ?? ucfirst(str_replace('_', ' ', $overallStatus));

    $activityPillar = $score['pillars']['activity'] ?? [];
    $performancePillar = $score['pillars']['performance'] ?? [];

    $activityConfiguredCount = collect($activityPillar['metrics'] ?? [])
        ->filter(fn ($m) => ($m['configured'] ?? false) === true)
        ->count();
    $performanceConfiguredCount = collect($performancePillar['metrics'] ?? [])
        ->filter(fn ($m) => ($m['configured'] ?? false) === true)
        ->count();

    $performanceBreakdownMetrics = collect($performancePillar['metrics'] ?? [])
        ->filter(fn (array $metric) => SalesPerformanceMetrics::isTargetable((string) ($metric['code'] ?? '')))
        ->values()
        ->all();

    $formatMetricValue = function (array $metric, string $field): string {
        $value = $metric[$field] ?? 0;
        if (($metric['value_type'] ?? 'count') === 'money') {
            return format_rand($value);
        }

        return number_format((float) $value, 0, '.', ',');
    };
@endphp

<x-app-layout>
    <x-slot name="header">
        {{ __('My Performance') }}
    </x-slot>

    <div class="p-6 space-y-6">
        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <p class="text-sm text-gray-600">
                @if (! empty($isManagerPersonal))
                    Team performance for
                    <span class="font-semibold text-gray-900">{{ $reportingPeriod->label() }}</span>
                    @if (($managedSalesmanCount ?? 0) > 0)
                        <span class="text-gray-500">({{ number_format((int) $managedSalesmanCount) }} assigned {{ (int) $managedSalesmanCount === 1 ? 'salesperson' : 'salespeople' }})</span>
                    @else
                        <span class="text-gray-500">(no salespeople assigned)</span>
                    @endif
                @else
                    Viewing <span class="font-semibold text-gray-900">{{ $reportingPeriod->label() }}</span>
                @endif
            </p>
            <x-reporting-period-filter
                :action="route('my-performance.index')"
                :selected-month="$reportingPeriod->month"
                :selected-year="$reportingPeriod->year"
                :preserve="['period_type', 'forecast_chart']"
            >
                <div class="flex shrink-0 items-center gap-1">
                    <label for="period_type" class="whitespace-nowrap text-[10px] font-medium leading-none text-gray-500">Period</label>
                    <div class="relative h-7 w-max shrink-0">
                        <x-styled-select
                            name="period_type"
                            id="period_type"
                            :selected="(string) ($filters['period_type'] ?? 'monthly')"
                            :options="$periodTypeOptions"
                            compact
                            class="h-full"
                        />
                    </div>
                </div>
            </x-reporting-period-filter>
        </div>

        <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6">
            @php
                $cardCount = count($progressCards ?? []);
                $gridCols = match (true) {
                    $cardCount >= 4 => 'md:grid-cols-4',
                    $cardCount === 3 => 'md:grid-cols-3',
                    $cardCount === 2 => 'md:grid-cols-2',
                    default => 'md:grid-cols-1',
                };
            @endphp
            <div class="grid grid-cols-1 {{ $gridCols }} gap-8">
                @foreach (($progressCards ?? []) as $card)
                    <x-dashboard.sales-progress-card
                        :card="$card"
                        :title="$card['label'] ?? ''"
                        :units-suffix="($card['label'] ?? '') === 'Units Sold'"
                        :period-label="$reportingPeriod->label()"
                    />
                @endforeach
            </div>
        </div>

        @if ($finalScore !== null && (($insights['strengths'] ?? []) !== [] || ($insights['weaknesses'] ?? []) !== []))
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6">
                    <h2 class="text-base font-semibold text-gray-900 mb-3">Strengths</h2>
                    <ul class="space-y-2 text-sm">
                        @forelse (($insights['strengths'] ?? []) as $item)
                            <li class="flex items-center justify-between gap-3">
                                <span class="text-gray-800">{{ $item['label'] }}</span>
                                <span class="font-semibold text-green-700 tabular-nums">{{ number_format($item['capped_percent'], 0) }}%</span>
                            </li>
                        @empty
                            <li class="text-gray-500">No configured metrics yet.</li>
                        @endforelse
                    </ul>
                </div>
                <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6">
                    <h2 class="text-base font-semibold text-gray-900 mb-3">Areas to improve</h2>
                    <ul class="space-y-2 text-sm">
                        @forelse (($insights['weaknesses'] ?? []) as $item)
                            <li class="flex items-center justify-between gap-3">
                                <span class="text-gray-800">{{ $item['label'] }}</span>
                                <span class="font-semibold text-red-700 tabular-nums">{{ number_format($item['capped_percent'], 0) }}%</span>
                            </li>
                        @empty
                            <li class="text-gray-500">No configured metrics yet.</li>
                        @endforelse
                    </ul>
                </div>
            </div>
        @endif

        @if (! empty($conversionMetrics))
            <x-dashboard.conversion-metrics-panel
                :metrics="$conversionMetrics"
                :title="! empty($isManagerPersonal) ? 'Team Conversion Metrics' : 'My Conversion Metrics'"
            />
        @endif

        @if (($salesLeaderboard ?? []) !== [])
            <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 space-y-3">
                <div>
                    <h2 class="text-lg font-semibold text-gray-900">
                        {{ ! empty($isManagerPersonal) ? 'My Team Leaderboard' : 'Sales Leaderboard' }}
                    </h2>
                    <p class="text-xs text-gray-500 mt-0.5">
                        {{ ! empty($isManagerPersonal)
                            ? 'Rankings for salespeople assigned to you this month.'
                            : 'Overall salesperson rankings for this month.' }}
                    </p>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200 text-sm">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-3 py-2 text-left font-semibold text-gray-700 w-12">Rank</th>
                                <th class="px-3 py-2 text-left font-semibold text-gray-700">Salesperson</th>
                                <th class="px-3 py-2 text-right font-semibold text-gray-700">Units Sold</th>
                                <th class="px-3 py-2 text-right font-semibold text-gray-700">Gross Profit</th>
                                <th class="px-3 py-2 text-right font-semibold text-gray-700">Sales Score</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100 bg-white">
                            @foreach ($salesLeaderboard as $row)
                                <tr @class([
                                    'hover:bg-gray-50',
                                    'bg-red-50/60 ring-1 ring-inset ring-red-100' => ($row['user_id'] ?? 0) === ($currentUserId ?? 0),
                                ])>
                                    <td class="px-3 py-2 text-gray-700 font-medium">{{ (int) ($row['rank'] ?? 0) }}</td>
                                    <td class="px-3 py-2 text-gray-900 font-medium">
                                        <span class="inline-flex flex-wrap items-center gap-2">
                                            <span>{{ $row['name'] ?? '—' }}</span>
                                            @if (($row['user_id'] ?? 0) === ($currentUserId ?? 0))
                                                <span class="inline-flex rounded-full bg-gray-100 border border-gray-200 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-gray-600">You</span>
                                            @endif
                                            @if (! empty($row['top_units_sold']))
                                                <span class="inline-flex rounded-full bg-indigo-50 border border-indigo-200 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-indigo-800">Top units</span>
                                            @endif
                                            @if (! empty($row['top_gross_profit']))
                                                <span class="inline-flex rounded-full bg-emerald-50 border border-emerald-200 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-emerald-800">Top GP</span>
                                            @endif
                                            @if (! empty($row['top_sales_score']))
                                                <span class="inline-flex rounded-full bg-amber-50 border border-amber-200 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-amber-900">Top score</span>
                                            @endif
                                        </span>
                                    </td>
                                    <td class="px-3 py-2 text-right text-gray-900 font-medium">
                                        {{ number_format((int) ($row['units_sold'] ?? 0)) }}
                                    </td>
                                    <td class="px-3 py-2 text-right text-gray-900 font-medium">
                                        {{ format_rand((float) ($row['gross_profit'] ?? 0)) }}
                                    </td>
                                    <td class="px-3 py-2 text-right text-gray-900 font-semibold">
                                        {{ ($row['sales_score'] ?? null) !== null ? number_format((float) $row['sales_score'], 1) : '—' }}
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        @endif

        @include('my-performance.partials.forecast-projection')

        <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 space-y-4">
            <h2 class="text-lg font-semibold text-gray-900">Activity breakdown</h2>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200 text-sm">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-3 py-2 text-left font-semibold text-gray-700">Metric</th>
                            <th class="px-3 py-2 text-right font-semibold text-gray-700">Target</th>
                            <th class="px-3 py-2 text-right font-semibold text-gray-700">Actual</th>
                            <th class="px-3 py-2 text-right font-semibold text-gray-700">Achievement %</th>
                            <th class="px-3 py-2 text-right font-semibold text-gray-700">Weight</th>
                            <th class="px-3 py-2 text-right font-semibold text-gray-700">Weighted score</th>
                            <th class="px-3 py-2 text-left font-semibold text-gray-700">Status</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        @foreach (($activityPillar['metrics'] ?? []) as $metric)
                            @php
                                $rowStatus = (string) ($metric['status'] ?? 'no_target');
                                $rowBadge = $statusBadgeClasses[$rowStatus] ?? $statusBadgeClasses['no_target'];
                                $rowLabel = $statusLabels[$rowStatus] ?? ucfirst($rowStatus);
                            @endphp
                            <tr @class(['opacity-60' => ! ($metric['configured'] ?? false)])>
                                <td class="px-3 py-2 font-medium text-gray-900">{{ $metric['label'] }}</td>
                                <td class="px-3 py-2 text-right text-gray-700">{{ $formatMetricValue($metric, 'target') }}</td>
                                <td class="px-3 py-2 text-right text-gray-700">{{ $formatMetricValue($metric, 'actual') }}</td>
                                <td class="px-3 py-2 text-right text-gray-700">
                                    @if ($metric['configured'] ?? false)
                                        {{ number_format((float) $metric['achievement_percent'], 1) }}%
                                    @else
                                        —
                                    @endif
                                </td>
                                <td class="px-3 py-2 text-right text-gray-700">
                                    {{ ($metric['configured'] ?? false) ? number_format((float) $metric['effective_weight'], 1).'%' : '—' }}
                                </td>
                                <td class="px-3 py-2 text-right text-gray-700">
                                    {{ $metric['weighted_score'] !== null ? number_format((float) $metric['weighted_score'], 1) : '—' }}
                                </td>
                                <td class="px-3 py-2">
                                    <span class="inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-semibold {{ $rowBadge }}">
                                        {{ $rowLabel }}
                                    </span>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 space-y-4">
            <h2 class="text-lg font-semibold text-gray-900">Performance breakdown</h2>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200 text-sm">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-3 py-2 text-left font-semibold text-gray-700">Metric</th>
                            <th class="px-3 py-2 text-right font-semibold text-gray-700">Target</th>
                            <th class="px-3 py-2 text-right font-semibold text-gray-700">Actual</th>
                            <th class="px-3 py-2 text-right font-semibold text-gray-700">Achievement %</th>
                            <th class="px-3 py-2 text-right font-semibold text-gray-700">Weight</th>
                            <th class="px-3 py-2 text-right font-semibold text-gray-700">Weighted score</th>
                            <th class="px-3 py-2 text-left font-semibold text-gray-700">Status</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        @foreach ($performanceBreakdownMetrics as $metric)
                            @php
                                $rowStatus = (string) ($metric['status'] ?? 'no_target');
                                $rowBadge = $statusBadgeClasses[$rowStatus] ?? $statusBadgeClasses['no_target'];
                                $rowLabel = $statusLabels[$rowStatus] ?? ucfirst($rowStatus);
                            @endphp
                            <tr @class(['opacity-60' => ! ($metric['configured'] ?? false)])>
                                <td class="px-3 py-2 font-medium text-gray-900">{{ $metric['label'] }}</td>
                                <td class="px-3 py-2 text-right text-gray-700">{{ $formatMetricValue($metric, 'target') }}</td>
                                <td class="px-3 py-2 text-right text-gray-700">{{ $formatMetricValue($metric, 'actual') }}</td>
                                <td class="px-3 py-2 text-right text-gray-700">
                                    @if ($metric['configured'] ?? false)
                                        {{ number_format((float) $metric['achievement_percent'], 1) }}%
                                    @else
                                        —
                                    @endif
                                </td>
                                <td class="px-3 py-2 text-right text-gray-700">
                                    {{ ($metric['configured'] ?? false) ? number_format((float) $metric['effective_weight'], 1).'%' : '—' }}
                                </td>
                                <td class="px-3 py-2 text-right text-gray-700">
                                    {{ $metric['weighted_score'] !== null ? number_format((float) $metric['weighted_score'], 1) : '—' }}
                                </td>
                                <td class="px-3 py-2">
                                    <span class="inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-semibold {{ $rowBadge }}">
                                        {{ $rowLabel }}
                                    </span>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</x-app-layout>