@extends('layouts.superadmin')

@section('title','الأهداف الصغيرة الذكية - ProMission')
@section('page-title','الأهداف الصغيرة الذكية (Micro Goals)')

@section('content')
@php
    $rows = collect($rows ?? []);
    $isCards = (request('view','cards') === 'cards');

    /**
     * توليد هدف أسبوعي ذكي
     */
    $buildGoal = function($r){
        $role   = (string)($r['role'] ?? '');
        $mix    = (float)($r['mix_hours'] ?? 0);
        $sahra  = (float)($r['sahra_hours'] ?? 0);
        $streak = (int)($r['streak_days'] ?? 0);

        // base
        $live  = 1;
        $guest = 1;
        $sahr  = 0;

        if (str_contains($role,'🔥')) {
            $live = 3; $guest = 3; $sahr = 1;
        } elseif (str_contains($role,'🧱')) {
            $live = 2; $guest = 2; $sahr = 1;
        } elseif (str_contains($role,'🚀')) {
            $live = 2; $guest = 3; $sahr = 0;
        } elseif (str_contains($role,'⚠️')) {
            $live = 1; $guest = 2; $sahr = 0;
        } else {
            $live = 1; $guest = 1; $sahr = 0;
        }

        return [
            'live'  => $live,
            'guest' => $guest,
            'sahra' => $sahr,
            'text'  => "هذا الأسبوع: {$live} لايف، {$guest} قست"
                        . ($sahr ? "، {$sahr} سهرة" : ''),
        ];
    };

    $badge = function($role){
        return match(true) {
            str_contains($role,'🔥') => 'bg-emerald-500/15 text-emerald-200 border-emerald-500/25',
            str_contains($role,'🧱') => 'bg-sky-500/15 text-sky-200 border-sky-500/25',
            str_contains($role,'🚀') => 'bg-purple-500/15 text-purple-200 border-purple-500/25',
            str_contains($role,'⚠️') => 'bg-amber-500/15 text-amber-200 border-amber-500/25',
            default                  => 'bg-rose-500/15 text-rose-200 border-rose-500/25',
        };
    };
@endphp

<div class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950 py-6">
<div class="max-w-6xl mx-auto px-4 rtl text-white">

    {{-- Header --}}
    <div class="mb-6 flex items-start justify-between gap-3">
        <div class="flex items-center gap-3">
            <div class="h-11 w-11 rounded-2xl bg-slate-800 grid place-items-center
                        ring-2 ring-cyan-500/60 shadow-lg shadow-cyan-500/30">
                <i class="fa-solid fa-bullseye text-cyan-300 text-xl"></i>
            </div>
            <div>
                <h1 class="text-xl sm:text-2xl font-bold">الأهداف الصغيرة الذكية (Micro Goals)</h1>
                <p class="text-sm text-slate-300/80">
                    أهداف أسبوعية تلقائية لكل عضو حسب مستواه الحالي.
                    <span class="text-white font-semibold">قابلة للتنفيذ وسهلة المتابعة.</span>
                </p>
            </div>
        </div>

        {{-- Toggle --}}
        <div class="flex items-center gap-2">
            <a href="{{ request()->fullUrlWithQuery(['view'=>'table','page'=>null]) }}"
               class="h-9 px-3 rounded-xl text-xs font-semibold border
               {{ !$isCards ? 'bg-white/15 border-white/20 text-white' : 'border-slate-700 text-slate-200 hover:bg-white/10' }}">
                <i class="fa-solid fa-table ml-1"></i> جدول
            </a>
            <a href="{{ request()->fullUrlWithQuery(['view'=>'cards','page'=>null]) }}"
               class="h-9 px-3 rounded-xl text-xs font-semibold border
               {{ $isCards ? 'bg-white/15 border-white/20 text-white' : 'border-slate-700 text-slate-200 hover:bg-white/10' }}">
                <i class="fa-solid fa-id-card ml-1"></i> كروت
            </a>
        </div>
    </div>

    {{-- Cards --}}
    @if($isCards)
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
            @forelse($rows as $r)
                @php
                    $goal = $buildGoal($r);
                    $role = (string)$r['role'];
                @endphp

                <div class="rounded-2xl border border-slate-800 bg-slate-900/80 p-4">
                    <div class="flex items-start justify-between gap-2">
                        <div>
                            <div class="font-semibold text-slate-100">{{ $r['name'] }}</div>
                            <div class="text-[11px] text-slate-400">{{ $r['username'] ? '@'.$r['username'] : '' }}</div>
                        </div>
                        <span class="text-[11px] font-bold px-2 py-0.5 rounded-full border {{ $badge($role) }}">
                            {{ $role }}
                        </span>
                    </div>

                    <div class="mt-3 rounded-xl border border-slate-800 bg-slate-950/40 p-3">
                        <div class="text-[11px] text-slate-400 mb-1">🎯 الهدف الأسبوعي</div>
                        <div class="text-sm font-extrabold text-cyan-200">
                            {{ $goal['text'] }}
                        </div>
                    </div>

                    <div class="mt-3 text-[11px] text-slate-300">
                        🤖 <span class="font-semibold text-white">AI توصية:</span>
                        ركّز على الاستمرارية، حتى لو نشاط قصير يوميًا.
                    </div>
                </div>
            @empty
                <div class="rounded-2xl border border-slate-800 bg-slate-900/60 p-6 text-center text-slate-400 lg:col-span-3">
                    لا يوجد بيانات.
                </div>
            @endforelse
        </div>

    {{-- Table --}}
    @else
        <div class="rounded-2xl border border-slate-700/80 bg-slate-900/90 shadow-xl overflow-hidden">
            <table class="min-w-full text-xs sm:text-sm text-slate-200">
                <thead class="bg-slate-900/90 border-b border-slate-800">
                    <tr>
                        <th class="px-3 py-2 text-right">العضو</th>
                        <th class="px-3 py-2 text-right">الدور</th>
                        <th class="px-3 py-2 text-right">الهدف الأسبوعي</th>
                        <th class="px-3 py-2 text-right">AI ملاحظة</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-800">
                    @foreach($rows as $r)
                        @php
                            $goal = $buildGoal($r);
                        @endphp
                        <tr class="hover:bg-slate-800/50">
                            <td class="px-3 py-2 font-semibold">{{ $r['name'] }}</td>
                            <td class="px-3 py-2">{{ $r['role'] }}</td>
                            <td class="px-3 py-2 font-bold text-cyan-200">{{ $goal['text'] }}</td>
                            <td class="px-3 py-2 text-[11px] text-slate-300">
                                حافظ على سلسلة نشاط يومية.
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif

    <div class="mt-6 text-[11px] text-slate-500 text-center">
        Micro Goals تقلّل الضغط وتزيد الالتزام خطوة خطوة.
    </div>

</div>
</div>
@endsection