import { useCallback, useEffect, useRef, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Form, Checkbox, Radio, Divider, InputNumber } from 'antd';
import { ArrowRightOutlined } from '@ant-design/icons';
import FormHeader from '../PageComponents/FormHeader.jsx';
import Buttons from '../../Components/Forms/Buttons.jsx';
import { Messages } from '../../Components/Notifications/Messages';
import {
  changeBreadCrumb,
  getEmpAccess,
} from '../../Features/AppPage/CenterPage.js';
import {
  getApplicationDtlsByAppId,
  getPreferenceAppNames02,
  gettableData,
  postPreferenceAppNames,
  settingDataSelector,
} from '../../Features/PreferenceMaster/PreferenceMaster.js';
import { getSession } from '../../Services/Others.js';
import { useAuth } from '../../AuthContext.jsx';
import { ApplicationPreferences } from '../../Features/BrachLogin/BranchLogin.js';
import './PreferenceList.scss';
import { InputField } from '../../Components/Forms/InputField.jsx';
import { changePreferenceData } from '../../Features/BookingScreen/BookingData/BookingData.js';

const PreferenceList = ({ setting = false }) => {
  const { SadminuserAccess, featureaddDetails } = useAuth();
  const dispatch = useDispatch();
  const formRef = useRef();

  const CompId = getSession('CompId');
  const BranchId = getSession('BranchId');
  const AppId = getSession('AppId');
  const UserId = getSession('UserId');
  const UserType = getSession('UserType');
  const SalesReport = getSession('SalesReport');
  const [open, setOpen] = useState(false);
  const [applicationValue, setApplicationValue] = useState(null);
  const [applicationName, setApplicationName] = useState(null);
  const [messageType, setMessageType] = useState(null);
  const [messageData, setMessageData] = useState(null);
  const [activeSection, setActiveSection] = useState('general');
  const [empData, setEmpData] = useState();
  const [preferenceConfigs, setPreferenceConfigs] = useState([]);

  const [addnewAccess, setAddNewAccess] = useState(true);

  const tableValue = useSelector(settingDataSelector);
  const appPreferences = useSelector(ApplicationPreferences);
  const bookingTypePreference = appPreferences?.find(
    (pre) => pre?.PreferredCatName === 'Booking Type'
  )?.PreferenceCatDetails;
  const dinePreference = bookingTypePreference?.find(
    (type) =>
      type?.PreferredSubCatName?.toLowerCase() === 'dine in' &&
      type?.PreferredStatus === 'Y'
  );

  const settingsList = tableValue[0]?.SettingDtlDetails ?? preferenceConfigs;

  const allSettingsMap = {};
  settingsList?.forEach(
    ({ SettingIdName, SettingValue, SettingCount, SettingTime, Comments }) => {
      allSettingsMap[SettingIdName?.toLowerCase()] = {
        value: SettingValue,
        count: SettingCount,
        time: SettingTime?.split(' ')?.[0],
        comments: Comments,
      };
    }
  );

  console.log(featureaddDetails, 'featureaddDetails');

  const buildInitialValues = () => ({
    dashboard: allSettingsMap['dashboard']?.value === 'Y',
    shortcutkeys: allSettingsMap['shortcutkeys']?.value === 'Y',
    autoreceivestock: allSettingsMap['autoreceivestock']?.value === 'Y',
    salespageaskiosk: allSettingsMap['salespageaskiosk']?.value === 'Y',
    kioskotp: allSettingsMap['kioskotp']?.value === 'Y',
    decimal: allSettingsMap['decimal']?.value === 'Y',
    enabledModules: [
      ...(allSettingsMap['dinein']?.value === 'Y' ? ['dinein'] : []),
      ...(allSettingsMap['estimation']?.value === 'Y' ? ['estimation'] : []),
    ],
    searchfocus: allSettingsMap['searchfocus']?.value === 'Y',
    addproductcard: allSettingsMap['addproductcard']?.value === 'Y',
    enabledFeatures: [
      ...(allSettingsMap['parking']?.value === 'Y' ? ['parking'] : []),
      ...(allSettingsMap['offer']?.value === 'Y' ? ['offer'] : []),
    ],
    stockselection: allSettingsMap['stockselection']?.value === 'Y',
    weightasquantity: allSettingsMap['weightasquantity']?.value === 'Y',
    expiredselection: allSettingsMap['expiredselection']?.value === 'Y',
    salesmode: allSettingsMap['sales mode']?.value === 'Y',
    retailshortname: allSettingsMap['retailshortname']?.comments || 'RT',
    wholesaleshortname: allSettingsMap['wholesaleshortname']?.comments || 'WS',
    billitemsorder: allSettingsMap['billitemsorder']?.value === 'Y',
    preorderpricechange: allSettingsMap['preorderpricechange']?.value === 'Y',
    quantityrestriction:
      allSettingsMap['overalllimit']?.value === 'Y' ||
      allSettingsMap['itemwiselimit']?.value === 'Y',
    quantityrestrictiontype:
      allSettingsMap['overalllimit']?.value === 'Y'
        ? 'overall'
        : allSettingsMap['itemwiselimit']?.value === 'Y'
          ? 'itemwise'
          : 'overall',
    kiosktimelimit:
      allSettingsMap['hours']?.value === 'Y' ||
      allSettingsMap['minutes']?.value === 'Y',
    kiosktimelimittype:
      allSettingsMap['hours']?.value === 'Y'
        ? 'hours'
        : allSettingsMap['minutes']?.value === 'Y'
          ? 'minutes'
          : 'minutes',
    maxquantity:
      allSettingsMap['overalllimit']?.value === 'Y'
        ? allSettingsMap['overalllimit']?.count || 1
        : allSettingsMap['itemwiselimit']?.value === 'Y'
          ? allSettingsMap['itemwiselimit']?.count || 1
          : 1,
    maxtime:
      allSettingsMap['hours']?.value === 'Y'
        ? allSettingsMap['hours']?.time
          ? parseFloat(allSettingsMap['hours']?.time / 60)
          : 0.5
        : allSettingsMap['minutes']?.value === 'Y'
          ? parseFloat(allSettingsMap['minutes']?.time || 30)
          : 30,
    billOption: ['whatsapp', 'sms', 'email'].some(
      (k) => allSettingsMap[k]?.value === 'Y'
    )
      ? 'pdf'
      : 'print',
    pdfSendOptions: ['whatsapp', 'email', 'sms'].filter(
      (k) => allSettingsMap[k]?.value === 'Y'
    ),
    tokenonly: allSettingsMap['tokenonly']?.value === 'Y',
    allproductindividualtoken:
      allSettingsMap['allproductindividualtoken']?.value === 'Y',
    printOptions: ['printuom', 'printlogo', 'printgreetings'].filter(
      (k) => allSettingsMap[k]?.value === 'Y'
    ),
    mobilea4: allSettingsMap['mobilea4']?.value === 'Y',
    estimateSettings: [
      ...(allSettingsMap['estimateprintheader']?.value === 'Y'
        ? ['estimateprintheader']
        : []),
      ...(allSettingsMap['estimatetitle']?.value === 'Y'
        ? ['estimatetitle']
        : []),
    ],
    scanlayout: allSettingsMap['scanlayout']?.value === 'Y',
    verifyproduct: allSettingsMap['verifyproduct']?.value === 'Y',
    imeidetails: allSettingsMap['imeidetails']?.value === 'Y',
    customisedbillnumber: allSettingsMap['customisedbillnumber']?.value === 'Y',
    upiqr: allSettingsMap['upiqr']?.value === 'Y',
    itemdiscount: allSettingsMap['itemdiscount']?.value === 'Y',
    lowstockreport: allSettingsMap['lowstockreport']?.value === 'Y',
    weeklysalesreport: allSettingsMap['weeklysalesreport']?.value === 'Y',
    notificationblink: allSettingsMap['notificationblink']?.value === 'Y',
    onlineindivdualslots: allSettingsMap['onlineindivdualslots']?.value === 'Y',
    editbill: allSettingsMap['editbill']?.value === 'Y',
    notification: [
      ...(allSettingsMap['onbilltime']?.value === 'Y' ? ['onbilltime'] : []),
      ...(allSettingsMap['1daybefore']?.value === 'Y' ? ['1daybefore'] : []),
      ...(allSettingsMap['1hourbefore']?.value === 'Y' ? ['1hourbefore'] : []),
    ],
    BookingOptionsandmethod: [
      ...(allSettingsMap['allow individual booking']?.value === 'Y'
        ? ['allow individual booking']
        : []),
      ...(allSettingsMap['single booking only']?.value === 'Y'
        ? ['single booking only']
        : []),
    ],
  });

  const [initialValues, setInitialValues] = useState();
  console.log(initialValues, 'initialValues');
  useEffect(() => {
    dispatch(
      changeBreadCrumb({
        items: [
          { name: 'Home', link: `${import.meta.env.BASE_URL}app-page/home` },
        ],
      })
    );
    fetchTableData();

    const centerPageSub = document.querySelector('.centerPageSub');
    if (centerPageSub) {
      centerPageSub.style.overflow = 'hidden';
    }

    return () => {
      if (centerPageSub) {
        centerPageSub.style.overflow = '';
      }
    };
  }, []);

  useEffect(() => {
    if (settingsList) {
      const built = buildInitialValues();
      setInitialValues(built);
      console.log(built, 'built');
      formRef.current?.setFieldsValue(built);
    }
  }, [settingsList]);

  useEffect(() => {
    if (UserType === 'Employee') fetchEmpAccess();
  }, [UserType]);

  useEffect(() => {
    let hasAccess =
      ['Admin', 'Super Admin'].includes(UserType) ||
      (UserType === 'Employee' && empData?.AddAccess === 'Y') ||
      (UserType === 'Super Admin User' &&
        SadminuserAccess?.find((e) => e.MenuName === 'Preference')
          ?.AddAccess === 'Y');
    setAddNewAccess(!hasAccess);
  }, [empData, SadminuserAccess, UserType]);

  useEffect(() => {
    if (open) applicationDropdownData();
  }, [open]);

  useEffect(() => {
    fetchTableData();
    if (tableValue?.length === 0) {
      getPreferenceConfigs();
    }
  }, []);

  useEffect(() => {
    const container = document.querySelector('.preferences-list');
    if (!container) return;

    const handleScroll = () => {
      const sections = [
        'general',
        'notifications',
        'sales-page',
        'print-preferences',
      ];
      const containerTop = container.scrollTop;

      for (const sectionId of sections) {
        const element = document.getElementById(sectionId);
        if (element) {
          const elementTop = element.offsetTop - container.offsetTop;
          const elementBottom = elementTop + element.offsetHeight;

          if (
            elementTop <= containerTop + 100 &&
            elementBottom > containerTop
          ) {
            setActiveSection(sectionId);
            break;
          }
        }
      }
    };

    container.addEventListener('scroll', handleScroll);
    return () => container.removeEventListener('scroll', handleScroll);
  }, []);

  const getPreferenceConfigs = async () => {
    const res = await dispatch(getPreferenceAppNames02())?.unwrap();
    if (res?.data?.statusCode === 1) {
      setPreferenceConfigs(
        res?.data?.data?.map((i) => ({
          SettingIdName: i.ConfigName,
          SettingId: i.ConfigId,
          Comments: i.Comments || '',
          SettingValue: 'N',
        }))
      );
    }
  };

  const fetchEmpAccess = async () => {
    const data = { CompId, BranchId, AppId, EmpId: UserId };
    const response = await dispatch(getEmpAccess(data)).unwrap();
    const access = response?.data?.data?.[0]?.EmpAccessDetails?.find(
      (i) => i.ConfigName === 'Preference'
    );
    setEmpData(access);
  };

  const applicationDropdownData = async () => {
    const res = await dispatch(getApplicationDtlsByAppId({ AppId })).unwrap();
    if (res?.data?.statusCode === 1) {
      setApplicationName(res?.data?.data?.[0]?.AppName);
      await fetchTableData();
    }
  };

  const fetchTableData = async () => {
    const res = await dispatch(gettableData({ CompId, BranchId, AppId })).unwrap();
    if (res?.data?.statusCode === 1 && res?.data?.data?.length > 0) {
      await dispatch(changePreferenceData(res?.data?.data));
    } else {
      await dispatch(changePreferenceData([]));
    }
    handleApplicationChange(AppId);
  };

  const handleApplicationChange = async (value) => {
    setApplicationValue(value);
    formRef.current?.setFieldsValue({ AppId: value });
  };

  const onComplete = useCallback(() => {
    setMessageData(null);
    setMessageType(null);
  }, []);

  const handleMenuClick = (e, targetId) => {
    e.preventDefault();
    setActiveSection(targetId);
    const container = document.querySelector('.preferences-list');
    const target = document.getElementById(targetId);

    if (container && target) {
      const containerTop = container.offsetTop;
      const targetTop = target.offsetTop;
      const scrollPosition = targetTop - containerTop;

      container.scrollTo({
        top: scrollPosition,
        behavior: 'smooth',
      });
    }
  };

  const handleSubmit = async () => {
    const values = formRef.current.getFieldsValue();
    const salesMode = values.salesmode;
    console.log('Sales Mode:', values.salesmode);
    console.log('Retail Short Name:', values.retailshortname);
    console.log('Wholesale Short Name:', values.wholesaleshortname);
    const settings = settingsList || [];
    console.log(values, 'values');
    const updatedSettings = settings.map((setting) => {
      const key = setting.SettingIdName.toLowerCase();
      const boolValues = {
        dashboard: values.dashboard,
        shortcutkeys: values.shortcutkeys,
        autoreceivestock: values.autoreceivestock,
        salespageaskiosk: values.salespageaskiosk,
        kioskotp: values.kioskotp,
        decimal: values.decimal,
        searchfocus: values.searchfocus,
        addproductcard: values.addproductcard,
        stockselection: values.stockselection,
        weightasquantity: values.weightasquantity,
        expiredselection: values.expiredselection,
        'sales mode': values?.['salesmode'],

        billitemsorder: values.billitemsorder,
        preorderpricechange: values.preorderpricechange,
        tokenonly: values.tokenonly,
        allproductindividualtoken: values.allproductindividualtoken,
        mobilea4: values.mobilea4,
        scanlayout: values.scanlayout,
        verifyproduct: values.verifyproduct,
        imeidetails: values.imeidetails,
        customisedbillnumber: values.customisedbillnumber,
        upiqr: values.upiqr,
        itemdiscount: values.itemdiscount,
        lowstockreport: values.lowstockreport,
        weeklysalesreport: values.weeklysalesreport,
        notificationblink: values.notificationblink,
        editbill: values.editbill,
        overalllimit:
          values.quantityrestriction &&
          values.quantityrestrictiontype === 'overall',
        itemwiselimit:
          values.quantityrestriction &&
          values.quantityrestrictiontype === 'itemwise',
        hours: values.kiosktimelimit && values.kiosktimelimittype === 'hours',
        minutes:
          values.kiosktimelimit && values.kiosktimelimittype === 'minutes',
      };

      const arrayValues = {
        dinein: values.enabledModules,
        estimation: values.enabledModules,
        parking: values.enabledFeatures,
        estimateprintheader: values.estimateSettings,
        estimatetitle: values.estimateSettings,
        offer: values.enabledFeatures,
        whatsapp: values.pdfSendOptions,
        sms: values.pdfSendOptions,
        email: values.pdfSendOptions,
        printuom: values.printOptions,
        printlogo: values.printOptions,
        printgreetings: values.printOptions,
        onbilltime: values.notification,
        '1daybefore': values.notification,
        '1hourbefore': values.notification,
        'allow individual booking': values['BookingOptionsandmethod'],
        'single booking only': values['BookingOptionsandmethod'],
      };

      const isChecked =
        key in boolValues
          ? boolValues[key]
          : (arrayValues[key]?.includes(key) ?? false);

      return {
        ConfigName: setting.SettingIdName,
        SettingId: setting.SettingId,

        Comments:
          key === 'retailshortname'
            ? values.retailshortname || ''
            : key === 'wholesaleshortname'
              ? values.wholesaleshortname || ''
              : setting.Comments || '',

        SettingValue:
          key === 'retailshortname' || key === 'wholesaleshortname'
            ? salesMode
              ? 'Y'
              : 'N'
            : isChecked
              ? 'Y'
              : 'N',

        SettingCount:
          (key === 'overalllimit' || key === 'itemwiselimit') && isChecked
            ? parseFloat(values.maxquantity) || null
            : null,

        SettingTime:
          key === 'hours' && isChecked
            ? (parseFloat(values.maxtime) * 60).toFixed(2) + ' Minutes'
            : key === 'minutes' && isChecked
              ? parseFloat(values.maxtime).toFixed(2) + ' Minutes'
              : null,
      };
    });

    const payload = {
      CompId,
      BranchId,
      CreatedBy: UserId,
      AppId,
      SettingDtlDetails: updatedSettings,
    };
    const response = await dispatch(postPreferenceAppNames(payload)).unwrap();

    if (response?.data?.statusCode === 1) {
      setMessageType('success');
      setMessageData(response?.data?.response);
      await fetchTableData();
    } else {
      setMessageType('error');
      setMessageData(response?.data?.response);
    }
  };

  const renderCheckbox = (name, label) =>
    allSettingsMap[name] !== undefined && (
      <Form.Item name={name} label={label} valuePropName="checked">
        <Checkbox>Yes</Checkbox>
      </Form.Item>
    );

  return (
    <>
      <Messages
        messageType={messageType}
        messageData={messageData}
        onComplete={onComplete}
      />
      <div className="userPageTable" style={{ overflow: 'hidden' }}>
        <FormHeader title="Preference" />
        <div className={`menu-and-preferences ${setting ? 'preferences-menu' : ''}`}>
          <div className={`menu-section ${setting ? 'modal-menu' : ''}`}>
            <div
              onClick={(e) => handleMenuClick(e, 'general')}
              style={{
                backgroundColor:
                  activeSection === 'general' ? '#e6f3ff' : '#f4f4f4',
                color: activeSection === 'general' ? '#1890ff' : '#23378a',
                borderRight:
                  activeSection === 'general' ? '2px solid #1890ff' : 'none',
                transform:
                  activeSection === 'general' ? 'scale(1.07)' : 'scale(1)',
              }}
            >
              General
            </div>
            <div
              onClick={(e) => handleMenuClick(e, 'notifications')}
              style={{
                backgroundColor:
                  activeSection === 'notifications' ? '#e6f3ff' : '#f4f4f4',
                color:
                  activeSection === 'notifications' ? '#1890ff' : '#23378a',
                borderRight:
                  activeSection === 'notifications'
                    ? '2px solid #1890ff'
                    : 'none',
                transform:
                  activeSection === 'notifications'
                    ? 'scale(1.07)'
                    : 'scale(1)',
              }}
            >
              Notifications
            </div>
            <div
              onClick={(e) => handleMenuClick(e, 'sales-page')}
              style={{
                backgroundColor:
                  activeSection === 'sales-page' ? '#e6f3ff' : '#f4f4f4',
                color: activeSection === 'sales-page' ? '#1890ff' : '#23378a',
                borderRight:
                  activeSection === 'sales-page' ? '2px solid #1890ff' : 'none',
                transform:
                  activeSection === 'sales-page' ? 'scale(1.07)' : 'scale(1)',
              }}
            >
              Sales Page
            </div>
            <div
              onClick={(e) => handleMenuClick(e, 'print-preferences')}
              style={{
                backgroundColor:
                  activeSection === 'print-preferences' ? '#e6f3ff' : '#f4f4f4',
                color:
                  activeSection === 'print-preferences' ? '#1890ff' : '#23378a',
                borderRight:
                  activeSection === 'print-preferences'
                    ? '2px solid #1890ff'
                    : 'none',
                transform:
                  activeSection === 'print-preferences'
                    ? 'scale(1.07)'
                    : 'scale(1)',
              }}
            >
              Print Preferences
            </div>
          </div>

          <Form
            key={JSON.stringify(initialValues)}
            ref={formRef}
            layout="vertical"
            onFinish={handleSubmit}
            initialValues={initialValues}
            className="preferences-list"
          >
            <div
              style={{
                backgroundColor:
                  activeSection === 'general' ? '#e6f3ff' : 'transparent',
                padding: '16px',
                borderRadius: '10px',
                transition: 'background-color 0.3s ease',
              }}
            >
              <div className="preference-headers" id="general">
                General
              </div>
              {renderCheckbox(
                'dashboard',
                'Stay on the Dashboard when you open the app?'
              )}
              {renderCheckbox(
                'autoreceivestock',
                'Items received from godown. Add to stock Automatically ?'
              )}
              {renderCheckbox(
                'decimal',
                'Display values with 2 decimal places throughout the app?'
              )}
              {renderCheckbox(
                'salespageaskiosk',
                'Do you want to open sales page as kiosk layout?'
              )}
              {(allSettingsMap['onlineindividualslots'] !== undefined ||
                allSettingsMap['allow individual booking'] !== undefined ||
                allSettingsMap['single booking only'] !== undefined) && (
                  <Form.Item
                    name="BookingOptionsandmethod"
                    label="Individual Selling Setup"
                  >
                    <Checkbox.Group>
                      {allSettingsMap['allow individual booking'] !==
                        undefined && (
                          <Checkbox value="allow individual booking">
                            Allow online individual booking
                          </Checkbox>
                        )}
                      {allSettingsMap['single booking only'] !== undefined && (
                        <Checkbox value="single booking only">
                          Allow single booking Only
                        </Checkbox>
                      )}
                    </Checkbox.Group>
                  </Form.Item>
                )}
              {featureaddDetails?.find(
                (item) =>
                  item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
              ) &&
                renderCheckbox(
                  'kioskotp',
                  'Enable OTP verification for Kiosk Orders?'
                )}
              {featureaddDetails?.find(
                (item) =>
                  item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
              ) &&
                (allSettingsMap['hours'] !== undefined ||
                  allSettingsMap['minutes'] !== undefined) && (
                  <>
                    <Form.Item
                      name="kiosktimelimit"
                      label="Restrict orders for the same customer within a time limit?"
                      valuePropName="checked"
                    >
                      <Checkbox>Yes</Checkbox>
                    </Form.Item>
                    <Form.Item
                      noStyle
                      shouldUpdate={(prev, curr) =>
                        prev.kiosktimelimit !== curr.kiosktimelimit
                      }
                    >
                      {({ getFieldValue }) =>
                        getFieldValue('kiosktimelimit') && (
                          <>
                            <Form.Item
                              name="kiosktimelimittype"
                              label="How would you like to apply the time restriction?"
                            >
                              <Radio.Group
                                onChange={() =>
                                  formRef.current?.setFieldsValue({
                                    maxtime: undefined,
                                  })
                                }
                              >
                                {allSettingsMap['minutes'] !== undefined && (
                                  <Radio value="minutes">Minutes</Radio>
                                )}
                                {allSettingsMap['hours'] !== undefined && (
                                  <Radio value="hours">Hours</Radio>
                                )}
                              </Radio.Group>
                            </Form.Item>

                            <Form.Item
                              noStyle
                              shouldUpdate={(prev, curr) =>
                                prev.kiosktimelimittype !==
                                curr.kiosktimelimittype
                              }
                            >
                              {({ getFieldValue }) => {
                                const type =
                                  getFieldValue('kiosktimelimittype');

                                const isHours = type === 'hours';

                                return (
                                  <Form.Item
                                    name="maxtime"
                                    label={`Maximum Time Limit (${isHours ? 'Hours' : 'Minutes'}):`}
                                    rules={[
                                      {
                                        required: true,
                                        message: 'Please enter maximum time',
                                      },
                                      {
                                        type: 'number',
                                        min: isHours ? 0.25 : 1,
                                        message: isHours
                                          ? 'Minimum allowed is 0.25 hours'
                                          : 'Minimum allowed is 1 minute',
                                      },
                                    ]}
                                  >
                                    <InputNumber
                                      min={isHours ? 0.25 : 1}
                                      step={isHours ? 0.25 : 1}
                                      precision={isHours ? 2 : 0}
                                      style={{ width: '200px' }}
                                    />
                                  </Form.Item>
                                );
                              }}
                            </Form.Item>
                          </>
                        )
                      }
                    </Form.Item>
                  </>
                )}
            </div>

            <Divider />
            <div
              style={{
                backgroundColor:
                  activeSection === 'notifications' ? '#e6f3ff' : 'transparent',
                padding: '16px',
                borderRadius: '10px',
                transition: 'background-color 0.3s ease',
              }}
            >
              <div className="preference-headers" id="notifications">
                Notifications{' '}
              </div>

              {renderCheckbox(
                'lowstockreport',
                'Do you want to receive a low-stock report every day?'
              )}
              {renderCheckbox(
                'weeklysalesreport',
                'Do you want to receive a Weekly Sales Report?'
              )}
              {renderCheckbox(
                'notificationblink',
                'Do you want to enable the low-stock blink notification?'
              )}
              {(allSettingsMap['onbilltime'] !== undefined ||
                allSettingsMap['1daybefore'] !== undefined ||
                allSettingsMap['1hourbefore'] !== undefined) && (
                  <Form.Item
                    name="notification"
                    label="Choose notification timing:"
                  >
                    <Checkbox.Group>
                      {allSettingsMap['onbilltime'] !== undefined && (
                        <Checkbox value="onbilltime">On Bill Time</Checkbox>
                      )}
                      {allSettingsMap['1daybefore'] !== undefined && (
                        <Checkbox value="1daybefore">1 Day Before</Checkbox>
                      )}
                      {allSettingsMap['1hourbefore'] !== undefined && (
                        <Checkbox value="1hourbefore">1 Hour Before</Checkbox>
                      )}
                    </Checkbox.Group>
                  </Form.Item>
                )}
            </div>

            <div
              style={{
                backgroundColor:
                  activeSection === 'sales-page' ? '#e6f3ff' : 'transparent',
                padding: '16px',
                borderRadius: '10px',
                transition: 'background-color 0.3s ease',
              }}
            >
              <div className="preference-headers" id="sales-page">
                Sales Page
              </div>
              {renderCheckbox('searchfocus', 'Always focus the search bar?')}
              {renderCheckbox(
                'shortcutkeys',
                'Would you like to enable the shortcut keys?'
              )}
              {renderCheckbox(
                'addproductcard',
                'Would you like to remove Add Product card from sales page ?'
              )}

              {(allSettingsMap['offer'] !== undefined ||
                allSettingsMap['parking'] !== undefined) && (
                  <Form.Item
                    name="enabledFeatures"
                    label="Select the features you want to enable:"
                  >
                    <Checkbox.Group>
                      {allSettingsMap['parking'] !== undefined && (
                        <Checkbox value="parking">Parking</Checkbox>
                      )}
                      {allSettingsMap['offer'] !== undefined && (
                        <Checkbox value="offer">Offer</Checkbox>
                      )}
                    </Checkbox.Group>
                  </Form.Item>
                )}
              {((allSettingsMap['dinein'] !== undefined && dinePreference) ||
                allSettingsMap['estimation'] !== undefined) && (
                  <Form.Item
                    name="enabledModules"
                    label="Select the modules you want to enable:"
                  >
                    <Checkbox.Group>
                      {allSettingsMap['dinein'] !== undefined &&
                        dinePreference && (
                          <Checkbox value="dinein">Dine-In</Checkbox>
                        )}
                      {allSettingsMap['estimation'] !== undefined && (
                        <Checkbox value="estimation">Estimation</Checkbox>
                      )}
                    </Checkbox.Group>
                  </Form.Item>
                )}

              {renderCheckbox('stockselection', 'Enable stock selection?')}
              {renderCheckbox('weightasquantity', 'Use Weight as Quantity?')}
              {renderCheckbox('expiredselection', 'Show product expiry date?')}
              {/* {renderCheckbox('sales mode', 'Retail or Wholesale mode?')} */}
              {allSettingsMap['sales mode'] !== undefined && (
                <>
                  <Form.Item
                    name="salesmode"
                    label="Retail or Wholesale mode?"
                    valuePropName="checked"
                  >
                    <Checkbox>Yes</Checkbox>
                  </Form.Item>
                </>
              )}
              <Form.Item
                noStyle
                shouldUpdate={(prev, curr) => prev.salesmode !== curr.salesmode}
              >
                {({ getFieldValue }) =>
                  getFieldValue('salesmode') && (
                    <>
                      <Form.Item
                        name="retailshortname"
                        label="Retail Short Name"
                        rules={[
                          {
                            required: true,
                            message: 'Please enter Retail Short Name',
                          },
                        ]}
                      >
                        <InputField
                          placeholder="Enter Retail Short Name"
                          style={{ width: 250 }}
                        />
                      </Form.Item>

                      <Form.Item
                        name="wholesaleshortname"
                        label="Wholesale Short Name"
                        rules={[
                          {
                            required: true,
                            message: 'Please enter Wholesale Short Name',
                          },
                        ]}
                      >
                        <InputField
                          placeholder="Enter Wholesale Short Name"
                          style={{ width: 250 }}
                        />
                      </Form.Item>
                    </>
                  )
                }
              </Form.Item>
              {renderCheckbox(
                'billitemsorder',
                'Show selected items first in Order Summary?'
              )}
              {renderCheckbox(
                'preorderpricechange',
                'Prefer price update for pre-bookings?'
              )}
              {renderCheckbox(
                'verifyproduct',
                'Do you Want Verify the Product?'
              )}
              {renderCheckbox(
                'imeidetails',
                'Do you want to open the IMEI model without IMEI details?'
              )}
              {renderCheckbox(
                'customisedbillnumber',
                'Do you Want Customised Bill Number?'
              )}
              {renderCheckbox('scanlayout', 'Do you Want Scan Layout Page?')}
              {renderCheckbox('upiqr', 'Do you want to show the UPI QR code?')}
              {renderCheckbox(
                'itemdiscount',
                'Do you want to show the Item Discount in Price OverRide?'
              )}
              {/* {renderCheckbox('editbill', 'Do you want to edit the previously created bill?')} */}

              {(allSettingsMap['overalllimit'] !== undefined ||
                allSettingsMap['itemwiselimit'] !== undefined) && (
                  <>
                    <Form.Item
                      name="quantityrestriction"
                      label="Do you want to restrict the quantity that can be sold in a single order?"
                      valuePropName="checked"
                    >
                      <Checkbox>Yes</Checkbox>
                    </Form.Item>

                    <Form.Item
                      noStyle
                      shouldUpdate={(prev, curr) =>
                        prev.quantityrestriction !== curr.quantityrestriction
                      }
                    >
                      {({ getFieldValue }) =>
                        getFieldValue('quantityrestriction') && (
                          <>
                            <Form.Item
                              name="quantityrestrictiontype"
                              label="How would you like to apply the quantity restriction?"
                            >
                              <Radio.Group
                                onChange={() =>
                                  formRef.current?.setFieldsValue({
                                    maxquantity: undefined,
                                  })
                                }
                              >
                                {allSettingsMap['overalllimit'] !== undefined && (
                                  <Radio value="overall">
                                    Overall Order Quantity
                                  </Radio>
                                )}
                                {allSettingsMap['itemwiselimit'] !==
                                  undefined && (
                                    <Radio value="itemwise">
                                      Item-wise Quantity
                                    </Radio>
                                  )}
                              </Radio.Group>
                            </Form.Item>

                            <Form.Item
                              name="maxquantity"
                              label="Maximum quantity allowed:"
                              rules={[
                                {
                                  required: true,
                                  message: 'Please enter maximum quantity',
                                },
                                {
                                  type: 'number',
                                  min: 1,
                                  message: 'Quantity must be greater than 0',
                                },
                              ]}
                            >
                              <InputNumber min={1} style={{ width: '200px' }} />
                            </Form.Item>
                          </>
                        )
                      }
                    </Form.Item>
                  </>
                )}
            </div>

            <Divider />

            <div
              style={{
                backgroundColor:
                  activeSection === 'print-preferences'
                    ? '#e6f3ff'
                    : 'transparent',
                padding: '16px',
                borderRadius: '10px',
                transition: 'background-color 0.3s ease',
              }}
            >
              <div className="preference-headers" id="print-preferences">
                Print Preferences
              </div>

              {['whatsapp', 'sms', 'email'].some(
                (k) => allSettingsMap[k] !== undefined
              ) && (
                  <>
                    <Form.Item
                      name="billOption"
                      label="Choose how to handle bills:"
                    >
                      <Radio.Group>
                        <Radio value="print">Print Bill</Radio>
                        <Radio value="pdf">Send PDF</Radio>
                      </Radio.Group>
                    </Form.Item>

                    <Form.Item
                      noStyle
                      shouldUpdate={(prev, curr) =>
                        prev.billOption !== curr.billOption
                      }
                    >
                      {({ getFieldValue }) =>
                        getFieldValue('billOption') === 'pdf' && (
                          <Form.Item
                            name="pdfSendOptions"
                            label="Select how to send the PDF:"
                          >
                            <Checkbox.Group>
                              {allSettingsMap['whatsapp'] !== undefined && (
                                <Checkbox value="whatsapp">WhatsApp</Checkbox>
                              )}
                              {allSettingsMap['email'] !== undefined && (
                                <Checkbox value="email">Email</Checkbox>
                              )}
                              {allSettingsMap['sms'] !== undefined && (
                                <Checkbox value="sms">SMS</Checkbox>
                              )}
                            </Checkbox.Group>
                          </Form.Item>
                        )
                      }
                    </Form.Item>
                  </>
                )}

              {renderCheckbox(
                'tokenonly',
                'Print only token for token-maintained products?'
              )}

              {allSettingsMap['allproductindividualtoken'] !== undefined && (
                <Form.Item
                  noStyle
                  shouldUpdate={(prev, curr) =>
                    prev.tokenonly !== curr.tokenonly
                  }
                >
                  {({ getFieldValue }) => {
                    const tokenOnlyTrue = getFieldValue('tokenonly');
                    return (
                      tokenOnlyTrue &&
                      renderCheckbox(
                        'allproductindividualtoken',
                        'Print individual token for each product?'
                      )
                    );
                  }}
                </Form.Item>
              )}

              {['printuom', 'printlogo', 'printgreetings'].some(
                (k) => allSettingsMap[k] !== undefined
              ) && (
                  <Form.Item
                    name="printOptions"
                    label="Select what you want to include in the print:"
                  >
                    <Checkbox.Group>
                      {allSettingsMap['printuom'] !== undefined && (
                        <Checkbox value="printuom">
                          Unit of Measure (UOM)
                        </Checkbox>
                      )}
                      {allSettingsMap['printlogo'] !== undefined && (
                        <Checkbox value="printlogo">Branch Logo</Checkbox>
                      )}
                      {allSettingsMap['printgreetings'] !== undefined && (
                        <Checkbox value="printgreetings">Greetings</Checkbox>
                      )}
                    </Checkbox.Group>
                  </Form.Item>
                )}

              {renderCheckbox(
                'mobilea4',
                'Prefer printing in A4/A5 on mobile?'
              )}
              {(allSettingsMap['estimateprintheader'] !== undefined ||
                allSettingsMap['estimatetitle'] !== undefined) && (
                  <Form.Item
                    name="estimateSettings"
                    label="Estimate Print Settings :"
                  >
                    <Checkbox.Group>
                      {allSettingsMap['estimateprintheader'] !== undefined && (
                        <Checkbox value="estimateprintheader">
                          Show shop header (Name, Address, GST)
                        </Checkbox>
                      )}
                      {allSettingsMap['estimatetitle'] !== undefined && (
                        <Checkbox value="estimatetitle">
                          Show “Estimate (R/W)” title
                        </Checkbox>
                      )}
                    </Checkbox.Group>
                  </Form.Item>
                )}
            </div>
            <div className="PreferencesBTN">
              <Buttons
                buttonText="Submit Preferences"
                color="901D77"
                htmlType="SUBMIT"
                disabled={addnewAccess}
                icon={<ArrowRightOutlined />}
              />
            </div>
          </Form>
        </div>
      </div>
    </>
  );
};

export default PreferenceList;