<script setup lang="ts">
import DashboardLayout from '@/layouts/DashboardLayout.vue'
import { Link } from '@inertiajs/vue3'

const generations = [
    {
        id: 1,
        prompt: 'A futuristic city at sunset with flying cars',
        model: 'Gemini',
        ratio: '16:9',
        date: 'Today, 4:32 PM',
        status: 'Completed',
    },
    {
        id: 2,
        prompt: 'Luxury modern house surrounded by mountains',
        model: 'Gemini',
        ratio: '1:1',
        date: 'Today, 2:18 PM',
        status: 'Completed',
    },
    {
        id: 3,
        prompt: 'Cinematic portrait of a warrior in a fantasy world',
        model: 'Gemini',
        ratio: '4:5',
        date: 'Yesterday',
        status: 'Completed',
    },
    {
        id: 4,
        prompt: 'Minimal futuristic product photography',
        model: 'Gemini',
        ratio: '1:1',
        date: 'Yesterday',
        status: 'Completed',
    },
]
</script>

<template>
    <DashboardLayout title="Generation History">

        <div class="mx-auto max-w-7xl">

            <div class="flex flex-col justify-between gap-5 md:flex-row md:items-end">
                <div>
                    <h2 class="text-3xl font-bold">
                        Generation History
                    </h2>

                    <p class="mt-2 text-zinc-400">
                        View and manage all your generated images.
                    </p>
                </div>

                <Link
                    href="/generate"
                    class="inline-flex w-fit rounded-xl bg-white px-5 py-3 text-sm font-semibold text-black hover:bg-zinc-200"
                >
                    ✨ Generate New
                </Link>
            </div>

            <div class="mt-8 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">

                <div
                    v-for="generation in generations"
                    :key="generation.id"
                    class="group overflow-hidden rounded-2xl border border-white/10 bg-[#111114]"
                >

                    <div class="aspect-square bg-gradient-to-br from-zinc-800 via-zinc-900 to-black">
                        <div class="flex h-full items-center justify-center text-zinc-600">
                            AI Image
                        </div>
                    </div>

                    <div class="p-4">

                        <div class="flex items-center justify-between">
                            <span class="text-xs text-green-400">
                                ● {{ generation.status }}
                            </span>

                            <button class="text-zinc-500 hover:text-white">
                                ⋮
                            </button>
                        </div>

                        <p class="mt-3 line-clamp-2 text-sm text-zinc-300">
                            {{ generation.prompt }}
                        </p>

                        <div class="mt-4 flex items-center justify-between text-xs text-zinc-500">
                            <span>{{ generation.model }}</span>
                            <span>{{ generation.ratio }}</span>
                        </div>

                        <div class="mt-2 text-xs text-zinc-600">
                            {{ generation.date }}
                        </div>

                    </div>

                </div>

            </div>

        </div>

    </DashboardLayout>
</template>