// File Path: monorepo/web/frontend/src/pages/Admin/EventOrder/Search/CriteriaPage.jsx

import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router";
import { useAuthManager } from "../../../../services/Services";
import {
  MagnifyingGlassIcon,
  CalendarIcon,
  BuildingOfficeIcon,
  UserGroupIcon,
  HomeIcon,
  TicketIcon,
} from "@heroicons/react/24/outline";
import {
  SearchCriteriaPageComponent,
} from "../../../../components/UIX";

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

  // Form states
  const [formData, setFormData] = useState({
    name: "",
    organization: "",
    customerName: "",
    orderDateFrom: "",
    orderDateTo: "",
    location: "",
    tags: [],
    showOnlyActive: true,
  });
  const [errors, setErrors] = useState({});
  const [isLoading, setIsLoading] = useState(false);

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

  // Breadcrumb configuration
  const breadcrumbItems = [
    {
      label: "Dashboard",
      to: "/admin/dashboard",
      icon: HomeIcon,
    },
    {
      label: "Event Orders",
      to: "/admin/event-orders",
      icon: TicketIcon,
    },
    {
      label: "Advanced Search",
      isActive: true,
    },
  ];

  // Form sections configuration
  const formSections = [
    {
      title: "Event Order Details",
      fields: [
        {
          name: "name",
          label: "Event Order Name",
          type: "text",
          placeholder: "Enter event order name",
          icon: TicketIcon,
        },
        {
          name: "organization",
          label: "Organization",
          type: "text",
          placeholder: "Enter organization name",
          icon: BuildingOfficeIcon,
        },
      ],
    },
    {
      title: "Customer Information",
      fields: [
        {
          name: "customerName",
          label: "Customer Name",
          type: "text",
          placeholder: "Enter customer name",
          icon: UserGroupIcon,
        },
        {
          name: "location",
          label: "Location",
          type: "text",
          placeholder: "Enter location/address",
          icon: HomeIcon,
        },
      ],
    },
    {
      title: "Date Range",
      columns: 2,
      fields: [
        {
          name: "orderDateFrom",
          label: "Order Date From",
          type: "date",
          icon: CalendarIcon,
        },
        {
          name: "orderDateTo",
          label: "Order Date To",
          type: "date",
          icon: CalendarIcon,
        },
      ],
    },
    {
      title: "Tags",
      columns: 1,
      fields: [
        {
          name: "tags",
          label: "",
          fieldType: "tags",
          placeholder: "Select tags to filter...",
          helperText: "Select one or more tags to filter results",
        },
      ],
    },
  ];


  // Checkbox options
  const checkboxOptions = [
    {
      name: "showOnlyActive",
      label: "Show only active event orders",
    },
  ];

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

    // Build query parameters
    const queryParams = new URLSearchParams();
    if (data.name) queryParams.append("name", data.name);
    if (data.organization) queryParams.append("org", data.organization);
    if (data.customerName) queryParams.append("customer", data.customerName);
    if (data.orderDateFrom) queryParams.append("order_from", data.orderDateFrom);
    if (data.orderDateTo) queryParams.append("order_to", data.orderDateTo);
    if (data.location) queryParams.append("location", data.location);
    if (data.tags && data.tags.length > 0) queryParams.append("tags", data.tags.join(","));
    if (data.showOnlyActive) queryParams.append("active_only", "true");

    // Navigate to results page
    const queryString = queryParams.toString();
    navigate(`/admin/event-orders/search-result${queryString ? `?${queryString}` : ""}`);
  };

  // Handle cancel
  const handleCancel = () => {
    navigate("/admin/event-orders");
  };

  // Handle clear form
  const handleClear = () => {
    setFormData({
      name: "",
      organization: "",
      customerName: "",
      orderDateFrom: "",
      orderDateTo: "",
      location: "",
      tags: [],
      showOnlyActive: true,
    });
    setErrors({});
  };

  return (
    <SearchCriteriaPageComponent
      breadcrumbItems={breadcrumbItems}
      pageTitle="Search Event Orders"
      pageIcon={MagnifyingGlassIcon}
      formTitle="Search Criteria"
      formSubtitle="Enter search criteria to find event orders"
      formIcon={MagnifyingGlassIcon}
      formData={formData}
      onFormDataChange={setFormData}
      formSections={formSections}
      checkboxOptions={checkboxOptions}
      errors={errors}
      onSubmit={handleSubmit}
      onCancel={handleCancel}
      onClear={handleClear}
      submitLabel="Search Event Orders"
      isLoading={isLoading}
      loadingText="Searching..."
    />
  );
}

export default AdminEventOrderSearchCriteriaPage;