tremor-tracker/src/app/requests/page.tsx

"use client";
import React, { useState, useEffect } from "react";
import { useStoreState } from "@hooks/store";

// Helper dicts/types
const outcomeColors: Record<string, string> = {
  FULFILLED: "text-green-700 bg-green-100",
  REJECTED: "text-red-700 bg-red-100",
  IN_PROGRESS: "text-blue-700 bg-blue-100",
  CANCELLED: "text-gray-600 bg-gray-100",
  OTHER: "text-yellow-800 bg-yellow-100",
};
const requestTypeLabels: Record<string, string> = {
  NEW_USER: "New User",
  CHANGE_LEVEL: "Change Level",
  DELETE: "Removal",
};
function formatDate(val?: string) {
  if (!val) return "--";
  return new Date(val).toLocaleString(undefined, {
    year: "numeric",
    month: "short",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
  });
}

// Minimal types
type User = {
  id: number;
  name: string;
  email: string;
  role?: string;
  scientist?: { level: string } | null;
};

type Request = {
  id: number;
  createdAt: string;
  requestType: string;
  requestingUser: User;
  outcome: string;
};

export default function RequestManagementPage() {
  const user = useStoreState((s) => s.user);

  // All hooks first!
  const [requests, setRequests] = useState<Request[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [actionLoading, setActionLoading] = useState<number | null>(null);
  const [actionError, setActionError] = useState<string | null>(null);
  const [actionSuccess, setActionSuccess] = useState<string | null>(null);

  // User role logic must remain invariant per render
  const userRole = user?.role as string | undefined;
  const isAdmin = userRole === "ADMIN";
  const isSeniorScientist = userRole === "SCIENTIST" && user?.scientist?.level === "SENIOR";
  const userId = user?.id;

  // Requests fetch
  useEffect(() => {
    setLoading(true);
    setError(null);
    fetch("/api/requests")
      .then((res) => {
        if (!res.ok) throw new Error("Failed to fetch requests");
        return res.json();
      })
      .then((data) => {
        setRequests(data.requests || []);
        setLoading(false);
      })
      .catch((err) => {
        setError("Failed to load requests.");
        setLoading(false);
      });
  }, []);

  // Filtering for non-admins to only their requests
  const filteredRequests = React.useMemo(
    () =>
      isAdmin
        ? requests
        : requests.filter((r) => r.requestingUser.id === userId),
    [isAdmin, requests, userId]
  );

  // Sorted: newest first
  filteredRequests.sort((a, b) =>
    (b.createdAt ?? "").localeCompare(a.createdAt ?? "")
  );

  async function handleAction(
    requestId: number,
    action: "FULFILLED" | "REJECTED"
  ) {
    setActionLoading(requestId);
    setActionError(null);
    setActionSuccess(null);
    try {
      const res = await fetch("/api/requests", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ id: requestId, outcome: action }),
      });
      if (!res.ok) {
        const data = await res.json().catch(() => ({}));
        throw new Error(data?.error || "Failed to update request");
      }
      setRequests((prev) =>
        prev.map((r) =>
          r.id === requestId ? { ...r, outcome: action } : r
        )
      );
      setActionSuccess("Request updated.");
    } catch (err: any) {
      setActionError(err?.message || "Failed to update request");
    } finally {
      setActionLoading(null);
    }
  }

  // Unauthorized access should return early, but not before hooks!
  if (!isAdmin && !isSeniorScientist) {
    return (
      <div className="min-h-[60vh] flex flex-col items-center justify-center">
        <h1 className="text-2xl font-bold text-red-600 mb-4">Unauthorized Access</h1>
        <div className="text-gray-600">You do not have access to this page.</div>
      </div>
    );
  }

  return (
    <div className="max-w-5xl mx-auto py-10 px-4">
      <div className="mb-8">
        <h1 className="text-2xl font-bold">
          {isAdmin ? "All Requests" : "My Requests"}
        </h1>
        <p className="text-gray-600 mt-2">
          View {isAdmin ? "and manage pending" : "your"} requests related to scientist management.
        </p>
      </div>

      {loading ? (
        <div className="text-gray-500 text-center py-20">Loading...</div>
      ) : error ? (
        <div className="text-red-600 text-center py-10">{error}</div>
      ) : (
        <div className="bg-white rounded-lg shadow p-5 overflow-x-auto">
          <table className="min-w-full text-sm">
            <thead>
              <tr className="border-b">
                <th className="px-4 py-2">Date</th>
                <th className="px-4 py-2">Type</th>
                <th className="px-4 py-2">Requested By</th>
                <th className="px-4 py-2">Status</th>
                {isAdmin && <th className="px-4 py-2">Actions</th>}
              </tr>
            </thead>
            <tbody>
              {filteredRequests.length === 0 ? (
                <tr>
                  <td
                    className="py-12 text-center text-gray-400 font-semibold"
                    colSpan={isAdmin ? 5 : 4}
                  >
                    No requests found.
                  </td>
                </tr>
              ) : (
                filteredRequests.map((req) => (
                  <tr key={req.id} className="border-b last:border-0 hover:bg-neutral-50">
                    <td className="px-4 py-2 whitespace-nowrap">
                      {formatDate(req.createdAt)}
                    </td>
                    <td className="px-4 py-2">
                      {requestTypeLabels[req.requestType] || req.requestType}
                    </td>
                    <td className="px-4 py-2 whitespace-nowrap">
                      <span className="font-medium">{req.requestingUser.name}</span>
                      <span className="ml-1 text-xs text-gray-500">
                        ({req.requestingUser.email})
                      </span>
                    </td>
                    <td className="px-4 py-2">
                      <span className={
                        "inline-block px-2 py-1 rounded-xl text-xs font-semibold " +
                        (outcomeColors[req.outcome] ||
                          "bg-gray-100 text-gray-600")
                      }>
                        {req.outcome.replace(/_/g, " ")}
                      </span>
                    </td>
                    {isAdmin && (
                      <td className="px-4 py-2">
                        {req.outcome === "IN_PROGRESS" ? (
                          <div className="flex gap-2">
                            <button
                              onClick={() => handleAction(req.id, "FULFILLED")}
                              className={
                                "px-3 py-1 rounded-lg bg-green-600 hover:bg-green-700 text-white" +
                                (actionLoading === req.id ? " opacity-60" : "")
                              }
                              disabled={actionLoading === req.id}
                            >
                              Fulfilled
                            </button>
                            <button
                              onClick={() => handleAction(req.id, "REJECTED")}
                              className={
                                "px-3 py-1 rounded-lg bg-red-500 hover:bg-red-600 text-white" +
                                (actionLoading === req.id ? " opacity-60" : "")
                              }
                              disabled={actionLoading === req.id}
                            >
                              Reject
                            </button>
                          </div>
                        ) : (
                          <span className="text-xs text-gray-400">No actions</span>
                        )}
                        {(actionError && actionLoading === req.id) && (
                          <div className="text-xs text-red-600">{actionError}</div>
                        )}
                        {(actionSuccess && actionLoading === req.id) && (
                          <div className="text-xs text-green-600">{actionSuccess}</div>
                        )}
                      </td>
                    )}
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}