// monorepo/web/frontend/src/pages/Admin/Help/Page.jsx

import React, { useMemo, useCallback, memo } from "react";
import { Breadcrumb, Button, UIXThemeProvider, useUIXTheme } from "../../../components/UIX";
import {
  QuestionMarkCircleIcon,
  EnvelopeIcon,
  PhoneIcon,
  MapPinIcon,
  GlobeAltIcon,
  ClockIcon,
  ArrowLeftIcon,
  ChartBarIcon,
  ExclamationTriangleIcon,
  ArrowTopRightOnSquareIcon,
  InformationCircleIcon,
} from "@heroicons/react/24/outline";

// Move static constants outside component to prevent recreation
const CONTACT_INFO = {
  email: "contactus@flashpointtraining.com",
  phone: "+1(226)314-2376",
  location: {
    text: "London, ON Canada",
    mapUrl: "#",
  },
  website: {
    text: "Official Website",
    url: "https://flashpointtraining.com",
  },
};

/**
 * Admin Help Page
 * Displays contact information and support details
 */
function AdminHelpPage() {
  return (
    <UIXThemeProvider>
      <AdminHelpPageContent />
    </UIXThemeProvider>
  );
}

const AdminHelpPageContent = memo(function AdminHelpPageContent() {
  const { getThemeClasses } = useUIXTheme();

  // Memoize theme classes
  const themeClasses = useMemo(
    () => ({
      bgGradientSecondary: getThemeClasses('bg-gradient-secondary'),
      cardBorder: getThemeClasses('card-border'),
      cardHeaderText: getThemeClasses('card-header-text'),
      alertInfoIcon: getThemeClasses('alert-info-icon'),
      badgePrimary: getThemeClasses('badge-primary'),
      badgeSecondary: getThemeClasses('badge-secondary'),
      linkPrimary: getThemeClasses('link-primary'),
      alertInfoText: getThemeClasses('alert-info-text'),
      alertInfoBg: getThemeClasses('alert-info-bg'),
      errorText: getThemeClasses('text-error'),
      errorBg: getThemeClasses('bg-error-light'),
      errorBorder: getThemeClasses('border-error'),
      warningText: getThemeClasses('text-warning'),
      warningBg: getThemeClasses('bg-warning-light'),
      warningBorder: getThemeClasses('border-warning'),
    }),
    [getThemeClasses],
  );

  /**
   * Format phone number for display
   */
  const formatPhoneNumber = useCallback((phone) => {
    const cleaned = phone.replace(/\D/g, "");
    if (cleaned.length === 11 && cleaned.startsWith("1")) {
      const areaCode = cleaned.substring(1, 4);
      const firstPart = cleaned.substring(4, 7);
      const secondPart = cleaned.substring(7, 11);
      return `+1 (${areaCode}) ${firstPart}-${secondPart}`;
    }
    return phone;
  }, []);

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-8">
      {/* Breadcrumb */}
      <Breadcrumb
        items={[
          {
            label: "Dashboard",
            to: "/admin/dashboard",
            icon: ChartBarIcon,
          },
          {
            label: "Help",
            icon: QuestionMarkCircleIcon,
          },
        ]}
      />

      {/* Main Content */}
      <div className="shadow-sm">
        <div className={`rounded-lg ${themeClasses.bgGradientSecondary}`}>
          {/* Header with Actions */}
          <div className="px-4 sm:px-6 py-4 sm:py-5">
            <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3 sm:gap-4">
              <h2 className="text-2xl sm:text-3xl font-bold text-white flex items-center">
                <QuestionMarkCircleIcon className="w-5 sm:w-7 h-5 sm:h-7 mr-2 text-white/80 flex-shrink-0" />
                Help & Support
              </h2>
              <div className="flex gap-2 sm:gap-3">
                <Button
                  variant="outline"
                  onClick={() => window.location.href = "/admin/dashboard"}
                  icon={ArrowLeftIcon}
                >
                  Dashboard
                </Button>
              </div>
            </div>
          </div>

          {/* Content Container */}
          <div className={`bg-white border-2 border-t-0 rounded-b-lg ${themeClasses.cardBorder}`}>
            <div className="px-4 sm:px-6 py-6">

              {/* Contact Information Section */}
              <div className="mb-8">
                <div className={`border-b ${themeClasses.cardBorder} pb-4 mb-6`}>
                  <h3 className={`text-lg font-semibold flex items-center ${themeClasses.cardHeaderText}`}>
                    <InformationCircleIcon className={`w-5 h-5 mr-2 ${themeClasses.alertInfoIcon}`} />
                    Contact Information
                  </h3>
                </div>
                <div>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    {/* Email */}
                    <div className="flex items-start space-x-3">
                      <div className="flex-shrink-0">
                        <div className={`w-10 h-10 rounded-lg flex items-center justify-center ${themeClasses.badgePrimary}`}>
                          <EnvelopeIcon className={`w-5 h-5 ${themeClasses.alertInfoIcon}`} />
                        </div>
                      </div>
                      <div>
                        <p className={`text-sm font-medium ${themeClasses.cardHeaderText}`}>Email</p>
                        <a
                          href={`mailto:${CONTACT_INFO.email}`}
                          className={`hover:underline transition-colors ${themeClasses.linkPrimary}`}
                        >
                          {CONTACT_INFO.email}
                        </a>
                      </div>
                    </div>

                    {/* Phone */}
                    <div className="flex items-start space-x-3">
                      <div className="flex-shrink-0">
                        <div className={`w-10 h-10 rounded-lg flex items-center justify-center ${themeClasses.badgeSecondary}`}>
                          <PhoneIcon className={`w-5 h-5 ${themeClasses.alertInfoIcon}`} />
                        </div>
                      </div>
                      <div>
                        <p className={`text-sm font-medium ${themeClasses.cardHeaderText}`}>Phone</p>
                        <a
                          href={`tel:${CONTACT_INFO.phone}`}
                          className={`hover:underline transition-colors ${themeClasses.linkPrimary}`}
                        >
                          {formatPhoneNumber(CONTACT_INFO.phone)}
                        </a>
                      </div>
                    </div>

                  </div>
                </div>
              </div>

              {/* Support Hours and Emergency Contact Row */}
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
                {/* Support Hours */}
                <div>
                  <div className={`border-b ${themeClasses.cardBorder} pb-4 mb-6`}>
                    <h3 className={`text-lg font-semibold flex items-center ${themeClasses.cardHeaderText}`}>
                      <ClockIcon className={`w-5 h-5 mr-2 ${themeClasses.alertInfoIcon}`} />
                      Support Hours
                    </h3>
                  </div>
                  <div>
                    <div className="space-y-2">
                      <div className={`flex justify-between py-2 border-b ${themeClasses.cardBorder}`}>
                        <span className={`font-medium ${themeClasses.cardHeaderText}`}>
                          Monday - Friday
                        </span>
                        <span className={themeClasses.alertInfoText}>9:00 AM - 5:00 PM EST</span>
                      </div>
                      <div className={`flex justify-between py-2 border-b ${themeClasses.cardBorder}`}>
                        <span className={`font-medium ${themeClasses.cardHeaderText}`}>Saturday</span>
                        <span className={themeClasses.alertInfoText}>Closed</span>
                      </div>
                      <div className="flex justify-between py-2">
                        <span className={`font-medium ${themeClasses.cardHeaderText}`}>Sunday</span>
                        <span className={themeClasses.alertInfoText}>Closed</span>
                      </div>
                    </div>
                    <div className={`mt-4 p-3 rounded-lg ${themeClasses.alertInfoBg}`}>
                      <p className={`text-sm ${themeClasses.alertInfoText}`}>
                        <strong>Note:</strong> We observe all Canadian statutory
                        holidays.
                      </p>
                    </div>
                  </div>
                </div>

                {/* Emergency Support */}
                <div>
                  <div className={`border-b ${themeClasses.cardBorder} pb-4 mb-6`}>
                    <h3 className={`text-lg font-semibold flex items-center ${themeClasses.cardHeaderText}`}>
                      <ExclamationTriangleIcon className={`w-5 h-5 mr-2 ${themeClasses.errorText}`} />
                      Emergency Support
                    </h3>
                  </div>
                  <div>
                    <div className={`p-4 rounded-lg border ${themeClasses.errorBg} ${themeClasses.errorBorder}`}>
                      <a
                        href="mailto:rodolfo@sspmedia.ca"
                        className={`${themeClasses.errorText} font-medium text-lg hover:underline inline-flex items-center`}
                      >
                        <EnvelopeIcon className="w-5 h-5 mr-2" />
                        rodolfo@sspmedia.ca
                      </a>
                    </div>
                    <div className={`mt-4 p-3 rounded-lg border ${themeClasses.warningBg} ${themeClasses.warningBorder}`}>
                      <p className={`text-sm ${themeClasses.warningText}`}>
                        <strong>Important:</strong> Emergency support is only for
                        critical system failures that prevent normal business
                        operations. Response times may vary.
                      </p>
                    </div>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
  );
});

AdminHelpPageContent.displayName = 'AdminHelpPageContent';

export default AdminHelpPage;