"use client";
import { BASE_URL } from "@/Constant";
import Image from "next/image";
import SafeHtmlRenderer from "../SafeHtmlRenderer";
import { useState, useEffect, useRef } from "react";
import { useRouter } from "next/navigation";
import axios from "axios";
import { RefreshCw, Search, X, Filter, Shield } from "lucide-react";
import { toast } from "react-toastify";
import useAxios from "@/hooks/useAxios";
import Select from "react-select";

// ✅ Type definitions
interface Standard {
  _id: string;
  certificationStandardNumber: string;
  registerdBy: string;
}

interface Country {
  billcountryid: string;
  billcountry: string;
}

interface SelectOption {
  value: string;
  label: string;
}

function NewComp({ data }: any) {
  const router = useRouter();
  const { getData } = useAxios();

  // ✅ State for filters with react-select options
  const [selectedStandard, setSelectedStandard] = useState<SelectOption | null>(
    null,
  );
  const [selectedApprovalStatus, setSelectedApprovalStatus] =
    useState<SelectOption | null>(null);
  const [selectedCountry, setSelectedCountry] = useState<SelectOption | null>(
    null,
  );

  // ✅ Data states
  const [StandData, setStandData] = useState<Standard[]>([]);
  const [allCountries, setAllCountries] = useState<Country[]>([]);

  // ✅ Options for react-select
  const [standardOptions, setStandardOptions] = useState<SelectOption[]>([]);
  const [countryOptions, setCountryOptions] = useState<SelectOption[]>([]);

  const approvalStatusOptions: SelectOption[] = [
    { value: "", label: "Select Certification Type" },
    { value: "Associate Auditor", label: "Associate Auditor" },
    {
      value: "Associate Internal Auditor",
      label: "Associate Internal Auditor",
    },
    { value: "Auditor", label: "Auditor" },
    { value: "Internal Auditor", label: "Internal Auditor" },
    { value: "Lead Auditor", label: "Lead Auditor" },
    { value: "Principal Auditor", label: "Principal Auditor" },
    { value: "Implementor", label: "Implementor" },
    { value: "Lead Implementor", label: "Lead Implementor" },
    { value: "Consultant", label: "Consultant" },
    { value: "Trainer", label: "Trainer" },
    { value: "Lead Trainer", label: "Lead Trainer" },
    { value: "Other", label: "Other" },
  ];

  // ✅ Modal states
  const [showModal, setShowModal] = useState(false);
  const [captchaSvg, setCaptchaSvg] = useState("");
  const [captchaInput, setCaptchaInput] = useState("");
  const [isCaptchaVerifying, setIsCaptchaVerifying] = useState(false);
  const [captchaError, setCaptchaError] = useState("");

  // ✅ Form validation errors
  const [validationErrors, setValidationErrors] = useState({
    standard: "",
    approvalStatus: "",
    country: "",
    captcha: "",
  });

  const modalRef = useRef<HTMLDivElement>(null);

  // ✅ Check if any filter is active
  const isAnyFilterActive = () => {
    return selectedStandard || selectedApprovalStatus || selectedCountry;
  };

  // ✅ Fetch captcha
  const fetchCaptcha = async () => {
    try {
      const { data }: any = await getData("captcha/generateCaptcha", {
        withCredentials: true,
      });
      setCaptchaSvg(data?.captcha);
    } catch (error) {
      console.log(error);
      toast.error("Failed to load captcha");
    }
  };

  // ✅ Open modal with captcha and filters
  const openModal = () => {
    fetchCaptcha();
    setShowModal(true);
    // Clear previous validation errors
    setValidationErrors({
      standard: "",
      approvalStatus: "",
      country: "",
      captcha: "",
    });
  };

  // ✅ Validate form
  const validateForm = () => {
    const errors = {
      standard: "",
      approvalStatus: "",
      country: "",
      captcha: "",
    };

    let isValid = true;

    if (!selectedStandard) {
      errors.standard = "Standard is required";
      isValid = false;
    }

    if (!selectedApprovalStatus || !selectedApprovalStatus.value) {
      errors.approvalStatus = "Certification type is required";
      isValid = false;
    }

    if (!selectedCountry) {
      errors.country = "Country is required";
      isValid = false;
    }

    if (!captchaInput.trim()) {
      errors.captcha = "Captcha is required";
      isValid = false;
    }

    setValidationErrors(errors);
    return isValid;
  };
  // ✅ Verify captcha and apply filters
  // ✅ Verify captcha and apply filters
  // Update the verifyAndApply function
  const verifyAndApply = async () => {
    if (!validateForm()) {
      toast.error("Please fill all required fields");
      return;
    }

    setIsCaptchaVerifying(true);
    setCaptchaError("");

    try {
      const response = await axios.post(
        `${BASE_URL}captcha/verifyCaptcha`,
        { captcha: captchaInput },
        {
          withCredentials: true,
          headers: {
            "Content-Type": "application/json",
          },
        },
      );

      if (response.data.success) {
        setShowModal(false);
        setCaptchaInput("");
        setCaptchaError("");

        const queryParams = new URLSearchParams();
        queryParams.append("modelType", "personal");

        // ✅ FIX: Send standard NUMBER instead of ID
        if (selectedStandard?.value) {
          // Find the standard object by ID to get its number
          const selectedStandardObj = StandData.find(
            (std) => std._id === selectedStandard.value,
          );

          // Send the standard number (e.g., "ISO 37301:2021") not the ID
          if (selectedStandardObj) {
            queryParams.append(
              "standard",
              selectedStandardObj.certificationStandardNumber,
            );
          } else {
            // Fallback to using the label if object not found
            queryParams.append("standard", selectedStandard.label);
          }
        }

        if (selectedApprovalStatus?.value) {
          queryParams.append("approvalStatus", selectedApprovalStatus.value);
        }

        // ✅ Send country NAME (backend will convert to ID)
        if (selectedCountry?.label) {
          queryParams.append("country", selectedCountry.label);
        }

        router.push(`/search-results?${queryParams.toString()}`);
        toast.success("Certified personal data has been successfully found.");
      } else {
        setCaptchaError(
          response.data.message || "Invalid captcha. Please try again.",
        );
        fetchCaptcha();
      }
    } catch (error: any) {
      setCaptchaError(
        error.response?.data?.message ||
          error.message ||
          "Captcha verification failed",
      );
      fetchCaptcha();
    } finally {
      setIsCaptchaVerifying(false);
    }
  };
  // ✅ Clear all filters
  const clearAllFilters = () => {
    setSelectedStandard(null);
    setSelectedApprovalStatus(null);
    setSelectedCountry(null);
    setValidationErrors({
      standard: "",
      approvalStatus: "",
      country: "",
      captcha: "",
    });
  };

  // ✅ Clear individual filter
  const clearFilter = (
    filterType: "standard" | "approvalStatus" | "country",
  ) => {
    switch (filterType) {
      case "standard":
        setSelectedStandard(null);
        setValidationErrors((prev) => ({ ...prev, standard: "" }));
        break;
      case "approvalStatus":
        setSelectedApprovalStatus(null);
        setValidationErrors((prev) => ({ ...prev, approvalStatus: "" }));
        break;
      case "country":
        setSelectedCountry(null);
        setValidationErrors((prev) => ({ ...prev, country: "" }));
        break;
    }
  };

  // ✅ Fetch data on component mount
  const fetchCountries = async () => {
    try {
      const response: any = await getData("dropdown/getAllCountry");
      if (response?.data) {
        const countries: Country[] = response.data;
        setAllCountries(countries);

        // Create options for react-select
        const options = countries.map((country) => ({
          value: country.billcountryid,
          label: country.billcountry,
        }));
        setCountryOptions(options);
      }
    } catch (error) {
      console.error("Error fetching countries:", error);
    }
  };

  const fetchStandards = async () => {
    try {
      const { data }: any = await getData("standard/getAllst", {
        withCredentials: true,
      });
      const standards: Standard[] = data?.standards || [];
      setStandData(standards);

      // Create options for react-select (only personal)
      const options = standards
        .filter((d: Standard) => d.registerdBy === "personal")
        .map((standard: Standard) => ({
          value: standard._id,
          label: standard.certificationStandardNumber,
        }));
      setStandardOptions(options);
    } catch (error) {
      console.log(error);
    }
  };

  // Component mount पर fetch करें
  useEffect(() => {
    fetchStandards();
    fetchCountries();
  }, []);

  // ✅ Handle click outside modal
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (
        modalRef.current &&
        !modalRef.current.contains(event.target as Node)
      ) {
        setShowModal(false);
        setCaptchaInput("");
        setCaptchaError("");
        setValidationErrors({
          standard: "",
          approvalStatus: "",
          country: "",
          captcha: "",
        });
      }
    };

    if (showModal) {
      document.addEventListener("mousedown", handleClickOutside);
    }

    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [showModal]);

  // ✅ Custom styles for react-select
  const customSelectStyles = {
    control: (base: any, state: any) => ({
      ...base,
      border:
        validationErrors.standard ||
        validationErrors.approvalStatus ||
        validationErrors.country
          ? "2px solid #ef4444"
          : state.isFocused
            ? "2px solid #9333ea"
            : "1px solid #d1d5db",
      borderRadius: "0.75rem",
      padding: "0.375rem 0.5rem",
      boxShadow: state.isFocused ? "0 0 0 3px rgba(147, 51, 234, 0.1)" : "none",
      "&:hover": {
        borderColor: state.isFocused
          ? "#9333ea"
          : validationErrors.standard
            ? "#ef4444"
            : "#9ca3af",
      },
      backgroundColor: "white",
      minHeight: "52px",
      fontSize: "0.95rem",
    }),
    menu: (base: any) => ({
      ...base,
      borderRadius: "0.75rem",
      marginTop: "8px",
      boxShadow:
        "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
      zIndex: 9999,
      border: "1px solid #e5e7eb",
    }),
    option: (base: any, state: any) => ({
      ...base,
      backgroundColor: state.isSelected
        ? "#9333ea"
        : state.isFocused
          ? "#f3e8ff"
          : "white",
      color: state.isSelected ? "white" : "#374151",
      padding: "12px 20px",
      fontSize: "0.95rem",
      "&:active": {
        backgroundColor: "#9333ea",
        color: "white",
      },
    }),
    input: (base: any) => ({
      ...base,
      color: "#374151",
      fontSize: "0.95rem",
    }),
    placeholder: (base: any) => ({
      ...base,
      color: "#9ca3af",
      fontSize: "0.95rem",
    }),
    singleValue: (base: any) => ({
      ...base,
      color: "#374151",
      fontSize: "0.95rem",
      fontWeight: "500",
    }),
    dropdownIndicator: (base: any) => ({
      ...base,
      color: "#9ca3af",
      padding: "0 8px",
      "&:hover": {
        color: "#6b7280",
      },
    }),
    clearIndicator: (base: any) => ({
      ...base,
      color: "#9ca3af",
      padding: "0 8px",
      "&:hover": {
        color: "#ef4444",
      },
    }),
    indicatorSeparator: () => ({
      display: "none",
    }),
  };
  const techItem = data?.tech?.[0];
  return (
    <>
      {/* ✅ Single Modal with Captcha and Filters */}
      {showModal && (
        <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 px-4 py-6 overflow-y-auto backdrop-blur-sm">
          <div
            ref={modalRef}
            className="relative bg-gradient-to-br from-white to-gray-50 rounded-2xl shadow-2xl p-6 w-full max-w-3xl my-auto border border-gray-200"
          >
            {/* Header */}
            <div className="flex items-center justify-between mb-6 pb-4 border-b border-gray-200">
              <div className="flex items-center gap-3">
                {/* <div className="p-2 bg-purple-100 rounded-lg">
                  <Filter className="w-6 h-6 text-purple-600" />
                </div> */}
                <div>
                  <h2 className="text-2xl font-bold text-gray-800 mb-2">
                    Search Certified Personal
                  </h2>
                  {/* <p className="text-gray-600 text-sm">
                    Fill all required fields and verify captcha to view results
                  </p> */}
                </div>
              </div>
              <button
                onClick={() => {
                  setShowModal(false);
                  setCaptchaInput("");
                  setCaptchaError("");
                  setValidationErrors({
                    standard: "",
                    approvalStatus: "",
                    country: "",
                    captcha: "",
                  });
                }}
                className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
                title="Close modal"
              >
                <X className="w-5 h-5 text-gray-500" />
              </button>
            </div>

            <div className="space-y-8">
              {/* ✅ Filters Section with Searchable Dropdowns */}
              <div>
                <h3 className="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
                  <span className="p-1 bg-blue-100 rounded">
                    <Search className="w-4 h-4 text-blue-600" />
                  </span>
                  Search Filters
                  {/* <span className="ml-2 text-xs bg-red-100 text-red-600 px-2 py-1 rounded-full">
                    All fields are required
                  </span> */}
                </h3>

                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                  {/* Standard Filter */}
                  <div className="relative">
                    <label className="block text-sm font-medium text-gray-700 mb-2 text-left">
                      Standard <span className="text-red-500">*</span>
                    </label>
                    <div className="relative">
                      <Select
                        value={selectedStandard}
                        onChange={(value) => {
                          setSelectedStandard(value);
                          setValidationErrors((prev) => ({
                            ...prev,
                            standard: "",
                          }));
                        }}
                        options={standardOptions}
                        placeholder="Select Standard..."
                        isSearchable
                        isClearable
                        styles={customSelectStyles}
                        className="react-select-container"
                        classNamePrefix="react-select"
                        noOptionsMessage={() => "No standards found"}
                        components={{
                          DropdownIndicator: () => (
                            <div className="pr-3">
                              <Search className="w-4 h-4 text-gray-400" />
                            </div>
                          ),
                        }}
                      />
                      {selectedStandard && (
                        <button
                          type="button"
                          onClick={() => clearFilter("standard")}
                          className="absolute right-10 top-1/2 transform -translate-y-1/2 p-1 bg-white hover:bg-gray-100 rounded"
                          title="Clear selection"
                        >
                          <X className="w-4 h-4 text-gray-400" />
                        </button>
                      )}
                    </div>
                    {validationErrors.standard && (
                      <p className="text-red-500 text-xs mt-2 flex items-center gap-1">
                        <X className="w-3 h-3" /> {validationErrors.standard}
                      </p>
                    )}
                  </div>

                  {/* Certification Type Filter */}
                  <div className="relative">
                    <label className="block text-sm font-medium text-gray-700 mb-2 text-left">
                      Certification Type <span className="text-red-500">*</span>
                    </label>
                    <div className="relative">
                      <Select
                        value={selectedApprovalStatus}
                        onChange={(value) => {
                          setSelectedApprovalStatus(value);
                          setValidationErrors((prev) => ({
                            ...prev,
                            approvalStatus: "",
                          }));
                        }}
                        options={approvalStatusOptions}
                        placeholder="Select Certification ..."
                        isSearchable
                        isClearable
                        styles={customSelectStyles}
                        className="react-select-container"
                        classNamePrefix="react-select"
                        components={{
                          DropdownIndicator: () => (
                            <div className="pr-3">
                              <Search className="w-4 h-4 text-gray-400" />
                            </div>
                          ),
                        }}
                      />
                      {selectedApprovalStatus &&
                        selectedApprovalStatus.value && (
                          <button
                            type="button"
                            onClick={() => clearFilter("approvalStatus")}
                            className="absolute right-10 top-1/2 transform -translate-y-1/2 p-1 bg-white hover:bg-gray-100 rounded"
                            title="Clear selection"
                          >
                            <X className="w-4 h-4 text-gray-400" />
                          </button>
                        )}
                    </div>
                    {validationErrors.approvalStatus && (
                      <p className="text-red-500 text-xs mt-2 flex items-center gap-1">
                        <X className="w-3 h-3" />{" "}
                        {validationErrors.approvalStatus}
                      </p>
                    )}
                  </div>

                  {/* Country Allocation Filter */}
                  <div className="relative">
                    <label className="block text-sm font-medium text-gray-700 mb-2 text-left">
                      Key Location <span className="text-red-500">*</span>
                    </label>
                    <div className="relative">
                      <Select
                        value={selectedCountry}
                        onChange={(value) => {
                          setSelectedCountry(value);
                          setValidationErrors((prev) => ({
                            ...prev,
                            country: "",
                          }));
                        }}
                        options={countryOptions}
                        placeholder="Select Country..."
                        isSearchable
                        isClearable
                        styles={customSelectStyles}
                        className="react-select-container"
                        classNamePrefix="react-select"
                        noOptionsMessage={() => "No countries found"}
                        components={{
                          DropdownIndicator: () => (
                            <div className="pr-3">
                              <Search className="w-4 h-4 text-gray-400" />
                            </div>
                          ),
                        }}
                      />
                      {selectedCountry && (
                        <button
                          type="button"
                          onClick={() => clearFilter("country")}
                          className="absolute right-10 top-1/2 transform -translate-y-1/2 p-1 bg-white hover:bg-gray-100 rounded"
                          title="Clear selection"
                        >
                          <X className="w-4 h-4 text-gray-400" />
                        </button>
                      )}
                    </div>
                    {validationErrors.country && (
                      <p className="text-red-500 text-xs mt-2 flex items-center gap-1">
                        <X className="w-3 h-3" /> {validationErrors.country}
                      </p>
                    )}
                  </div>
                </div>
              </div>

              {/* ✅ Captcha Section */}
              <div className="bg-gradient-to-r to-blue-50 rounded-xl p-4 border border-purple-100">
                <div className="flex items-center justify-between mb-4">
                  <h3 className="text-lg font-semibold text-gray-800 flex items-center gap-2">
                    {/* <Shield className="w-5 h-5 text-purple-600" /> */}
                    Security Verification
                  </h3>
                  {/* <span className="text-xs bg-red-100 text-red-600 px-2 py-1 rounded-full">
                    Required
                  </span> */}
                </div>

                <div className="space-y-4">
                  <div className="flex flex-col md:flex-row items-center justify-between gap-6">
                    <div className="flex items-center gap-4">
                      <div className="border-2 border-purple-200 rounded-xl p-4 bg-white shadow-sm min-w-[200px] flex justify-center items-center">
                        <SafeHtmlRenderer htmlContent={captchaSvg} />
                      </div>
                      <button
                        type="button"
                        onClick={fetchCaptcha}
                        className="p-3 rounded-xl hover:bg-white transition-all border border-purple-200 bg-purple-50 hover:shadow-sm"
                        aria-label="Regenerate Captcha"
                        title="Refresh captcha"
                      >
                        <RefreshCw className="w-5 h-5 text-purple-600" />
                      </button>
                    </div>

                    {/* Captcha Input */}
                    <div className="flex-1 w-full">
                      <label className="block text-sm font-medium text-gray-700 mb-2">
                        Enter Captcha <span className="text-red-500">*</span>
                      </label>
                      <div className="relative">
                        <input
                          type="text"
                          className={`w-full px-4 py-3 border ${
                            validationErrors.captcha || captchaError
                              ? "border-red-300 focus:ring-red-200"
                              : "border-gray-300 focus:ring-purple-200"
                          } rounded-xl focus:ring-4 focus:border-purple-500 outline-none transition-all`}
                          value={captchaInput}
                          onChange={(e) => {
                            setCaptchaInput(e.target.value);
                            setValidationErrors((prev) => ({
                              ...prev,
                              captcha: "",
                            }));
                            setCaptchaError("");
                          }}
                          placeholder="Type the characters you see above"
                          autoComplete="off"
                        />
                        {captchaInput && (
                          <button
                            type="button"
                            onClick={() => setCaptchaInput("")}
                            className="absolute right-3 top-1/2 transform -translate-y-1/2 p-1 hover:bg-gray-100 rounded"
                            title="Clear"
                          >
                            <X className="w-4 h-4 text-gray-400" />
                          </button>
                        )}
                      </div>
                      {(validationErrors.captcha || captchaError) && (
                        <p className="text-red-500 text-xs mt-2 flex items-center gap-1">
                          <X className="w-3 h-3" />{" "}
                          {validationErrors.captcha || captchaError}
                        </p>
                      )}
                    </div>
                  </div>
                  {/* <p className="text-gray-500 text-sm italic">
                    For security purposes, please verify that you're human by
                    entering the characters above.
                  </p> */}
                </div>
              </div>

              {/* ✅ Action Buttons */}
              <div className="flex flex-col sm:flex-row gap-4 pt-6 border-t border-gray-200">
                <div className="flex gap-3 order-2 sm:order-1">
                  <button
                    type="button"
                    onClick={clearAllFilters}
                    className="px-5 py-3 text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-xl transition-colors border border-gray-300 flex items-center gap-2"
                  >
                    <X className="w-4 h-4" />
                    Clear All Filters
                  </button>
                  <button
                    type="button"
                    onClick={() => {
                      setShowModal(false);
                      setCaptchaInput("");
                      setCaptchaError("");
                      setValidationErrors({
                        standard: "",
                        approvalStatus: "",
                        country: "",
                        captcha: "",
                      });
                    }}
                    className="px-5 py-3 text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-xl transition-colors border border-gray-300"
                  >
                    Cancel
                  </button>
                </div>
                <button
                  type="button"
                  onClick={verifyAndApply}
                  disabled={isCaptchaVerifying}
                  className="inline-flex hover:bg-btnhover hover:scale-105 items-center justify-center px-6 py-2 border border-transparent text-sm font-medium rounded-full text-black bg-btn transition-all duration-200"
                >
                  {isCaptchaVerifying ? (
                    <>
                      <svg
                        className="animate-spin h-5 w-5 text-white"
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          className="opacity-25"
                          cx="12"
                          cy="12"
                          r="10"
                          stroke="currentColor"
                          strokeWidth="4"
                        ></circle>
                        <path
                          className="opacity-75"
                          fill="currentColor"
                          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                        ></path>
                      </svg>
                      Verifying & Applying...
                    </>
                  ) : (
                    <>
                      <Search className="w-5 h-5" />
                      Apply Filters & View Results
                    </>
                  )}
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      <div className="container m-auto overflow-hidden">
        <div className="container mx-auto px-4 py-16 md:py-16 flex flex-col md:flex-row items-center justify-between gap-10">
          {/* Image Grid */}
          <div className="md:w-[40%] ">
            <div className="bg-white rounded-2xl p-4 shadow-lg">
              <div className="grid grid-cols-1 gap-4">
                <div className="aspect-square rounded-lg overflow-hidden">
                  <Image
                    width={100}
                    height={100}
                    unoptimized={true}
                    src={`${BASE_URL}${techItem?.gallaryImage?.replace(
                      /\\/g,
                      "/",
                    )}`}
                    alt="Digital transformation concept"
                    className="w-full h-full object-cover"
                  />
                </div>
              </div>
            </div>
          </div>

          <div className="w-full flex-1">
            <div className="safe mb-6">
              <SafeHtmlRenderer htmlContent={techItem?.shortContent} />
            </div>

            {/* ✅ Main Button - Opens Single Modal */}
            <div className="mb-4">
              <button
                type="button"
                className="inline-flex hover:bg-btnhover hover:scale-105 items-center justify-center px-6 py-2 border border-transparent text-sm font-medium rounded-full text-black bg-btn transition-all duration-200"
                onClick={openModal}
              >
                <span className="text-lg">Search Certified Personal</span>
                <svg
                  className="w-5 h-5 ml-1 group-hover:translate-y-0.5 transition-transform"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M19 9l-7 7-7-7"
                  />
                </svg>
              </button>

              {/* ✅ Active Filters Indicator */}
              {/* {isAnyFilterActive() && (
                <div className="mt-4 p-4 bg-gradient-to-r to-blue-50 border border-purple-200 rounded-xl shadow-sm">
                  <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                    <div className="flex items-center gap-2">
                      <span className="text-sm font-medium text-purple-700 bg-white px-3 py-1 rounded-full border border-purple-200">
                        Selected Filters:
                      </span>
                      <div className="flex flex-wrap gap-2">
                        {selectedStandard && (
                          <span className="px-3 py-1.5 text-sm bg-white border border-purple-300 text-purple-700 rounded-full flex items-center gap-1">
                            Standard: {selectedStandard.label}
                            <button
                              type="button"
                              onClick={() => clearFilter("standard")}
                              className="p-0.5 hover:bg-purple-100 rounded-full"
                            >
                              <X className="w-3 h-3" />
                            </button>
                          </span>
                        )}
                        {selectedApprovalStatus &&
                          selectedApprovalStatus.value && (
                            <span className="px-3 py-1.5 text-sm bg-white border border-purple-300 text-purple-700 rounded-full flex items-center gap-1">
                              Type: {selectedApprovalStatus.label}
                              <button
                                type="button"
                                onClick={() => clearFilter("approvalStatus")}
                                className="p-0.5 hover:bg-purple-100 rounded-full"
                              >
                                <X className="w-3 h-3" />
                              </button>
                            </span>
                          )}
                        {selectedCountry && (
                          <span className="px-3 py-1.5 text-sm bg-white border border-purple-300 text-purple-700 rounded-full flex items-center gap-1">
                            Country: {selectedCountry.label}
                            <button
                              type="button"
                              onClick={() => clearFilter("country")}
                              className="p-0.5 hover:bg-purple-100 rounded-full"
                            >
                              <X className="w-3 h-3" />
                            </button>
                          </span>
                        )}
                      </div>
                    </div>
                    <button
                      type="button"
                      onClick={clearAllFilters}
                      className="text-sm text-purple-600 hover:text-purple-800 font-medium hover:bg-white px-3 py-1.5 rounded-lg transition-colors border border-purple-200"
                    >
                      Clear All
                    </button>
                  </div>
                </div>
              )} */}
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

export default NewComp;