import React, { useMemo } from "react";
import { useNavigate } from "react-router";
import { useSpeakerAwayLogManager } 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";

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 SettingSpeakerAwayLogDetailPage() {
  return (
    <UIXThemeProvider>
      <SettingSpeakerAwayLogDetailPageContent />
    </UIXThemeProvider>
  );
}

function SettingSpeakerAwayLogDetailPageContent() {
  const speakerAwayLogManager = useSpeakerAwayLogManager();
  const navigate = useNavigate();
  const { getThemeClasses } = useUIXTheme();

  // Memoize theme classes
  const themeClasses = useMemo(
    () => ({
      iconPrimary: getThemeClasses('icon-primary'),
      iconInfo: getThemeClasses('icon-info'),
      iconSuccess: getThemeClasses('icon-success'),
      iconSecondary: getThemeClasses('icon-secondary'),
      textMuted: getThemeClasses('text-muted'),
      textPrimary: getThemeClasses('text-primary'),
      textWarning: getThemeClasses('text-warning'),
    }),
    [getThemeClasses],
  );

  // Define detail fields
  const fields = [
    {
      name: "speakerName",
      label: "Speaker",
      required: true,
      render: (value, awayLog) => (
        <div className="flex items-center">
          <UserIcon className={`w-5 h-5 mr-2 ${themeClasses.iconPrimary}`} />
          <span className="font-medium">
            {awayLog.speakerName || `Speaker #${awayLog.speakerId}` || "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.iconInfo} 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.iconSuccess}`} />
          <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.iconSecondary}`} />
          <span className={`font-medium ${
            awayLog.untilFurtherNotice === 1 ? themeClasses.textWarning : themeClasses.textPrimary
          }`}>
            {awayLog.untilFurtherNotice === 1
              ? "Until Further Notice"
              : formatDateForDisplay(awayLog.untilDate) || "—"
            }
          </span>
        </div>
      )
    }
  ];

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

export default SettingSpeakerAwayLogDetailPage;