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

export const dynamic = "force-dynamic";

const statuses = [
  "OPEN",
  "ASSIGNED",
  "IN_PROGRESS",
  "WAITING_CUSTOMER",
  "RESOLVED",
  "CLOSED",
];

const priorities = [
  "LOW",
  "NORMAL",
  "HIGH",
  "URGENT",
];

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

  const [tickets, customers, projects, staff] =
    await Promise.all([
      prisma.supportTicket.findMany({
        orderBy: { createdAt: "desc" },
        take: 100,
        select: {
          ticketCode: true,
          subject: true,
          description: true,
          status: true,
          priority: true,
          assignedToId: true,
          client: {
            select: {
              name: true,
              clientCode: true,
            },
          },
          project: {
            select: {
              name: true,
              projectCode: true,
            },
          },
          assignedTo: {
            select: {
              name: true,
              userCode: true,
            },
          },
        },
      }),

      prisma.client.findMany({
        orderBy: { name: "asc" },
        take: 500,
        select: {
          id: true,
          name: true,
          clientCode: true,
        },
      }),

      prisma.project.findMany({
        orderBy: { createdAt: "desc" },
        take: 500,
        select: {
          id: true,
          name: true,
          projectCode: true,
        },
      }),

      prisma.user.findMany({
        where: {
          status: "ACTIVE",
          roles: {
            some: {
              role: {
                name: {
                  not: "SUPER_ADMIN",
                },
              },
            },
          },
        },
        orderBy: { name: "asc" },
        select: {
          id: true,
          name: true,
          userCode: true,
        },
      }),
    ]);

  return (
    <CustomerAdminShell>
      <main className="mx-auto max-w-7xl space-y-8 px-5 py-8">
        <div>
          <p className="text-xs font-bold uppercase tracking-[0.16em] text-blue-700">
            Customer Support
          </p>

          <h1 className="mt-2 text-3xl font-bold">
            Support Tickets
          </h1>

          <p className="mt-2 text-sm text-slate-500">
            Create, assign and track customer support work.
          </p>
        </div>

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

          <form
            action={createSupportTicket}
            className="grid gap-4 md:grid-cols-2"
          >
            <select
              name="clientId"
              required
              defaultValue=""
              className="rounded-xl border p-3"
            >
              <option value="" disabled>
                Select Customer
              </option>

              {customers.map((customer) => (
                <option key={customer.id} value={customer.id}>
                  {customer.name} — {customer.clientCode}
                </option>
              ))}
            </select>

            <select
              name="projectId"
              defaultValue=""
              className="rounded-xl border p-3"
            >
              <option value="">No Project</option>

              {projects.map((project) => (
                <option key={project.id} value={project.id}>
                  {project.name} — {project.projectCode}
                </option>
              ))}
            </select>

            <input
              name="subject"
              required
              maxLength={191}
              placeholder="Ticket Subject"
              className="rounded-xl border p-3 md:col-span-2"
            />

            <textarea
              name="description"
              required
              maxLength={10000}
              placeholder="Describe the issue"
              className="min-h-32 rounded-xl border p-3 md:col-span-2"
            />

            <select
              name="priority"
              defaultValue="NORMAL"
              className="rounded-xl border p-3"
            >
              {priorities.map((priority) => (
                <option key={priority} value={priority}>
                  {priority}
                </option>
              ))}
            </select>

            <select
              name="assignedToId"
              defaultValue=""
              className="rounded-xl border p-3"
            >
              <option value="">Unassigned</option>

              {staff.map((member) => (
                <option key={member.id} value={member.id}>
                  {member.name} ({member.userCode})
                </option>
              ))}
            </select>

            <button
              type="submit"
              className="rounded-xl bg-blue-600 p-3 font-bold text-white md:col-span-2"
            >
              Create Ticket
            </button>
          </form>
        </section>

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

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

          {tickets.map((ticket) => (
            <article
              key={ticket.ticketCode}
              className="rounded-2xl border bg-white p-5"
            >
              <div className="flex flex-wrap items-start justify-between gap-4">
                <div>
                  <h3 className="font-bold">
                    {ticket.subject}
                  </h3>

                  <p className="mt-1 text-xs text-slate-500">
                    {ticket.ticketCode} · {ticket.client.name}
                    {" · "}
                    {ticket.project?.name ?? "No Project"}
                  </p>
                </div>

                <div className="flex gap-2 text-xs font-bold">
                  <span className="rounded-full bg-slate-100 px-3 py-1">
                    {ticket.status.replaceAll("_", " ")}
                  </span>

                  <span className="rounded-full bg-slate-100 px-3 py-1">
                    {ticket.priority}
                  </span>
                </div>
              </div>

              <p className="mt-3 whitespace-pre-wrap text-sm">
                {ticket.description}
              </p>

              <p className="mt-3 text-sm">
                <span className="font-semibold">Assigned:</span>{" "}
                {ticket.assignedTo
                  ? `${ticket.assignedTo.name} (${ticket.assignedTo.userCode})`
                  : "Unassigned"}
              </p>

              <form
                action={updateSupportTicket}
                className="mt-5 grid gap-3 border-t pt-5 md:grid-cols-4"
              >
                <input
                  type="hidden"
                  name="ticketCode"
                  value={ticket.ticketCode}
                />

                <select
                  name="status"
                  defaultValue={ticket.status}
                  className="rounded-xl border p-2.5 text-sm"
                >
                  {statuses.map((status) => (
                    <option key={status} value={status}>
                      {status.replaceAll("_", " ")}
                    </option>
                  ))}
                </select>

                <select
                  name="priority"
                  defaultValue={ticket.priority}
                  className="rounded-xl border p-2.5 text-sm"
                >
                  {priorities.map((priority) => (
                    <option key={priority} value={priority}>
                      {priority}
                    </option>
                  ))}
                </select>

                <select
                  name="assignedToId"
                  defaultValue={ticket.assignedToId ?? ""}
                  className="rounded-xl border p-2.5 text-sm"
                >
                  <option value="">Unassigned</option>

                  {staff.map((member) => (
                    <option key={member.id} value={member.id}>
                      {member.name} ({member.userCode})
                    </option>
                  ))}
                </select>

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