@extends('layouts.app')

@section('title', 'Projects')

@section('content')
<div class="px-8 py-8">

    {{-- Flash messages --}}
    @if (session('success'))
        <div class="mb-6 flex items-center gap-3 rounded-xl bg-emerald-50 border border-emerald-100 px-4 py-3 text-sm text-emerald-700">
            <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
            {{ session('success') }}
        </div>
    @endif

    @if (session('error'))
        <div class="mb-6 flex items-center gap-3 rounded-xl bg-red-50 border border-red-100 px-4 py-3 text-sm text-red-600">
            <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            {{ session('error') }}
        </div>
    @endif

    {{-- Page header --}}
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-xl font-semibold text-slate-900">Projects</h1>
            <p class="text-sm text-slate-400 mt-0.5">{{ $statusCounts['all'] }} projects total</p>
        </div>
        @can('projects.manage')
        <a href="{{ route('projects.create') }}"
           class="inline-flex items-center gap-2 px-4 py-2.5 bg-sky-700 hover:bg-sky-800 text-white text-sm font-medium rounded-lg transition-colors duration-150">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
            </svg>
            New Project
        </a>
        @endcan
    </div>

    {{-- Status filter tabs --}}
    @php
        $tabs = [
            'all'       => 'All',
            'active'    => 'Active',
            'on_hold'   => 'On Hold',
            'completed' => 'Completed',
            'cancelled' => 'Cancelled',
        ];
    @endphp
    <div class="flex items-center gap-1 mb-6 flex-wrap">
        @foreach ($tabs as $key => $label)
            @php
                $isActive = ($key === 'all' && !$statusFilter) || $statusFilter === $key;
                $tabHref  = $key === 'all'
                    ? request()->url()
                    : request()->fullUrlWithQuery(['status' => $key]);
            @endphp
            <a href="{{ $tabHref }}"
               class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors duration-150
                      {{ $isActive ? 'bg-sky-700 text-white' : 'text-slate-500 hover:bg-slate-100 hover:text-slate-700' }}">
                {{ $label }}
                <span class="inline-flex items-center justify-center min-w-[1.25rem] h-5 rounded-full px-1 text-xs font-semibold
                             {{ $isActive ? 'bg-sky-600 text-white' : 'bg-slate-100 text-slate-500' }}">
                    {{ $statusCounts[$key] ?? 0 }}
                </span>
            </a>
        @endforeach
    </div>

    {{-- Stat cards --}}
    <div class="grid grid-cols-4 gap-4 mb-8">

        <div data-stat-card class="bg-white border border-slate-100 rounded-xl p-5">
            <p class="text-xs font-medium text-slate-400 uppercase tracking-wider mb-1">Active</p>
            <p class="text-2xl font-semibold {{ $statusCounts['active'] > 0 ? 'text-emerald-600' : 'text-slate-300' }}">
                {{ $statusCounts['active'] }}
            </p>
        </div>

        <div data-stat-card class="bg-white border border-slate-100 rounded-xl p-5">
            <p class="text-xs font-medium text-slate-400 uppercase tracking-wider mb-1">On Hold</p>
            <p class="text-2xl font-semibold {{ $statusCounts['on_hold'] > 0 ? 'text-amber-600' : 'text-slate-300' }}">
                {{ $statusCounts['on_hold'] }}
            </p>
        </div>

        <div data-stat-card class="bg-white border border-slate-100 rounded-xl p-5">
            <p class="text-xs font-medium text-slate-400 uppercase tracking-wider mb-1">Completed</p>
            <p class="text-2xl font-semibold {{ $statusCounts['completed'] > 0 ? 'text-slate-600' : 'text-slate-300' }}">
                {{ $statusCounts['completed'] }}
            </p>
        </div>

        <div data-stat-card class="bg-white border border-slate-100 rounded-xl p-5">
            <p class="text-xs font-medium text-slate-400 uppercase tracking-wider mb-1">Cancelled</p>
            <p class="text-2xl font-semibold {{ $statusCounts['cancelled'] > 0 ? 'text-slate-400' : 'text-slate-300' }}">
                {{ $statusCounts['cancelled'] }}
            </p>
        </div>

    </div>

    {{-- Projects table --}}
    <div class="bg-white border border-slate-100 rounded-xl overflow-hidden">

        @if ($projects->isEmpty())
            <div class="py-20 text-center">
                <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-slate-100 mb-4">
                    <svg class="w-6 h-6 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                              d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
                    </svg>
                </div>
                <p class="text-sm font-medium text-slate-700">No projects found</p>
                <p class="text-sm text-slate-400 mt-1">
                    @if ($statusFilter)
                        No projects match the selected status filter.
                    @else
                        Create your first project to get started.
                    @endif
                </p>
                @can('projects.manage')
                @if (!$statusFilter)
                    <a href="{{ route('projects.create') }}"
                       class="inline-flex items-center gap-2 mt-4 px-4 py-2 bg-sky-700 hover:bg-sky-800 text-white text-sm font-medium rounded-lg transition-colors duration-150">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                        </svg>
                        New Project
                    </a>
                @endif
                @endcan
            </div>
        @else
            <table class="w-full">
                <thead class="bg-slate-50 border-b border-slate-100">
                    <tr>
                        <th scope="col" class="px-5 py-3.5 text-left text-xs font-medium text-slate-400 uppercase tracking-wide">Project</th>
                        <th scope="col" class="px-5 py-3.5 text-left text-xs font-medium text-slate-400 uppercase tracking-wide">Client</th>
                        <th scope="col" class="px-5 py-3.5 text-left text-xs font-medium text-slate-400 uppercase tracking-wide">Status</th>
                        <th scope="col" class="px-5 py-3.5 text-left text-xs font-medium text-slate-400 uppercase tracking-wide">Proposals</th>
                        <th scope="col" class="px-5 py-3.5 text-left text-xs font-medium text-slate-400 uppercase tracking-wide">Team</th>
                        <th scope="col" class="px-5 py-3.5 text-left text-xs font-medium text-slate-400 uppercase tracking-wide">Due</th>
                        <th scope="col" class="px-5 py-3.5 text-left text-xs font-medium text-slate-400 uppercase tracking-wide">Value</th>
                        <th scope="col" class="px-5 py-3.5 text-left text-xs font-medium text-slate-400 uppercase tracking-wide">Outstanding</th>
                        <th scope="col" class="px-5 py-3.5 text-right text-xs font-medium text-slate-400 uppercase tracking-wide">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-50 bg-white">
                    @foreach ($projects as $project)
                        @php
                            $sv = $project->status instanceof \App\Enums\ProjectStatus ? $project->status->value : $project->status;
                            $statusBadge = match($sv) {
                                'active'    => 'bg-emerald-50 text-emerald-700',
                                'completed' => 'bg-slate-100 text-slate-600',
                                'on_hold'   => 'bg-amber-50 text-amber-600',
                                'cancelled' => 'bg-red-50 text-red-600',
                                default     => 'bg-slate-100 text-slate-500',
                            };
                            $statusLabel = match($sv) {
                                'active'    => 'Active',
                                'completed' => 'Completed',
                                'on_hold'   => 'On Hold',
                                'cancelled' => 'Cancelled',
                                default     => ucfirst($sv),
                            };
                            $symMap = ['GBP' => '£', 'USD' => '$', 'PKR' => 'Rs', 'AED' => 'AED'];
                        @endphp
                        <tr data-project-row class="hover:bg-slate-50 transition-colors duration-150">

                            <td class="px-5 py-4 text-sm max-w-xs">
                                <a href="{{ route('projects.show', $project) }}"
                                   class="font-semibold text-slate-900 hover:text-sky-700 transition-colors">
                                    {{ $project->title }}
                                </a>
                                @if ($project->description)
                                    <p class="text-xs text-slate-400 truncate mt-0.5">{{ Str::limit($project->description, 60) }}</p>
                                @endif
                            </td>

                            <td class="px-5 py-4 text-sm">
                                <a href="{{ route('clients.show', $project->client) }}"
                                   class="text-sm text-slate-600 hover:text-sky-700 transition-colors">
                                    {{ $project->client->name }}
                                </a>
                            </td>

                            <td class="px-5 py-4 text-sm">
                                <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium {{ $statusBadge }}">
                                    {{ $statusLabel }}
                                </span>
                            </td>

                            <td class="px-5 py-4 text-sm">
                                <span class="{{ $project->proposals_count > 0 ? 'text-slate-600' : 'text-slate-300' }} text-sm">
                                    {{ $project->proposals_count }}
                                </span>
                            </td>

                            <td class="px-5 py-4">
                                @if ($project->assignedUsers->isEmpty())
                                    <span class="text-xs text-amber-500">Unassigned</span>
                                @else
                                    <div class="flex items-center -space-x-1.5">
                                        @foreach ($project->assignedUsers->take(3) as $member)
                                        @php
                                            $ini = collect(explode(' ', $member->name))->map(fn($w) => strtoupper($w[0] ?? ''))->take(2)->implode('');
                                            $mRole = $member->roles->first()?->name ?? '';
                                            $aColor = match(true) {
                                                str_contains($mRole, 'Admin')   => 'bg-slate-700',
                                                str_contains($mRole, 'Manager') => 'bg-emerald-600',
                                                default                         => 'bg-sky-600',
                                            };
                                        @endphp
                                        <div class="w-6 h-6 rounded-full {{ $aColor }} flex items-center justify-center text-white text-[10px] font-bold ring-2 ring-white"
                                             title="{{ $member->name }}">
                                            {{ $ini }}
                                        </div>
                                        @endforeach
                                        @if ($project->assignedUsers->count() > 3)
                                        <span class="ml-2 text-xs text-slate-400">+{{ $project->assignedUsers->count() - 3 }}</span>
                                        @endif
                                    </div>
                                @endif
                            </td>

                            <td class="px-5 py-4 text-sm">
                                @if ($project->end_date)
                                    <p class="text-sm text-slate-700">{{ $project->end_date->format('d M Y') }}</p>
                                    <p class="text-xs text-slate-400 mt-0.5">{{ $project->durationForHumans() }}</p>
                                    @if ($project->isOverdue())
                                        <span class="inline-block mt-1 px-1.5 py-0.5 rounded text-[10px] font-semibold bg-red-100 text-red-700">
                                            {{ abs($project->daysRemaining()) }}d overdue
                                        </span>
                                    @elseif ($project->daysRemaining() <= 7)
                                        <span class="inline-block mt-1 px-1.5 py-0.5 rounded text-[10px] font-semibold bg-amber-100 text-amber-700">
                                            {{ $project->daysRemaining() }}d left
                                        </span>
                                    @endif
                                @else
                                    <span class="text-slate-300 text-sm">&mdash;</span>
                                @endif
                            </td>

                            <td class="px-5 py-4 text-sm">
                                @if (empty($project->total_value_by_currency))
                                    <span class="text-slate-300 text-sm">&mdash;</span>
                                @else
                                    @foreach ($project->total_value_by_currency as $cur => $amt)
                                        <p class="text-sm font-mono font-medium text-slate-900">{{ $symMap[$cur] ?? $cur }}&nbsp;{{ number_format($amt, 2) }}</p>
                                    @endforeach
                                @endif
                            </td>

                            <td class="px-5 py-4 text-sm">
                                @if (empty($project->outstanding_by_currency))
                                    <span class="text-xs text-emerald-600 font-medium">Settled</span>
                                @else
                                    @foreach ($project->outstanding_by_currency as $cur => $amt)
                                        <p class="text-sm font-mono font-medium text-amber-600">{{ $symMap[$cur] ?? $cur }}&nbsp;{{ number_format($amt, 2) }}</p>
                                    @endforeach
                                @endif
                            </td>

                            <td class="px-5 py-4 text-sm text-right">
                                <div class="inline-flex items-center gap-3">
                                    <a href="{{ route('projects.show', $project) }}"
                                       class="text-sky-700 hover:underline">View</a>
                                    @can('projects.manage')
                                    <a href="{{ route('projects.edit', $project) }}"
                                       class="text-slate-500 hover:underline">Edit</a>
                                    <form method="POST" action="{{ route('projects.destroy', $project) }}"
                                          onsubmit="return confirm('Archive this project? This cannot be undone.')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit"
                                                class="text-red-400 hover:text-red-600 transition-colors duration-150 cursor-pointer text-base leading-none"
                                                title="Archive project">
                                            &times;
                                        </button>
                                    </form>
                                    @endcan
                                </div>
                            </td>

                        </tr>
                    @endforeach
                </tbody>
            </table>

            @if ($projects->hasPages())
                <div class="flex items-center justify-between py-4 px-5 border-t border-slate-50">
                    <p class="text-sm text-slate-400">
                        Showing {{ $projects->firstItem() }}&ndash;{{ $projects->lastItem() }} of {{ $projects->total() }}
                    </p>
                    <div class="text-sm">
                        {{ $projects->links() }}
                    </div>
                </div>
            @endif
        @endif

    </div>

</div>

<script>
(function() {
    var prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (prefersReduced) return;
    var Motion = window.Motion;
    if (!Motion) return;

    var cards = document.querySelectorAll('[data-stat-card]');
    if (cards.length) {
        Motion.animate(cards, { opacity: [0, 1], y: [12, 0] }, { delay: Motion.stagger(0.07), duration: 0.25, easing: 'ease-out' });
    }

    var rows = document.querySelectorAll('[data-project-row]');
    if (rows.length) {
        Motion.animate(rows, { opacity: [0, 1], y: [8, 0] }, { delay: Motion.stagger(0.04, { start: 0.15 }), duration: 0.2, easing: 'ease-out' });
    }
})();
</script>
@endsection