@extends('layouts.app')
@section('title', 'Reports')
@section('breadcrumb')
    <span style="font-weight:600;color:var(--text-primary);">Reports</span>
@endsection

@section('content')
    <div class="page-header">
        <h1>📊 Reports & Analytics</h1>
        <a href="{{ route('reports.export.csv') }}" class="btn btn-secondary btn-sm" title="Export Report CSV">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px;"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
            Export CSV
        </a>
    </div>

    {{-- Status Distribution --}}
    <div class="grid grid-4 mb-6">
        @php
            $statusColors = ['todo' => '#6b7280', 'in_progress' => '#3b82f6', 'review' => '#f59e0b', 'completed' => '#22c55e'];
            $statusLabels = ['todo' => 'To Do', 'in_progress' => 'In Progress', 'review' => 'Review', 'completed' => 'Completed'];
            $total = array_sum($statusDistribution);
        @endphp
        @foreach($statusDistribution as $status => $count)
            <div class="stat-card">
                <div class="stat-card-header">
                    <div class="stat-card-icon" style="background: {{ $statusColors[$status] }}22; color: {{ $statusColors[$status] }};">
                        <div style="width:12px;height:12px;border-radius:50%;background:{{ $statusColors[$status] }};"></div>
                    </div>
                </div>
                <div class="stat-card-value" style="color: {{ $statusColors[$status] }};">{{ $count }}</div>
                <div class="stat-card-label">{{ $statusLabels[$status] }}</div>
                @if($total > 0)
                    <div class="progress mt-2" style="height:4px;">
                        <div class="progress-bar" style="width:{{ round(($count/$total)*100) }}%;background:{{ $statusColors[$status] }};"></div>
                    </div>
                @endif
            </div>
        @endforeach
    </div>

    <div style="display:grid;grid-template-columns:1fr 1fr;gap:24px;">
        {{-- Tasks Per Employee --}}
        <div class="card">
            <div class="card-header">
                <span class="card-header-title">Tasks Per Employee</span>
            </div>
            <div class="table-wrapper">
                <table>
                    <thead>
                        <tr><th>Employee</th><th>Total</th><th>Completed</th><th>Overdue</th><th>Rate</th></tr>
                    </thead>
                    <tbody>
                        @foreach($tasksByEmployee as $user)
                            <tr>
                                <td>
                                    <div class="flex items-center gap-2">
                                        <div class="avatar avatar-xs">{{ $user->initials }}</div>
                                        {{ $user->name }}
                                    </div>
                                </td>
                                <td>{{ $user->assigned_tasks_count }}</td>
                                <td style="color:var(--accent-green);">{{ $user->completed_tasks_count }}</td>
                                <td style="color:var(--accent-red);">{{ $user->overdue_tasks_count }}</td>
                                <td>
                                    @php $rate = $user->assigned_tasks_count > 0 ? round(($user->completed_tasks_count / $user->assigned_tasks_count) * 100) : 0; @endphp
                                    <div class="flex items-center gap-2">
                                        <div class="progress" style="width:60px;height:4px;">
                                            <div class="progress-bar {{ $rate >= 70 ? 'green' : ($rate >= 40 ? '' : 'red') }}" style="width:{{ $rate }}%"></div>
                                        </div>
                                        <span class="text-xs">{{ $rate }}%</span>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Project Progress --}}
        <div class="card">
            <div class="card-header">
                <span class="card-header-title">Project Progress</span>
            </div>
            <div class="table-wrapper">
                <table>
                    <thead>
                        <tr><th>Project</th><th>Owner</th><th>Tasks</th><th>Progress</th></tr>
                    </thead>
                    <tbody>
                        @foreach($projects as $project)
                            <tr>
                                <td>
                                    <a href="{{ route('projects.show', $project) }}" style="color:var(--text-primary);font-weight:500;">{{ $project->name }}</a>
                                </td>
                                <td class="text-muted text-sm">{{ $project->owner->name ?? '—' }}</td>
                                <td>{{ $project->completed_tasks_count }}/{{ $project->tasks_count }}</td>
                                <td>
                                    @php $prog = $project->tasks_count > 0 ? round(($project->completed_tasks_count / $project->tasks_count) * 100) : 0; @endphp
                                    <div class="flex items-center gap-2">
                                        <div class="progress" style="width:80px;height:4px;">
                                            <div class="progress-bar {{ $prog >= 70 ? 'green' : '' }}" style="width:{{ $prog }}%"></div>
                                        </div>
                                        <span class="text-xs">{{ $prog }}%</span>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Team Productivity --}}
        <div class="card">
            <div class="card-header">
                <span class="card-header-title">Team Productivity</span>
            </div>
            <div class="table-wrapper">
                <table>
                    <thead>
                        <tr><th>Team</th><th>Members</th><th>Projects</th><th>Tasks</th><th>Completion</th></tr>
                    </thead>
                    <tbody>
                        @foreach($teams as $team)
                            <tr>
                                <td>
                                    <div class="flex items-center gap-2">
                                        <div style="width:8px;height:8px;border-radius:50%;background:{{ $team->color }};"></div>
                                        {{ $team->name }}
                                    </div>
                                </td>
                                <td>{{ $team->members->count() }}</td>
                                <td>{{ $team->projects_count }}</td>
                                <td>{{ $team->total_tasks }}</td>
                                <td>
                                    @php $tRate = $team->total_tasks > 0 ? round(($team->completed_tasks / $team->total_tasks) * 100) : 0; @endphp
                                    <span class="badge badge-{{ $tRate >= 70 ? 'success' : ($tRate >= 40 ? 'primary' : 'warning') }}">{{ $tRate }}%</span>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Overdue Tasks --}}
        <div class="card">
            <div class="card-header">
                <span class="card-header-title" style="color:var(--accent-red);">⚠️ Overdue Tasks</span>
                <span class="badge badge-danger">{{ $overdueTasks->count() }}</span>
            </div>
            <div>
                @forelse($overdueTasks as $task)
                    <div class="task-item">
                        <div class="priority-dot" style="background: {{ $task->priority_color }}"></div>
                        <div class="task-info">
                            <div class="task-title">{{ $task->title }}</div>
                            <div class="task-meta">
                                <span class="task-meta-item">{{ $task->project->name ?? '' }}</span>
                                <span class="task-meta-item overdue">Due {{ $task->due_date->format('M j') }}</span>
                            </div>
                        </div>
                        @if($task->assignee)
                            <div class="avatar avatar-xs" title="{{ $task->assignee->name }}">{{ $task->assignee->initials }}</div>
                        @endif
                    </div>
                @empty
                    <div class="empty-state" style="padding:20px;">
                        <div class="empty-state-text">🎉 No overdue tasks!</div>
                    </div>
                @endforelse
            </div>
        </div>
    </div>
@endsection