import { prisma } from '@innungsapp/shared'
import { notFound } from 'next/navigation'
import { format } from 'date-fns'
import { de } from 'date-fns/locale'
import Link from 'next/link'
import { EditOrgForm } from './EditOrgForm'
import { DeleteOrgButton } from './DeleteOrgButton'
import { CreateAdminForm } from './CreateAdminForm'
import { CreateMemberForm } from './CreateMemberForm'
import { UserRoleActions } from './UserRoleActions'
import { MemberActions } from './MemberActions'
import { toggleAiFeature } from '../../actions'

const PLAN_COLORS: Record<string, string> = {
    pilot: 'bg-gray-100 text-gray-700',
    standard: 'bg-blue-100 text-blue-800',
    pro: 'bg-purple-100 text-purple-800',
    verband: 'bg-amber-100 text-amber-800',
}

export default async function OrgDetailPage({ params }: { params: Promise<{ id: string }> }) {
    const { id } = await params

    const org = await prisma.organization.findUnique({
        where: { id },
        include: {
            _count: {
                select: {
                    members: true,
                    userRoles: true,
                    news: true,
                    termine: true,
                    stellen: true,
                },
            },
            userRoles: {
                include: { user: true },
            },
            members: {
                take: 5,
                orderBy: { createdAt: 'desc' },
                select: { id: true, name: true, betrieb: true, status: true, createdAt: true },
            },
        },
    })

    if (!org) notFound()

    const planColor = PLAN_COLORS[org.plan] ?? 'bg-gray-100 text-gray-700'

    return (
        <div className="space-y-6">
            {/* Breadcrumb */}
            <div className="flex items-center gap-2 text-sm text-gray-500">
                <Link href="/superadmin" className="hover:text-gray-900 transition-colors">
                    ← Alle Innungen
                </Link>
            </div>

            {/* Header */}
            <div className="flex items-start justify-between">
                <div>
                    <div className="flex items-center gap-3">
                        <h1 className="text-2xl font-bold text-gray-900">{org.name}</h1>
                        <span className={`text-xs font-semibold px-2.5 py-0.5 rounded ${planColor}`}>
                            {org.plan}
                        </span>
                    </div>
                    <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>Erstellt {format(org.createdAt, 'dd. MMMM yyyy', { locale: de })}</span>
                        {org.avvAccepted && (
                            <>
                                <span>•</span>
                                <span className="text-green-600">AVV akzeptiert</span>
                            </>
                        )}
                    </div>
                </div>
            </div>

            {/* Stats */}
            <div className="grid grid-cols-2 sm:grid-cols-5 gap-3">
                {[
                    { label: 'Mitglieder', value: org._count.members },
                    { label: 'Admins', value: org._count.userRoles },
                    { label: 'News', value: org._count.news },
                    { label: 'Termine', value: org._count.termine },
                    { label: 'Stellen', value: org._count.stellen },
                ].map(({ label, value }) => (
                    <div key={label} className="bg-white rounded-xl border p-4 text-center">
                        <div className="text-2xl font-bold text-gray-900">{value}</div>
                        <div className="text-xs text-gray-500 mt-0.5">{label}</div>
                    </div>
                ))}
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                {/* Edit form */}
                <div className="lg:col-span-1 space-y-4">
                    <EditOrgForm org={org} />

                    {/* KI-Assistent */}
                    <div className="bg-white rounded-xl border p-4 space-y-3">
                        <div>
                            <h3 className="text-sm font-semibold text-gray-900">KI-Assistent</h3>
                            <p className="text-xs text-gray-500 mt-0.5">
                                Aktiviert den KI-Chat-Assistenten für Mitglieder dieser Innung.
                            </p>
                        </div>
                        <div className="flex items-center justify-between">
                            <span className={`text-sm font-medium ${org.aiEnabled ? 'text-green-700' : 'text-gray-400'}`}>
                                {org.aiEnabled ? 'Aktiviert' : 'Deaktiviert'}
                            </span>
                            <form action={async () => {
                                'use server'
                                await toggleAiFeature(org.id, !org.aiEnabled)
                            }}>
                                <button
                                    type="submit"
                                    className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none ${org.aiEnabled ? 'bg-green-500' : 'bg-gray-200'
                                        }`}
                                >
                                    <span
                                        className={`inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform ${org.aiEnabled ? 'translate-x-6' : 'translate-x-1'
                                            }`}
                                    />
                                </button>
                            </form>
                        </div>
                    </div>

                    {/* Danger zone */}
                    <div className="bg-white rounded-xl border border-red-200 p-4">
                        <h3 className="text-sm font-semibold text-red-700 mb-1">Gefahrenzone</h3>
                        <p className="text-xs text-gray-500 mb-3">
                            Das Löschen einer Innung entfernt alle zugehörigen Daten unwiderruflich.
                        </p>
                        <DeleteOrgButton id={org.id} name={org.name} />
                    </div>
                </div>

                {/* Right column: admins + recent members */}
                <div className="lg:col-span-2 space-y-6">
                    {/* Admins */}
                    <div className="bg-white rounded-xl border overflow-hidden">
                        <div className="p-4 border-b flex items-center justify-between">
                            <h2 className="text-base font-semibold text-gray-900">
                                Nutzer & Rollen ({org.userRoles.length})
                            </h2>
                        </div>
                        <div className="p-4 bg-gray-50/50 border-b">
                            <CreateAdminForm orgId={org.id} />
                        </div>
                        <div className="divide-y">
                            {org.userRoles.length === 0 ? (
                                <p className="p-4 text-sm text-gray-400">Noch keine Nutzer zugewiesen.</p>
                            ) : (
                                org.userRoles.map((ur) => (
                                    <div key={ur.id} className="p-4 flex items-center justify-between">
                                        <div>
                                            <div className="text-sm font-medium text-gray-900">{ur.user.name}</div>
                                            <div className="text-xs text-gray-500">
                                                {ur.user.email}
                                                <span className="ml-2 font-mono text-[10px] bg-gray-100 px-1 py-0.5 rounded">
                                                    {ur.role}
                                                </span>
                                            </div>
                                        </div>
                                        <div className="flex items-center gap-4">
                                            {ur.user.emailVerified ? (
                                                <span className="text-[10px] text-green-600 bg-green-50 px-2 py-0.5 rounded-full uppercase font-bold tracking-wider">
                                                    Verifiziert
                                                </span>
                                            ) : (
                                                <span className="text-[10px] text-amber-600 bg-amber-50 px-2 py-0.5 rounded-full uppercase font-bold tracking-wider">
                                                    Eingeladen
                                                </span>
                                            )}
                                            <UserRoleActions ur={ur} orgId={org.id} />
                                        </div>
                                    </div>
                                ))
                            )}
                        </div>
                    </div>

                    {/* Recent members */}
                    <div className="bg-white rounded-xl border overflow-hidden">
                        <div className="p-4 border-b flex items-center justify-between">
                            <h2 className="text-base font-semibold text-gray-900">
                                Mitglieder
                            </h2>
                            <span className="text-xs text-gray-400">{org._count.members} gesamt</span>
                        </div>
                        <div className="p-4 bg-gray-50/50 border-b">
                            <CreateMemberForm orgId={org.id} />
                        </div>
                        <div className="divide-y">
                            {org.members.length === 0 ? (
                                <p className="p-4 text-sm text-gray-400">Noch keine Mitglieder.</p>
                            ) : (
                                org.members.map((m) => (
                                    <div key={m.id} className="p-4 flex items-center justify-between">
                                        <div>
                                            <div className="text-sm font-medium text-gray-900">{m.name}</div>
                                            <div className="text-xs text-gray-500">{m.betrieb}</div>
                                        </div>
                                        <div className="flex items-center gap-4">
                                            <span
                                                className={`text-xs px-2 py-0.5 rounded-full ${m.status === 'aktiv'
                                                    ? 'bg-green-50 text-green-700'
                                                    : 'bg-gray-100 text-gray-500'
                                                    }`}
                                            >
                                                {m.status}
                                            </span>
                                            <span className="text-xs text-gray-400">
                                                {format(m.createdAt, 'dd.MM.yy', { locale: de })}
                                            </span>
                                            <MemberActions member={m} orgId={org.id} />
                                        </div>
                                    </div>
                                ))
                            )}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}