<script setup lang="ts">
import DashboardLayout from '@/layouts/DashboardLayout.vue'
import { Link } from '@inertiajs/vue3'
interface GenerationOutput {
    id: number
    image_url: string
    thumbnail_url: string | null
}

interface Generation {
    id: number
    prompt: string
    status: string
    credits_used: number
    created_at: string
    outputs: GenerationOutput[]
}

interface User {
    id: number
    name: string
    email: string
}

interface Stats {
    total_generations: number
    completed_generations: number
}

defineProps<{
    user: User
    credits: number
    stats: Stats
    recent_generations: Generation[]
}>()
</script>

<template>
    <DashboardLayout title="Dashboard">

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

            <div class="mb-10">
                <h2 class="text-3xl font-bold">
                    Welcome back 👋
                </h2>

                <p class="mt-2 text-zinc-400">
                    Create something amazing today.
                </p>
            </div>

            <div class="grid gap-5 md:grid-cols-3">

                <div class="rounded-2xl border border-white/10 bg-[#111114] p-6">
                    <p class="text-sm text-zinc-400">
                        Available Credits
                    </p>

                    <p class="mt-3 text-3xl font-bold">
                        {{ credits }}
                    </p>
                </div>

                <div class="rounded-2xl border border-white/10 bg-[#111114] p-6">
                    <p class="text-sm text-zinc-400">
                        Images Generated
                    </p>

                    <p class="mt-3 text-3xl font-bold">
                        {{ stats.total_generations }}
                    </p>
                </div>

                <div class="rounded-2xl border border-white/10 bg-[#111114] p-6">
                    <p class="text-sm text-zinc-400">
                        Current Plan
                    </p>

                    <p class="mt-3 text-3xl font-bold">
                        Free
                    </p>
                </div>

            </div>

            <div class="mt-8 rounded-3xl border border-white/10 bg-[#111114] p-8">

                <h3 class="text-2xl font-semibold">
                    Start creating
                </h3>

                <p class="mt-2 text-zinc-400">
                    Generate your first AI image.
                </p>

                <Link
                    href="/generate"
                    class="mt-6 inline-flex rounded-xl bg-white px-6 py-3 font-semibold text-black hover:bg-zinc-200"
                >
                    ✨ Generate Image
                </Link>

            </div>

        </div>

    </DashboardLayout>
</template>