import Link from 'next/link';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Sword, Telescope, ChevronRight } from 'lucide-react';
import { getOrCreateUKK } from '@/lib/admin-actions';

export const dynamic = 'force-dynamic';
export const revalidate = 0;

const UKK_SLUGS = ['cakrawala', 'khauf'];

const UKK_META: Record<string, any> = {
    cakrawala: {
        icon: Telescope,
        color: 'from-blue-500/20 to-cyan-500/10',
        iconColor: 'text-blue-400',
        defaultDesc: 'Unit Kegiatan Khusus Cakrawala HMF FPMIPA UPI',
    },
    khauf: {
        icon: Sword,
        color: 'from-rose-500/20 to-orange-500/10',
        iconColor: 'text-rose-400',
        defaultDesc: 'Unit Kegiatan Khusus Khauf HMF FPMIPA UPI',
    },
};

export default async function AdminUKKPage() {
    // Pastikan data UKK tersedia dan fetch dari database
    const ukks = await Promise.all(UKK_SLUGS.map(slug => getOrCreateUKK(slug)));

    return (
        <div className="space-y-6">
            <div>
                <h1 className="text-3xl font-bold tracking-tight">Unit Kegiatan Khusus</h1>
                <p className="text-muted-foreground mt-1">
                    Pilih UKK yang ingin dikelola informasi, program kerja, dan anggotanya.
                </p>
            </div>

            <div className="grid gap-4 md:grid-cols-2">
                {ukks.map((ukk) => {
                    if (!ukk) return null;
                    const meta = UKK_META[ukk.slug] || {
                        icon: Telescope,
                        color: 'from-gray-500/20 to-slate-500/10',
                        iconColor: 'text-gray-400',
                        defaultDesc: 'Unit Kegiatan Khusus HMF FPMIPA UPI',
                    };
                    const Icon = meta.icon;

                    return (
                        <Link key={ukk.slug} href={`/admin/ukk/${ukk.slug}`}>
                            <Card className="group relative overflow-hidden hover:border-primary/50 transition-all duration-300 cursor-pointer hover:-translate-y-1 hover:shadow-xl">
                                <div className={`absolute inset-0 bg-gradient-to-br ${meta.color} opacity-0 group-hover:opacity-100 transition-opacity duration-300`} />
                                <CardHeader className="relative">
                                    <div className="flex items-center justify-between">
                                        <div className="flex items-center gap-3">
                                            <div className="p-2.5 bg-muted rounded-xl group-hover:bg-primary/10 transition-colors">
                                                <Icon className={`h-6 w-6 ${meta.iconColor}`} />
                                            </div>
                                            <div>
                                                <CardTitle className="text-lg">UKK {ukk.nama}</CardTitle>
                                                <CardDescription className="line-clamp-2">
                                                    {ukk.deskripsi || meta.defaultDesc}
                                                </CardDescription>
                                            </div>
                                        </div>
                                        <ChevronRight className="h-5 w-5 text-muted-foreground group-hover:text-primary group-hover:translate-x-1 transition-all" />
                                    </div>
                                </CardHeader>
                                <CardContent className="relative">
                                    <p className="text-sm text-muted-foreground">
                                        Kelola profil, program kerja, dan daftar anggota UKK {ukk.nama}.
                                    </p>
                                </CardContent>
                            </Card>
                        </Link>
                    );
                })}
            </div>
        </div>
    );
}