import { getServerSession } from "next-auth";
import { authOptions } from "../../lib/auth/options";
import { prisma } from "../../lib/db/prisma";
import { UserForm } from "./user-form";
import { InviteForm } from "./invite-form";
import { UserActions } from "./user-actions";
import { UserImportForm } from "./user-import-form";

function usersExportHref(searchParams: { roleId?: string; teamId?: string; status?: string; q?: string }) {
  const params = new URLSearchParams();
  for (const [key, value] of Object.entries(searchParams)) {
    if (value) params.set(key, value);
  }
  return `/api/users/export?${params.toString()}`;
}

export default async function UsersPage({ searchParams }: { searchParams: { roleId?: string; teamId?: string; status?: "active" | "inactive"; q?: string } }) {
  const session = await getServerSession(authOptions);
  const systemAdmin = session?.user.systemRole === "SYSTEM_ADMIN";
  const organizationId = session?.user.organizationId;
  const where: any = systemAdmin ? {} : { organizationId: organizationId! };
  if (searchParams.status) where.status = searchParams.status;
  if (searchParams.teamId) where.teamId = searchParams.teamId;
  if (searchParams.roleId) where.roles = { some: { id: searchParams.roleId } };
  if (searchParams.q) where.OR = [{ name: { contains: searchParams.q } }, { email: { contains: searchParams.q } }];

  const baseWhere = systemAdmin ? {} : { organizationId: organizationId! };
  const [users, roles, teams, projects] = await Promise.all([
    prisma.user.findMany({ where, include: { roles: true, team: true, projects: true }, orderBy: { createdAt: "desc" } }),
    prisma.role.findMany({ where: baseWhere, orderBy: { name: "asc" } }),
    prisma.team.findMany({ where: baseWhere, orderBy: { name: "asc" } }),
    prisma.project.findMany({ where: { ...baseWhere, isArchived: false }, orderBy: { name: "asc" } })
  ]);

  return (
    <div>
      <div className="flex flex-wrap items-end justify-between gap-3">
        <div>
          <h1 className="text-3xl font-semibold">Users</h1>
          <p className="mt-2 text-slate-600">Create employees, assign roles, assign teams, and generate invite links.</p>
        </div>
        <a className="brand-button-secondary" href={usersExportHref(searchParams)}>Export CSV</a>
      </div>
      <form className="mt-5 grid gap-3 rounded-lg border border-brand-secondary/20 bg-white p-4 shadow-sm md:grid-cols-5">
        <input className="rounded-lg border border-slate-300 px-3 py-2 text-sm md:col-span-2" name="q" placeholder="Search name or email" defaultValue={searchParams.q ?? ""} />
        <select className="rounded-lg border border-slate-300 px-3 py-2 text-sm" name="roleId" defaultValue={searchParams.roleId ?? ""}>
          <option value="">All roles</option>{roles.map((role) => <option key={role.id} value={role.id}>{role.name}</option>)}
        </select>
        <select className="rounded-lg border border-slate-300 px-3 py-2 text-sm" name="teamId" defaultValue={searchParams.teamId ?? ""}>
          <option value="">All teams</option>{teams.map((team) => <option key={team.id} value={team.id}>{team.name}</option>)}
        </select>
        <select className="rounded-lg border border-slate-300 px-3 py-2 text-sm" name="status" defaultValue={searchParams.status ?? ""}>
          <option value="">All status</option><option value="active">Active</option><option value="inactive">Inactive</option>
        </select>
        <button className="brand-button md:col-span-5" type="submit">Apply filters</button>
      </form>
      <section className="mt-6 grid gap-5 lg:grid-cols-[1fr_360px]">
        <div className="rounded-lg border border-brand-primary/20 bg-white p-5 shadow-sm">
          <h2 className="text-lg font-semibold">Team users</h2>
          <div className="mt-4 overflow-x-auto">
            <table className="w-full text-left text-sm">
              <thead className="text-slate-500">
                <tr><th className="py-2">Name</th><th>Email</th><th>Team</th><th>Roles</th><th>Projects</th><th>Status</th><th>Actions</th></tr>
              </thead>
              <tbody>
                {users.map((user) => (
                  <tr className="border-t border-slate-200" key={user.id}>
                    <td className="py-3">{user.name}</td>
                    <td>{user.email}</td>
                    <td>{user.team?.name ?? "No team"}</td>
                    <td>{user.roles.map((role) => role.name).join(", ")}</td>
                    <td>{user.projects.map((project) => project.name).join(", ") || "-"}</td>
                    <td>{user.status}</td>
                    <td><UserActions id={user.id} /></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
        <div className="grid gap-5">
          <UserForm roles={roles} teams={teams} projects={projects} />
          <UserImportForm />
          <InviteForm />
        </div>
      </section>
    </div>
  );
}