import { getServerSession } from "next-auth";
import { ExternalLink, RotateCw, Shield } from "lucide-react";
import { Badge, Button, Card, LinkButton } from "@/components/ui";
import { authOptions } from "@/lib/auth";
import { prisma } from "@/lib/db";
import { instancePublicUrl } from "@/lib/utils";

export const dynamic = "force-dynamic";

export default async function AutomationsPage() {
  const session = await getServerSession(authOptions);
  const user = await prisma.user.findUnique({
    where: { id: parseInt(session!.user.id) },
    include: { instances: { orderBy: { created_at: "desc" } } }
  });
  const instances = user?.instances || [];
  const active = instances.filter((instance) => instance.status === "RUNNING").length;
  const queued = instances.filter((instance) => instance.status === "CREATING").length;

  return (
    <div className="space-y-6">
      <section className="rounded-lg border border-slate-200 bg-amber p-6 text-ink shadow-sm">
        <p className="inline-flex rounded border border-ink bg-white px-3 py-1 text-xs font-black uppercase tracking-[0.25em]">wakelai.com</p>
        <h1 className="mt-5 text-4xl font-black">Automations</h1>
        <p className="mt-2 text-sm font-semibold">Monitor instances and install workflow templates when a real template source is connected.</p>
        <div className="mt-6 grid gap-3 md:grid-cols-3">
          <div className="border-2 border-ink bg-white p-4 text-center shadow-[4px_4px_0_#111827]">
            <p className="text-xs font-black uppercase tracking-[0.25em] text-slate-500">Templates</p>
            <p className="text-3xl font-black">0</p>
          </div>
          <div className="border-2 border-ink bg-lime-300 p-4 text-center shadow-[4px_4px_0_#111827]">
            <p className="text-xs font-black uppercase tracking-[0.25em] text-slate-700">Active</p>
            <p className="text-3xl font-black">{active}</p>
          </div>
          <div className="border-2 border-ink bg-pink-300 p-4 text-center shadow-[4px_4px_0_#111827]">
            <p className="text-xs font-black uppercase tracking-[0.25em] text-slate-700">Queued</p>
            <p className="text-3xl font-black">{queued}</p>
          </div>
        </div>
      </section>

      <Card>
        <div className="flex items-center justify-between">
          <div>
            <h2 className="text-xl font-bold">Instances</h2>
            <p className="text-sm text-slate-500">{instances.length} runtime(s) in this workspace</p>
          </div>
          <LinkButton href="/dashboard/instances" variant="secondary">Manage</LinkButton>
        </div>
      </Card>

      <div className="grid gap-6 xl:grid-cols-[1fr_360px]">
        <Card>
          <h2 className="text-xl font-bold">Workflow Template Catalog</h2>
          <p className="mt-1 text-sm text-slate-500">No workflow templates are configured yet.</p>
          <div className="mt-6 rounded-lg border border-dashed border-slate-300 p-8 text-center text-sm text-slate-500">
            Connect a real template registry before templates appear here.
          </div>
        </Card>
        <Card>
          <h2 className="text-xl font-bold">Instance Summary</h2>
          {instances[0] ? (
            <div className="mt-4 space-y-3 text-sm">
              <div className="flex justify-between"><span className="text-slate-500">Name</span><strong>{instances[0].name}</strong></div>
              <div className="flex justify-between"><span className="text-slate-500">Status</span><Badge tone={instances[0].status === "RUNNING" ? "green" : "amber"}>{instances[0].status}</Badge></div>
              <div className="flex justify-between"><span className="text-slate-500">Type</span><strong>{instances[0].app_type}</strong></div>
              <a className="inline-flex w-full items-center justify-center gap-2 rounded-md bg-ink px-4 py-3 text-sm font-semibold text-white" href={instancePublicUrl(instances[0].subdomain)} target="_blank">
                <ExternalLink size={16} />
                Open
              </a>
              <div className="grid grid-cols-2 gap-2">
                <Button variant="secondary"><RotateCw size={15} /> Restart</Button>
                <Button variant="secondary"><Shield size={15} /> Backup</Button>
              </div>
            </div>
          ) : (
            <p className="mt-4 text-sm text-slate-500">No instance yet.</p>
          )}
        </Card>
      </div>
    </div>
  );
}