@extends('workspace.layouts.workspace')
@section('title', 'Dashboard · ' . auth()->user()->name)
@section('page-title', 'My Dashboard')

@section('ws-content')

{{-- Greeting --}}
<div style="margin-bottom:1.5rem;">
    <h2 style="font-family:'Fraunces',serif; font-size:1.35rem; font-weight:700; color:#0f0f14; line-height:1.2;">
        Good {{ now()->hour < 12 ? 'morning' : (now()->hour < 17 ? 'afternoon' : 'evening') }}, {{ explode(' ', $user->name)[0] }} 👋
    </h2>
    <p style="font-size:0.82rem; color:#9ca3af; margin-top:0.25rem;">
        {{ $member->role }} · {{ ucfirst($member->department) }} · {{ now()->format('l, d F Y') }}
    </p>
</div>

{{-- Announcements --}}
@if($announcements->count())
<div style="margin-bottom:1.5rem; display:flex; flex-direction:column; gap:0.6rem;">
    @foreach($announcements as $ann)
    <div class="ann-{{ $ann->type }}" style="padding:0.85rem 1rem; border-radius:8px; display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;">
        <div>
            <p style="font-size:0.8rem; font-weight:600; color:#0f0f14; margin-bottom:0.2rem;">📢 {{ $ann->title }}</p>
            <p style="font-size:0.75rem; color:#4b5563; line-height:1.5;">{{ $ann->body }}</p>
        </div>
        <form action="{{ route('workspace.announcements.read', $ann) }}" method="POST" style="flex-shrink:0;">
            @csrf
            <button type="submit" class="btn btn-xs btn-outline" style="white-space:nowrap;">Mark read</button>
        </form>
    </div>
    @endforeach
</div>
@endif

{{-- Stats row --}}
<div style="display:grid; grid-template-columns:repeat(4,1fr); gap:0.75rem; margin-bottom:1.5rem;">
    @foreach([
        ['Pending',     $pendingTasks,    '#f59e0b', 'M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'],
        ['In Progress', $inProgressTasks, '#2d3aff', 'M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z'],
        ['Done',        $doneTasks,       '#10b981', 'M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'],
        ['Overdue',     $overdueTasks,    '#dc2626', 'M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z'],
    ] as [$label, $count, $color, $path])
    <div class="stat-card">
        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:0.6rem;">
            <span style="font-size:0.68rem; font-weight:600; color:#9ca3af; text-transform:uppercase; letter-spacing:0.08em;">{{ $label }}</span>
            <div style="width:1.75rem;height:1.75rem;border-radius:6px;background:{{ $color }}18;display:flex;align-items:center;justify-content:center;">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="{{ $color }}" style="width:0.9rem;height:0.9rem;">
                    <path stroke-linecap="round" stroke-linejoin="round" d="{{ $path }}" />
                </svg>
            </div>
        </div>
        <div style="font-family:'Fraunces',serif; font-size:1.75rem; font-weight:700; color:#0f0f14; line-height:1;">{{ $count }}</div>
    </div>
    @endforeach
</div>

<div style="display:grid; grid-template-columns:1fr 1fr; gap:1rem;">

    {{-- Recent tasks --}}
    <div class="ws-card">
        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem;">
            <h3 style="font-family:'Fraunces',serif; font-size:0.9rem; font-weight:700;">Recent Tasks</h3>
            <a href="{{ route('workspace.tasks.index') }}" class="btn btn-xs btn-outline">View all</a>
        </div>

        @forelse($recentTasks as $task)
        <div style="display:flex; align-items:flex-start; gap:0.6rem; padding:0.6rem 0; {{ !$loop->last ? 'border-bottom:1px solid #f3f4f6;' : '' }}">
            <form action="{{ route('workspace.tasks.toggle', $task) }}" method="POST" style="flex-shrink:0; margin-top:0.1rem;">
                @csrf @method('PATCH')
                <button type="submit" style="width:1rem;height:1rem;border-radius:4px;border:1.5px solid {{ $task->status==='done' ? '#10b981' : '#d1d5db' }};background:{{ $task->status==='done' ? '#10b981' : 'transparent' }};cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;" title="Toggle complete">
                    @if($task->status==='done')
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none" style="width:8px;height:8px;"><path d="M2 6l3 3 5-5" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    @endif
                </button>
            </form>
            <div style="flex:1; min-width:0;">
                <p style="font-size:0.78rem; font-weight:500; color:{{ $task->status==='done' ? '#9ca3af' : '#0f0f14' }}; {{ $task->status==='done' ? 'text-decoration:line-through;' : '' }} white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">{{ $task->title }}</p>
                <div style="display:flex; align-items:center; gap:0.4rem; margin-top:0.2rem;">
                    <span class="pill priority-{{ $task->priority }}" style="font-size:0.58rem;">{{ ucfirst($task->priority) }}</span>
                    @if($task->due_date)
                    <span style="font-size:0.62rem; color:{{ $task->due_date->isPast() && $task->status!=='done' ? '#dc2626' : '#9ca3af' }};">
                        {{ $task->due_date->format('d M') }}
                    </span>
                    @endif
                </div>
            </div>
        </div>
        @empty
        <p style="font-size:0.78rem; color:#9ca3af; text-align:center; padding:1.5rem 0;">No tasks yet. <a href="{{ route('workspace.tasks.index') }}" style="color:#2d3aff; font-weight:600;">Add your first →</a></p>
        @endforelse
    </div>

    {{-- Pinned notes + quick add --}}
    <div style="display:flex; flex-direction:column; gap:0.75rem;">
        {{-- Quick task add --}}
        <div class="ws-card">
            <h3 style="font-family:'Fraunces',serif; font-size:0.9rem; font-weight:700; margin-bottom:0.85rem;">Quick Add Task</h3>
            <form action="{{ route('workspace.tasks.store') }}" method="POST">
                @csrf
                <div style="display:flex; flex-direction:column; gap:0.5rem;">
                    <input type="text" name="title" placeholder="What needs to be done?" class="form-field" required style="font-size:0.8rem;">
                    <div style="display:grid; grid-template-columns:1fr 1fr; gap:0.5rem;">
                        <select name="priority" class="form-field" style="font-size:0.76rem;">
                            <option value="low">Low priority</option>
                            <option value="medium" selected>Medium priority</option>
                            <option value="high">High priority</option>
                        </select>
                        <input type="date" name="due_date" class="form-field" style="font-size:0.76rem;" min="{{ today()->format('Y-m-d') }}">
                    </div>
                    <button type="submit" class="btn btn-primary" style="justify-content:center;">Add Task</button>
                </div>
            </form>
        </div>

        {{-- Pinned notes --}}
        @if($pinnedNotes->count())
        <div class="ws-card">
            <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:0.85rem;">
                <h3 style="font-family:'Fraunces',serif; font-size:0.9rem; font-weight:700;">📌 Pinned Notes</h3>
                <a href="{{ route('workspace.notes.index') }}" class="btn btn-xs btn-outline">All notes</a>
            </div>
            <div style="display:flex; flex-direction:column; gap:0.5rem;">
                @foreach($pinnedNotes as $note)
                <a href="{{ route('workspace.notes.show', $note) }}"
                   class="note-{{ $note->color }}"
                   style="display:block; padding:0.65rem 0.85rem; border-radius:8px; border:1px solid; text-decoration:none;">
                    <p style="font-size:0.78rem; font-weight:600; color:#0f0f14; margin-bottom:0.15rem;">{{ $note->title }}</p>
                    @if($note->body)
                    <p style="font-size:0.7rem; color:#6b7280; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;">{{ strip_tags($note->body) }}</p>
                    @endif
                </a>
                @endforeach
            </div>
        </div>
        @else
        <div class="ws-card" style="text-align:center; padding:1.5rem;">
            <p style="font-size:0.78rem; color:#9ca3af;">No pinned notes. <a href="{{ route('workspace.notes.index') }}" style="color:#2d3aff; font-weight:600;">Create one →</a></p>
        </div>
        @endif
    </div>
</div>

@endsection