// File Path: monorepo/web/frontend/src/pages/Admin/Organization/Search/CriteriaPage.jsx
import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router";
import { useAuthManager } from "../../../../services/Services";
import {
  BuildingOffice2Icon,
  EnvelopeIcon,
  PhoneIcon,
  BuildingOfficeIcon,
  HomeIcon,
  MagnifyingGlassIcon,
  XMarkIcon,
  ChartBarIcon,
  MapPinIcon,
  GlobeAltIcon,
} from "@heroicons/react/24/outline";
import {
  SearchCriteriaPageComponent,
} from "../../../../components/UIX";
import {
  ORGANIZATION_SEARCH_ACTIVE_VALUE,
  ORGANIZATION_SEARCH_INACTIVE_VALUE,
} from "../../../../constants/Organization";

function AdminOrganizationSearchCriteriaPage() {
  const authManager = useAuthManager();
  const navigate = useNavigate();

  // Form states
  const [formData, setFormData] = useState({
    organizationName: "",
    contactEmail: "",
    contactPhone: "",
    city: "",
    tags: [],
    showOnlyActive: true,
  });
  const [errors, setErrors] = useState({});
  const [isLoading, setIsLoading] = useState(false);

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

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

    // Build query parameters
    const queryParams = new URLSearchParams();
    if (data.organizationName) queryParams.append("name", data.organizationName);
    if (data.contactEmail) queryParams.append("email", data.contactEmail);
    if (data.contactPhone) queryParams.append("phone", data.contactPhone);
    if (data.city) queryParams.append("city", data.city);
    queryParams.append("active", data.showOnlyActive ? ORGANIZATION_SEARCH_ACTIVE_VALUE : ORGANIZATION_SEARCH_INACTIVE_VALUE);

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

  // Handle cancel
  const handleCancel = () => {
    navigate("/admin/organizations");
  };

  // Handle clear form
  const handleClear = () => {
    setFormData({
      organizationName: "",
      contactEmail: "",
      contactPhone: "",
      city: "",
      tags: [],
      showOnlyActive: true,
    });
    setErrors({});
  };

  // Configure breadcrumb items
  const breadcrumbItems = [
    {
      label: "Dashboard",
      to: "/admin/dashboard",
      icon: ChartBarIcon,
    },
    {
      label: "Organizations",
      to: "/admin/organizations",
      icon: BuildingOffice2Icon,
    },
    {
      label: "Search",
      icon: MagnifyingGlassIcon,
      isActive: true,
    },
  ];

  // Configure form sections
  const formSections = [
    {
      fields: [
        {
          name: "organizationName",
          label: "Organization Name",
          type: "text",
          placeholder: "Enter organization name",
          icon: BuildingOffice2Icon,
        },
        {
          name: "contactEmail",
          label: "Contact Email",
          type: "email",
          placeholder: "Enter contact email",
          icon: EnvelopeIcon,
        },
      ],
    },
    {
      fields: [
        {
          name: "contactPhone",
          label: "Contact Phone",
          type: "tel",
          placeholder: "Enter contact phone number",
          icon: PhoneIcon,
        },
        {
          name: "city",
          label: "City",
          type: "text",
          placeholder: "Enter city",
          icon: MapPinIcon,
        },
      ],
    },
  ];

  // Configure checkbox options
  const checkboxOptions = [
    {
      name: "showOnlyActive",
      label: "Search active organizations only",
    },
  ];

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

export default AdminOrganizationSearchCriteriaPage;