// File Path: monorepo/web/frontend/src/pages/Admin/Staff/Search/CriteriaPage.jsx
import React, { useState, useEffect, useMemo, useCallback, memo } from "react";
import { useNavigate } from "react-router";
import { useAuthManager } from "../../../../services/Services";
import {
  UserGroupIcon,
  EnvelopeIcon,
  PhoneIcon,
  UserIcon,
  HomeIcon,
  MagnifyingGlassIcon,
  XMarkIcon,
  ChartBarIcon,
} from "@heroicons/react/24/outline";
import {
  SearchCriteriaPageComponent,
  UIXThemeProvider,
} from "../../../../components/UIX";

// Static breadcrumb configuration
const BREADCRUMB_ITEMS = [
  {
    label: "Dashboard",
    to: "/admin/dashboard",
    icon: ChartBarIcon,
  },
  {
    label: "Staff",
    to: "/admin/staff",
    icon: UserGroupIcon,
  },
  {
    label: "Search",
    icon: MagnifyingGlassIcon,
    isActive: true,
  },
];

// Static form sections configuration
const FORM_SECTIONS = [
  {
    fields: [
      {
        name: "firstName",
        label: "First Name",
        type: "text",
        placeholder: "Enter first name",
        icon: UserIcon,
      },
      {
        name: "lastName",
        label: "Last Name",
        type: "text",
        placeholder: "Enter last name",
        icon: UserIcon,
      },
    ],
  },
  {
    fields: [
      {
        name: "email",
        label: "Email",
        type: "email",
        placeholder: "Enter email address",
        icon: EnvelopeIcon,
      },
      {
        name: "phone",
        label: "Phone",
        type: "tel",
        placeholder: "Enter phone number",
        icon: PhoneIcon,
      },
    ],
  },
];

// Static checkbox options
const CHECKBOX_OPTIONS = [
  {
    name: "showOnlyActive",
    label: "Search active staff only",
  },
];

const AdminStaffSearchCriteriaPageContent = memo(function AdminStaffSearchCriteriaPageContent() {
  const authManager = useAuthManager();
  const navigate = useNavigate();

  // Form states
  const [formData, setFormData] = useState({
    firstName: "",
    lastName: "",
    email: "",
    phone: "",
    tags: [],
    showOnlyActive: true,
  });
  const [errors, setErrors] = useState({});
  const [isLoading, setIsLoading] = useState(false);

  // Check authentication on mount
  useEffect(() => {
    if (!authManager.isAuthenticated()) {
      navigate("/login");
    }
  }, []);

  // Handle form submission
  const handleSubmit = useCallback((data) => {
    setIsLoading(true);

    // Build query parameters
    const queryParams = new URLSearchParams();
    if (data.firstName) queryParams.append("fn", data.firstName);
    if (data.lastName) queryParams.append("ln", data.lastName);
    if (data.email) queryParams.append("e", data.email);
    if (data.phone) queryParams.append("p", data.phone);
    queryParams.append("active", data.showOnlyActive ? "1" : "0");

    // Navigate to results page with query params
    const searchUrl = `/admin/staff/search-result?${queryParams.toString()}`;
    navigate(searchUrl);
  }, [navigate]);

  // Handle cancel
  const handleCancel = useCallback(() => {
    navigate("/admin/staff");
  }, [navigate]);

  // Handle clear form
  const handleClear = useCallback(() => {
    setFormData({
      firstName: "",
      lastName: "",
      email: "",
      phone: "",
      tags: [],
      showOnlyActive: true,
    });
    setErrors({});
  }, []);

  return (
    <SearchCriteriaPageComponent
      breadcrumbItems={BREADCRUMB_ITEMS}
      pageTitle="Search Staff"
      pageIcon={MagnifyingGlassIcon}
      formTitle="Search Criteria"
      formSubtitle="Enter search criteria to find staff members"
      formIcon={MagnifyingGlassIcon}
      formData={formData}
      onFormDataChange={setFormData}
      formSections={FORM_SECTIONS}
      checkboxOptions={CHECKBOX_OPTIONS}
      errors={errors}
      onSubmit={handleSubmit}
      onCancel={handleCancel}
      onClear={handleClear}
      submitLabel="Search Staff"
      clearLabel="Clear"
      cancelLabel="Cancel"
      isLoading={isLoading}
      loadingText="Searching..."
      maxWidth="7xl"
    />
  );
});

AdminStaffSearchCriteriaPageContent.displayName = "AdminStaffSearchCriteriaPageContent";

function AdminStaffSearchCriteriaPage() {
  return (
    <UIXThemeProvider>
      <AdminStaffSearchCriteriaPageContent />
    </UIXThemeProvider>
  );
}

export default AdminStaffSearchCriteriaPage;
