import { prisma } from "@/lib/prisma";
import { requireCrmAdmin } from "@/lib/crm/admin-access";
import CustomerAdminShell from "../CustomerAdminShell";
import {
  createRequirement,
  updateRequirement,
} from "./actions";

export const dynamic = "force-dynamic";

const statuses = [
  "DRAFT", "SUBMITTED", "REVIEWED",
  "APPROVED", "REJECTED", "IMPLEMENTED",
];

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

  const [requirements, projects] = await Promise.all([
    prisma.requirement.findMany({
      orderBy: { createdAt: "desc" },
      take: 100,
      select: {
        requirementCode: true,
        title: true,
        description: true,
        status: true,
        project: {
          select: { name: true, projectCode: true },
        },
      },
    }),
    prisma.project.findMany({
      orderBy: { createdAt: "desc" },
      take: 500,
      select: { id: true, name: true, projectCode: true },
    }),
  ]);

  return (
    <CustomerAdminShell>
      <main className="mx-auto max-w-6xl space-y-8 px-5 py-8">
        <div>
          <h1 className="text-3xl font-bold">Requirements Management</h1>
          <p className="mt-2 text-sm text-slate-500">
            Manage project requirements and approvals.
          </p>
        </div>

        <section className="rounded-2xl border bg-white p-6">
          <h2 className="mb-4 text-xl font-bold">Add Requirement</h2>

          <form action={createRequirement} className="grid gap-4">
            <select
              name="projectId"
              required
              defaultValue=""
              className="rounded-xl border p-3"
            >
              <option value="" disabled>Select Project</option>
              {projects.map((project) => (
                <option key={project.id} value={project.id}>
                  {project.name} — {project.projectCode}
                </option>
              ))}
            </select>

            <input
              name="title"
              required
              maxLength={191}
              placeholder="Requirement Title"
              className="rounded-xl border p-3"
            />

            <textarea
              name="description"
              required
              maxLength={10000}
              placeholder="Requirement Description"
              className="rounded-xl border p-3"
            />

            <button
              type="submit"
              className="rounded-xl bg-blue-600 p-3 font-bold text-white"
            >
              Add Requirement
            </button>
          </form>
        </section>

        <section className="space-y-4">
          <h2 className="text-xl font-bold">Requirements</h2>

          {requirements.length === 0 && (
            <p className="rounded-xl border bg-white p-5 text-sm">
              No requirements created yet.
            </p>
          )}

          {requirements.map((item) => (
            <article
              key={item.requirementCode}
              className="rounded-2xl border bg-white p-5"
            >
              <h3 className="font-bold">{item.title}</h3>
              <p className="mt-1 text-xs text-slate-500">
                {item.requirementCode} · {item.project.name}
              </p>
              <p className="mt-3 whitespace-pre-wrap text-sm">
                {item.description}
              </p>

              <form
                action={updateRequirement}
                className="mt-4 flex flex-wrap gap-3"
              >
                <input
                  type="hidden"
                  name="requirementCode"
                  value={item.requirementCode}
                />

                <select
                  name="status"
                  defaultValue={item.status}
                  className="rounded-xl border p-2 text-sm"
                >
                  {/* REQUIREMENT_UI_LIFECYCLE_STEP172 */}
                  {(
                    {
                      DRAFT: ["DRAFT", "SUBMITTED"],
                      SUBMITTED: ["SUBMITTED", "DRAFT", "REVIEWED"],
                      REVIEWED: [
                        "REVIEWED",
                        "SUBMITTED",
                        "APPROVED",
                        "REJECTED",
                      ],
                      APPROVED: [
                        "APPROVED",
                        "REVIEWED",
                        "IMPLEMENTED",
                        "REJECTED",
                      ],
                      REJECTED: ["REJECTED", "REVIEWED"],
                      IMPLEMENTED: ["IMPLEMENTED"],
                    } as Record<
                      typeof item.status,
                      readonly typeof item.status[]
                    >
                  )[item.status].map((status) => (
                    <option key={status} value={status}>
                      {status.replaceAll("_", " ")}
                    </option>
                  ))}
                </select>

                <button
                  type="submit"
                  className="rounded-xl bg-blue-600 px-4 py-2 text-sm font-bold text-white"
                >
                  Update
                </button>
              </form>
            </article>
          ))}
        </section>
      </main>
    </CustomerAdminShell>
  );
}