@extends('layouts.app')
@section('title', $company['name'] . ' — Hrivex Command Center')

@section('content')
<div class="fade-in">
    <div class="flex items-center justify-between mb-5">
        <div class="flex items-center gap-3">
            <a href="{{ route('dashboard') }}" class="text-gray-400 hover:text-gray-600 text-sm"><i class="fas fa-arrow-left"></i></a>
            <span class="w-3 h-3 rounded-full" style="background:{{ $company['color'] }}"></span>
            <div>
                <h1 class="text-lg font-medium text-gray-900">{{ $company['name'] }}</h1>
                <p class="text-xs text-gray-400">Managed via {{ ucfirst($company['tool_type']) }}
                    @if(!empty($company['brands']))
                        · {{ implode(', ', $company['brands']) }}
                    @endif
                </p>
            </div>
        </div>
        <div class="flex gap-2">
            @if($company['tool_url'])
                <a href="{{ $company['tool_url'] }}" target="_blank" class="text-xs px-3 py-1.5 rounded-md bg-gray-100 text-gray-600 hover:bg-gray-200">
                    <i class="fas fa-external-link-alt mr-1"></i> Open {{ ucfirst($company['tool_type']) }}
                </a>
            @endif
            <form action="{{ route('sync') }}" method="POST" class="inline">
                @csrf
                <input type="hidden" name="company" value="{{ $company['id'] }}">
                <button type="submit" class="text-xs px-3 py-1.5 rounded-md text-white" style="background:{{ $company['color'] }}">
                    <i class="fas fa-sync-alt mr-1"></i> Sync
                </button>
            </form>
        </div>
    </div>

    {{-- Stats --}}
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-5">
        <div class="bg-white rounded-xl p-4 border border-gray-100">
            <div class="text-xs text-gray-400 mb-1">Tasks</div>
            <div class="text-2xl font-medium text-gray-900">{{ $stats->total_tasks ?? 0 }}</div>
        </div>
        <div class="bg-white rounded-xl p-4 border border-gray-100">
            <div class="text-xs text-gray-400 mb-1">Overdue</div>
            <div class="text-2xl font-medium {{ ($stats->overdue_tasks ?? 0) > 0 ? 'text-red-600' : 'text-gray-900' }}">{{ $stats->overdue_tasks ?? 0 }}</div>
        </div>
        <div class="bg-white rounded-xl p-4 border border-gray-100">
            <div class="text-xs text-gray-400 mb-1">Members</div>
            <div class="text-2xl font-medium text-gray-900">{{ $stats->total_members ?? 0 }}</div>
        </div>
        <div class="bg-white rounded-xl p-4 border border-gray-100">
            <div class="text-xs text-gray-400 mb-1">Projects</div>
            <div class="text-2xl font-medium text-gray-900">{{ $stats->total_projects ?? 0 }}</div>
        </div>
    </div>

    {{-- Overdue alert --}}
    @if($overdueTasks->count() > 0)
        <div class="bg-red-50 border border-red-100 rounded-xl p-4 mb-5">
            <h3 class="text-sm font-medium text-red-700 mb-2"><i class="fas fa-exclamation-triangle mr-1"></i> {{ $overdueTasks->count() }} overdue tasks</h3>
            @foreach($overdueTasks->take(5) as $task)
                <div class="text-xs text-red-600 py-1">{{ $task->title }} — due {{ $task->due_date->format('M d') }}</div>
            @endforeach
        </div>
    @endif

    {{-- Tasks + Activity --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
        <div class="bg-white rounded-xl p-5 border border-gray-100">
            <h3 class="text-sm font-medium text-gray-900 mb-4">All tasks</h3>
            @forelse($tasks as $task)
                <div class="task-row flex items-center gap-2.5 py-2.5 border-b border-gray-50 last:border-0 rounded px-1">
                    <div class="priority-dot" style="background:{{ $task->priority === 'high' ? '#C62828' : ($task->priority === 'medium' ? '#E65100' : '#999') }}"></div>
                    <span class="text-xs text-gray-800 flex-1 truncate">{{ $task->title }}</span>
                    <span class="text-xs px-1.5 py-0.5 rounded bg-gray-100 text-gray-500" style="font-size:10px">{{ $task->status }}</span>
                    <span class="text-xs {{ $task->is_overdue ? 'text-red-500' : 'text-gray-400' }}" style="font-size:10px">
                        {{ $task->due_date ? $task->due_date->format('M d') : '--' }}
                    </span>
                </div>
            @empty
                <p class="text-center text-xs text-gray-400 py-8">No tasks synced. Click Sync to pull data.</p>
            @endforelse
        </div>

        <div class="bg-white rounded-xl p-5 border border-gray-100">
            <h3 class="text-sm font-medium text-gray-900 mb-4">Recent activity</h3>
            @forelse($activities as $activity)
                <div class="flex items-start gap-2.5 py-2.5 border-b border-gray-50 last:border-0">
                    <div class="w-6 h-6 rounded-full flex items-center justify-center text-xs font-medium flex-shrink-0 mt-0.5" style="background:{{ $company['color'] }}15;color:{{ $company['color'] }};font-size:9px">
                        {{ strtoupper(substr($activity->user_name, 0, 2)) }}
                    </div>
                    <div>
                        <div class="text-xs text-gray-700"><span class="font-medium">{{ $activity->user_name }}</span> {{ $activity->action }}</div>
                        <div class="text-xs text-gray-300 mt-0.5" style="font-size:10px">{{ $activity->activity_at ? $activity->activity_at->diffForHumans() : '' }}</div>
                    </div>
                </div>
            @empty
                <p class="text-center text-xs text-gray-400 py-8">No activity yet.</p>
            @endforelse
        </div>
    </div>
</div>
@endsection