@extends('layouts.app')

@section('page_title', 'Notes')

@section('content')
<div class="bg-gray-50 dark:bg-gray-900 min-h-screen rounded-lg">
    <div class="w-full">
        <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
            <!-- Sidebar - Categories & Filters -->
            <div class="lg:col-span-1">
                <div class="sticky top-8">
                    <!-- Header -->
                    <div class="flex justify-between items-center mb-6 px-4 lg:px-0">
                        <h3 class="text-lg font-bold text-gray-900 dark:text-white">Categories</h3>
                        <a href="{{ route('notes.create') }}" 
                           class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg p-2 transition">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                            </svg>
                        </a>
                    </div>

                    <!-- Search Bar -->
                    <div class="mb-6 px-4 lg:px-0">
                        <form action="{{ route('notes.index') }}" method="GET" class="flex gap-2">
                            <input 
                                type="text" 
                                name="search"
                                value="{{ $search }}"
                                placeholder="Search notes..."
                                class="flex-1 px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400"
                            >
                            <button type="submit" class="px-3 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition text-sm font-medium">
                                Search
                            </button>
                        </form>
                    </div>

                    <!-- All Categories -->
                    <div class="space-y-2 max-h-[70vh] overflow-y-auto">
                        <a 
                            href="{{ route('notes.index') }}"
                            class="block px-4 py-3 rounded-lg border transition {{ !$category ? 'bg-blue-50 dark:bg-blue-900/30 border-blue-400 dark:border-blue-500 text-blue-900 dark:text-blue-200' : 'bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-300' }}"
                        >
                            <p class="truncate font-semibold text-sm">All Notes</p>
                        </a>

                        @forelse($categories as $cat)
                            <a 
                                href="{{ route('notes.index', ['category' => $cat]) }}"
                                class="block px-4 py-3 rounded-lg border transition {{ $category === $cat ? 'bg-blue-50 dark:bg-blue-900/30 border-blue-400 dark:border-blue-500 text-blue-900 dark:text-blue-200' : 'bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-300' }}"
                            >
                                <p class="truncate font-semibold text-sm">{{ $cat }}</p>
                            </a>
                        @empty
                        @endforelse

                        <!-- Archive Toggle -->
                        <a 
                            href="{{ route('notes.index', array_merge(request()->query(), ['show_archived' => $showArchived ? 0 : 1])) }}"
                            class="block px-4 py-3 rounded-lg border transition bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700"
                        >
                            <p class="truncate font-semibold text-sm">
                                {{ $showArchived ? '📂 Hide Archived' : '📂 Show Archived' }}
                            </p>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Main Content -->
            <div class="lg:col-span-3">
                <!-- Header -->
                <div class="mb-8 px-4 lg:px-0">
                    <div class="flex justify-between items-center mb-4">
                        <div>
                            <h1 class="text-3xl lg:text-4xl font-bold text-gray-900 dark:text-white mb-2">
                                @if($category && $category !== 'all')
                                    {{ $category }}
                                @elseif($showArchived)
                                    Archived Notes
                                @elseif($search)
                                    Search Results
                                @else
                                    All Notes
                                @endif
                            </h1>
                        </div>
                        <a href="{{ route('notes.create') }}" 
                           class="px-4 py-2 bg-blue-600 text-white font-semibold text-sm rounded-lg hover:bg-blue-700 dark:hover:bg-blue-500 transition text-center whitespace-nowrap">
                            + New Note
                        </a>
                    </div>
                </div>

                <!-- Notes Grid -->
                @if($notes->isEmpty())
                    <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-12 text-center px-4 lg:px-12">
                        <p class="text-gray-600 dark:text-gray-400 text-lg mb-4">
                            {{ $search ? 'No notes found matching your search' : 'No notes yet' }}
                        </p>
                        @if(!$search)
                            <a href="{{ route('notes.create') }}" 
                               class="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-semibold">
                                Create your first note →
                            </a>
                        @endif
                    </div>
                @else
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                        @foreach($notes as $note)
                            <a href="{{ route('notes.show', $note) }}" 
                               class="group bg-white dark:bg-gray-800 rounded-lg border-2 p-5 shadow-sm hover:shadow-md dark:hover:shadow-lg transition h-full flex flex-col"
                               style="border-color: {{ $note->color ?? '#E5E7EB' }}; --tw-border-opacity: 0.5;">
                                
                                <!-- Header -->
                                <div class="flex justify-between items-start mb-3">
                                    <div class="flex-1 min-w-0">
                                        <h3 class="text-lg font-bold text-gray-900 dark:text-white truncate group-hover:text-blue-600 dark:group-hover:text-blue-400 transition">
                                            {{ $note->title }}
                                        </h3>
                                        @if($note->category)
                                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">📁 {{ $note->category }}</p>
                                        @endif
                                    </div>
                                    
                                    <!-- Pin Icon -->
                                    @if($note->is_pinned)
                                        <svg class="w-5 h-5 text-amber-500 flex-shrink-0 ml-2" fill="currentColor" viewBox="0 0 24 24">
                                            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>
                                        </svg>
                                    @endif
                                </div>

                                <!-- Content Preview -->
                                <p class="text-gray-600 dark:text-gray-400 text-sm mb-3 flex-1 line-clamp-3">
                                    {{ strip_tags($note->content) }}
                                </p>

                                <!-- Meta Info -->
                                <div class="flex justify-between items-center text-xs text-gray-500 dark:text-gray-500 pt-3 border-t border-gray-200 dark:border-gray-700">
                                    <span>{{ $note->updated_at->format('M d, Y') }}</span>
                                    @if($note->project)
                                        <span class="inline-flex items-center gap-1 px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded text-gray-700 dark:text-gray-300">
                                            🏗️ {{ $note->project->name }}
                                        </span>
                                    @elseif($note->task)
                                        <span class="inline-flex items-center gap-1 px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded text-gray-700 dark:text-gray-300">
                                            ✓ {{ $note->task->title }}
                                        </span>
                                    @endif
                                </div>
                            </a>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection