<script setup>
import { computed } from 'vue'
import { Link, usePage } from '@inertiajs/vue3'
import {
    BookOpenIcon,
    LifebuoyIcon,
    ShieldCheckIcon,
    CodeBracketIcon,
    HeartIcon,
} from '@heroicons/vue/24/outline'

const page = usePage()
const sysinfo = computed(() => page.props.system_info)
const isAdmin = computed(() => page.props.auth?.user?.is_admin)

const buildYear = new Date().getFullYear()
</script>

<template>
    <footer class="mt-12 border-t border-slate-200 bg-slate-50 px-6 py-5 text-xs text-slate-500 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-400">
        <div class="mx-auto flex max-w-7xl flex-wrap items-center justify-between gap-3">
            <!-- Sol: brand + version -->
            <div class="flex items-center gap-3">
                <span class="font-semibold text-slate-700 dark:text-slate-300">Onoxsoft Panel</span>
                <span class="rounded bg-slate-200 px-1.5 py-0.5 font-mono text-[10px] dark:bg-slate-700">v0.1.0-dev</span>
                <span v-if="sysinfo?.php_version" class="hidden sm:inline">·</span>
                <span v-if="sysinfo?.php_version" class="hidden sm:inline">PHP {{ sysinfo.php_version }}</span>
                <span v-if="sysinfo?.os?.name" class="hidden md:inline">·</span>
                <span v-if="sysinfo?.os?.name" class="hidden md:inline">{{ sysinfo.os.name }}</span>
            </div>

            <!-- Orta: faydalı linkler (admin için) -->
            <nav class="flex items-center gap-4">
                <Link
                    v-if="isAdmin"
                    :href="route('admin.integrations.index')"
                    class="inline-flex items-center gap-1 hover:text-indigo-600"
                >
                    <LifebuoyIcon class="h-3.5 w-3.5" /> Entegrasyonlar
                </Link>
                <Link
                    v-if="isAdmin"
                    :href="route('admin.api-docs.index')"
                    class="inline-flex items-center gap-1 hover:text-indigo-600"
                >
                    <CodeBracketIcon class="h-3.5 w-3.5" /> API
                </Link>
                <a
                    href="https://onox.com.tr/security"
                    target="_blank"
                    rel="noopener"
                    class="inline-flex items-center gap-1 hover:text-indigo-600"
                >
                    <ShieldCheckIcon class="h-3.5 w-3.5" /> Güvenlik
                </a>
            </nav>

            <!-- Sağ: copyright -->
            <div class="flex items-center gap-1">
                <span>&copy; {{ buildYear }} ONOXSOFT</span>
                <span class="hidden sm:inline">·</span>
                <span class="hidden sm:inline">Made with</span>
                <HeartIcon class="hidden sm:inline h-3 w-3 text-red-500" />
                <span class="hidden sm:inline">in Türkiye</span>
            </div>
        </div>
    </footer>
</template>
