import { prisma } from '@innungsapp/shared'
import { CreateOrgForm } from './CreateOrgForm'
import { format } from 'date-fns'
import { de } from 'date-fns/locale'

export default async function SuperAdminPage() {
    const organizations = await prisma.organization.findMany({
        orderBy: { createdAt: 'desc' },
        include: {
            _count: {
                select: {
                    members: true,
                    userRoles: true,
                },
            },
        },
    })

    return (
        <div className="space-y-8">
            <div>
                <h1 className="text-2xl font-bold text-gray-900">Innungs-Verwaltung (Multi-Tenant)</h1>
                <p className="text-gray-500 mt-1">Hierüber werden alle Mandanten der Lösung verwaltet.</p>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
                {/* Form: Create new org */}
                <div className="lg:col-span-1">
                    <CreateOrgForm />
                </div>

                {/* List of orgs */}
                <div className="lg:col-span-2">
                    <div className="bg-white rounded-lg border overflow-hidden">
                        <div className="p-6 border-b">
                            <h2 className="text-lg font-semibold text-gray-900">Aktive Innungen ({organizations.length})</h2>
                        </div>

                        <div className="divide-y">
                            {organizations.length === 0 ? (
                                <div className="p-8 text-center text-gray-500">
                                    Bisher keine Innungen angelegt.
                                </div>
                            ) : (
                                organizations.map((org) => (
                                    <div key={org.id} className="p-5 hover:bg-gray-50 border-l-[3px] border-transparent hover:border-brand-500 transition-all">
                                        <div className="flex justify-between items-start">
                                            <div>
                                                <h3 className="font-bold text-gray-900 text-lg">{org.name}</h3>
                                                <div className="flex items-center gap-3 mt-1 text-sm text-gray-500">
                                                    <span className="font-mono bg-gray-100 px-2 py-0.5 rounded text-[11px]">{org.slug}</span>
                                                    <span>•</span>
                                                    <span>{org.contactEmail || 'Keine E-Mail'}</span>
                                                </div>
                                            </div>
                                            <span className="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">
                                                {org.plan}
                                            </span>
                                        </div>

                                        <div className="mt-4 flex flex-wrap gap-4 text-sm">
                                            <div className="bg-gray-50 px-3 py-2 rounded-lg border inline-block">
                                                <span className="text-gray-500 block text-xs uppercase tracking-wider font-semibold">Mitglieder</span>
                                                <span className="font-bold text-gray-900">{org._count.members}</span>
                                            </div>
                                            <div className="bg-gray-50 px-3 py-2 rounded-lg border inline-block">
                                                <span className="text-gray-500 block text-xs uppercase tracking-wider font-semibold">Admins</span>
                                                <span className="font-bold text-gray-900">{org._count.userRoles}</span>
                                            </div>
                                            <div className="bg-gray-50 px-3 py-2 rounded-lg border inline-block">
                                                <span className="text-gray-500 block text-xs uppercase tracking-wider font-semibold">Erstellt am</span>
                                                <span className="font-bold text-gray-900">{format(org.createdAt, 'dd.MM.yyyy', { locale: de })}</span>
                                            </div>
                                        </div>
                                    </div>
                                ))
                            )}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}