@extends('layouts.app')

@section('title', ($q ?: 'Search') . ' - ' . config('app.name'))

@section('header-left')
    <h1 class="text-lg font-semibold text-gray-900">Search</h1>
    @if ($q)
        <span class="text-sm text-gray-500">“{{ $q }}”</span>
    @endif
@endsection

@section('content')
    <form action="{{ route('search.index') }}" method="get" class="mb-6">
        <div class="flex gap-2">
            <input type="text" name="q" value="{{ old('q', $q) }}" placeholder="Search tasks, projects, comments…" class="flex-1 rounded-lg border border-gray-300 px-4 py-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
            <input type="hidden" name="type" value="{{ $type ?? '' }}" />
            <button type="submit" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700">Search</button>
        </div>
        <div class="mt-2 flex gap-2 text-sm">
            <a href="{{ route('search.index', ['q' => $q]) }}" class="{{ !$type ? 'font-medium text-indigo-600' : 'text-gray-500 hover:text-gray-700' }}">All</a>
            <a href="{{ route('search.index', ['q' => $q, 'type' => 'tasks']) }}" class="{{ $type === 'tasks' ? 'font-medium text-indigo-600' : 'text-gray-500 hover:text-gray-700' }}">Tasks</a>
            <a href="{{ route('search.index', ['q' => $q, 'type' => 'projects']) }}" class="{{ $type === 'projects' ? 'font-medium text-indigo-600' : 'text-gray-500 hover:text-gray-700' }}">Projects</a>
            <a href="{{ route('search.index', ['q' => $q, 'type' => 'comments']) }}" class="{{ $type === 'comments' ? 'font-medium text-indigo-600' : 'text-gray-500 hover:text-gray-700' }}">Comments</a>
        </div>
    </form>

    @if ($q === '')
        <p class="text-gray-500">Enter a search term above.</p>
    @else
    <div class="space-y-8">
        @if ($type === null || $type === 'tasks')
            <section>
                <h2 class="mb-3 text-sm font-semibold text-gray-900">Tasks</h2>
                @if ($tasksPaginator->isEmpty())
                    <p class="text-sm text-gray-500">No tasks found.</p>
                @else
                    <ul class="space-y-2">
                        @foreach ($tasksPaginator->items() as $task)
                            <li>
                                <a href="{{ $task->project_id ? route('projects.show', $task->project_id) . '?task=' . $task->id : route('my-tasks.index') }}" class="flex items-start gap-3 rounded-lg border border-gray-200 bg-white p-3 shadow-sm hover:border-indigo-300 hover:bg-gray-50">
                                    <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded bg-indigo-100 text-indigo-600">
                                        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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 2m-6 9l2 2 4-4"/></svg>
                                    </span>
                                    <div class="min-w-0 flex-1">
                                        <p class="font-medium text-gray-900">{{ $task->title }}</p>
                                        @if ($task->project)
                                            <p class="text-sm text-gray-500">{{ $task->project->name }}</p>
                                        @endif
                                    </div>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                    <div class="mt-2">{{ $tasksPaginator->withQueryString()->links() }}</div>
                @endif
            </section>
        @endif

        @if ($type === null || $type === 'projects')
            <section>
                <h2 class="mb-3 text-sm font-semibold text-gray-900">Projects</h2>
                @if ($projectsPaginator->isEmpty())
                    <p class="text-sm text-gray-500">No projects found.</p>
                @else
                    <ul class="space-y-2">
                        @foreach ($projectsPaginator->items() as $project)
                            <li>
                                <a href="{{ route('projects.show', $project) }}" class="flex items-start gap-3 rounded-lg border border-gray-200 bg-white p-3 shadow-sm hover:border-indigo-300 hover:bg-gray-50">
                                    <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded bg-gray-100 text-gray-600">
                                        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
                                    </span>
                                    <div class="min-w-0 flex-1">
                                        <p class="font-medium text-gray-900">{{ $project->name }}</p>
                                    </div>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                    <div class="mt-2">{{ $projectsPaginator->withQueryString()->links() }}</div>
                @endif
            </section>
        @endif

        @if ($type === null || $type === 'comments')
            <section>
                <h2 class="mb-3 text-sm font-semibold text-gray-900">Comments</h2>
                @if ($commentsPaginator->isEmpty())
                    <p class="text-sm text-gray-500">No comments found.</p>
                @else
                    <ul class="space-y-2">
                        @foreach ($commentsPaginator->items() as $comment)
                            <li>
                                <a href="{{ $comment->task && $comment->task->project_id ? route('projects.show', $comment->task->project_id) . '?task=' . $comment->task->id : route('my-tasks.index') }}" class="flex items-start gap-3 rounded-lg border border-gray-200 bg-white p-3 shadow-sm hover:border-indigo-300 hover:bg-gray-50">
                                    <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded bg-amber-100 text-amber-600">
                                        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"/></svg>
                                    </span>
                                    <div class="min-w-0 flex-1">
                                        <p class="font-medium text-gray-900">{{ $comment->task?->title ?? 'Comment' }}</p>
                                        <p class="text-sm text-gray-600">{{ Str::limit(strip_tags($comment->body), 120) }}</p>
                                        @if ($comment->task?->project)
                                            <p class="text-xs text-gray-500">{{ $comment->task->project->name }}</p>
                                        @endif
                                    </div>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                    <div class="mt-2">{{ $commentsPaginator->withQueryString()->links() }}</div>
                @endif
            </section>
        @endif
    </div>
    @endif
@endsection