import { prisma } from '@innungsapp/shared'
import Link from 'next/link'
import { ExternalLink, Settings, Layout, Search } from 'lucide-react'

export default async function LandingPagesOverview({
    searchParams,
}: {
    searchParams: Promise<{ q?: string }>
}) {
    const { q = '' } = await searchParams

    const organizations = await prisma.organization.findMany({
        where: q ? {
            OR: [
                { name: { contains: q, mode: 'insensitive' } },
                { slug: { contains: q, mode: 'insensitive' } },
            ]
        } : {},
        orderBy: { name: 'asc' },
    })

    return (
        <div className="space-y-8 animate-in fade-in duration-500">
            {/* Header */}
            <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
                <div>
                    <h1 className="text-3xl font-black text-gray-900 tracking-tight font-outfit">
                        Landingpage-Verwaltung
                    </h1>
                    <p className="text-gray-500 font-medium">Alle Mandanten-Landingpages auf einen Blick verwalten.</p>
                </div>

                <div className="relative group w-full md:w-72">
                    <div className="absolute inset-y-0 left-3 flex items-center pointer-events-none text-gray-400 group-focus-within:text-[#E63946] transition-colors">
                        <Search size={18} />
                    </div>
                    <form method="GET">
                        <input
                            type="search"
                            name="q"
                            defaultValue={q}
                            placeholder="Landingpage suchen..."
                            className="w-full pl-10 pr-4 py-2.5 bg-white border rounded-xl text-sm outline-none focus:border-[#E63946] focus:ring-4 focus:ring-red-500/5 transition-all shadow-sm"
                        />
                    </form>
                </div>
            </div>

            {/* Grid */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {organizations.length === 0 ? (
                    <div className="col-span-full py-20 bg-white border border-dashed rounded-3xl flex flex-col items-center justify-center text-center">
                        <div className="bg-gray-50 p-4 rounded-2xl mb-4 text-gray-400">
                            <Layout size={40} strokeWidth={1.5} />
                        </div>
                        <p className="text-gray-500 font-medium">Keine Landingpages gefunden.</p>
                        {q && <Link href="/superadmin/landingpages" className="text-[#E63946] font-bold mt-2 text-sm hover:underline">Suche zurücksetzen</Link>}
                    </div>
                ) : (
                    organizations.map((org) => (
                        <div key={org.id} className="group bg-white rounded-3xl border border-gray-100 p-6 hover:border-[#E63946] hover:shadow-2xl hover:shadow-red-500/5 transition-all duration-500 flex flex-col h-full relative overflow-hidden">
                            {/* Accent line */}
                            <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-gray-50 via-gray-100 to-gray-50 group-hover:from-red-100 group-hover:via-[#E63946] group-hover:to-red-100 transition-all duration-500" />

                            <div className="flex items-start justify-between mb-4">
                                <div className="space-y-1">
                                    <h3 className="font-black text-xl text-gray-900 group-hover:text-[#E63946] transition-colors truncate max-w-[200px]">
                                        {org.name}
                                    </h3>
                                    <div className="flex items-center gap-1.5 text-xs font-mono text-gray-400">
                                        <span className="text-[#E63946] opacity-50">/</span>
                                        <span>{org.slug}</span>
                                    </div>
                                </div>
                                <div className="p-2.5 bg-gray-50 rounded-2xl text-gray-400 group-hover:bg-red-50 group-hover:text-[#E63946] transition-all duration-500">
                                    <Layout size={20} strokeWidth={2} />
                                </div>
                            </div>

                            <div className="flex-1 space-y-4">
                                <div className="bg-gray-50/50 rounded-2xl p-4 border border-gray-100">
                                    <div className="flex items-center justify-between text-[11px] font-bold uppercase tracking-widest text-gray-400 mb-2">
                                        <span>Status</span>
                                        <span className="flex items-center gap-1 text-green-500">
                                            <span className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse" />
                                            Online
                                        </span>
                                    </div>
                                    <div className="text-sm font-medium text-gray-600 truncate">
                                        {org.landingPageTitle || 'Standard-Title'}
                                    </div>
                                </div>
                            </div>

                            <div className="mt-8 grid grid-cols-2 gap-3">
                                <a
                                    href={`/${org.slug}`}
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    className="flex items-center justify-center gap-2 py-3 bg-gray-50 text-gray-600 rounded-2xl text-sm font-bold hover:bg-gray-100 transition-all border border-transparent"
                                >
                                    <ExternalLink size={16} />
                                    Ansehen
                                </a>
                                <Link
                                    href={`/superadmin/organizations/${org.id}`}
                                    className="flex items-center justify-center gap-2 py-3 bg-gray-900 text-white rounded-2xl text-sm font-bold hover:bg-black transition-all hover:shadow-lg hover:shadow-black/10 shadow-sm"
                                >
                                    <Settings size={16} />
                                    Editieren
                                </Link>
                            </div>
                        </div>
                    ))
                )}
            </div>
        </div>
    )
}