@extends('layouts.app')
@section('title', 'Dashboard - AI Image Studio')
@section('page-title', 'Dashboard')

@section('content')
<div class="space-y-8">
    {{-- Quick Generate --}}
    <div class="card bg-gradient-to-r from-primary-900/30 to-purple-900/30 border-primary-800/50">
        <h2 class="text-xl font-bold text-white mb-4">Quick Generate</h2>
        <form id="quick-generate-form" class="flex gap-3">
            <input type="text" id="quick-prompt" class="input-field flex-1" placeholder="Describe the image you want to create..." required>
            <button type="submit" class="btn-primary whitespace-nowrap" id="quick-generate-btn">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                Generate
            </button>
        </form>
    </div>

    {{-- Stats --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="card">
            <div class="flex items-center gap-4">
                <div class="w-12 h-12 bg-primary-600/20 rounded-xl flex items-center justify-center">
                    <svg class="w-6 h-6 text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                </div>
                <div>
                    <p class="text-2xl font-bold text-white">{{ $imageCount }}</p>
                    <p class="text-sm text-gray-400">Total Images</p>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="flex items-center gap-4">
                <div class="w-12 h-12 bg-green-600/20 rounded-xl flex items-center justify-center">
                    <svg class="w-6 h-6 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                </div>
                <div>
                    <p class="text-2xl font-bold text-white">{{ $recentPrompts->count() }}</p>
                    <p class="text-sm text-gray-400">Recent Prompts</p>
                </div>
            </div>
        </div>
        <div class="card">
            <a href="{{ route('generator.index') }}" class="flex items-center gap-4 group">
                <div class="w-12 h-12 bg-purple-600/20 rounded-xl flex items-center justify-center">
                    <svg class="w-6 h-6 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
                </div>
                <div>
                    <p class="text-sm font-semibold text-white group-hover:text-primary-400 transition-colors">New Image</p>
                    <p class="text-sm text-gray-400">AI Generator</p>
                </div>
            </a>
        </div>
        <div class="card">
            <a href="{{ route('gallery.index') }}" class="flex items-center gap-4 group">
                <div class="w-12 h-12 bg-amber-600/20 rounded-xl flex items-center justify-center">
                    <svg class="w-6 h-6 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
                </div>
                <div>
                    <p class="text-sm font-semibold text-white group-hover:text-primary-400 transition-colors">View All</p>
                    <p class="text-sm text-gray-400">Gallery</p>
                </div>
            </a>
        </div>
    </div>

    {{-- Recent Designs --}}
    <div>
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-lg font-semibold text-white">Recent Designs</h2>
            <a href="{{ route('gallery.index') }}" class="text-sm text-primary-400 hover:text-primary-300">View all</a>
        </div>

        @if($recentImages->count() > 0)
        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
            @foreach($recentImages as $image)
            <div class="group relative rounded-xl overflow-hidden border border-gray-800 bg-gray-900 hover:border-primary-600/50 transition-all duration-300">
                <div class="aspect-square">
                    <img src="{{ $image->url }}" alt="{{ Str::limit($image->original_prompt, 50) }}" class="w-full h-full object-cover" loading="lazy">
                </div>
                <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                    <div class="absolute bottom-0 left-0 right-0 p-3">
                        <p class="text-xs text-gray-300 truncate">{{ Str::limit($image->original_prompt, 60) }}</p>
                        <div class="flex gap-2 mt-2">
                            <a href="{{ route('editor.index', $image->id) }}" class="text-xs bg-primary-600 text-white px-2.5 py-1 rounded-md hover:bg-primary-700 transition-colors">Edit</a>
                            <a href="{{ route('gallery.download', $image->id) }}" class="text-xs bg-gray-700 text-white px-2.5 py-1 rounded-md hover:bg-gray-600 transition-colors">Download</a>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        @else
        <div class="card text-center py-12">
            <svg class="w-16 h-16 text-gray-700 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
            <p class="text-gray-400 mb-4">No images yet. Start creating!</p>
            <a href="{{ route('generator.index') }}" class="btn-primary">Generate Your First Image</a>
        </div>
        @endif
    </div>

    {{-- Recent Activity --}}
    @if($recentActivity->count() > 0)
    <div>
        <h2 class="text-lg font-semibold text-white mb-4">Recent Activity</h2>
        <div class="card divide-y divide-gray-800 p-0">
            @foreach($recentActivity as $activity)
            <div class="px-6 py-3 flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-300">{{ $activity->description }}</p>
                    <p class="text-xs text-gray-500">{{ $activity->created_at->diffForHumans() }}</p>
                </div>
                <span class="text-xs bg-gray-800 text-gray-400 px-2 py-1 rounded-md">{{ $activity->action }}</span>
            </div>
            @endforeach
        </div>
    </div>
    @endif
</div>

@push('scripts')
<script>
document.getElementById('quick-generate-form').addEventListener('submit', async function(e) {
    e.preventDefault();
    const prompt = document.getElementById('quick-prompt').value.trim();
    if (!prompt) return;

    const btn = document.getElementById('quick-generate-btn');
    btn.disabled = true;
    LoadingOverlay.show('Generating your image with AI...');

    try {
        const response = await fetch('{{ route("generator.generate") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Accept': 'application/json',
            },
            body: JSON.stringify({ prompt }),
        });

        const data = await response.json();
        if (data.success) {
            Toast.success('Image generated successfully!');
            setTimeout(() => window.location.reload(), 1000);
        } else {
            Toast.error(data.error || 'Generation failed');
        }
    } catch (err) {
        Toast.error('Network error. Please try again.');
    } finally {
        btn.disabled = false;
        LoadingOverlay.hide();
    }
});
</script>
@endpush
@endsection