import Link from "next/link";
import { Boxes } from "lucide-react";
import { prisma } from "@/lib/db";

export const dynamic = "force-dynamic";

export default async function NeoBrutPage() {
  const [users, instances] = await Promise.all([prisma.user.count(), prisma.instance.findMany()]);
  const active = instances.filter((instance) => instance.status === "RUNNING").length;

  return (
    <main className="min-h-screen bg-[#fff8bd] text-black">
      <nav className="flex h-24 items-center justify-between border-b-4 border-black bg-white px-8">
        <Link href="/" className="flex items-center gap-3">
          <span className="flex h-10 w-10 items-center justify-center rounded-md bg-amber text-white"><Boxes size={22} /></span>
          <span><strong>WAKELAI.COM</strong><span className="block text-sm text-slate-500">Managed Wakel AI workspaces</span></span>
        </Link>
        <div className="hidden gap-10 text-sm font-black md:flex">
          <Link href="/">Platform</Link>
          <Link href="/pricing">Pricing</Link>
          <Link href="/admin/themes">Themes</Link>
        </div>
        <Link className="border-4 border-black px-6 py-3 font-black shadow-[4px_4px_0_#000]" href="/dashboard">Dashboard</Link>
      </nav>
      <section className="mx-auto grid max-w-7xl gap-10 px-6 py-24 xl:grid-cols-[1fr_0.9fr]">
        <div className="border-4 border-black bg-white p-10 shadow-[12px_12px_0_#000]">
          <div className="mb-10 flex gap-4">
            <span className="border-4 border-black bg-amber px-6 py-2 text-xs font-black tracking-[0.35em]">MANAGED SAAS</span>
            <span className="border-4 border-black bg-black px-6 py-2 text-xs font-black tracking-[0.35em] text-amber">NO-FLUFF OPS</span>
          </div>
          <h1 className="max-w-3xl text-6xl font-black leading-[0.95] md:text-7xl">LAUNCH AUTOMATION WORKSPACES FROM ONE CONTROL PLANE.</h1>
          <p className="mt-10 border-4 border-black bg-amber p-6 text-xl font-black shadow-[6px_6px_0_#000]">
            Provision isolated Wakel AI environments, map domains, and hand customers a clean launch URL.
          </p>
        </div>
        <div className="border-4 border-black bg-white p-8 shadow-[12px_12px_0_#000]">
          <div className="mb-5 flex justify-between border-b-4 border-black pb-5">
            <div className="flex gap-2"><span className="h-5 w-5 border-4 border-black bg-black" /><span className="h-5 w-5 border-4 border-black bg-white" /><span className="h-5 w-5 border-4 border-black bg-pink-300" /></div>
            <span className="border-4 border-black bg-cyan-300 px-4 py-2 text-xs font-black tracking-[0.25em]">LIVE OPS SNAPSHOT</span>
          </div>
          <div className="grid grid-cols-3 gap-4">
            <Box label="TENANTS" value={users} />
            <Box label="ACTIVE" value={active} color="bg-amber" />
            <Box label="RUNTIMES" value={instances.length} color="bg-pink-300" />
          </div>
          <div className="mt-6 grid gap-4 md:grid-cols-[1fr_0.9fr]">
            <div className="border-4 border-black bg-black p-6 text-white shadow-[6px_6px_0_#facc15]">
              <p className="text-xs font-black tracking-[0.35em] text-amber">CUSTOMER LAUNCH</p>
              <h2 className="mt-4 text-3xl font-black">ONE CLICK INTO THE WORKSPACE</h2>
            </div>
            <div className="space-y-4 border-4 border-black bg-amber p-5">
              {["Subscription captured", "Tenant + domain created", "Runtime deployed", "Launch URL handed off"].map((step, index) => (
                <div key={step} className="border-4 border-black bg-white p-4 font-black">
                  <span className="mr-3 bg-black px-2 py-1 text-xs text-amber">{String(index + 1).padStart(2, "0")}</span>
                  {step}
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

function Box({ label, value, color = "bg-white" }: { label: string; value: number; color?: string }) {
  return <div className={`border-4 border-black ${color} p-5 text-center shadow-[5px_5px_0_#000]`}><p className="text-4xl font-black">{value}</p><p className="mt-2 text-xs font-black tracking-[0.3em]">{label}</p></div>;
}