import { getServerSession } from "next-auth";
import Link from "next/link";
import { authOptions } from "../../lib/auth/options";
import { prisma } from "../../lib/db/prisma";
import { AdhocForm } from "./adhoc-form";
import { ApprovalButtons } from "./approval-buttons";

export default async function AdhocRecordsPage() {
  const session = await getServerSession(authOptions);
  const systemAdmin = session?.user.systemRole === "SYSTEM_ADMIN";
  const canApprove = Boolean(systemAdmin || session?.user.permissions.includes("approve_adhoc"));
  const organizationId = session?.user.organizationId;
  const where = systemAdmin
    ? {}
    : canApprove
      ? { organizationId: organizationId! }
      : { organizationId: organizationId!, userId: session?.user.id };

  const [records, users] = await Promise.all([
    prisma.adhocRecord.findMany({
      where,
      include: { user: true, reviewedBy: true },
      orderBy: { createdAt: "desc" }
    }),
    prisma.user.findMany({ where: systemAdmin ? {} : { organizationId }, orderBy: { name: "asc" } })
  ]);

  return (
    <div>
      <h1 className="text-3xl font-semibold">Adhoc Records</h1>
      <p className="mt-2 text-slate-600">Employees submit missed clock-ins. Managers and admins approve or reject them.</p>
      <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">Requests</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">User</th><th>Date</th><th>Hours</th><th>Status</th><th>Reason</th><th>Review</th><th>Audit</th></tr>
              </thead>
              <tbody>
                {records.map((record) => (
                  <tr className="border-t border-slate-200" key={record.id}>
                    <td className="py-3">{record.user.name ?? record.user.email}</td>
                    <td>{record.date.toISOString().slice(0, 10)}</td>
                    <td>{record.hours.toString()}</td>
                    <td>{record.status}</td>
                    <td>
                      <p>{record.reason}</p>
                      {record.rejectionReason ? <p className="mt-1 text-xs text-brand-primary">Rejected: {record.rejectionReason}</p> : null}
                    </td>
                    <td>{canApprove && record.status === "pending" ? <ApprovalButtons id={record.id} /> : record.reviewedBy?.name ?? "-"}</td>
                    <td><Link className="text-sm font-semibold text-brand-secondary" href={`/admin/adhoc-records/${record.id}`}>Details</Link></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
        <AdhocForm users={users} canCreateForAny={canApprove} />
      </section>
    </div>
  );
}