import React, { useMemo, memo } from "react";
import { useFacilitatorAwayLogManager } from "../../../../../services/Services";
import { SettingsDetailView } from "../../../../../components/business/views";
import { UIXThemeProvider, useUIXTheme } from "../../../../../components/UIX";
import { CalendarDaysIcon, UserIcon, ClockIcon, InformationCircleIcon, CalendarIcon } from "@heroicons/react/24/outline";
import { formatDateForDisplay } from "../../../../../services/Helpers/DateFormatter";

// Move static configuration outside component to prevent recreation
const REASON_MAP = {
  1: "Other",
  2: "Going on vacation",
  3: "Personal reasons",
  4: "Commercial insurance expired",
  5: "Police check expired",
  6: "Auto Insurance Expired",
  7: "WSIB Expired",
  8: "Dues Date Expired",
};

function SettingFacilitatorAwayLogDetailPage() {
  return (
    <UIXThemeProvider>
      <SettingFacilitatorAwayLogDetailPageContent />
    </UIXThemeProvider>
  );
}

const SettingFacilitatorAwayLogDetailPageContent = memo(function SettingFacilitatorAwayLogDetailPageContent() {
  const facilitatorAwayLogManager = useFacilitatorAwayLogManager();
  const { getThemeClasses } = useUIXTheme();

  // Memoize theme classes
  const themeClasses = useMemo(
    () => ({
      textPrimary: getThemeClasses('text-primary'),
      accentText: getThemeClasses('text-accent'),
      textSecondary: getThemeClasses('text-secondary'),
      textMuted: getThemeClasses('text-muted'),
    }),
    [getThemeClasses],
  );

  // Memoize detail fields with theme-aware styling
  const fields = useMemo(() => [
    {
      name: "facilitatorName",
      label: "Facilitator",
      required: true,
      render: (value, awayLog) => (
        <div className="flex items-center">
          <UserIcon className={`w-5 h-5 mr-2 ${themeClasses.textPrimary}`} />
          <span className="font-medium">
            {awayLog.facilitatorName || `Facilitator #${awayLog.facilitatorId}` || "Unknown"}
          </span>
        </div>
      )
    },
    {
      name: "reason",
      label: "Reason for Absence",
      required: true,
      render: (value, awayLog) => (
        <div className="flex items-start">
          <InformationCircleIcon className={`w-5 h-5 mr-2 ${themeClasses.accentText} flex-shrink-0 mt-0.5`} />
          <div>
            {awayLog.reason === 1 ? (
              <>
                <span className="font-medium">{REASON_MAP[1]}</span>
                {awayLog.reasonOther && (
                  <span className={`block mt-1 ${themeClasses.textMuted} italic`}>
                    "{awayLog.reasonOther}"
                  </span>
                )}
              </>
            ) : (
              <span className="font-medium">{REASON_MAP[awayLog.reason] || "Unknown"}</span>
            )}
          </div>
        </div>
      )
    },
    {
      name: "startDate",
      label: "Start Date",
      required: true,
      render: (value) => (
        <div className="flex items-center">
          <CalendarIcon className={`w-5 h-5 mr-2 ${themeClasses.accentText}`} />
          <span className="font-medium">{formatDateForDisplay(value) || "—"}</span>
        </div>
      )
    },
    {
      name: "untilDate",
      label: "Until",
      render: (value, awayLog) => (
        <div className="flex items-center">
          <ClockIcon className={`w-5 h-5 mr-2 ${themeClasses.textSecondary}`} />
          <span className={`font-medium ${
            awayLog.untilFurtherNotice === 1 ? themeClasses.accentText : themeClasses.textPrimary
          }`}>
            {awayLog.untilFurtherNotice === 1
              ? "Until Further Notice"
              : formatDateForDisplay(awayLog.untilDate) || "—"
            }
          </span>
        </div>
      )
    }
  ], [themeClasses]);

  return (
    <SettingsDetailView
      entityType="facilitatorAwayLog"
      entityTypePlural="Facilitator Away Logs"
      entityIcon={CalendarDaysIcon}
      entityManager={facilitatorAwayLogManager}
      basePath="/admin/settings/facilitator-away-log"
      listPath="/admin/settings/facilitator-away-logs"
      title="Facilitator Away Log Details"
      subtitle="View facilitator unavailability information and tracking"
      fields={fields}
    />
  );
});

// Set display name for React DevTools
SettingFacilitatorAwayLogDetailPageContent.displayName = 'SettingFacilitatorAwayLogDetailPageContent';

export default SettingFacilitatorAwayLogDetailPage;