Nexus/apps/web/src/components/projects/ProjectDemandsTable.tsx

"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { formatCents, formatDate } from "~/lib/format.js";
import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
import { FillOpenDemandModal } from "~/components/allocations/FillOpenDemandModal.js";
import { AllocationModal } from "~/components/allocations/AllocationModal.js";
import type { AllocationWithDetails } from "@nexus/shared";
import type { OpenDemandAssignment } from "~/components/timeline/TimelineProjectPanel.js";
import { usePermissions } from "~/hooks/usePermissions.js";
import { trpc } from "~/lib/trpc/client.js";
import { ALLOCATION_STATUS_BADGE as ALLOC_STATUS_COLORS } from "~/lib/status-styles.js";

interface DemandRow {
  id: string;
  projectId: string;
  role: string | null;
  roleId: string | null;
  roleEntity?: { id: string; name: string; color: string | null } | null;
  startDate: Date | string;
  endDate: Date | string;
  hoursPerDay: number;
  headcount: number;
  budgetCents?: number;
  requestedHeadcount: number;
  unfilledHeadcount: number;
  status: string;
  project?: { id: string; name: string; shortCode: string };
  assignments?: Array<{
    dailyCostCents: number;
    startDate: Date | string;
    endDate: Date | string;
    status: string;
  }>;
}

interface ProjectDemandsTableProps {
  demands: DemandRow[];
  project: { id: string; name: string; shortCode: string };
}

export function ProjectDemandsTable({ demands, project }: ProjectDemandsTableProps) {
  const [fillTarget, setFillTarget] = useState<OpenDemandAssignment | null>(null);
  const [editTarget, setEditTarget] = useState<AllocationWithDetails | null>(null);
  const { canEdit } = usePermissions();
  const router = useRouter();
  const utils = trpc.useUtils();

  function handleMutationSuccess() {
    // Invalidate budget status so BudgetStatusCard refetches
    void utils.timeline.getBudgetStatus.invalidate();
    void utils.allocation.listView.invalidate();
    router.refresh();
  }

  const activeDemands = demands.filter((d) => d.status !== "CANCELLED" && d.status !== "COMPLETED");
  const allDemands = demands;

  return (
    <>
      <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
        <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
          <h2 className="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
            Open Demands ({allDemands.length})
          </h2>
          <div className="flex items-center gap-3">
            {activeDemands.length > 0 && (
              <span className="text-xs text-amber-600 dark:text-amber-400">
                {activeDemands.reduce((sum, d) => sum + d.unfilledHeadcount, 0)} seats unfilled
              </span>
            )}
            {canEdit && (
              <Link
                href="/allocations"
                className="text-xs font-medium text-brand-600 hover:text-brand-800 dark:text-brand-400 dark:hover:text-brand-200"
              >
                + New in Allocations
              </Link>
            )}
          </div>
        </div>
        <table className="w-full">
          <thead className="bg-gray-50 dark:bg-gray-800/50 border-b border-gray-200 dark:border-gray-700">
            <tr>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                Role{" "}
                <InfoTooltip content="The role or skill profile required for this demand position." />
              </th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                Period{" "}
                <InfoTooltip content="Time range during which this role is needed on the project." />
              </th>
              <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                <span className="inline-flex items-center justify-end gap-0.5">
                  Headcount <InfoTooltip content="Requested / Unfilled seats for this demand." />
                </span>
              </th>
              <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                <span className="inline-flex items-center justify-end gap-0.5">
                  Hours/Day{" "}
                  <InfoTooltip content="Planned working hours per day for this demand position." />
                </span>
              </th>
              <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                <span className="inline-flex items-center justify-end gap-0.5">
                  Budget{" "}
                  <InfoTooltip content="Allocated role budget vs. booked cost from assignments." />
                </span>
              </th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                Status{" "}
                <InfoTooltip content="PROPOSED = requested, CONFIRMED = approved, ACTIVE = ongoing, COMPLETED = filled, CANCELLED = removed." />
              </th>
              {canEdit && (
                <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                  Actions
                </th>
              )}
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
            {allDemands.map((demand) => {
              const isFillable =
                demand.status !== "CANCELLED" &&
                demand.status !== "COMPLETED" &&
                demand.unfilledHeadcount > 0;
              return (
                <tr
                  key={demand.id}
                  className="hover:bg-gray-50 dark:hover:bg-gray-800/30 transition-colors"
                >
                  <td className="px-4 py-3 text-sm text-gray-900 dark:text-gray-100">
                    {demand.roleEntity?.name ?? demand.role ?? "Unassigned"}
                  </td>
                  <td className="px-4 py-3 text-xs text-gray-500 dark:text-gray-400">
                    {formatDate(demand.startDate)} → {formatDate(demand.endDate)}
                  </td>
                  <td className="px-4 py-3 text-sm text-right text-gray-900 dark:text-gray-100">
                    <span className="font-medium">{demand.unfilledHeadcount}</span>
                    <span className="text-gray-400"> / {demand.requestedHeadcount}</span>
                  </td>
                  <td className="px-4 py-3 text-sm text-right text-gray-900 dark:text-gray-100">
                    {demand.hoursPerDay}h
                  </td>
                  <td className="px-4 py-3 text-right text-sm">
                    {demand.budgetCents && demand.budgetCents > 0 ? (
                      (() => {
                        // Calculate booked cost from assignments
                        const bookedCents = (demand.assignments ?? [])
                          .filter((a) => a.status !== "CANCELLED")
                          .reduce((sum, a) => {
                            const s = new Date(a.startDate);
                            const e = new Date(a.endDate);
                            let days = 0;
                            const cur = new Date(s);
                            while (cur <= e) {
                              if (cur.getDay() !== 0 && cur.getDay() !== 6) days++;
                              cur.setDate(cur.getDate() + 1);
                            }
                            return sum + a.dailyCostCents * days;
                          }, 0);
                        const remainCents = demand.budgetCents! - bookedCents;
                        return (
                          <div>
                            <div className="text-gray-900 dark:text-gray-100">
                              {formatCents(demand.budgetCents!)} EUR
                            </div>
                            <div
                              className={`text-xs ${remainCents < 0 ? "text-red-500" : "text-gray-400"}`}
                            >
                              {bookedCents > 0 ? `${formatCents(bookedCents)} booked` : ""}
                              {remainCents < 0
                                ? ` (${formatCents(Math.abs(remainCents))} over)`
                                : ""}
                            </div>
                          </div>
                        );
                      })()
                    ) : (
                      <span className="text-gray-400 text-xs">—</span>
                    )}
                  </td>
                  <td className="px-4 py-3">
                    <span
                      className={`inline-block px-2 py-0.5 text-xs rounded-full ${ALLOC_STATUS_COLORS[demand.status] ?? "bg-gray-100 text-gray-600"}`}
                    >
                      {demand.status}
                    </span>
                  </td>
                  {canEdit && (
                    <td className="px-4 py-3 text-right">
                      <div className="flex items-center justify-end gap-2">
                        <button
                          type="button"
                          onClick={() => setEditTarget(demand as unknown as AllocationWithDetails)}
                          className="app-action-edit"
                        >
                          Edit
                        </button>
                        {isFillable && (
                          <button
                            type="button"
                            onClick={() =>
                              setFillTarget({
                                id: demand.id,
                                projectId: demand.projectId,
                                roleId: demand.roleId,
                                role: demand.role,
                                headcount: demand.headcount,
                                ...(demand.budgetCents ? { budgetCents: demand.budgetCents } : {}),
                                startDate: new Date(demand.startDate),
                                endDate: new Date(demand.endDate),
                                hoursPerDay: demand.hoursPerDay,
                                roleEntity: demand.roleEntity ?? null,
                                project,
                              })
                            }
                            className="inline-flex items-center gap-1 text-xs font-medium text-brand-600 hover:text-brand-800 dark:text-brand-400 dark:hover:text-brand-200"
                          >
                            <svg
                              className="h-3.5 w-3.5"
                              fill="none"
                              stroke="currentColor"
                              viewBox="0 0 24 24"
                            >
                              <path
                                strokeLinecap="round"
                                strokeLinejoin="round"
                                strokeWidth={2}
                                d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"
                              />
                            </svg>
                            Assign
                          </button>
                        )}
                      </div>
                    </td>
                  )}
                </tr>
              );
            })}
          </tbody>
        </table>
        {allDemands.length === 0 && (
          <div className="text-center py-12 text-sm text-gray-500 dark:text-gray-400 space-y-2">
            <p>No open demands for this project.</p>
            {canEdit && (
              <p>
                Create staffing entries via{" "}
                <Link
                  href="/allocations"
                  className="text-brand-600 hover:underline dark:text-brand-400"
                >
                  Allocations → New Planning Entry
                </Link>
                .
              </p>
            )}
          </div>
        )}
      </div>

      {fillTarget && (
        <FillOpenDemandModal
          allocation={fillTarget as never}
          onClose={() => {
            setFillTarget(null);
            handleMutationSuccess();
          }}
          onSuccess={() => {
            setFillTarget(null);
            handleMutationSuccess();
          }}
        />
      )}

      {editTarget && (
        <AllocationModal
          allocation={editTarget}
          onClose={() => {
            setEditTarget(null);
            handleMutationSuccess();
          }}
          onSuccess={() => {
            setEditTarget(null);
            handleMutationSuccess();
          }}
        />
      )}
    </>
  );
}