import React, { useState, useEffect } from 'react'
import { Select, Tooltip, Checkbox, Button, Radio } from 'antd'
import { useTranslations } from '../hooks/useTranslation'
import Modal from '../components/core/Modal'

const AdvancedOrderFiltering = ({
  AdminSettings,
  setAdminSettings,
  isPro,
  falshDoor
}) => {
  const { t } = useTranslations()
  
  // Filter options based on screenshot
  const filterOptions = [
    { value: 'product_category', label: t('product_category'), isUpcoming: false },
    { value: 'product_type', label: t('product_type'), isUpcoming: true },
    { value: 'customer_type', label: t('customer_type'), isUpcoming: true },
    { value: 'payment_method', label: t('payment_method'), isUpcoming: true },
    { value: 'shipping_address', label: t('shipping_address'), isUpcoming: true },
    { value: 'billing_address', label: t('billing_address'), isUpcoming: true },
    { value: 'product_tags', label: t('product_tags'), isUpcoming: true }
  ]

  // State for product categories
  const [productCategories, setProductCategories] = useState([])
  const [loadingCategories, setLoadingCategories] = useState(false)

  // Local state for selected filters in the dropdown (for adding new filters)
  const [selectedFiltersForDropdown, setSelectedFiltersForDropdown] = useState([])

  // Remove filter confirmation modal state
  const [removeFilterModal, setRemoveFilterModal] = useState({ open: false, filterId: null })

  // Active filter configurations (array of filter objects)
  const activeFilters = AdminSettings.advanced_order_filters_config || []

  // Fetch WooCommerce product categories
  useEffect(() => {
    const fetchProductCategories = async () => {
      if (!window.wp || !window.wp.apiFetch) {
        console.warn('WordPress API fetch is not available')
        return
      }

      setLoadingCategories(true)
      try {
        // Fetch all categories with a high per_page limit
        const categories = await window.wp.apiFetch({
          path: '/wc/v3/products/categories?per_page=100&orderby=name&order=asc',
          parse: true
        })
        
        // Transform the API response to our format
        const formattedCategories = Array.isArray(categories) 
          ? categories.map(cat => ({
              id: cat.id,
              name: cat.name,
              slug: cat.slug
            }))
          : []
        
        setProductCategories(formattedCategories)
      } catch (error) {
        console.error('Error fetching product categories:', error)
        setProductCategories([])
      } finally {
        setLoadingCategories(false)
      }
    }

    fetchProductCategories()
  }, [])

  const handleFilterDropdownChange = values => {
    setSelectedFiltersForDropdown(values)
  }

  const handleAddFilter = () => {
    if (selectedFiltersForDropdown.length === 0) {
      return // No filter selected
    }

    // Get filters that are selected but not already active
    const filtersToAdd = selectedFiltersForDropdown.filter(
      filterValue => !activeFilters.some(f => f.filtertype === filterValue)
    )

    if (filtersToAdd.length === 0) {
      return // All selected filters are already added
    }

    // Create new filter configurations for each filter to add
    const newFilters = filtersToAdd.map(filterValue => ({
      id: Date.now() + Math.random(), // Unique ID for this filter instance
      filtertype: filterValue,
      selectedvalues: [], // For product_category, this will be category IDs
      archivecondition: 'at_least_one' // Default radio option
    }))

    // Remove added filters from dropdown
    const updatedDropdown = selectedFiltersForDropdown.filter(
      filterValue => !filtersToAdd.includes(filterValue)
    )

    setSelectedFiltersForDropdown(updatedDropdown)
    setAdminSettings(prev => ({
      ...prev,
      advanced_order_filters_config: [...activeFilters, ...newFilters]
    }))
  }

  // Show confirmation modal before removing filter
  const handleRemoveFilter = filterId => {
    setRemoveFilterModal({ open: true, filterId })
  }

  // Close remove filter confirmation modal
  const closeRemoveFilterModal = () => {
    setRemoveFilterModal({ open: false, filterId: null })
  }

  // Confirm and actually remove the filter
  const confirmRemoveFilter = () => {
    const filterId = removeFilterModal.filterId
    if (!filterId) {
      closeRemoveFilterModal()
      return
    }

    const filter = activeFilters.find(f => f.id === filterId)
    if (!filter) {
      closeRemoveFilterModal()
      return
    }

    // Always add back to dropdown when removing
    const updatedDropdown = selectedFiltersForDropdown.includes(filter.filtertype)
      ? selectedFiltersForDropdown
      : [...selectedFiltersForDropdown, filter.filtertype]

    setSelectedFiltersForDropdown(updatedDropdown)
    setAdminSettings(prev => ({
      ...prev,
      advanced_order_filters_config: activeFilters.filter(f => f.id !== filterId)
    }))

    // Close the modal
    closeRemoveFilterModal()
  }

  const handleFilterConfigChange = (filterId, updates) => {
    setAdminSettings(prev => ({
      ...prev,
      advanced_order_filters_config: activeFilters.map(f =>
        f.id === filterId ? { ...f, ...updates } : f
      )
    }))
  }

  return (
    <>
      {/* Advanced Order Filtering Toggle */}
      <div className='arcm-flex arcm-items-center arcm-gap-3 arcm-mt-4'>
        <label
          onClick={() => (!isPro ? falshDoor() : '')}
          htmlFor='enable-advanced-order-filtering'
          className='btn-switch arcm-inline-flex arcm-items-center arcm-cursor-pointer arcm-mb-2'
        >
          <div
            className={`arcm-flex arcm-items-center arcm-relative arcm-mr-2.5 ${
              !isPro ? 'arcm-cursor-not-allowed' : ''
            }`}
          >
            <input
              disabled={!isPro ? true : false}
              type='checkbox'
              checked={AdminSettings.advanced_order_filtering || false}
              id='enable-advanced-order-filtering'
              onChange={e =>
                setAdminSettings({
                  ...AdminSettings,
                  advanced_order_filtering: e.target.checked 
                })}
              className='arcm-sr-only arcm-peer'
            />
            <div className='dot-round arcm-bg-slate-200 arcm-w-12 arcm-h-7 arcm-rounded-[500px] arcm-transition-all peer-[:checked]:arcm-bg-[#3858E9]'></div>
            <div className='dot arcm-absolute arcm-start-1 arcm-top-1 arcm-bg-transparent arcm-w-5 arcm-h-5 arcm-border-4 arcm-border-white arcm-rounded-[500px] arcm-transition-transform peer-checked:arcm-bg-white peer-checked:arcm-translate-x-full rtl:peer-checked:-arcm-translate-x-full'></div>
          </div>
          <div className='arcm-text-black arcm-text-sm arcm-font-medium'>
            <span className='arcm-mr-1'>
              {t('advanced_order_filtering')}
            </span>
            {!isPro && (
              <button className='arcm-px-1.5 btn-prolock arcm-inline-flex arcm-items-center arcm-pt-[3px] arcm-pb-[4px] arcm-bg-[#FFE9FE] arcm-rounded-[26px] arcm-text-[#4d1c4b] arcm-text-sm arcm-font-normal '>
                <span className='icon-wrap'>
                  <svg
                    xmlns='http://www.w3.org/2000/svg'
                    width='13'
                    height='11'
                    viewBox='0 0 13 11'
                    fill='none'
                  >
                    <path
                      d='M0.806113 7.65309C0.542977 5.94268 0.279841 4.23232 0.0167049 2.52191C-0.0416496 2.14276 0.389758 1.88417 0.696628 2.11434C1.51645 2.7292 2.33622 3.34402 3.15604 3.95889C3.42597 4.16133 3.81053 4.09545 3.99766 3.81471L6.04517 0.743421C6.26154 0.41886 6.73842 0.41886 6.95479 0.743421L9.0023 3.81471C9.18944 4.09545 9.574 4.16129 9.84392 3.95889C10.6637 3.34402 11.4835 2.7292 12.3033 2.11434C12.6102 1.88417 13.0416 2.14276 12.9833 2.52191C12.7202 4.23232 12.457 5.94268 12.1939 7.65309H0.806113Z'
                      fill='#F748F0'
                    />
                    <path
                      d='M11.6001 10.5H1.39974C1.07185 10.5 0.80603 10.2342 0.80603 9.90627V8.60205H12.1938V9.90627C12.1938 10.2342 11.9279 10.5 11.6001 10.5Z'
                      fill='#F748F0'
                    />
                  </svg>
                </span>
                <span className='text'>
                  {t('button.upgrade_text')}
                </span>
              </button>
            )}
            <Tooltip
              className='arcm-text-sm'
              placement='top'
              title={t('advanced_order_filtering_tooltip')}
              color='#fff'
            >
              <span className='arcm-ml-2 icon arcm-inline-flex'>
                <svg
                  xmlns='http://www.w3.org/2000/svg'
                  width='14'
                  height='13'
                  viewBox='0 0 14 13'
                  fill='none'
                >
                  <path
                    fill-rule='evenodd'
                    clip-rule='evenodd'
                    d='M13.4001 6.49998C13.4001 10.0346 10.5347 12.9 7.0001 12.9C3.46548 12.9 0.600098 10.0346 0.600098 6.49998C0.600098 2.96535 3.46548 0.0999756 7.0001 0.0999756C10.5347 0.0999756 13.4001 2.96535 13.4001 6.49998ZM6.15157 4.05143C5.91725 4.28574 5.53736 4.28574 5.30304 4.05143C5.06873 3.81711 5.06873 3.43721 5.30304 3.2029C6.2403 2.26564 7.75989 2.26564 8.69715 3.2029C9.63441 4.14016 9.63441 5.65975 8.69715 6.59701C8.38317 6.911 8.00238 7.12048 7.6001 7.22404V7.49995C7.6001 7.83132 7.33147 8.09995 7.0001 8.09995C6.66873 8.09995 6.4001 7.83132 6.4001 7.49995V7.09995C6.4001 6.52372 6.85605 6.16258 7.26517 6.07055C7.47868 6.02252 7.68138 5.91573 7.84863 5.74848C8.31725 5.27985 8.31725 4.52006 7.84863 4.05143C7.38 3.5828 6.6202 3.5828 6.15157 4.05143ZM7.0001 10.5C7.44192 10.5 7.8001 10.1418 7.8001 9.69998C7.8001 9.25815 7.44192 8.89997 7.0001 8.89997C6.55827 8.89997 6.2001 9.25815 6.2001 9.69998C6.2001 10.1418 6.55827 10.5 7.0001 10.5Z'
                    fill='#D1D5DB'
                  />
                </svg>
              </span>
            </Tooltip>
          </div>
        </label>
      </div>

      {/* Select & Add Filters Section - Only show when toggle is enabled */}
      {AdminSettings.advanced_order_filtering && (
        <div className='arcm-mt-6'>
          <div className='arcm-flex arcm-items-center arcm-mb-4'>
            <span className='arcm-text-gray-900 arcm-text-sm arcm-font-medium'>
              {t('select_add_filters')}
            </span>
            <Tooltip
              className='arcm-text-sm'
              placement='top'
              title={t('select_filters_tooltip')}
              color='#fff'
            >
              <span className='arcm-ml-2 icon arcm-inline-flex'>
                <svg
                  xmlns='http://www.w3.org/2000/svg'
                  width='14'
                  height='13'
                  viewBox='0 0 14 13'
                  fill='none'
                >
                  <path
                    fill-rule='evenodd'
                    clip-rule='evenodd'
                    d='M13.4001 6.49998C13.4001 10.0346 10.5347 12.9 7.0001 12.9C3.46548 12.9 0.600098 10.0346 0.600098 6.49998C0.600098 2.96535 3.46548 0.0999756 7.0001 0.0999756C10.5347 0.0999756 13.4001 2.96535 13.4001 6.49998ZM6.15157 4.05143C5.91725 4.28574 5.53736 4.28574 5.30304 4.05143C5.06873 3.81711 5.06873 3.43721 5.30304 3.2029C6.2403 2.26564 7.75989 2.26564 8.69715 3.2029C9.63441 4.14016 9.63441 5.65975 8.69715 6.59701C8.38317 6.911 8.00238 7.12048 7.6001 7.22404V7.49995C7.6001 7.83132 7.33147 8.09995 7.0001 8.09995C6.66873 8.09995 6.4001 7.83132 6.4001 7.49995V7.09995C6.4001 6.52372 6.85605 6.16258 7.26517 6.07055C7.47868 6.02252 7.68138 5.91573 7.84863 5.74848C8.31725 5.27985 8.31725 4.52006 7.84863 4.05143C7.38 3.5828 6.6202 3.5828 6.15157 4.05143ZM7.0001 10.5C7.44192 10.5 7.8001 10.1418 7.8001 9.69998C7.8001 9.25815 7.44192 8.89997 7.0001 8.89997C6.55827 8.89997 6.2001 9.25815 6.2001 9.69998C6.2001 10.1418 6.55827 10.5 7.0001 10.5Z'
                    fill='#D1D5DB'
                  />
                </svg>
              </span>
            </Tooltip>
          </div>
          <div className='arcm-flex arcm-items-center arcm-gap-3'>
            <Select
              mode='multiple'
              placeholder={t('select_filters_placeholder')}
              value={selectedFiltersForDropdown}
              onChange={handleFilterDropdownChange}
              options={filterOptions.map(option => ({
                ...option,
                disabled: option.isUpcoming || activeFilters.some(f => f.filtertype === option.value)
              }))}
              className='arcm-w-1/2 [&_.ant-select-selector]:!arcm-px-3 [&_.ant-select-selector]:!arcm-py-1.5'
              style={{
                '--ant-select-item-option-selected-color': 'transparent'
              }}
              dropdownRender={menu => (
                <div>
                  <style>
                    {`
                      .ant-select-item-option-selected .ant-select-item-option-state {
                        display: none !important;
                      }
                      .ant-select-item-option .ant-select-item-option-state {
                        display: none !important;
                      }
                      .ant-select-item-option-disabled {
                        cursor: default !important;
                      }
                      .ant-select-item-option-disabled:hover {
                        background-color: transparent !important;
                      }
                    `}
                  </style>
                  {menu}
                </div>
              )}
              onSelect={(value, option) => {
                // Prevent selection of upcoming filters
                if (option.isUpcoming) {
                  return false
                }
              }}
              optionRender={option => (
                <div
                  className={`arcm-flex arcm-items-center arcm-w-full arcm-relative ${
                    option.data.isUpcoming
                      ? 'arcm-cursor-not-allowed'
                      : ''
                  }`}
                >
                  <div className='arcm-flex arcm-items-center arcm-gap-2 arcm-flex-1'>
                    <Checkbox
                      checked={selectedFiltersForDropdown.includes(option.data.value)}
                      onChange={e => {
                        e.stopPropagation()
                        if (option.data.isUpcoming) {
                          return
                        }
                        const newValues = e.target.checked
                          ? [...selectedFiltersForDropdown, option.data.value]
                          : selectedFiltersForDropdown.filter(
                              val => val !== option.data.value
                            )
                        handleFilterDropdownChange(newValues)
                      }}
                      disabled={option.data.isUpcoming || activeFilters.some(f => f.filtertype === option.value)}
                    />
                    <span
                      className={
                        option.data.isUpcoming
                          ? 'arcm-text-gray-400'
                          : ''
                      }
                    >
                      {option.data.label}
                    </span>
                  </div>

                  {option.data.isUpcoming && (
                    <div className='arcm-flex arcm-items-center arcm-justify-end arcm-flex-shrink-0'>
                      <span className='arcm-px-2 arcm-py-0.5 arcm-text-xs arcm-font-medium arcm-bg-violet-100 arcm-text-violet-800 arcm-rounded-full'>
                        {t('upcoming')}
                      </span>
                    </div>
                  )}
                </div>
              )}
              removeIcon={
                <span className='arcm-text-gray-400'>×</span>
              }
              tagRender={props => {
                const filter = filterOptions.find(
                  f => f.value === props.value
                )
                return (
                  <>
                    <span className='arcm-bg-gray-100 arcm-text-[#374151] arcm-px-2 arcm-py-1 arcm-inline-flex arcm-items-center arcm-gap-2 arcm-mb-4'>
                      <span className='arcm-flex arcm-items-center arcm-gap-2'>
                        {props.label}
                      </span>
                      <span
                        className='arcm-cursor-pointer arcm-text-[#374151] hover:arcm-text-gray-600'
                        onClick={props.onClose}
                      >
                        ×
                      </span>
                    </span>
                    <span className='arcm-mx-2 arcm-text-gray-300'></span>
                  </>
                )
              }}
            />
            <Button
              onClick={handleAddFilter}
              className='arcm-bg-white arcm-border-[#3858E9] arcm-text-[#3858E9] hover:arcm-bg-white hover:arcm-border-[#2d47c7] hover:arcm-text-[#2d47c7] arcm-px-4 arcm-py-3 arcm-rounded-lg arcm-font-medium'
              style={{
                borderWidth: '1px',
                borderStyle: 'solid',
                height: 'auto',
                minHeight: '32px',
                paddingTop: '6px',
                paddingBottom: '6px'
              }}
            >
              {t('add_filter')}
            </Button>
          </div>

          {/* Render Active Filter Sections */}
          {activeFilters.map(filter => {
            if (filter.filtertype === 'product_category') {
              return (
                <ProductCategoryFilterSection
                  key={filter.id}
                  filter={filter}
                  productCategories={productCategories}
                  loadingCategories={loadingCategories}
                  onRemove={() => handleRemoveFilter(filter.id)}
                  onUpdate={updates => handleFilterConfigChange(filter.id, updates)}
                />
              )
            }
            return null
          })}
        </div>
      )}

      {/* Remove Filter Confirmation Modal */}
      <Modal
        openModal={removeFilterModal.open}
        toggleModal={closeRemoveFilterModal}
      >
        {{
          header: (
            <h5 className='arcm-text-gray-800 arcm-text-lg arcm-font-bold'>
              {t('remove_filter_title')}
            </h5>
          ),
          body: (
            <div className='arcm-mb-6 arcm-mt-3'>
              <div className='arcm-text-gray-700 arcm-text-sm arcm-leading-6 arcm-mb-6'>
                {t('remove_filter_message')}
              </div>
              <div className='arcm-flex arcm-gap-3'>
                <button
                  onClick={confirmRemoveFilter}
                  className='arcm-text-white arcm-text-sm arcm-font-medium arcm-px-8 arcm-py-3 arcm-bg-[#F7416E] arcm-rounded-lg arcm-transition-all hover:arcm-bg-[#e23461] arcm-flex-1'
                >
                  {t('remove')}
                </button>
                <button
                  onClick={closeRemoveFilterModal}
                  className='arcm-text-gray-900 arcm-text-sm arcm-font-medium arcm-px-8 arcm-py-3 arcm-border arcm-border-gray-200 arcm-rounded-lg arcm-bg-white arcm-transition-all hover:arcm-bg-[#F1F5F9] arcm-flex-1'
                >
                  {t('cancel')}
                </button>
              </div>
            </div>
          )
        }}
      </Modal>
    </>
  )
}

// Product Category Filter Section Component
const ProductCategoryFilterSection = ({
  filter,
  productCategories,
  loadingCategories,
  onRemove,
  onUpdate
}) => {
  const { t } = useTranslations()

  const archiveConditionOptions = [
    {
      value: 'at_least_one',
      label: t('archive_at_least_one')
    },
    {
      value: 'every_product',
      label: t('archive_every_product')
    },
    {
      value: 'one_from_each',
      label: t('archive_one_from_each')
    },
    {
      value: 'exactly_selected',
      label: t('archive_exactly_selected')
    }
  ]

  console.log("filter", filter);

  const handleCategoryChange = values => {
    onUpdate({ selectedvalues: values })
  }

  const handleArchiveConditionChange = e => {
    onUpdate({ archivecondition: e.target.value })
  }

  // Convert product categories to Select options format
  const categoryOptions = productCategories.map(cat => ({
    value: cat.id,
    label: cat.name
  }))

  const getSelectedCategories = (categoryOptions) => {
    return filter.selectedvalues.map(val => categoryOptions.find(cat => cat.value === parseInt(val))) || []
  }

  return (
    <div className='arcm-mt-6 arcm-bg-gray-50 arcm-border arcm-border-gray-200 arcm-rounded-lg arcm-p-4 arcm-w-1/2'>
      {/* Header */}
      <div className='arcm-flex arcm-items-center arcm-justify-between arcm-mb-4'>
        <h3 className='arcm-text-gray-900 arcm-text-sm arcm-font-bold arcm-m-0'>
          {t('filter_by_product_category')}
        </h3>
        <button
          onClick={onRemove}
          className='arcm-cursor-pointer arcm-text-gray-400 hover:arcm-text-gray-600 arcm-bg-transparent arcm-border-none arcm-p-0 arcm-w-5 arcm-h-5 arcm-flex arcm-items-center arcm-justify-center'
          aria-label={t('remove')}
        >
          <svg
            xmlns='http://www.w3.org/2000/svg'
            width='14'
            height='14'
            viewBox='0 0 14 14'
            fill='none'
          >
            <path
              d='M13 1L1 13M1 1L13 13'
              stroke='currentColor'
              strokeWidth='2'
              strokeLinecap='round'
            />
          </svg>
        </button>
      </div>

      {/* Category Selection */}
      <div className='arcm-mb-4'>
        <label className='arcm-block arcm-text-gray-700 arcm-text-sm arcm-font-medium arcm-mb-2'>
          {t('select_categories_placeholder')}
        </label>
        <Select
          mode='multiple'
          placeholder={loadingCategories ? t('loading_categories') : t('select_categories')}
          value={getSelectedCategories(categoryOptions)}
          onChange={handleCategoryChange}
          options={categoryOptions}
          loading={loadingCategories}
          disabled={loadingCategories}
          className='arcm-w-full [&_.ant-select-selector]:!arcm-px-3 [&_.ant-select-selector]:!arcm-py-1.5'
          style={{
            '--ant-select-item-option-selected-color': 'transparent'
          }}
          removeIcon={<span className='arcm-text-gray-400'>×</span>}
          notFoundContent={loadingCategories ? t('loading') : t('no_categories_found')}
          tagRender={props => (
            <>
              <span className='arcm-bg-gray-100 arcm-text-[#374151] arcm-px-2 arcm-py-1 arcm-inline-flex arcm-items-center arcm-gap-2'>
                <span>{props.label}</span>
                <span
                  className='arcm-cursor-pointer arcm-text-[#374151] hover:arcm-text-gray-600'
                  onClick={props.onClose}
                >
                  ×
                </span>
              </span>
              <span className='arcm-mx-2 arcm-text-gray-300'></span>
            </>
          )}
        />
      </div>

      {/* Archive Condition Radio Buttons */}
      <div>
        <label className='arcm-block arcm-text-gray-700 arcm-text-sm arcm-font-medium arcm-mb-3'>
          {t('archive_if')}
        </label>
        <Radio.Group
          value={filter.archivecondition || 'at_least_one'}
          onChange={handleArchiveConditionChange}
          className='arcm-w-full'
        >
          <div className='arcm-space-y-3'>
            {archiveConditionOptions.map(option => {
              // Define tooltip content for each option
              const getTooltipContent = (value) => {
                switch (value) {
                  case 'at_least_one':
                    return (
                      <div style={{ padding: '12px' }}>
                        <div style={{ marginBottom: '12px', fontWeight: 'bold', lineHeight: '1.5' }}>
                          {t('archive_rule_at_least_one')}
                        </div>
                        <div style={{ marginBottom: '12px', lineHeight: '1.5' }}>
                          <strong>{t('selected_categories')}</strong> {t('example_categories_placeholder')}
                        </div>
                        <div style={{ marginBottom: '8px', fontWeight: 'bold' }}>
                          <strong>{t('archived_order_examples')}</strong>
                        </div>
                        <ul style={{ 
                          marginTop: '8px', 
                          paddingLeft: '24px', 
                          marginBottom: '0',
                          listStyleType: 'disc',
                          lineHeight: '1.6'
                        }}>
                          <li style={{ marginBottom: '6px', paddingLeft: '4px' }}>T-shirt + Book → {t('archived_label')} {t('example_t_shirt_matches')}</li>
                          <li style={{ marginBottom: '6px', paddingLeft: '4px' }}>Gadget + Shoes → {t('archived_label')}</li>
                          <li style={{ marginBottom: '0', paddingLeft: '4px' }}>Book + Accessories → {t('not_archived_label')} {t('example_no_product_matches')}</li>
                        </ul>
                      </div>
                    )
                  case 'every_product':
                    return (
                      <div style={{ padding: '12px' }}>
                        <div style={{ marginBottom: '12px', fontWeight: 'bold', lineHeight: '1.5' }}>
                          {t('archive_rule_every_product')}
                        </div>
                        <div style={{ marginBottom: '12px', lineHeight: '1.5' }}>
                          <strong>{t('selected_categories')}</strong> {t('example_categories_placeholder')}
                        </div>
                        <div style={{ marginBottom: '8px', fontWeight: 'bold' }}>
                          <strong>{t('archived_order_examples')}</strong>
                        </div>
                        <ul style={{ 
                          marginTop: '8px', 
                          paddingLeft: '24px', 
                          marginBottom: '0',
                          listStyleType: 'disc',
                          lineHeight: '1.6'
                        }}>
                          <li style={{ marginBottom: '6px', paddingLeft: '4px' }}>T-shirt + Shoes → {t('archived_label')} {t('example_all_products_match')}</li>
                          <li style={{ marginBottom: '6px', paddingLeft: '4px' }}>Gadget + T-shirt → {t('archived_label')}</li>
                          <li style={{ marginBottom: '6px', paddingLeft: '4px' }}>T-shirt + Book → {t('not_archived_label')} {t('example_book_not_in_categories')}</li>
                          <li style={{ marginBottom: '0', paddingLeft: '4px' }}>Gadget + Shoes + Accessories → {t('not_archived_label')} {t('example_accessories_breaks_rule')}</li>
                        </ul>
                      </div>
                    )
                  case 'one_from_each':
                    return (
                      <div style={{ padding: '12px' }}>
                        <div style={{ marginBottom: '12px', fontWeight: 'bold', lineHeight: '1.5' }}>
                          {t('archive_rule_one_from_each')}
                        </div>
                        <div style={{ marginBottom: '12px', lineHeight: '1.5' }}>
                          <strong>{t('selected_categories')}</strong> {t('example_categories_placeholder')}
                        </div>
                        <div style={{ marginBottom: '8px', fontWeight: 'bold' }}>
                          <strong>{t('archived_order_examples')}</strong>
                        </div>
                        <ul style={{ 
                          marginTop: '8px', 
                          paddingLeft: '24px', 
                          marginBottom: '0',
                          listStyleType: 'disc',
                          lineHeight: '1.6'
                        }}>
                          <li style={{ marginBottom: '6px', paddingLeft: '4px' }}><strong>T-shirt + Shoes + Gadget → {t('archived_label')}</strong> {t('example_all_categories_included')}</li>
                          <li style={{ marginBottom: '6px', paddingLeft: '4px' }}><strong>T-shirt + Shoes + Gadget + Book → {t('archived_label')}</strong> {t('example_extra_book_doesnt_break')}</li>
                          <li style={{ marginBottom: '6px', paddingLeft: '4px' }}><strong>T-shirt + Gadget → {t('not_archived_label')}</strong> {t('example_shoes_missing')}</li>
                          <li style={{ marginBottom: '0', paddingLeft: '4px' }}><strong>Shoes + Book → {t('not_archived_label')}</strong> {t('example_t_shirt_gadget_missing')}</li>
                        </ul>
                      </div>
                    )
                  case 'exactly_selected':
                    return (
                      <div style={{ padding: '12px' }}>
                        <div style={{ marginBottom: '12px', fontWeight: 'bold', lineHeight: '1.5' }}>
                          {t('archive_rule_exactly_selected')}
                        </div>
                        <div style={{ marginBottom: '12px', lineHeight: '1.5' }}>
                          <strong>{t('selected_categories')}</strong> {t('example_categories_placeholder')}
                        </div>
                        <div style={{ marginBottom: '8px', fontWeight: 'bold' }}>
                          <strong>{t('archived_orders_examples')}</strong>
                        </div>
                        <ul style={{ 
                          marginTop: '8px', 
                          paddingLeft: '24px', 
                          marginBottom: '0',
                          listStyleType: 'disc',
                          lineHeight: '1.6'
                        }}>
                          <li style={{ marginBottom: '6px', paddingLeft: '4px' }}>T-shirt + Shoes + Gadget → {t('archived_label')} {t('example_matches_exactly')}</li>
                          <li style={{ marginBottom: '6px', paddingLeft: '4px' }}>T-shirt + Shoes + Gadget + Book → {t('not_archived_label')} {t('example_extra_book_breaks_rule')}</li>
                          <li style={{ marginBottom: '6px', paddingLeft: '4px' }}>T-shirt + Gadget → {t('not_archived_label')} {t('example_shoes_missing')}</li>
                          <li style={{ marginBottom: '0', paddingLeft: '4px' }}>T-shirt + Shoes + Accessories → {t('not_archived_label')} {t('example_accessories_not_selected')}</li>
                        </ul>
                      </div>
                    )
                  default:
                    return t('tooltip_info_condition')
                }
              }

              return (
                <div key={option.value} className='arcm-flex arcm-items-start arcm-gap-2'>
                  <Radio value={option.value} className='arcm-mt-0.5'>
                    <span className='arcm-text-gray-700 arcm-text-sm'>
                      {option.label}
                    </span>
                  </Radio>
                  <Tooltip
                    className='arcm-text-sm'
                    placement='top'
                    title={getTooltipContent(option.value)}
                    color='#fff'
                    overlayStyle={{ maxWidth: '400px' }}
                  >
                    <span className='arcm-ml-1 icon arcm-inline-flex arcm-mt-0.5'>
                      <svg
                        xmlns='http://www.w3.org/2000/svg'
                        width='14'
                        height='13'
                        viewBox='0 0 14 13'
                        fill='none'
                      >
                        <path
                          fill-rule='evenodd'
                          clip-rule='evenodd'
                          d='M13.4001 6.49998C13.4001 10.0346 10.5347 12.9 7.0001 12.9C3.46548 12.9 0.600098 10.0346 0.600098 6.49998C0.600098 2.96535 3.46548 0.0999756 7.0001 0.0999756C10.5347 0.0999756 13.4001 2.96535 13.4001 6.49998ZM6.15157 4.05143C5.91725 4.28574 5.53736 4.28574 5.30304 4.05143C5.06873 3.81711 5.06873 3.43721 5.30304 3.2029C6.2403 2.26564 7.75989 2.26564 8.69715 3.2029C9.63441 4.14016 9.63441 5.65975 8.69715 6.59701C8.38317 6.911 8.00238 7.12048 7.6001 7.22404V7.49995C7.6001 7.83132 7.33147 8.09995 7.0001 8.09995C6.66873 8.09995 6.4001 7.83132 6.4001 7.49995V7.09995C6.4001 6.52372 6.85605 6.16258 7.26517 6.07055C7.47868 6.02252 7.68138 5.91573 7.84863 5.74848C8.31725 5.27985 8.31725 4.52006 7.84863 4.05143C7.38 3.5828 6.6202 3.5828 6.15157 4.05143ZM7.0001 10.5C7.44192 10.5 7.8001 10.1418 7.8001 9.69998C7.8001 9.25815 7.44192 8.89997 7.0001 8.89997C6.55827 8.89997 6.2001 9.25815 6.2001 9.69998C6.2001 10.1418 6.55827 10.5 7.0001 10.5Z'
                          fill='#D1D5DB'
                        />
                      </svg>
                    </span>
                  </Tooltip>
                </div>
              )
            })}
          </div>
        </Radio.Group>
      </div>
    </div>
  )
}

export default AdvancedOrderFiltering