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

@section('content')
    <div style="max-width:960px;">
        {{-- Profile Header --}}
        <div class="card mb-4">
            <div class="card-body" style="display:flex;gap:24px;align-items:center;">
                <div class="avatar" style="width:80px;height:80px;font-size:2rem;">{{ $user->initials }}</div>
                <div style="flex:1;">
                    <h2 style="margin:0;font-size:1.5rem;">{{ $user->name }}</h2>
                    <div style="color:var(--text-secondary);margin-top:2px;">{{ $user->job_title ?? 'Team Member' }}</div>
                    <div style="display:flex;gap:12px;margin-top:8px;flex-wrap:wrap;">
                        @foreach($user->roles as $role)
                            <span class="badge badge-primary">{{ $role->name }}</span>
                        @endforeach
                        <span class="badge badge-secondary">{{ $user->department ?? 'No Department' }}</span>
                        @if($user->company)
                            <span class="badge badge-secondary">{{ $user->company->name }}</span>
                        @endif
                    </div>
                </div>
                <a href="{{ route('profile.edit') }}" class="btn btn-secondary">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px;"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
                    Edit Profile
                </a>
            </div>
        </div>

        {{-- Stats --}}
        <div class="grid grid-4 mb-4">
            <div class="stat-card">
                <div class="stat-card-value" style="color:var(--accent-primary);">{{ $stats['assignedTasks'] }}</div>
                <div class="stat-card-label">Assigned Tasks</div>
            </div>
            <div class="stat-card">
                <div class="stat-card-value" style="color:var(--accent-green);">{{ $stats['completedTasks'] }}</div>
                <div class="stat-card-label">Completed</div>
            </div>
            <div class="stat-card">
                <div class="stat-card-value" style="color:var(--accent-pink);">{{ $stats['projects'] }}</div>
                <div class="stat-card-label">Projects</div>
            </div>
            <div class="stat-card">
                <div class="stat-card-value" style="color:var(--accent-orange);">{{ $stats['teams'] }}</div>
                <div class="stat-card-label">Teams</div>
            </div>
        </div>

        <div style="display:grid;grid-template-columns:1fr 1fr;gap:24px;">
            {{-- Contact Info --}}
            <div class="card">
                <div class="card-header"><span class="card-header-title">Contact Information</span></div>
                <div class="card-body">
                    <div style="display:grid;gap:16px;">
                        <div>
                            <div class="text-xs text-muted" style="margin-bottom:2px;">Email</div>
                            <div style="color:var(--text-primary);">{{ $user->email }}</div>
                        </div>
                        <div>
                            <div class="text-xs text-muted" style="margin-bottom:2px;">Phone</div>
                            <div style="color:var(--text-primary);">{{ $user->phone ?? '—' }}</div>
                        </div>
                        <div>
                            <div class="text-xs text-muted" style="margin-bottom:2px;">Department</div>
                            <div style="color:var(--text-primary);">{{ $user->department ?? '—' }}</div>
                        </div>
                        <div>
                            <div class="text-xs text-muted" style="margin-bottom:2px;">Member Since</div>
                            <div style="color:var(--text-primary);">{{ $user->created_at->format('F j, Y') }}</div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Upcoming Tasks --}}
            <div class="card">
                <div class="card-header"><span class="card-header-title">Upcoming Tasks</span></div>
                <div class="card-body">
                    @forelse($recentTasks as $task)
                        <a href="{{ route('tasks.show', $task) }}" class="task-item" style="text-decoration:none;">
                            <div class="task-info">
                                <div class="task-title">{{ $task->title }}</div>
                                <div class="text-xs text-muted">
                                    {{ $task->project->name ?? '' }}
                                    @if($task->due_date)
                                        · Due {{ $task->due_date->format('M d') }}
                                    @endif
                                </div>
                            </div>
                            <span class="badge badge-{{ $task->status === 'in_progress' ? 'primary' : 'secondary' }}">
                                {{ ucfirst(str_replace('_', ' ', $task->status)) }}
                            </span>
                        </a>
                    @empty
                        <div style="text-align:center;padding:24px;color:var(--text-tertiary);">
                            🎉 You're all caught up!
                        </div>
                    @endforelse
                </div>
            </div>
        </div>

        {{-- Recent Activity --}}
        <div class="card mt-4">
            <div class="card-header"><span class="card-header-title">Recent Activity</span></div>
            <div class="card-body">
                @forelse($activities as $activity)
                    <div class="task-item">
                        <div class="task-info">
                            <div class="task-title" style="font-weight:400;">{{ $activity->description }}</div>
                            <div class="text-xs text-muted">{{ $activity->created_at->diffForHumans() }}</div>
                        </div>
                    </div>
                @empty
                    <div style="text-align:center;padding:24px;color:var(--text-tertiary);">No recent activity.</div>
                @endforelse
            </div>
        </div>
    </div>
@endsection