import { cookies } from "next/headers";
import { redirect } from "next/navigation";
import { prisma } from "@/lib/prisma";
import { AUTH_COOKIE_NAME } from "@/lib/auth/constants";
import {
  hashSessionToken,
  isValidSessionTokenFormat,
} from "@/lib/auth/session-token";
import {
  loadAuthorizationForUser,
} from "@/lib/auth/authorization";
import StaffCrmShell from "../StaffCrmShell";
import { updateMySupportTicket } from "./actions";

export const dynamic = "force-dynamic";

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

async function requireStaffUser() {
  const cookieStore = await cookies();
  const token = cookieStore.get(AUTH_COOKIE_NAME)?.value;

  if (!token || !isValidSessionTokenFormat(token)) {
    redirect("/admin/login");
  }

  const session = await prisma.authSession.findUnique({
    where: {
      tokenHash: hashSessionToken(token),
    },
    select: {
      userId: true,
      expiresAt: true,
      revokedAt: true,
    },
  });

  if (
    !session ||
    session.revokedAt !== null ||
    session.expiresAt.getTime() <= Date.now()
  ) {
    redirect("/admin/login");
  }

  const auth = await loadAuthorizationForUser(session.userId);

  if (
    !auth ||
    auth.status !== "ACTIVE" ||
    auth.mustChangePassword ||
    auth.roles.length === 0 ||
    auth.roles.includes("SUPER_ADMIN")
  ) {
    redirect("/admin/login");
  }

  return auth;
}

export default async function StaffSupportTicketsPage() {
  const auth = await requireStaffUser();

  const tickets = await prisma.supportTicket.findMany({
    where: {
      assignedToId: auth.userId,
    },
    orderBy: {
      updatedAt: "desc",
    },
    take: 100,
    select: {
      ticketCode: true,
      subject: true,
      description: true,
      status: true,
      priority: true,
      client: {
        select: {
          name: true,
          clientCode: true,
        },
      },
      project: {
        select: {
          name: true,
          projectCode: true,
        },
      },
    },
  });

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

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

          <p className="mt-2 text-sm text-slate-500">
            Only tickets assigned to your staff account are shown.
          </p>
        </div>

        {tickets.length === 0 && (
          <div className="rounded-2xl border bg-white p-6 text-sm text-slate-600">
            No support tickets are currently assigned to you.
          </div>
        )}

        <div className="space-y-4">
          {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>
                  <h2 className="text-lg font-bold">
                    {ticket.subject}
                  </h2>

                  <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-4 whitespace-pre-wrap text-sm text-slate-700">
                {ticket.description}
              </p>

              <form
                action={updateMySupportTicket}
                className="mt-5 flex flex-wrap gap-3 border-t pt-5"
              >
                <input
                  type="hidden"
                  name="ticketCode"
                  value={ticket.ticketCode}
                />

                <select
                  name="status"
                  defaultValue={
                    ticket.status === "OPEN"
                      ? "ASSIGNED"
                      : ticket.status === "CLOSED"
                        ? "RESOLVED"
                        : ticket.status
                  }
                  disabled={ticket.status === "CLOSED"}
                  className="min-w-52 rounded-xl border p-2.5 text-sm disabled:bg-slate-100"
                >
                  {statuses.map((status) => (
                    <option key={status} value={status}>
                      {status.replaceAll("_", " ")}
                    </option>
                  ))}
                </select>

                <button
                  type="submit"
                  disabled={ticket.status === "CLOSED"}
                  className="rounded-xl bg-blue-600 px-5 py-2.5 text-sm font-bold text-white disabled:cursor-not-allowed disabled:bg-slate-300"
                >
                  {ticket.status === "CLOSED"
                    ? "Ticket Closed"
                    : "Save Ticket Progress"}
                </button>
              </form>
            </article>
          ))}
        </div>
      </main>
    </StaffCrmShell>
  );
}