// File Path: monorepo/web/frontend/src/pages/Admin/TaskItem/ReviewEventContract/Page.jsx

import React, { useState, useEffect, useRef } from "react";
import { useParams, useNavigate } from "react-router";
import {
  ClipboardDocumentListIcon,
  HomeIcon,
  ExclamationTriangleIcon,
  DocumentCheckIcon,
  CalendarIcon,
  MapPinIcon,
  UserIcon,
  BuildingOfficeIcon,
  PhoneIcon,
  AcademicCapIcon,
  BriefcaseIcon,
  TagIcon,
  EnvelopeIcon,
} from "@heroicons/react/24/outline";
import {
  Breadcrumb,
  Button,
  Card,
  Alert,
  LoadingSpinner,
  useUIXTheme,
  UIXThemeProvider,
  Input,
  Textarea,
} from "../../../../components/UIX";
import { useTaskManager, useAccountManager } from "../../../../services/Services";
import { formatDateForDisplay } from "../../../../services/Helpers/DateFormatter";
import {
  getEventContractRoleTypeLabel,
  getEventContractSectorLabel,
} from "../../../../constants/EventContract";

function AdminTaskItemReviewEventContractPage() {
  const { tid } = useParams();
  const navigate = useNavigate();
  const taskManager = useTaskManager();
  const accountManager = useAccountManager();
  const { getThemeClasses } = useUIXTheme();

  // State
  const [taskItem, setTaskItem] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errors, setErrors] = useState({});
  const [userProfile, setUserProfile] = useState(null);
  const errorRef = useRef(null);

  // Actual Costs form state
  const [actualHours, setActualHours] = useState("");
  const [travelCosts, setTravelCosts] = useState("");
  const [suppliesCosts, setSuppliesCosts] = useState("");
  const [otherCosts, setOtherCosts] = useState("");
  const [comments, setComments] = useState("");

  // Get logged-in user's name
  const getUserName = () => {
    if (userProfile) {
      // Build full name from firstName and lastName
      const firstName = userProfile.firstName || "";
      const lastName = userProfile.lastName || "";
      const fullName = `${firstName} ${lastName}`.trim();
      return fullName || "Staff Member";
    }
    return "Staff Member";
  };

  // Scroll to error when it appears
  useEffect(() => {
    if (errors.general && errorRef.current) {
      errorRef.current.scrollIntoView({ behavior: "smooth", block: "center" });
    }
  }, [errors.general]);

  // Load user profile on mount
  useEffect(() => {
    const loadUserProfile = async () => {
      try {
        const onUnauthorized = () => navigate("/login?unauthorized=true");
        const profile = await accountManager.getAccountDetail(onUnauthorized);
        setUserProfile(profile);
      } catch (error) {
        if (import.meta.env.DEV) {
          console.error("Error loading user profile:", error);
        }
        // Don't block the page if profile loading fails
      }
    };

    loadUserProfile();
  }, [accountManager, navigate]);

  // Load task item details
  useEffect(() => {
    if (tid) {
      loadTaskItem();
    }
  }, [tid]);

  const loadTaskItem = async () => {
    try {
      setIsLoading(true);
      setErrors({});

      const onUnauthorized = () => navigate("/login?unauthorized=true");

      // Fetch the task item (contains all event contract fields embedded)
      const taskResponse = await taskManager.getTaskDetail(tid, onUnauthorized);
      setTaskItem(taskResponse);
    } catch (error) {
      if (import.meta.env.DEV) {
        console.error("Error loading task item:", error);
      }
      setErrors({
        general: "Failed to load task item. Please try again.",
      });
    } finally {
      setIsLoading(false);
    }
  };

  const handleSubmitReview = async () => {
    try {
      setIsSubmitting(true);
      setErrors({});

      const onUnauthorized = () => navigate("/login?unauthorized=true");

      // Prepare review data
      const reviewData = {
        taskItemId: taskItem.id,
        actualHours: parseFloat(actualHours) || 0,
        travelCosts: parseFloat(travelCosts) || 0,
        suppliesCosts: parseFloat(suppliesCosts) || 0,
        otherCosts: parseFloat(otherCosts) || 0,
        comments: comments.trim(),
      };

      if (import.meta.env.DEV) {
        console.log("Submitting event contract review:", reviewData);
      }

      // Call API to review event contract
      await taskManager.reviewEventContract(reviewData, onUnauthorized);

      if (import.meta.env.DEV) {
        console.log("Event contract review submitted successfully");
      }

      // Navigate back to task list with success message
      navigate("/admin/tasks?success=review_submitted");
    } catch (error) {
      if (import.meta.env.DEV) {
        console.error("Error submitting review:", error);
      }

      const formatFieldName = (fieldName) => {
        return fieldName
          .replace(/_/g, " ")
          .replace(/([A-Z])/g, " $1")
          .toLowerCase()
          .replace(/^./, (str) => str.toUpperCase());
      };

      // Handle specific field errors with user-friendly messages
      if (error.actualHours) {
        setErrors({
          general: `Missing Actual Hours\n\nThe actual hours worked is a required field.\n\nPlease enter the actual hours spent on this event contract.`
        });
      } else if (error.comments) {
        setErrors({
          general: `Missing Comments\n\nReview comments are required.\n\nPlease add comments summarizing the contract review and any variance details.`
        });
      } else if (error && typeof error === "object" && !error.message && !error.general) {
        // Handle validation errors with multiple fields
        const errorFields = Object.keys(error);
        if (errorFields.length > 0) {
          const errorMessages = errorFields
            .map((field) => `• ${formatFieldName(field)}: ${error[field]}`)
            .join("\n");
          setErrors({
            general: `Validation Errors\n\nThe following fields have errors:\n\n${errorMessages}\n\nPlease correct these errors and try again.`
          });
        } else {
          setErrors({
            general: "Unexpected Error\n\nPlease try again. If the problem persists, contact support."
          });
        }
      } else if (error.message) {
        setErrors({ general: error.message });
      } else if (error.general) {
        setErrors(error);
      } else {
        setErrors({
          general: "Unexpected Error\n\nFailed to submit review. Please try again."
        });
      }
    } finally {
      setIsSubmitting(false);
    }
  };

  // Calculate derived values for Actual Costs
  const getHourlyRate = () => {
    if (!taskItem) return 0;
    return (
      taskItem.facilitatorHourlySalaryDesired ||
      taskItem.speakerHourlySalaryDesired ||
      0
    );
  };

  const getEstimatedHours = () => {
    if (!taskItem) return 0;
    const hours = taskItem.eventContractEstimatedContractHours;
    // Handle both undefined/null and ensure it's a number
    if (hours === undefined || hours === null) return 0;
    return typeof hours === "number" ? hours : parseFloat(hours) || 0;
  };

  const getEstimatedTotalCost = () => {
    const hours = getEstimatedHours();
    const rate = getHourlyRate();
    return hours * rate;
  };

  const getActualFacilitationOrSpeakerCost = () => {
    const hours = parseFloat(actualHours) || 0;
    const rate = getHourlyRate();
    return hours * rate;
  };

  const getActualTotalCost = () => {
    const facilitationOrSpeakerCost = getActualFacilitationOrSpeakerCost();
    const travel = parseFloat(travelCosts) || 0;
    const supplies = parseFloat(suppliesCosts) || 0;
    const other = parseFloat(otherCosts) || 0;
    return facilitationOrSpeakerCost + travel + supplies + other;
  };

  const getVarianceHours = () => {
    const estimated = getEstimatedHours();
    const actual = parseFloat(actualHours) || 0;
    return estimated - actual;
  };

  const getVarianceCost = () => {
    const estimated = getEstimatedTotalCost();
    const actual = getActualTotalCost();
    return estimated - actual;
  };

  // Pre-fill comments when taskItem and form values change
  useEffect(() => {
    // Only generate comment when we have valid actual hours entered
    if (taskItem && actualHours && parseFloat(actualHours) > 0) {
      const varianceHours = getVarianceHours();
      const varianceCost = getVarianceCost();
      const actualTotalCost = getActualTotalCost();
      const today = new Date().toLocaleDateString("en-US", {
        year: "numeric",
        month: "long",
        day: "numeric",
      });

      // Format variance with clear over/under indication
      const varianceHoursText =
        varianceHours > 0
          ? `under by ${varianceHours.toFixed(2)} hours`
          : varianceHours < 0
            ? `over by ${Math.abs(varianceHours).toFixed(2)} hours`
            : "on target (0.00 hours variance)";

      const varianceCostText =
        varianceCost > 0
          ? `under budget by $${varianceCost.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
          : varianceCost < 0
            ? `over budget by $${Math.abs(varianceCost).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
            : "on budget (no cost variance)";

      const prefilledComment = `Contract review completed. Hours: ${varianceHoursText}. Cost: ${varianceCostText}. Actual Total Cost: $${actualTotalCost.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}. Review completed by ${getUserName()} on ${today}.`;

      // Only update if comments is empty or still has the old prefilled text
      if (!comments || comments.includes("Review completed by")) {
        setComments(prefilledComment);
      }
    }
  }, [taskItem, actualHours, travelCosts, suppliesCosts, otherCosts]);

  // Breadcrumb items
  const breadcrumbItems = [
    {
      label: "Dashboard",
      to: "/admin/dashboard",
      icon: HomeIcon,
    },
    {
      label: "Task Items",
      to: "/admin/tasks",
      icon: ClipboardDocumentListIcon,
    },
    {
      label: "Review Event Contract",
      icon: ClipboardDocumentListIcon,
      isActive: true,
    },
  ];

  if (isLoading) {
    return (
      <UIXThemeProvider>
        <div className="min-h-screen flex items-center justify-center">
          <LoadingSpinner size="lg" />
        </div>
      </UIXThemeProvider>
    );
  }

  return (
    <UIXThemeProvider>
      <div className={`min-h-screen ${getThemeClasses("bg-primary")}`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
          {/* Breadcrumb */}
          <Breadcrumb items={breadcrumbItems} />

          {/* Header */}
          <div className="mt-6 mb-8">
            <h1
              className={`text-3xl font-bold ${getThemeClasses("text-primary")}`}
            >
              Review Event Contract
            </h1>
            <p className={`mt-2 ${getThemeClasses("text-secondary")}`}>
              Review and approve the closed event contract
            </p>
          </div>

          {/* Error Alert */}
          {errors.general && (
            <div ref={errorRef} className="mb-6">
              <Alert variant="error">
                <div className="flex">
                  <div className="flex-shrink-0">
                    <ExclamationTriangleIcon className="h-5 w-5 text-red-400" />
                  </div>
                  <div className="ml-3 flex-1">
                    <h3 className="text-sm font-medium text-red-800">
                      Operation Failed
                    </h3>
                    <div className="mt-2 text-sm text-red-700">
                      <p className="whitespace-pre-wrap">{errors.general}</p>
                    </div>
                  </div>
                </div>
              </Alert>
            </div>
          )}

          {/* Task Details Card */}
          {taskItem && (
            <Card className="mb-6">
              <div className="p-6">
                <h2
                  className={`text-xl font-semibold mb-4 ${getThemeClasses("text-primary")}`}
                >
                  Task Details
                </h2>
                <div className="space-y-3">
                  {taskItem.title && (
                    <div>
                      <span
                        className={`font-medium ${getThemeClasses("text-primary")}`}
                      >
                        Title:
                      </span>{" "}
                      <span className={getThemeClasses("text-secondary")}>
                        {taskItem.title}
                      </span>
                    </div>
                  )}
                  {taskItem.description && (
                    <div>
                      <span
                        className={`font-medium ${getThemeClasses("text-primary")}`}
                      >
                        Description:
                      </span>{" "}
                      <span className={getThemeClasses("text-secondary")}>
                        {taskItem.description}
                      </span>
                    </div>
                  )}
                  {taskItem.eventContractName && (
                    <div>
                      <span
                        className={`font-medium ${getThemeClasses("text-primary")}`}
                      >
                        Event Contract:
                      </span>{" "}
                      <span className={getThemeClasses("text-secondary")}>
                        {taskItem.eventContractName}
                      </span>
                    </div>
                  )}
                  {taskItem.customerName && (
                    <div>
                      <span
                        className={`font-medium ${getThemeClasses("text-primary")}`}
                      >
                        Customer:
                      </span>{" "}
                      <span className={getThemeClasses("text-secondary")}>
                        {taskItem.customerName}
                      </span>
                    </div>
                  )}
                </div>
              </div>
            </Card>
          )}

          {/* Event Contract Details */}
          {taskItem && (
            <>
              {/* Event Information Section */}
              <Card className="mb-6">
                <div className="p-6">
                  <div className="flex items-center mb-4">
                    <CalendarIcon className={`w-6 h-6 mr-2 ${getThemeClasses("text-secondary")}`} />
                    <h2
                      className={`text-xl font-semibold ${getThemeClasses("text-primary")}`}
                    >
                      Event Information
                    </h2>
                  </div>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                      <label
                        className={`block text-sm font-medium mb-1 ${getThemeClasses("text-secondary")}`}
                      >
                        Event Name
                      </label>
                      <p
                        className={`text-base ${getThemeClasses("text-primary")}`}
                      >
                        {taskItem.eventName || "-"}
                      </p>
                    </div>
                    {taskItem.eventPublicID > 0 && (
                      <div>
                        <label
                          className={`block text-sm font-medium mb-1 ${getThemeClasses("text-secondary")}`}
                        >
                          Event ID
                        </label>
                        <p
                          className={`text-base ${getThemeClasses("text-primary")}`}
                        >
                          #{taskItem.eventPublicID}
                        </p>
                      </div>
                    )}
                    {taskItem.eventType > 0 && (
                      <div>
                        <label
                          className={`block text-sm font-medium mb-1 ${getThemeClasses("text-secondary")}`}
                        >
                          Event Type
                        </label>
                        <p
                          className={`text-base ${getThemeClasses("text-primary")}`}
                        >
                          {taskItem.eventType === 1 ? "Conference" : taskItem.eventType === 2 ? "In-School" : taskItem.eventType === 3 ? "Virtual" : "-"}
                        </p>
                      </div>
                    )}
                    {taskItem.eventSector > 0 && (
                      <div>
                        <label
                          className={`block text-sm font-medium mb-1 ${getThemeClasses("text-secondary")}`}
                        >
                          Event Sector
                        </label>
                        <p
                          className={`text-base ${getThemeClasses("text-primary")}`}
                        >
                          {taskItem.eventSector === 1 ? "Public" : taskItem.eventSector === 2 ? "Private" : "-"}
                        </p>
                      </div>
                    )}
                    {taskItem.eventLocation && (
                      <div>
                        <label
                          className={`block text-sm font-medium mb-1 ${getThemeClasses("text-secondary")}`}
                        >
                          Event Location
                        </label>
                        <p
                          className={`text-base ${getThemeClasses("text-primary")}`}
                        >
                          {taskItem.eventLocation}
                        </p>
                      </div>
                    )}
                    {taskItem.eventPartners && (
                      <div>
                        <label
                          className={`block text-sm font-medium mb-1 ${getThemeClasses("text-secondary")}`}
                        >
                          Event Partners
                        </label>
                        <p
                          className={`text-base ${getThemeClasses("text-primary")}`}
                        >
                          {taskItem.eventPartners}
                        </p>
                      </div>
                    )}
                    {taskItem.eventListingUrl && (
                      <div>
                        <label
                          className={`block text-sm font-medium mb-1 ${getThemeClasses("text-secondary")}`}
                        >
                          Event Listing URL
                        </label>
                        <p
                          className={`text-base ${getThemeClasses("text-primary")}`}
                        >
                          <a
                            href={taskItem.eventListingUrl}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="text-blue-600 hover:underline"
                          >
                            {taskItem.eventListingUrl}
                          </a>
                        </p>
                      </div>
                    )}
                    {taskItem.eventStartDateTime && (
                      <div>
                        <label
                          className={`block text-sm font-medium mb-1 ${getThemeClasses("text-secondary")}`}
                        >
                          Event Start Date
                        </label>
                        <p
                          className={`text-base ${getThemeClasses("text-primary")}`}
                        >
                          {formatDateForDisplay(taskItem.eventStartDateTime)}
                        </p>
                      </div>
                    )}
                    <div>
                      <label
                        className={`block text-sm font-medium mb-1 ${getThemeClasses("text-secondary")}`}
                      >
                        Event End Date
                      </label>
                      <p
                        className={`text-base ${getThemeClasses("text-primary")}`}
                      >
                        {taskItem.eventEndDateTime
                          ? formatDateForDisplay(taskItem.eventEndDateTime)
                          : "-"}
                      </p>
                    </div>
                    {taskItem.eventDescription && (
                      <div className="md:col-span-2">
                        <label
                          className={`block text-sm font-medium mb-1 ${getThemeClasses("text-secondary")}`}
                        >
                          Event Description
                        </label>
                        <p
                          className={`text-base ${getThemeClasses("text-primary")}`}
                        >
                          {taskItem.eventDescription}
                        </p>
                      </div>
                    )}
                    <div>
                      <label
                        className={`block text-sm font-medium mb-1 ${getThemeClasses("text-secondary")}`}
                      >
                        Event Category
                      </label>
                      <p
                        className={`text-base ${getThemeClasses("text-primary")}`}
                      >
                        {taskItem.eventCategoryName || "-"}
                      </p>
                    </div>
                    {taskItem.eventCategoryDescription && (
                      <div>
                        <label
                          className={`block text-sm font-medium mb-1 ${getThemeClasses("text-secondary")}`}
                        >
                          Event Category Description
                        </label>
                        <p
                          className={`text-base ${getThemeClasses("text-primary")}`}
                        >
                          {taskItem.eventCategoryDescription}
                        </p>
                      </div>
                    )}
                  </div>

                  {/* Event Tags, Certifications, Specializations */}
                  {(taskItem.eventTags?.length > 0 ||
                    taskItem.eventCertifications?.length > 0 ||
                    taskItem.eventSpecializations?.length > 0 ||
                    taskItem.eventSkillSets?.length > 0) && (
                    <>
                      <div className={`border-t ${getThemeClasses("border-secondary")} my-6`}></div>
                      <div className="space-y-4">
                        {taskItem.eventSkillSets?.length > 0 && (
                          <div>
                            <label
                              className={`block text-sm font-medium mb-2 ${getThemeClasses("text-secondary")}`}
                            >
                              Event Skill Sets
                            </label>
                            <div className="flex flex-wrap gap-2">
                              {taskItem.eventSkillSets.map((skill) => (
                                <span
                                  key={skill.id}
                                  className="inline-flex items-center px-3 py-1 rounded-full text-sm bg-green-100 text-green-800"
                                >
                                  {skill.category}
                                  {skill.subCategory
                                    ? ` - ${skill.subCategory}`
                                    : ""}
                                </span>
                              ))}
                            </div>
                          </div>
                        )}
                        {taskItem.eventCertifications?.length > 0 && (
                          <div>
                            <label
                              className={`block text-sm font-medium mb-2 ${getThemeClasses("text-secondary")}`}
                            >
                              Event Certifications
                            </label>
                            <div className="flex flex-wrap gap-2">
                              {taskItem.eventCertifications.map((cert) => (
                                <span
                                  key={cert.id}
                                  className="inline-flex items-center px-3 py-1 rounded-full text-sm bg-blue-100 text-blue-800"
                                >
                                  {cert.name}
                                </span>
                              ))}
                            </div>
                          </div>
                        )}
                        {taskItem.eventSpecializations?.length > 0 && (
                          <div>
                            <label
                              className={`block text-sm font-medium mb-2 ${getThemeClasses("text-secondary")}`}
                            >
                              Event Specializations
                            </label>
                            <div className="flex flex-wrap gap-2">
                              {taskItem.eventSpecializations.map((spec) => (
                                <span
                                  key={spec.id}
                                  className="inline-flex items-center px-3 py-1 rounded-full text-sm bg-purple-100 text-purple-800"
                                >
                                  {spec.name}
                                </span>
                              ))}
                            </div>
                          </div>
                        )}
                        {taskItem.eventTags?.length > 0 && (
                          <div>
                            <label
                              className={`block text-sm font-medium mb-2 ${getThemeClasses("text-secondary")}`}
                            >
                              Event Tags
                            </label>
                            <div className="flex flex-wrap gap-2">
                              {taskItem.eventTags.map((tag) => (
                                <span
                                  key={tag.id}
                                  className={`inline-flex items-center px-3 py-1 rounded-full text-sm ${getThemeClasses("bg-disabled")} ${getThemeClasses("text-primary")}`}
                                >
                                  {tag.text}
                                </span>
                              ))}
                            </div>
                          </div>
                        )}
                      </div>
                    </>
                  )}
                </div>
              </Card>

              {/* Organization & Division Information Section */}
              <Card className="mb-6">
                <div className="p-6">
                  <div className="flex items-center mb-4">
                    <BuildingOfficeIcon className={`w-6 h-6 mr-2 ${getThemeClasses("text-secondary")}`} />
                    <h2
                      className={`text-xl font-semibold ${getThemeClasses("text-primary")}`}
                    >
                      Organization & Division
                    </h2>
                  </div>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                      <label
                        className={`block text-sm font-medium mb-1 ${getThemeClasses("text-secondary")}`}
                      >
                        Organization Name
                      </label>
                      <p
                        className={`text-base ${getThemeClasses("text-primary")}`}
                      >
                        {taskItem.organizationName || "-"}
                      </p>
                    </div>
                    <div>
                      <label
                        className={`block text-sm font-medium mb-1 ${getThemeClasses("text-secondary")}`}
                      >
                        Organization Short Name
                      </label>
                      <p
                        className={`text-base ${getThemeClasses("text-primary")}`}
                      >
                        {taskItem.organizationShortName || "-"}
                      </p>
                    </div>
                    <div>
                      <label
                        className={`block text-sm font-medium mb-1 ${getThemeClasses("text-secondary")}`}
                      >
                        Division Name
                      </label>
                      <p
                        className={`text-base ${getThemeClasses("text-primary")}`}
                      >
                        {taskItem.divisionName || "-"}
                      </p>
                    </div>
                    <div>
                      <label
                        className={`block text-sm font-medium mb-1 ${getThemeClasses("text-secondary")}`}
                      >
                        Division Short Name
                      </label>
                      <p
                        className={`text-base ${getThemeClasses("text-primary")}`}
                      >
                        {taskItem.divisionShortName || "-"}
                      </p>
                    </div>
                  </div>
                </div>
              </Card>

              {/* Event Contract Details Section - NEW */}
              <Card className="mb-6">
                <div className="p-6">
                  <div className="flex items-center mb-4">
                    <BriefcaseIcon className={`w-6 h-6 mr-2 ${getThemeClasses("text-secondary")}`} />
                    <h2
                      className={`text-xl font-semibold ${getThemeClasses("text-primary")}`}
                    >
                      Event Contract Details
                    </h2>
                  </div>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    {taskItem.eventContractPublicID > 0 && (
                      <div>
                        <label
                          className={`block text-sm font-medium mb-1 ${getThemeClasses("text-secondary")}`}
                        >
                          Contract ID
                        </label>
                        <p
                          className={`text-base ${getThemeClasses("text-primary")}`}
                        >
                          #{taskItem.eventContractPublicID}
                        </p>
                      </div>
                    )}
                    {taskItem.eventContractRoleType > 0 && (
                      <div>
                        <label
                          className={`block text-sm font-medium mb-1 ${getThemeClasses("text-secondary")}`}
                        >
                          Role Type
                        </label>
                        <p
                          className={`text-base ${getThemeClasses("text-primary")}`}
                        >
                          {getEventContractRoleTypeLabel(
                            taskItem.eventContractRoleType
                          )}
                        </p>
                      </div>
                    )}
                    {taskItem.eventContractSector > 0 && (
                      <div>
                        <label
                          className={`block text-sm font-medium mb-1 ${getThemeClasses("text-secondary")}`}
                        >
                          Sector
                        </label>
                        <p
                          className={`text-base ${getThemeClasses("text-primary")}`}
                        >
                          {getEventContractSectorLabel(
                            taskItem.eventContractSector
                          )}
                        </p>
                      </div>
                    )}
                    {taskItem.eventContractLocationNotes && (
                      <div className="md:col-span-2">
                        <label
                          className={`block text-sm font-medium mb-1 ${getThemeClasses("text-secondary")}`}
                        >
                          Location Notes
                        </label>
                        <p
                          className={`text-base ${getThemeClasses("text-primary")}`}
                        >
                          {taskItem.eventContractLocationNotes}
                        </p>
                      </div>
                    )}
                  </div>

                  {/* Event Contract Certifications & Skills */}
                  {(taskItem.eventContractCertifications?.length > 0 ||
                    taskItem.eventContractSkillSets?.length > 0) && (
                    <>
                      <div className={`border-t ${getThemeClasses("border-secondary")} my-6`}></div>
                      <div className="space-y-4">
                        {taskItem.eventContractCertifications?.length > 0 && (
                          <div>
                            <label
                              className={`block text-sm font-medium mb-2 ${getThemeClasses("text-secondary")}`}
                            >
                              Required Certifications
                            </label>
                            <div className="flex flex-wrap gap-2">
                              {taskItem.eventContractCertifications.map(
                                (cert) => (
                                  <span
                                    key={cert.id}
                                    className="inline-flex items-center px-3 py-1 rounded-full text-sm bg-blue-100 text-blue-800"
                                  >
                                    {cert.name}
                                  </span>
                                ),
                              )}
                            </div>
                          </div>
                        )}
                        {taskItem.eventContractSkillSets?.length > 0 && (
                          <div>
                            <label
                              className={`block text-sm font-medium mb-2 ${getThemeClasses("text-secondary")}`}
                            >
                              Required Skill Sets
                            </label>
                            <div className="flex flex-wrap gap-2">
                              {taskItem.eventContractSkillSets.map((skill) => (
                                <span
                                  key={skill.id}
                                  className="inline-flex items-center px-3 py-1 rounded-full text-sm bg-green-100 text-green-800"
                                >
                                  {skill.category}
                                  {skill.subCategory
                                    ? ` - ${skill.subCategory}`
                                    : ""}
                                </span>
                              ))}
                            </div>
                          </div>
                        )}
                      </div>
                    </>
                  )}
                </div>
              </Card>

              {/* Event Contract Contact Section */}
              <Card className="mb-6">
                <div className="p-6">
                  <div className="flex items-center mb-4">
                    <PhoneIcon className={`w-6 h-6 mr-2 ${getThemeClasses("text-secondary")}`} />
                    <h2
                      className={`text-xl font-semibold ${getThemeClasses("text-primary")}`}
                    >
                      Event Contract Contact
                    </h2>
                  </div>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                      <label
                        className={`block text-sm font-medium mb-1 ${getThemeClasses("text-secondary")}`}
                      >
                        Contact Name
                      </label>
                      <p
                        className={`text-base ${getThemeClasses("text-primary")}`}
                      >
                        {taskItem.eventContractContactName || "-"}
                      </p>
                    </div>
                    <div>
                      <label
                        className={`block text-sm font-medium mb-1 ${getThemeClasses("text-secondary")}`}
                      >
                        Contact Number
                      </label>
                      <p
                        className={`text-base ${getThemeClasses("text-primary")}`}
                      >
                        {taskItem.eventContractContactNumber || "-"}
                      </p>
                    </div>
                    {taskItem.eventContractAdditionalContactNotes && (
                      <div className="md:col-span-2">
                        <label
                          className={`block text-sm font-medium mb-1 ${getThemeClasses("text-secondary")}`}
                        >
                          Additional Contact Notes
                        </label>
                        <p
                          className={`text-base ${getThemeClasses("text-primary")}`}
                        >
                          {taskItem.eventContractAdditionalContactNotes}
                        </p>
                      </div>
                    )}
                  </div>
                </div>
              </Card>

              {/* Facilitator Information Section */}
              {taskItem.facilitatorName && (
                <Card className="mb-6">
                  <div className="p-6">
                    <div className="flex items-center mb-4">
                      <UserIcon className={`w-6 h-6 mr-2 ${getThemeClasses("text-secondary")}`} />
                      <h2
                        className={`text-xl font-semibold ${getThemeClasses("text-primary")}`}
                      >
                        Facilitator Information
                      </h2>
                    </div>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                      <div>
                        <label
                          className={`block text-sm font-medium mb-1 ${getThemeClasses("text-secondary")}`}
                        >
                          Name
                        </label>
                        <p
                          className={`text-base ${getThemeClasses("text-primary")}`}
                        >
                          {taskItem.facilitatorName}
                        </p>
                      </div>
                      {taskItem.facilitatorPublicID > 0 && (
                        <div>
                          <label
                            className={`block text-sm font-medium mb-1 ${getThemeClasses("text-secondary")}`}
                          >
                            Facilitator ID
                          </label>
                          <p
                            className={`text-base ${getThemeClasses("text-primary")}`}
                          >
                            #{taskItem.facilitatorPublicID}
                          </p>
                        </div>
                      )}
                      {taskItem.facilitatorEmail && (
                        <div>
                          <label
                            className={`block text-sm font-medium mb-1 ${getThemeClasses("text-secondary")}`}
                          >
                            Email
                          </label>
                          <p
                            className={`text-base ${getThemeClasses("text-primary")}`}
                          >
                            {taskItem.facilitatorEmail}
                          </p>
                        </div>
                      )}
                      {taskItem.facilitatorPhone && (
                        <div>
                          <label
                            className={`block text-sm font-medium mb-1 ${getThemeClasses("text-secondary")}`}
                          >
                            Phone
                          </label>
                          <p
                            className={`text-base ${getThemeClasses("text-primary")}`}
                          >
                            {taskItem.facilitatorPhone}
                          </p>
                        </div>
                      )}
                      {taskItem.facilitatorServiceFeeName && (
                        <div>
                          <label
                            className={`block text-sm font-medium mb-1 ${getThemeClasses("text-secondary")}`}
                          >
                            Service Fee
                          </label>
                          <p
                            className={`text-base ${getThemeClasses("text-primary")}`}
                          >
                            {taskItem.facilitatorServiceFeeName} (
                            {taskItem.facilitatorServiceFeePercentage}%)
                          </p>
                        </div>
                      )}
                      {taskItem.facilitatorHourlySalaryDesired > 0 && (
                        <div>
                          <label
                            className={`block text-sm font-medium mb-1 ${getThemeClasses("text-secondary")}`}
                          >
                            Hourly Rate
                          </label>
                          <p
                            className={`text-base ${getThemeClasses("text-primary")}`}
                          >
                            $
                            {taskItem.facilitatorHourlySalaryDesired.toLocaleString()}
                            /hour
                          </p>
                        </div>
                      )}
                    </div>

                    {/* Facilitator Tags, Certifications, Skills */}
                    {(taskItem.facilitatorTags?.length > 0 ||
                      taskItem.facilitatorCertifications?.length > 0 ||
                      taskItem.facilitatorSkillSets?.length > 0) && (
                      <>
                        <div className={`border-t ${getThemeClasses("border-secondary")} my-6`}></div>
                        <div className="space-y-4">
                          {taskItem.facilitatorSkillSets?.length > 0 && (
                            <div>
                              <label
                                className={`block text-sm font-medium mb-2 ${getThemeClasses("text-secondary")}`}
                              >
                                Skill Sets
                              </label>
                              <div className="flex flex-wrap gap-2">
                                {taskItem.facilitatorSkillSets.map((skill) => (
                                  <span
                                    key={skill.id}
                                    className="inline-flex items-center px-3 py-1 rounded-full text-sm bg-green-100 text-green-800"
                                  >
                                    {skill.category}
                                    {skill.subCategory
                                      ? ` - ${skill.subCategory}`
                                      : ""}
                                  </span>
                                ))}
                              </div>
                            </div>
                          )}
                          {taskItem.facilitatorCertifications?.length > 0 && (
                            <div>
                              <label
                                className={`block text-sm font-medium mb-2 ${getThemeClasses("text-secondary")}`}
                              >
                                Certifications
                              </label>
                              <div className="flex flex-wrap gap-2">
                                {taskItem.facilitatorCertifications.map(
                                  (cert) => (
                                    <span
                                      key={cert.id}
                                      className="inline-flex items-center px-3 py-1 rounded-full text-sm bg-blue-100 text-blue-800"
                                    >
                                      {cert.name}
                                    </span>
                                  ),
                                )}
                              </div>
                            </div>
                          )}
                          {taskItem.facilitatorTags?.length > 0 && (
                            <div>
                              <label
                                className={`block text-sm font-medium mb-2 ${getThemeClasses("text-secondary")}`}
                              >
                                Tags
                              </label>
                              <div className="flex flex-wrap gap-2">
                                {taskItem.facilitatorTags.map((tag) => (
                                  <span
                                    key={tag.id}
                                    className={`inline-flex items-center px-3 py-1 rounded-full text-sm ${getThemeClasses("bg-disabled")} ${getThemeClasses("text-primary")}`}
                                  >
                                    {tag.text}
                                  </span>
                                ))}
                              </div>
                            </div>
                          )}
                        </div>
                      </>
                    )}
                  </div>
                </Card>
              )}

              {/* Speaker Information Section */}
              {taskItem.speakerName && (
                <Card className="mb-6">
                  <div className="p-6">
                    <div className="flex items-center mb-4">
                      <UserIcon className={`w-6 h-6 mr-2 ${getThemeClasses("text-secondary")}`} />
                      <h2
                        className={`text-xl font-semibold ${getThemeClasses("text-primary")}`}
                      >
                        Speaker Information
                      </h2>
                    </div>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                      <div>
                        <label
                          className={`block text-sm font-medium mb-1 ${getThemeClasses("text-secondary")}`}
                        >
                          Name
                        </label>
                        <p
                          className={`text-base ${getThemeClasses("text-primary")}`}
                        >
                          {taskItem.speakerName}
                        </p>
                      </div>
                      {taskItem.speakerPublicID > 0 && (
                        <div>
                          <label
                            className={`block text-sm font-medium mb-1 ${getThemeClasses("text-secondary")}`}
                          >
                            Speaker ID
                          </label>
                          <p
                            className={`text-base ${getThemeClasses("text-primary")}`}
                          >
                            #{taskItem.speakerPublicID}
                          </p>
                        </div>
                      )}
                      {taskItem.speakerEmail && (
                        <div>
                          <label
                            className={`block text-sm font-medium mb-1 ${getThemeClasses("text-secondary")}`}
                          >
                            Email
                          </label>
                          <p
                            className={`text-base ${getThemeClasses("text-primary")}`}
                          >
                            {taskItem.speakerEmail}
                          </p>
                        </div>
                      )}
                      {taskItem.speakerPhone && (
                        <div>
                          <label
                            className={`block text-sm font-medium mb-1 ${getThemeClasses("text-secondary")}`}
                          >
                            Phone
                          </label>
                          <p
                            className={`text-base ${getThemeClasses("text-primary")}`}
                          >
                            {taskItem.speakerPhone}
                          </p>
                        </div>
                      )}
                      {taskItem.speakerServiceFeeName && (
                        <div>
                          <label
                            className={`block text-sm font-medium mb-1 ${getThemeClasses("text-secondary")}`}
                          >
                            Service Fee
                          </label>
                          <p
                            className={`text-base ${getThemeClasses("text-primary")}`}
                          >
                            {taskItem.speakerServiceFeeName} (
                            {taskItem.speakerServiceFeePercentage}%)
                          </p>
                        </div>
                      )}
                      {taskItem.speakerHourlySalaryDesired > 0 && (
                        <div>
                          <label
                            className={`block text-sm font-medium mb-1 ${getThemeClasses("text-secondary")}`}
                          >
                            Hourly Rate
                          </label>
                          <p
                            className={`text-base ${getThemeClasses("text-primary")}`}
                          >
                            $
                            {taskItem.speakerHourlySalaryDesired.toLocaleString()}
                            /hour
                          </p>
                        </div>
                      )}
                    </div>

                    {/* Speaker Tags, Certifications, Skills */}
                    {(taskItem.speakerTags?.length > 0 ||
                      taskItem.speakerCertifications?.length > 0 ||
                      taskItem.speakerSkillSets?.length > 0) && (
                      <>
                        <div className={`border-t ${getThemeClasses("border-secondary")} my-6`}></div>
                        <div className="space-y-4">
                          {taskItem.speakerSkillSets?.length > 0 && (
                            <div>
                              <label
                                className={`block text-sm font-medium mb-2 ${getThemeClasses("text-secondary")}`}
                              >
                                Skill Sets
                              </label>
                              <div className="flex flex-wrap gap-2">
                                {taskItem.speakerSkillSets.map((skill) => (
                                  <span
                                    key={skill.id}
                                    className="inline-flex items-center px-3 py-1 rounded-full text-sm bg-green-100 text-green-800"
                                  >
                                    {skill.category}
                                    {skill.subCategory
                                      ? ` - ${skill.subCategory}`
                                      : ""}
                                  </span>
                                ))}
                              </div>
                            </div>
                          )}
                          {taskItem.speakerCertifications?.length > 0 && (
                            <div>
                              <label
                                className={`block text-sm font-medium mb-2 ${getThemeClasses("text-secondary")}`}
                              >
                                Certifications
                              </label>
                              <div className="flex flex-wrap gap-2">
                                {taskItem.speakerCertifications.map((cert) => (
                                  <span
                                    key={cert.id}
                                    className="inline-flex items-center px-3 py-1 rounded-full text-sm bg-blue-100 text-blue-800"
                                  >
                                    {cert.name}
                                  </span>
                                ))}
                              </div>
                            </div>
                          )}
                          {taskItem.speakerTags?.length > 0 && (
                            <div>
                              <label
                                className={`block text-sm font-medium mb-2 ${getThemeClasses("text-secondary")}`}
                              >
                                Tags
                              </label>
                              <div className="flex flex-wrap gap-2">
                                {taskItem.speakerTags.map((tag) => (
                                  <span
                                    key={tag.id}
                                    className={`inline-flex items-center px-3 py-1 rounded-full text-sm ${getThemeClasses("bg-disabled")} ${getThemeClasses("text-primary")}`}
                                  >
                                    {tag.text}
                                  </span>
                                ))}
                              </div>
                            </div>
                          )}
                        </div>
                      </>
                    )}
                  </div>
                </Card>
              )}

              {/* Dividing Line */}
              <div className={`border-t-2 ${getThemeClasses("border-secondary")} my-8`}></div>

              {/* Estimated Costs Section */}
              <Card className="mb-6">
                <div className="p-6">
                  <div className="flex items-center mb-6">
                    <DocumentCheckIcon className={`w-6 h-6 mr-2 ${getThemeClasses("text-secondary")}`} />
                    <h2
                      className={`text-xl font-semibold ${getThemeClasses("text-primary")}`}
                    >
                      Estimated Costs
                    </h2>
                  </div>

                  {/* (A) Estimated Hours and Hourly Rate */}
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <div>
                      <label
                        className={`block text-sm font-medium mb-1 ${getThemeClasses("text-secondary")}`}
                      >
                        Estimated Hours
                      </label>
                      <p
                        className={`text-base font-semibold ${getThemeClasses("text-primary")}`}
                      >
                        {taskItem.eventContractEstimatedContractHours !==
                          undefined &&
                        taskItem.eventContractEstimatedContractHours !== null
                          ? `${taskItem.eventContractEstimatedContractHours} hours`
                          : "Not specified"}
                      </p>
                      <p className={`text-xs ${getThemeClasses("text-muted")} mt-1`}>
                        Specified during event contract creation
                      </p>
                    </div>
                    <div>
                      <label
                        className={`block text-sm font-medium mb-1 ${getThemeClasses("text-secondary")}`}
                      >
                        Facilitator/Speaker Hourly Rate
                      </label>
                      <p
                        className={`text-base font-semibold ${getThemeClasses("text-primary")}`}
                      >
                        {taskItem.facilitatorHourlySalaryDesired ||
                        taskItem.speakerHourlySalaryDesired
                          ? `$${(taskItem.facilitatorHourlySalaryDesired || taskItem.speakerHourlySalaryDesired).toLocaleString()}/hour`
                          : "Not specified"}
                      </p>
                      <p className={`text-xs ${getThemeClasses("text-muted")} mt-1`}>
                        From facilitator/speaker profile
                      </p>
                    </div>
                  </div>

                  {/* Divider between sections */}
                  <div className={`border-t ${getThemeClasses("border-secondary")} my-6`}></div>

                  {/* (B) Total Estimated Cost */}
                  <div className={`${getThemeClasses("bg-disabled")} p-4 rounded-lg`}>
                    <div className="flex justify-between items-center">
                      <div>
                        <label
                          className={`block text-sm font-medium mb-1 ${getThemeClasses("text-secondary")}`}
                        >
                          Total Estimated Cost
                        </label>
                        <p className={`text-xs ${getThemeClasses("text-muted")}`}>
                          Estimated Hours × Hourly Rate
                        </p>
                      </div>
                      <div className="text-right">
                        <p
                          className={`text-2xl font-bold ${getThemeClasses("text-primary")}`}
                        >
                          {getEstimatedTotalCost() > 0
                            ? `$${getEstimatedTotalCost().toLocaleString(
                                "en-US",
                                {
                                  minimumFractionDigits: 2,
                                  maximumFractionDigits: 2,
                                },
                              )}`
                            : "-"}
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </Card>

              {/* Dividing Line */}
              <div className={`border-t-2 ${getThemeClasses("border-secondary")} my-8`}></div>

              {/* Actual Costs Section */}
              <Card className="mb-6">
                <div className="p-6">
                  <div className="flex items-center mb-6">
                    <DocumentCheckIcon className={`w-6 h-6 mr-2 ${getThemeClasses("text-secondary")}`} />
                    <h2
                      className={`text-xl font-semibold ${getThemeClasses("text-primary")}`}
                    >
                      Actual Costs
                    </h2>
                  </div>

                  {/* (a) Actual Hours - Mandatory */}
                  <div className="mb-6">
                    <Input
                      label="Actual Hours"
                      type="number"
                      placeholder="Enter actual hours worked"
                      value={actualHours}
                      onChange={setActualHours}
                      required={true}
                      error={errors.actualHours}
                      helperText="The actual amount of time spent by the facilitator/speaker"
                    />
                  </div>

                  {/* (b) Actual Facilitation or Speaker Cost - Calculated */}
                  <div className="mb-6">
                    <label
                      className={`block text-sm font-medium mb-1 ${getThemeClasses("text-secondary")}`}
                    >
                      Actual Facilitation or Speaker Cost
                    </label>
                    <div className={`${getThemeClasses("bg-disabled")} p-4 rounded-lg border ${getThemeClasses("border-secondary")}`}>
                      <p
                        className={`text-lg font-semibold ${getThemeClasses("text-primary")}`}
                      >
                        {getActualFacilitationOrSpeakerCost() > 0
                          ? `$${getActualFacilitationOrSpeakerCost().toLocaleString(
                              "en-US",
                              {
                                minimumFractionDigits: 2,
                                maximumFractionDigits: 2,
                              },
                            )}`
                          : "-"}
                      </p>
                      <p className={`text-xs ${getThemeClasses("text-muted")} mt-1`}>
                        Actual Hours × Hourly Rate
                      </p>
                    </div>
                  </div>

                  {/* Additional Costs */}
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
                    {/* (c) Travel Costs - Optional */}
                    <div>
                      <Input
                        label="Travel Costs"
                        type="number"
                        placeholder="0.00"
                        value={travelCosts}
                        onChange={setTravelCosts}
                        required={false}
                        error={errors.travelCosts}
                        helperText="Optional"
                      />
                    </div>

                    {/* (d) Supplies Costs - Optional */}
                    <div>
                      <Input
                        label="Supplies Costs"
                        type="number"
                        placeholder="0.00"
                        value={suppliesCosts}
                        onChange={setSuppliesCosts}
                        required={false}
                        error={errors.suppliesCosts}
                        helperText="Optional"
                      />
                    </div>

                    {/* (e) Other Costs - Optional */}
                    <div>
                      <Input
                        label="Other Costs"
                        type="number"
                        placeholder="0.00"
                        value={otherCosts}
                        onChange={setOtherCosts}
                        required={false}
                        error={errors.otherCosts}
                        helperText="Optional"
                      />
                    </div>
                  </div>

                  {/* Divider */}
                  <div className={`border-t ${getThemeClasses("border-secondary")} my-6`}></div>

                  {/* (f) Actual Total Contract Cost - Calculated */}
                  <div className="bg-blue-50 p-4 rounded-lg mb-6">
                    <div className="flex justify-between items-center">
                      <div>
                        <label
                          className={`block text-sm font-medium mb-1 ${getThemeClasses("text-secondary")}`}
                        >
                          Actual Total Contract Cost
                        </label>
                        <p className={`text-xs ${getThemeClasses("text-muted")}`}>
                          Facilitation or Speaker Cost + Travel + Supplies + Other
                        </p>
                      </div>
                      <div className="text-right">
                        <p
                          className={`text-2xl font-bold ${getThemeClasses("text-primary")}`}
                        >
                          {getActualTotalCost() > 0
                            ? `$${getActualTotalCost().toLocaleString("en-US", {
                                minimumFractionDigits: 2,
                                maximumFractionDigits: 2,
                              })}`
                            : "-"}
                        </p>
                      </div>
                    </div>
                  </div>

                  {/* Variance Section */}
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    {/* (g) Variance (Hours) - Calculated */}
                    <div className={`${getThemeClasses("bg-disabled")} p-4 rounded-lg border ${getThemeClasses("border-secondary")}`}>
                      <label
                        className={`block text-sm font-medium mb-1 ${getThemeClasses("text-secondary")}`}
                      >
                        Variance (Hours)
                      </label>
                      <p
                        className={`text-lg font-semibold ${
                          getVarianceHours() >= 0
                            ? "text-green-600"
                            : "text-red-600"
                        }`}
                      >
                        {actualHours
                          ? `${getVarianceHours() >= 0 ? "+" : ""}${getVarianceHours().toFixed(2)} hours`
                          : "-"}
                      </p>
                      <p className={`text-xs ${getThemeClasses("text-muted")} mt-1`}>
                        Estimated Hours - Actual Hours
                      </p>
                    </div>

                    {/* (h) Variance (Cost) - Calculated */}
                    <div className={`${getThemeClasses("bg-disabled")} p-4 rounded-lg border ${getThemeClasses("border-secondary")}`}>
                      <label
                        className={`block text-sm font-medium mb-1 ${getThemeClasses("text-secondary")}`}
                      >
                        Variance (Cost)
                      </label>
                      <p
                        className={`text-lg font-semibold ${
                          getVarianceCost() >= 0
                            ? "text-green-600"
                            : "text-red-600"
                        }`}
                      >
                        {actualHours
                          ? `${getVarianceCost() >= 0 ? "+" : ""}$${getVarianceCost().toLocaleString(
                              "en-US",
                              {
                                minimumFractionDigits: 2,
                                maximumFractionDigits: 2,
                              },
                            )}`
                          : "-"}
                      </p>
                      <p className={`text-xs ${getThemeClasses("text-muted")} mt-1`}>
                        Estimated Total Cost - Actual Total Cost
                      </p>
                    </div>
                  </div>

                  {/* Divider */}
                  <div className={`border-t ${getThemeClasses("border-secondary")} my-6`}></div>

                  {/* Comments - Mandatory */}
                  <div>
                    <Textarea
                      label="Comments"
                      placeholder="Enter review comments..."
                      value={comments}
                      onChange={setComments}
                      required={true}
                      error={errors.comments}
                      rows={6}
                      helperText="Review summary including variance details"
                    />
                  </div>
                </div>
              </Card>

              {/* Action Buttons */}
              <div className="flex justify-end gap-3">
                <Button
                  variant="secondary"
                  onClick={() => navigate("/admin/tasks")}
                  disabled={isSubmitting}
                >
                  Back to Task Items
                </Button>
                <Button
                  variant="primary"
                  onClick={handleSubmitReview}
                  disabled={isSubmitting}
                  loading={isSubmitting}
                >
                  {isSubmitting ? "Submitting..." : "Submit Review"}
                </Button>
              </div>
            </>
          )}

          {/* No Task Item Found */}
          {!isLoading && !taskItem && (
            <Card>
              <div className="p-6">
                <Alert variant="warning" className="mb-6">
                  <ExclamationTriangleIcon className="w-5 h-5" />
                  <span>No task item details available.</span>
                </Alert>

                <div className="flex justify-end">
                  <Button
                    variant="secondary"
                    onClick={() => navigate("/admin/tasks")}
                  >
                    Back to Task Items
                  </Button>
                </div>
              </div>
            </Card>
          )}
        </div>
      </div>
    </UIXThemeProvider>
  );
}

export default AdminTaskItemReviewEventContractPage;
