ubi-dan-itam/src/app/requests/page.tsx

"use client";

import { useState, type FormEvent } from "react";
import { useApiList } from "@/hooks/use-api-list";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

// Shape returned by GET /api/requests — snake_case per this repo's
// API-boundary convention (see src/lib/requests.ts's toRecord()). `status`
// is always "Draft" right now (no state-machine transitions built yet), see
// src/lib/requests.ts's RequestStatus comment.
interface RequestRecord {
  id: string;
  employee_id: string;
  type: "asset" | "license";
  reason: string;
  status: string;
  purchase_order_id: string | null;
  created_at: string;
}

// Shape returned by GET /api/employees — only the fields used to populate
// the employeeId <Select> (see src/app/employees/page.tsx's EmployeeRecord
// for the full shape).
interface EmployeeRecord {
  id: string;
  name: string;
}

// Shape returned by GET /api/purchase-orders — only the id, shown as the
// <Select> label since PurchaseOrder has no human-friendly name field (see
// src/app/purchase-orders/page.tsx's PurchaseOrderRecord for the full
// shape).
interface PurchaseOrderRecord {
  id: string;
}

// The exact enum literal values from RequestType (src/lib/requests.ts) —
// don't invent labels not accepted by the Zod schema.
const REQUEST_TYPES = ["asset", "license"] as const;

// Radix <Select.Item> can't take an empty-string value, so "no purchase
// order" is represented by this sentinel in the form state and translated
// to "omit the key" on submit — same pattern as employees page's
// NO_MANAGER_VALUE / purchase-orders page's NOT_RECEIVED_VALUE.
const NO_PURCHASE_ORDER_VALUE = "none";

export default function RequestsPage() {
  const {
    data: requests,
    loading,
    error,
    refetch,
  } = useApiList<RequestRecord>("/api/requests");
  const { data: employees } = useApiList<EmployeeRecord>("/api/employees");
  const { data: purchaseOrders } = useApiList<PurchaseOrderRecord>(
    "/api/purchase-orders"
  );

  const [employeeId, setEmployeeId] = useState("");
  const [type, setType] = useState<(typeof REQUEST_TYPES)[number] | "">("");
  const [reason, setReason] = useState("");
  const [purchaseOrderId, setPurchaseOrderId] = useState(NO_PURCHASE_ORDER_VALUE);
  const [submitting, setSubmitting] = useState(false);
  const [submitError, setSubmitError] = useState<string | null>(null);

  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setSubmitting(true);
    setSubmitError(null);

    const hasPurchaseOrderId = purchaseOrderId !== NO_PURCHASE_ORDER_VALUE;

    try {
      const response = await fetch("/api/requests", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          employeeId,
          type,
          reason,
          // Omit the key entirely when left unset, rather than sending
          // null — matches the create-form pattern used on other pages
          // (e.g. employees page's managerId).
          ...(hasPurchaseOrderId ? { purchaseOrderId } : {}),
        }),
      });

      let body: unknown;
      try {
        body = await response.json();
      } catch {
        body = null;
      }

      if (!response.ok) {
        const message =
          body !== null &&
          typeof body === "object" &&
          "error" in body &&
          typeof (body as { error: unknown }).error === "string"
            ? (body as { error: string }).error
            : "Request failed";
        setSubmitError(message);
        return;
      }

      setEmployeeId("");
      setType("");
      setReason("");
      setPurchaseOrderId(NO_PURCHASE_ORDER_VALUE);
      refetch();
    } catch {
      setSubmitError("Request failed");
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <div className="flex flex-col gap-8 p-6">
      <h1 className="text-xl font-semibold">Requests</h1>

      <section className="flex flex-col gap-3">
        {loading ? (
          <p className="text-sm text-muted-foreground">Loading...</p>
        ) : error ? (
          <p className="text-sm text-destructive">{error}</p>
        ) : (
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>ID</TableHead>
                <TableHead>Employee ID</TableHead>
                <TableHead>Type</TableHead>
                <TableHead>Reason</TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Purchase Order ID</TableHead>
                <TableHead>Created At</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {requests.map((request) => (
                <TableRow key={request.id}>
                  <TableCell>{request.id}</TableCell>
                  <TableCell>{request.employee_id}</TableCell>
                  <TableCell>{request.type}</TableCell>
                  <TableCell>{request.reason}</TableCell>
                  <TableCell>{request.status}</TableCell>
                  <TableCell>{request.purchase_order_id ?? "-"}</TableCell>
                  <TableCell>{request.created_at}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        )}
      </section>

      <section className="flex max-w-sm flex-col gap-4">
        <h2 className="text-lg font-semibold">New Request</h2>

        <form className="flex flex-col gap-4" onSubmit={handleSubmit}>
          <div className="flex flex-col gap-2">
            <Label htmlFor="employeeId">Employee</Label>
            <Select value={employeeId} onValueChange={setEmployeeId} required>
              <SelectTrigger id="employeeId" className="w-full">
                <SelectValue placeholder="Select an employee" />
              </SelectTrigger>
              <SelectContent>
                {employees.map((employee) => (
                  <SelectItem key={employee.id} value={employee.id}>
                    {employee.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <div className="flex flex-col gap-2">
            <Label htmlFor="type">Type</Label>
            <Select
              value={type}
              onValueChange={(value) => setType(value as (typeof REQUEST_TYPES)[number])}
              required
            >
              <SelectTrigger id="type" className="w-full">
                <SelectValue placeholder="Select a type" />
              </SelectTrigger>
              <SelectContent>
                {REQUEST_TYPES.map((requestType) => (
                  <SelectItem key={requestType} value={requestType}>
                    {requestType}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <div className="flex flex-col gap-2">
            <Label htmlFor="reason">Reason</Label>
            <Textarea
              id="reason"
              value={reason}
              onChange={(event) => setReason(event.target.value)}
              required
            />
          </div>

          <div className="flex flex-col gap-2">
            <Label htmlFor="purchaseOrderId">Purchase Order (optional)</Label>
            <Select value={purchaseOrderId} onValueChange={setPurchaseOrderId}>
              <SelectTrigger id="purchaseOrderId" className="w-full">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value={NO_PURCHASE_ORDER_VALUE}>None</SelectItem>
                {purchaseOrders.map((purchaseOrder) => (
                  <SelectItem key={purchaseOrder.id} value={purchaseOrder.id}>
                    {purchaseOrder.id}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          {submitError ? <p className="text-sm text-destructive">{submitError}</p> : null}

          <Button type="submit" disabled={submitting}>
            {submitting ? "Creating..." : "Create Request"}
          </Button>
        </form>
      </section>
    </div>
  );
}