import Link from "next/link";
import { getServerSession } from "next-auth";
import { authOptions } from "../../lib/auth/options";
import { prisma } from "../../lib/db/prisma";

export default async function OnboardingPage() {
  const session = await getServerSession(authOptions);
  const organizationId = session?.user.organizationId;
  const [projects, teams, users] = organizationId
    ? await Promise.all([
        prisma.project.count({ where: { organizationId } }),
        prisma.team.count({ where: { organizationId } }),
        prisma.user.count({ where: { organizationId } })
      ])
    : [0, 0, 0];

  const steps = [
    {
      title: "Create your first project",
      description: "Projects keep time entries and screenshots connected to the work being billed or reviewed.",
      href: "/admin/projects",
      cta: "Manage projects",
      complete: projects > 1,
      count: projects
    },
    {
      title: "Organize teams",
      description: "Teams make user lists, policy review, and missing clock-in checks easier to scan.",
      href: "/admin/teams",
      cta: "Manage teams",
      complete: teams > 1,
      count: teams
    },
    {
      title: "Invite employees",
      description: "Add users directly, bulk import a CSV, or send invite links for employee onboarding.",
      href: "/admin/users",
      cta: "Manage users",
      complete: users > 1,
      count: users
    }
  ];

  return (
    <div>
      <div className="admin-card p-6">
        <p className="text-sm font-semibold uppercase tracking-wide text-brand-primary">Workspace setup</p>
        <h1 className="mt-1 text-3xl font-semibold">Onboarding wizard</h1>
        <p className="mt-2 max-w-3xl text-slate-600">
          Follow these first-run steps to make WorkOnClock useful before rolling the desktop tracker out to employees.
        </p>
      </div>
      <section className="mt-6 grid gap-4 lg:grid-cols-3">
        {steps.map((step, index) => (
          <article className="admin-card flex flex-col p-5" key={step.href}>
            <div className="flex items-center justify-between gap-3">
              <span className="grid h-9 w-9 place-items-center rounded-lg bg-slate-950 text-sm font-bold text-white">{index + 1}</span>
              <span className={`rounded-lg px-2.5 py-1 text-xs font-semibold ${step.complete ? "bg-emerald-50 text-emerald-700" : "bg-amber-50 text-amber-700"}`}>
                {step.complete ? "Ready" : "Needs setup"}
              </span>
            </div>
            <h2 className="mt-5 text-lg font-semibold">{step.title}</h2>
            <p className="mt-2 flex-1 text-sm leading-6 text-slate-600">{step.description}</p>
            <p className="mt-4 text-sm font-medium text-slate-500">{step.count} current</p>
            <Link className="brand-button-secondary mt-4" href={step.href}>{step.cta}</Link>
          </article>
        ))}
      </section>
    </div>
  );
}