@extends('layouts.app')

@section('title', 'Mon Espace Client - DevFlow')

@section('content')
<div class="space-y-8">
    <!-- Client Welcome Banner -->
    <div class="bg-gradient-to-r from-indigo-900 to-slate-900 rounded-3xl p-8 text-white shadow-xl relative overflow-hidden">
        <div class="relative z-10 max-w-2xl">
            <span class="px-3 py-1 rounded-full bg-indigo-500/30 text-indigo-300 text-xs font-bold uppercase tracking-wider">
                Espace Client Sécurisé
            </span>
            <h1 class="text-2xl sm:text-3xl font-black mt-3">
                Bonjour, {{ auth()->user()->name }}
            </h1>
            <p class="text-slate-300 text-sm mt-2 leading-relaxed">
                Suivez en direct l'avancement du développement de vos applications, consultez les dernières étapes validées et transmettez vos remarques ou signalements de bugs en quelques clics.
            </p>
        </div>
        <div class="absolute -bottom-10 -right-10 w-64 h-64 bg-indigo-500/10 rounded-full blur-3xl pointer-events-none"></div>
    </div>

    <!-- Client's Projects -->
    <div>
        <h2 class="text-lg font-bold text-slate-900 mb-4">Vos Applications en Suivi</h2>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            @forelse($projects as $project)
                <div class="bg-white rounded-2xl border border-slate-200 p-6 flex flex-col justify-between shadow-xs hover:shadow-md transition-shadow">
                    <div>
                        <div class="flex items-center justify-between">
                            <div class="flex items-center space-x-3">
                                <div class="w-10 h-10 rounded-xl flex items-center justify-center text-white font-bold" style="background-color: {{ $project->color }};">
                                    {{ strtoupper(substr($project->name, 0, 2)) }}
                                </div>
                                <div>
                                    <h3 class="font-bold text-slate-900 text-lg">{{ $project->name }}</h3>
                                    <p class="text-xs text-slate-400">{{ $project->tickets->count() }} demande(s) en cours</p>
                                </div>
                            </div>
                        </div>

                        <p class="text-xs text-slate-600 mt-4 leading-relaxed">
                            {{ $project->description ?? 'Application développée par notre équipe.' }}
                        </p>

                        <!-- Workflow steps indicators -->
                        <div class="mt-5 pt-4 border-t border-slate-100">
                            <p class="text-[11px] font-bold text-slate-400 uppercase tracking-wider mb-2">Statut des étapes de développement :</p>
                            <div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
                                @foreach($project->columns as $col)
                                    <div class="p-2 rounded-xl bg-slate-50 border border-slate-100 text-center">
                                        <div class="text-[11px] font-semibold text-slate-700 truncate" title="{{ $col->name }}">{{ $col->name }}</div>
                                        <div class="text-base font-black mt-0.5" style="color: {{ $col->color }};">
                                            {{ $project->tickets->where('column_id', $col->id)->count() }}
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    <div class="mt-6 pt-4 border-t border-slate-100 flex flex-col sm:flex-row gap-2">
                        <a href="{{ route('projects.kanban', $project) }}" class="flex-1 py-2.5 px-4 rounded-xl bg-slate-900 hover:bg-indigo-600 text-white text-xs font-semibold text-center transition-colors flex items-center justify-center">
                            <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                            </svg>
                            Voir l'avancement en direct
                        </a>
                        
                        @if($project->allow_guest_reports)
                            <a href="{{ route('public.report.form', $project->public_token) }}" target="_blank" class="py-2.5 px-4 rounded-xl bg-rose-50 hover:bg-rose-100 text-rose-700 border border-rose-200 text-xs font-semibold text-center transition-colors flex items-center justify-center">
                                <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                                </svg>
                                Formulaire express
                            </a>
                        @endif
                    </div>
                </div>
            @empty
                <div class="col-span-full bg-white rounded-2xl border border-slate-200 p-12 text-center">
                    <p class="text-sm font-semibold text-slate-700">Aucune application n'est associée à votre compte pour l'instant.</p>
                    <p class="text-xs text-slate-400 mt-1">L'administrateur vous donnera accès à vos développements sous peu.</p>
                </div>
            @endforelse
        </div>
    </div>

    <!-- My Tickets List -->
    @if($myTickets->count() > 0)
        <div class="bg-white rounded-2xl border border-slate-200 p-6 shadow-xs">
            <h2 class="text-base font-bold text-slate-900 mb-4">Vos Demandes & Signalements Récentes</h2>
            <div class="divide-y divide-slate-100">
                @foreach($myTickets as $ticket)
                    <div class="py-3 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
                        <div class="flex items-center space-x-3">
                            <span class="text-xs font-mono font-bold text-slate-400">{{ $ticket->formatted_number }}</span>
                            <span class="px-2 py-0.5 rounded text-[11px] font-bold {{ $ticket->type_badge['bg'] }}">
                                {{ $ticket->type_badge['label'] }}
                            </span>
                            <a href="{{ route('projects.kanban', $ticket->project) }}" class="text-sm font-semibold text-slate-800 hover:text-indigo-600">
                                {{ $ticket->title }}
                            </a>
                        </div>
                        <div class="flex items-center space-x-3 text-xs">
                            <span class="px-2.5 py-1 rounded-full text-[11px] font-semibold text-white" style="background-color: {{ $ticket->column->color ?? '#64748b' }}">
                                {{ $ticket->column->name }}
                            </span>
                            <span class="text-slate-400">{{ $ticket->project->name }}</span>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    @endif
</div>
@endsection