import Link from "next/link";

import { prisma } from "@/lib/prisma";
import { requireCrmAdmin } from "@/lib/crm/admin-access";
import CustomerAdminShell from "@/app/admin/CustomerAdminShell";

import { createStaffRole } from "./actions";
import PermissionPicker from "./PermissionPicker";

export const dynamic = "force-dynamic";

export default async function AdminRolesPage() {
  await requireCrmAdmin();

  const [roles, permissions, staffCount] = await Promise.all([
    prisma.role.findMany({
      orderBy: { name: "asc" },
      select: {
        id: true,
        code: true,
        name: true,
        isSystem: true,
        _count: {
          select: { users: true },
        },
        permissions: {
          select: {
            permission: {
              select: {
                code: true,
                module: true,
              },
            },
          },
        },
      },
    }),
    prisma.permission.findMany({
      orderBy: [
        { module: "asc" },
        { code: "asc" },
      ],
      select: {
        id: true,
        code: true,
        name: true,
        module: true,
      },
    }),
    prisma.user.count({
      where: {
        roles: {
          some: {
            role: {
              code: { not: "SUPER_ADMIN" },
            },
          },
        },
      },
    }),
  ]);

  const staffRolesWithFollowUpAccess = roles.filter((role) => {
    if (role.code === "SUPER_ADMIN") {
      return false;
    }

    const codes = role.permissions.map(
      (item) => item.permission.code,
    );

    return (
      codes.includes("LEAD_VIEW") &&
      codes.includes("LEAD_UPDATE")
    );
  }).length;

  const statistics = [
    {
      label: "Total Roles",
      value: roles.length,
      detail: "Configured access roles",
    },
    {
      label: "Available Permissions",
      value: permissions.length,
      detail: "CRM access controls",
    },
    {
      label: "Staff Accounts",
      value: staffCount,
      detail: "Non-super-admin users",
    },
    {
      label: "Follow-up Ready Roles",
      value: staffRolesWithFollowUpAccess,
      detail: "LEAD_VIEW + LEAD_UPDATE",
    },
  ];

  return (
    <CustomerAdminShell>
      <main className="w-full min-w-0 space-y-7 px-4 py-6 sm:px-6 lg:px-8 lg:py-8">
        <header className="flex flex-wrap items-start justify-between gap-4">
          <div className="min-w-0">
            <Link
              href="/admin/staff"
              className="text-sm font-semibold text-blue-700 hover:underline"
            >
              ← Staff & Users
            </Link>

            <h1 className="mt-3 text-2xl font-extrabold tracking-tight text-slate-900 sm:text-3xl">
              Roles & Permissions
            </h1>

            <p className="mt-2 max-w-3xl text-sm leading-6 text-slate-600">
              Create staff roles, assign CRM permissions and
              review existing access. System roles cannot be
              modified from this page.
            </p>
          </div>

          <Link
            href="/admin/staff"
            className="inline-flex rounded-xl border border-slate-300 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 hover:bg-slate-50"
          >
            Manage Staff
          </Link>
        </header>

        <section
          aria-label="Role and permission overview"
          className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4"
        >
          {statistics.map((item) => (
            <div
              key={item.label}
              className="min-w-0 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm"
            >
              <p className="text-sm font-semibold text-slate-500">
                {item.label}
              </p>
              <p className="mt-3 text-3xl font-extrabold text-slate-900">
                {item.value}
              </p>
              <p className="mt-2 text-xs text-slate-500">
                {item.detail}
              </p>
            </div>
          ))}
        </section>

        <section className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm sm:p-6">
          <h2 className="text-lg font-bold text-slate-900">
            Follow-up Permission Readiness
          </h2>

          <div className="mt-3 flex flex-wrap gap-3 text-sm">
            {(["LEAD_VIEW", "LEAD_UPDATE"] as const).map(
              (code) => {
                const available = permissions.some(
                  (permission) => permission.code === code,
                );

                return (
                  <span
                    key={code}
                    className={
                      available
                        ? "rounded-full bg-emerald-50 px-3 py-2 font-semibold text-emerald-800"
                        : "rounded-full bg-amber-50 px-3 py-2 font-semibold text-amber-800"
                    }
                  >
                    {code}: {available ? "Available" : "Missing"}
                  </span>
                );
              },
            )}
          </div>
        </section>

        <section
          id="create-role"
          className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm sm:p-6"
        >
          <div className="border-b border-slate-100 pb-5">
            <h2 className="text-xl font-extrabold text-slate-900">
              Create Staff Role
            </h2>
            <p className="mt-1 text-sm text-slate-500">
              Enter role details and select the required permissions.
            </p>
          </div>

          <form action={createStaffRole} className="mt-6 space-y-6">
            <div className="grid gap-5 lg:grid-cols-2">
              <label className="block text-sm font-semibold text-slate-800">
                Role Code
                <input
                  name="code"
                  required
                  minLength={3}
                  maxLength={50}
                  pattern="[A-Za-z][A-Za-z0-9_]{2,49}"
                  placeholder="SALES_CRM"
                  className="mt-2 block w-full rounded-xl border border-slate-300 px-4 py-3 outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100"
                />
              </label>

              <label className="block text-sm font-semibold text-slate-800">
                Role Name
                <input
                  name="name"
                  required
                  minLength={3}
                  maxLength={100}
                  placeholder="Sales CRM"
                  className="mt-2 block w-full rounded-xl border border-slate-300 px-4 py-3 outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100"
                />
              </label>
            </div>

            <label className="block text-sm font-semibold text-slate-800">
              Description
              <input
                name="description"
                maxLength={255}
                placeholder="Describe the responsibilities of this role"
                className="mt-2 block w-full rounded-xl border border-slate-300 px-4 py-3 outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-100"
              />
            </label>

            <div className="rounded-2xl border border-slate-200 bg-slate-50/50 p-4 sm:p-5">
              <PermissionPicker permissions={permissions} />
            </div>

            <div className="flex flex-wrap items-center justify-between gap-3 border-t border-slate-100 pt-5">
              <p className="text-xs text-slate-500">
                New roles are saved only when you submit this form.
              </p>

              <button
                type="submit"
                disabled={permissions.length === 0}
                className="rounded-xl bg-blue-700 px-6 py-3 text-sm font-bold text-white transition hover:bg-blue-800 disabled:cursor-not-allowed disabled:opacity-50"
              >
                Create Role
              </button>
            </div>
          </form>
        </section>

        <section className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm sm:p-6">
          <div className="flex flex-wrap items-center justify-between gap-3">
            <h2 className="text-xl font-extrabold text-slate-900">
              Existing Roles
            </h2>

            <span className="rounded-full bg-slate-100 px-3 py-1.5 text-sm font-semibold text-slate-600">
              {roles.length} roles
            </span>
          </div>

          {roles.length === 0 ? (
            <p className="mt-5 text-sm text-slate-500">
              No roles found.
            </p>
          ) : (
            <div className="mt-5 grid items-start gap-4 xl:grid-cols-2">
              {roles.map((role) => {
                const grouped = new Map<string, string[]>();

                for (const item of role.permissions) {
                  const module = item.permission.module || "GENERAL";

                  grouped.set(module, [
                    ...(grouped.get(module) ?? []),
                    item.permission.code,
                  ]);
                }

                return (
                  <article
                    key={role.id}
                    className="min-w-0 rounded-xl border border-slate-200 p-4 sm:p-5"
                  >
                    <div className="flex flex-wrap items-start justify-between gap-3">
                      <div className="min-w-0">
                        <h3 className="break-words text-base font-bold text-slate-900">
                          {role.name}
                        </h3>
                        <p className="mt-1 break-all text-xs text-slate-500">
                          {role.code}
                        </p>
                      </div>

                      <span className="rounded-full bg-slate-100 px-3 py-1.5 text-xs font-semibold text-slate-700">
                        {role.isSystem ? "System Role" : "Custom Role"}
                      </span>
                    </div>

                    <div className="mt-4 flex flex-wrap gap-2 text-xs font-semibold">
                      <span className="rounded-lg bg-blue-50 px-3 py-2 text-blue-800">
                        {role._count.users} users
                      </span>
                      <span className="rounded-lg bg-slate-100 px-3 py-2 text-slate-700">
                        {role.permissions.length} permissions
                      </span>
                    </div>

                    {/* SALES_CRM_PERMISSION_STATUS_STEP64 */}
                    {role.code === "SALES_CRM" && (
                      <div className="mt-4 rounded-xl border border-blue-200 bg-blue-50 p-4">
                        <p className="text-sm font-bold text-blue-900">
                          Sales / CRM — Follow-up Permission Status
                        </p>

                        <div className="mt-3 flex flex-wrap gap-2">
                          {(
                            [
                              "LEAD_VIEW",
                              "LEAD_UPDATE",
                              "LEAD_ASSIGN",
                            ] as const
                          ).map((code) => {
                            const assigned = role.permissions.some(
                              ({ permission }) =>
                                permission.code === code,
                            );

                            return (
                              <span
                                key={code}
                                className={
                                  assigned
                                    ? "rounded-lg bg-green-100 px-3 py-2 text-xs font-semibold text-green-800"
                                    : "rounded-lg bg-amber-100 px-3 py-2 text-xs font-semibold text-amber-900"
                                }
                              >
                                {code}: {assigned ? "YES" : "NO"}
                              </span>
                            );
                          })}
                        </div>
                      </div>
                    )}

                    <details className="mt-4 rounded-xl border border-slate-200">
                      <summary className="cursor-pointer px-4 py-3 text-sm font-semibold text-slate-700">
                        View Assigned Permissions
                      </summary>

                      <div className="space-y-4 border-t border-slate-200 p-4">
                        {grouped.size === 0 ? (
                          <p className="text-sm text-slate-500">
                            No permissions assigned.
                          </p>
                        ) : (
                          [...grouped.entries()]
                            .sort(([a], [b]) => a.localeCompare(b))
                            .map(([module, codes]) => (
                              <div key={module}>
                                <p className="mb-2 text-xs font-bold uppercase tracking-wide text-slate-500">
                                  {module}
                                </p>

                                <div className="flex flex-wrap gap-2">
                                  {codes.sort().map((code) => (
                                    <span
                                      key={code}
                                      className="max-w-full break-all rounded-lg bg-slate-50 px-2.5 py-1.5 text-xs text-slate-700"
                                    >
                                      {code}
                                    </span>
                                  ))}
                                </div>
                              </div>
                            ))
                        )}
                      </div>
                    </details>
                  </article>
                );
              })}
            </div>
          )}
        </section>
      </main>
    </CustomerAdminShell>
  );
}