import React, { useState, useCallback, useEffect, useRef, useMemo } from 'react';
import { Button, Paper, Box, TextField, IconButton, Tooltip } from "@mui/material";
import { WorkflowFile } from "maxun-core";
import Typography from "@mui/material/Typography";
import { useGlobalInfoStore } from "../../context/globalInfo";
import { PaginationType, useActionContext, LimitType } from '../../context/browserActions';
import { BrowserStep, useBrowserSteps } from '../../context/browserSteps';
import { useSocketStore } from '../../context/socket';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormControl from '@mui/material/FormControl';
import Radio from '@mui/material/Radio';
import RadioGroup from '@mui/material/RadioGroup';
import { getActiveWorkflow } from "../../api/workflow";
import ActionDescriptionBox from '../action/ActionDescriptionBox';
import { useThemeMode } from '../../context/theme-provider';
import { useTranslation } from 'react-i18next';
import { useBrowserDimensionsStore } from '../../context/browserDimensions';
import { clientListExtractor } from '../../helpers/clientListExtractor';
import { clientSelectorGenerator } from '../../helpers/clientSelectorGenerator';
import { clientPaginationDetector } from '../../helpers/clientPaginationDetector';

const fetchWorkflow = (id: string, callback: (response: WorkflowFile) => void) => {
  getActiveWorkflow(id).then(
    (response) => {
      if (response) {
        callback(response);
      } else {
        throw new Error("No workflow found");
      }
    }
  ).catch((error) => { console.log(`Failed to fetch workflow:`,error.message) })
};

interface RightSidePanelProps {
  onFinishCapture: () => void;
}

export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture }) => {
  const [showCaptureList, setShowCaptureList] = useState(true);
  const [showCaptureScreenshot, setShowCaptureScreenshot] = useState(true);
  const [showCaptureText, setShowCaptureText] = useState(true);
  const { panelHeight } = useBrowserDimensionsStore();

  const [autoDetectedPagination, setAutoDetectedPagination] = useState<{
    type: PaginationType;
    selector: string | null;
    confidence: 'high' | 'medium' | 'low';
  } | null>(null);
  const autoDetectionRunRef = useRef<string | null>(null);

  const { notify, currentWorkflowActionsState, setCurrentWorkflowActionsState, resetInterpretationLog, currentListActionId, setCurrentListActionId, currentTextActionId, setCurrentTextActionId, currentScreenshotActionId, setCurrentScreenshotActionId, isDOMMode, updateDOMMode, currentTextGroupName } = useGlobalInfoStore();  
  const { 
    getText, startGetText, stopGetText, 
    getList, startGetList, stopGetList, 
    getScreenshot, startGetScreenshot, stopGetScreenshot, 
    startPaginationMode, stopPaginationMode, 
    paginationType, updatePaginationType, 
    limitType, customLimit, updateLimitType, updateCustomLimit, 
    stopLimitMode, startLimitMode, 
    captureStage, setCaptureStage, 
    showPaginationOptions, setShowPaginationOptions, 
    showLimitOptions, setShowLimitOptions, 
    workflow, setWorkflow, 
    activeAction, setActiveAction, finishAction 
  } = useActionContext();
  
  const { browserSteps, addScreenshotStep, updateListStepLimit, updateListStepPagination, deleteStepsByActionId, updateListStepData, updateScreenshotStepData, emitActionForStep } = useBrowserSteps();
  const { id, socket } = useSocketStore();
  const { t } = useTranslation();

  const isAnyActionActive = activeAction !== 'none';

  const workflowHandler = useCallback((data: WorkflowFile) => {
    setWorkflow(data);
  }, [setWorkflow]);

  useEffect(() => {
    if (!paginationType || !currentListActionId) return;

    const currentListStep = browserSteps.find(
      step => step.type === 'list' && step.actionId === currentListActionId
    ) as (BrowserStep & { type: 'list' }) | undefined;

    const currentSelector = currentListStep?.pagination?.selector;
    const currentType = currentListStep?.pagination?.type;

    if (['clickNext', 'clickLoadMore'].includes(paginationType)) {
      const needsSelector = !currentSelector && !currentType;
      const typeChanged = currentType && currentType !== paginationType;

      if (typeChanged) {
        const iframeElement = document.querySelector('#browser-window iframe') as HTMLIFrameElement;
        if (iframeElement?.contentDocument && currentSelector) {
          try {
            function evaluateSelector(selector: string, doc: Document): Element[] {
              if (selector.startsWith('//') || selector.startsWith('(//')) {
                try {
                  const result = doc.evaluate(selector, doc, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
                  const elements: Element[] = [];
                  for (let i = 0; i < result.snapshotLength; i++) {
                    const node = result.snapshotItem(i);
                    if (node && node.nodeType === Node.ELEMENT_NODE) {
                      elements.push(node as Element);
                    }
                  }
                  return elements;
                } catch (err) {
                  return [];
                }
              } else {
                try {
                  return Array.from(doc.querySelectorAll(selector));
                } catch (err) {
                  return [];
                }
              }
            }

            const elements = evaluateSelector(currentSelector, iframeElement.contentDocument);
            elements.forEach((el: Element) => {
              (el as HTMLElement).style.outline = '';
              (el as HTMLElement).style.outlineOffset = '';
              (el as HTMLElement).style.zIndex = '';
            });
          } catch (error) {
            console.error('Error removing pagination highlight:', error);
          }
        }

        if (currentListStep) {
          updateListStepPagination(currentListStep.id, {
            type: paginationType,
            selector: null,
          });
        }

        startPaginationMode();
      } else if (needsSelector) {
        startPaginationMode();
      }
    }
  }, [paginationType, currentListActionId, browserSteps, updateListStepPagination, startPaginationMode]);

  useEffect(() => {
    if (socket) {
      const domModeHandler = (data: any) => {
        if (!data.userId || data.userId === id) {
          updateDOMMode(true);
        }
      };

      socket.on("dom-mode-enabled", domModeHandler);

      return () => {
        socket.off("dom-mode-enabled", domModeHandler);
      };
    }
  }, [socket, id, updateDOMMode]);

  useEffect(() => {
    if (socket) {
      socket.on("workflow", workflowHandler);
    }
    if (id) {
      fetchWorkflow(id, workflowHandler);
    }
    let interval = setInterval(() => {
      if (id) {
        fetchWorkflow(id, workflowHandler);
      }
    }, (1000 * 60 * 15));
    return () => {
      socket?.off("workflow", workflowHandler);
      clearInterval(interval);
    };
  }, [id, socket, workflowHandler]);

  useEffect(() => {
    const hasPairs = workflow.workflow.length > 0;
    if (!hasPairs) {
      setShowCaptureList(true);
      setShowCaptureScreenshot(true);
      setShowCaptureText(true);
      return;
    }

    const hasScrapeListAction = workflow.workflow.some(pair =>
      pair.what.some(action => action.action === 'scrapeList')
    );
    const hasScreenshotAction = workflow.workflow.some(pair =>
      pair.what.some(action => action.action === 'screenshot')
    );
    const hasScrapeSchemaAction = workflow.workflow.some(pair =>
      pair.what.some(action => action.action === 'scrapeSchema')
    );

    setCurrentWorkflowActionsState({
      hasScrapeListAction,
      hasScreenshotAction,
      hasScrapeSchemaAction,
    });

    setShowCaptureList(true);
    setShowCaptureScreenshot(true);
    setShowCaptureText(true);
  }, [workflow, setCurrentWorkflowActionsState]);

  useEffect(() => {
    if (socket) {
      socket.on('listDataExtracted', (response) => {
        if (!isDOMMode) {
          const { currentListId, data } = response;
          updateListStepData(currentListId, data);
        }
      });
    }
    
    return () => {
      socket?.off('listDataExtracted');
    };
  }, [socket, updateListStepData, isDOMMode]);

  useEffect(() => {
    if (socket) {
      const handleDirectScreenshot = (data: any) => {
        const screenshotSteps = browserSteps.filter(step => 
          step.type === 'screenshot' && step.actionId === currentScreenshotActionId
        );
        
        if (screenshotSteps.length > 0) {
          const latestStep = screenshotSteps[screenshotSteps.length - 1];          
          updateScreenshotStepData(latestStep.id, data.screenshot);
          emitActionForStep(latestStep);
        }
        
        setCurrentScreenshotActionId('');
      };

      socket.on('directScreenshotCaptured', handleDirectScreenshot);

      return () => {
        socket.off('directScreenshotCaptured', handleDirectScreenshot);
      };
    }
  }, [socket, id, notify, t, currentScreenshotActionId, updateScreenshotStepData, setCurrentScreenshotActionId, emitActionForStep, browserSteps]);

  const extractDataClientSide = useCallback(
    (
      listSelector: string,
      fields: Record<string, any>,
      currentListId: number
    ) => {
      if (isDOMMode) {
        try {
          let iframeElement = document.querySelector(
            "#dom-browser-iframe"
          ) as HTMLIFrameElement;

          if (!iframeElement) {
            iframeElement = document.querySelector(
              "#browser-window iframe"
            ) as HTMLIFrameElement;
          }

          if (!iframeElement) {
            const browserWindow = document.querySelector("#browser-window");
            if (browserWindow) {
              iframeElement = browserWindow.querySelector(
                "iframe"
              ) as HTMLIFrameElement;
            }
          }

          if (!iframeElement) {
            console.error(
              "Could not find the DOM iframe element for extraction"
            );
            return;
          }

          const iframeDoc = iframeElement.contentDocument;
          if (!iframeDoc) {
            console.error("Failed to get iframe document");
            return;
          }

          const extractedData = clientListExtractor.extractListData(
            iframeDoc,
            listSelector,
            fields,
            5 
          );

          updateListStepData(currentListId, extractedData);
          
          if (extractedData.length === 0) {
            console.warn("⚠️ No data extracted - this might indicate selector issues");
            notify("warning", "No data was extracted. Please verify your selections.");
          }
        } catch (error) {
          console.error("Error in client-side data extraction:", error);
          notify("error", "Failed to extract data client-side");
        }
      }
    },
    [isDOMMode, updateListStepData, socket, notify, currentWorkflowActionsState]
  );

  useEffect(() => {
    if (!getList) return;

    const currentListStep = browserSteps.find(
      step => step.type === 'list' && step.actionId === currentListActionId
    ) as (BrowserStep & { type: 'list'; listSelector?: string; fields?: Record<string, any> }) | undefined;

    if (!currentListStep || !currentListStep.listSelector || !currentListStep.fields) return;

    const fieldCount = Object.keys(currentListStep.fields).length;

    if (fieldCount > 0) {
      extractDataClientSide(
        currentListStep.listSelector,
        currentListStep.fields,
        currentListStep.id
      );

      setCurrentWorkflowActionsState({
        ...currentWorkflowActionsState,
        hasScrapeListAction: true
      });
    }
  }, [browserSteps, currentListActionId, getList, extractDataClientSide, setCurrentWorkflowActionsState, currentWorkflowActionsState]);

  const handleStartGetText = () => {
    const newActionId = `text-${crypto.randomUUID()}`;
    setCurrentTextActionId(newActionId);
    startGetText();
  }

  const handleStartGetList = () => {
    const newActionId = `list-${crypto.randomUUID()}`;
    setCurrentListActionId(newActionId);
    startGetList();
  }

  const handleStartGetScreenshot = () => {
    const newActionId = `screenshot-${crypto.randomUUID()}`;
    setCurrentScreenshotActionId(newActionId);
    startGetScreenshot();
  };

  const stopCaptureAndEmitGetTextSettings = useCallback(() => {
    const currentTextActionStep = browserSteps.find(step => step.type === 'text' && step.actionId === currentTextActionId);
    if (!currentTextActionStep) {
      notify('error', t('right_panel.errors.no_text_captured'));
      return;
    }
    
    stopGetText();
    if (currentTextActionStep) {
      emitActionForStep(currentTextActionStep);
    }
    setCurrentTextActionId('');
    resetInterpretationLog();
    finishAction('text'); 
    onFinishCapture();
    clientSelectorGenerator.cleanup();
  }, [stopGetText, socket, browserSteps, resetInterpretationLog, finishAction, notify, onFinishCapture, t, currentTextActionId, currentTextGroupName, emitActionForStep]);


  const resetListState = useCallback(() => {
    setShowPaginationOptions(false);
    updatePaginationType('');
    setShowLimitOptions(false);
    updateLimitType('');
    updateCustomLimit('');
  }, [updatePaginationType, updateLimitType, updateCustomLimit]);

  const handleStopGetList = useCallback(() => {
    stopGetList();
    resetListState();
  }, [stopGetList, resetListState]);

  const stopCaptureAndEmitGetListSettings = useCallback(() => {
    if (autoDetectedPagination?.selector) {
      const iframeElement = document.querySelector('#browser-window iframe') as HTMLIFrameElement;
      if (iframeElement?.contentDocument) {
        try {
          function evaluateSelector(selector: string, doc: Document): Element[] {
            if (selector.startsWith('//') || selector.startsWith('(//')) {
              try {
                const result = doc.evaluate(selector, doc, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
                const elements: Element[] = [];
                for (let i = 0; i < result.snapshotLength; i++) {
                  const node = result.snapshotItem(i);
                  if (node && node.nodeType === Node.ELEMENT_NODE) {
                    elements.push(node as Element);
                  }
                }
                return elements;
              } catch (err) {
                return [];
              }
            } else {
              try {
                return Array.from(doc.querySelectorAll(selector));
              } catch (err) {
                return [];
              }
            }
          }

          const elements = evaluateSelector(autoDetectedPagination.selector, iframeElement.contentDocument);
          elements.forEach((el: Element) => {
            (el as HTMLElement).style.outline = '';
            (el as HTMLElement).style.outlineOffset = '';
            (el as HTMLElement).style.zIndex = '';
          });
        } catch (error) {
          console.error('Error removing pagination highlight on completion:', error);
        }
      }
    }

    const latestListStep = getLatestListStep(browserSteps);
    if (latestListStep) {
      extractDataClientSide(latestListStep.listSelector!, latestListStep.fields, latestListStep.id);

      setCurrentWorkflowActionsState({
        ...currentWorkflowActionsState,
        hasScrapeListAction: true
      });

      emitActionForStep(latestListStep);

      handleStopGetList();
      setCurrentListActionId('');
      resetInterpretationLog();
      finishAction('list');
      onFinishCapture();
      clientSelectorGenerator.cleanup();
    } else {
      notify('error', t('right_panel.errors.unable_create_settings'));
      handleStopGetList();
      setCurrentListActionId('');
      resetInterpretationLog();
      finishAction('list');
      onFinishCapture();
      clientSelectorGenerator.cleanup();
    }
  }, [socket, notify, handleStopGetList, resetInterpretationLog, finishAction, onFinishCapture, t, browserSteps, extractDataClientSide, setCurrentWorkflowActionsState, currentWorkflowActionsState, emitActionForStep, autoDetectedPagination]);

  const getLatestListStep = (steps: BrowserStep[]) => {
    const listSteps = steps.filter(step => step.type === 'list');
    if (listSteps.length === 0) return null;
    
    return listSteps.sort((a, b) => b.id - a.id)[0];
  };

  const handleConfirmListCapture = useCallback(() => {
    switch (captureStage) {
      case 'initial':
        const hasValidListSelectorForCurrentAction = browserSteps.some(step =>
          step.type === 'list' &&
          step.actionId === currentListActionId &&
          step.listSelector &&
          Object.keys(step.fields).length > 0
        );
        
        if (!hasValidListSelectorForCurrentAction) {
          notify('error', t('right_panel.errors.capture_list_first'));
          return;
        }
        
        const currentListStepForAutoDetect = browserSteps.find(
          step => step.type === 'list' && step.actionId === currentListActionId
        ) as (BrowserStep & { type: 'list'; listSelector?: string }) | undefined;

        if (currentListStepForAutoDetect?.listSelector) {
          if (autoDetectionRunRef.current !== currentListActionId) {
            autoDetectionRunRef.current = currentListActionId;

            notify('info', 'Detecting pagination...');

            try {
              socket?.emit('testPaginationScroll', {
                listSelector: currentListStepForAutoDetect.listSelector
              });

              const handleScrollTestResult = (result: any) => {
                if (result.success && result.contentLoaded) {
                  setAutoDetectedPagination({
                    type: 'scrollDown',
                    selector: null,
                    confidence: 'high'
                  });
                  updatePaginationType('scrollDown');

                  const latestListStep = browserSteps.find(
                    step => step.type === 'list' && step.actionId === currentListActionId
                  );
                  if (latestListStep) {
                    updateListStepPagination(latestListStep.id, {
                      type: 'scrollDown',
                      selector: null,
                      isShadow: false
                    });
                  }
                } else if (result.success && !result.contentLoaded) {
                  const iframeElement = document.querySelector('#browser-window iframe') as HTMLIFrameElement;
                  const iframeDoc = iframeElement?.contentDocument;

                  if (iframeDoc) {
                    const detectionResult = clientPaginationDetector.autoDetectPagination(
                      iframeDoc,
                      currentListStepForAutoDetect.listSelector!,
                      clientSelectorGenerator,
                      { disableScrollDetection: true }
                    );

                    if (detectionResult.type) {
                      setAutoDetectedPagination({
                        type: detectionResult.type,
                        selector: detectionResult.selector,
                        confidence: detectionResult.confidence
                      });

                      const latestListStep = browserSteps.find(
                        step => step.type === 'list' && step.actionId === currentListActionId
                      );
                      if (latestListStep) {
                        updateListStepPagination(latestListStep.id, {
                          type: detectionResult.type,
                          selector: detectionResult.selector,
                          isShadow: false
                        });
                      }

                      updatePaginationType(detectionResult.type);

                      if (detectionResult.selector && (detectionResult.type === 'clickNext' || detectionResult.type === 'clickLoadMore')) {
                        try {
                          function evaluateSelector(selector: string, doc: Document): Element[] {
                            try {
                              const isXPath = selector.startsWith('//') || selector.startsWith('(//');
                              if (isXPath) {
                                const result = doc.evaluate(
                                  selector,
                                  doc,
                                  null,
                                  XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
                                  null
                                );
                                const elements: Element[] = [];
                                for (let i = 0; i < result.snapshotLength; i++) {
                                  const node = result.snapshotItem(i);
                                  if (node && node.nodeType === Node.ELEMENT_NODE) {
                                    elements.push(node as Element);
                                  }
                                }
                                return elements;
                              } else {
                                try {
                                  const allElements = Array.from(doc.querySelectorAll(selector));
                                  if (allElements.length > 0) {
                                    return allElements;
                                  }
                                } catch (err) {
                                  console.warn('[RightSidePanel] Full chained selector failed, trying individual selectors:', err);
                                }

                                const selectorParts = selector.split(',');
                                for (const part of selectorParts) {
                                  try {
                                    const elements = Array.from(doc.querySelectorAll(part.trim()));
                                    if (elements.length > 0) {
                                      return elements;
                                    }
                                  } catch (err) {
                                    console.warn('[RightSidePanel] Selector part failed:', part.trim(), err);
                                    continue;
                                  }
                                }
                                return [];
                              }
                            } catch (err) {
                              console.error('[RightSidePanel] Selector evaluation failed:', selector, err);
                              return [];
                            }
                          }

                          const elements = evaluateSelector(detectionResult.selector, iframeDoc);
                          if (elements.length > 0) {
                            elements.forEach((el: Element) => {
                              (el as HTMLElement).style.outline = '3px dashed #ff00c3';
                              (el as HTMLElement).style.outlineOffset = '2px';
                              (el as HTMLElement).style.zIndex = '9999';
                            });

                            const firstElement = elements[0] as HTMLElement;
                            const elementRect = firstElement.getBoundingClientRect();
                            const iframeWindow = iframeElement.contentWindow;
                            if (iframeWindow) {
                              const targetY = elementRect.top + iframeWindow.scrollY - (iframeWindow.innerHeight / 2) + (elementRect.height / 2);
                              iframeWindow.scrollTo({ top: targetY, behavior: 'smooth' });
                            }

                            const paginationTypeLabel = detectionResult.type === 'clickNext' ? 'Next Button' : 'Load More Button';
                            notify('info', `${paginationTypeLabel} has been auto-detected and highlighted on the page`);
                          } else {
                            console.warn(' No elements found for selector:', detectionResult.selector);
                          }
                        } catch (error) {
                          console.error('Error highlighting pagination button:', error);
                        }
                      }
                    } else {
                      setAutoDetectedPagination(null);
                    }
                  }
                } else {
                  console.error('Scroll test failed:', result.error);
                  setAutoDetectedPagination(null);
                }

                socket?.off('paginationScrollTestResult', handleScrollTestResult);
              };

              socket?.on('paginationScrollTestResult', handleScrollTestResult);

              setTimeout(() => {
                socket?.off('paginationScrollTestResult', handleScrollTestResult);
              }, 5000);

            } catch (error) {
              console.error('Scroll test failed:', error);
              setAutoDetectedPagination(null);
            }
          }
        }

        const shouldSkipPaginationMode = autoDetectedPagination && (
          ['scrollDown', 'scrollUp'].includes(autoDetectedPagination.type) ||
          (['clickNext', 'clickLoadMore'].includes(autoDetectedPagination.type) && autoDetectedPagination.selector)
        );

        if (!shouldSkipPaginationMode) {
          startPaginationMode();
        }

        setShowPaginationOptions(true);
        setCaptureStage('pagination');
        break;

      case 'pagination':
        if (!paginationType) {
          notify('error', t('right_panel.errors.select_pagination'));
          return;
        }
        
        const currentListStepForPagination = browserSteps.find(
          step => step.type === 'list' && step.actionId === currentListActionId
        ) as (BrowserStep & { type: 'list' }) | undefined;

        if (currentListStepForPagination) {
          const paginationSelector = currentListStepForPagination.pagination?.selector;
          if (['clickNext', 'clickLoadMore'].includes(paginationType) && !paginationSelector) {
            notify('error', t('right_panel.errors.select_pagination_element'));
            return;
          }
        }
        stopPaginationMode();
        setShowPaginationOptions(false);
        startLimitMode();
        setShowLimitOptions(true);
        setCaptureStage('limit');
        break;

      case 'limit':
        if (!limitType || (limitType === 'custom' && !customLimit)) {
          notify('error', t('right_panel.errors.select_limit'));
          return;
        }
        const limit = limitType === 'custom' ? parseInt(customLimit) : parseInt(limitType);
        if (isNaN(limit) || limit <= 0) {
          notify('error', t('right_panel.errors.invalid_limit'));
          return;
        }

        const latestListStep = getLatestListStep(browserSteps);
        if (latestListStep) {
          updateListStepLimit(latestListStep.id, limit);
        }

        stopLimitMode();
        setShowLimitOptions(false);
        stopCaptureAndEmitGetListSettings();
        setCaptureStage('complete');
        break;

      case 'complete':
        setCaptureStage('initial');
        break;
    }
  }, [captureStage, paginationType, limitType, customLimit, startPaginationMode, setShowPaginationOptions, setCaptureStage, notify, stopPaginationMode, startLimitMode, setShowLimitOptions, stopLimitMode, stopCaptureAndEmitGetListSettings, t, browserSteps, currentListActionId, updateListStepLimit]);

  const handleBackCaptureList = useCallback(() => {
    switch (captureStage) {
      case 'limit':
        stopLimitMode();
        setShowLimitOptions(false);
        startPaginationMode();
        setShowPaginationOptions(true);
        setCaptureStage('pagination');
        break;
      case 'pagination':
        stopPaginationMode();
        setShowPaginationOptions(false);
        setAutoDetectedPagination(null);
        setCaptureStage('initial');
        break;
    }
  }, [captureStage, stopLimitMode, startPaginationMode, stopPaginationMode]);

  const handlePaginationSettingSelect = (option: PaginationType) => {
    updatePaginationType(option);
  };

  const discardGetText = useCallback(() => {
    stopGetText();
    
    if (currentTextActionId) {     
      deleteStepsByActionId(currentTextActionId);
      
      if (socket) {
        socket.emit('removeAction', { actionId: currentTextActionId });
      }
    }
    
    setCurrentTextActionId('');
    clientSelectorGenerator.cleanup();
    notify('error', t('right_panel.errors.capture_text_discarded'));
  }, [currentTextActionId, browserSteps, stopGetText, deleteStepsByActionId, notify, t, socket]);

  const discardGetList = useCallback(() => {
    stopGetList();
    
    if (currentListActionId) {
      deleteStepsByActionId(currentListActionId);
      
      if (socket) {
        socket.emit('removeAction', { actionId: currentListActionId });
      }
    }

    if (autoDetectedPagination?.selector) {
      const iframeElement = document.querySelector('#browser-window iframe') as HTMLIFrameElement;
      if (iframeElement?.contentDocument) {
        try {
          function evaluateSelector(selector: string, doc: Document): Element[] {
            if (selector.startsWith('//') || selector.startsWith('(//')) {
              try {
                const result = doc.evaluate(selector, doc, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
                const elements: Element[] = [];
                for (let i = 0; i < result.snapshotLength; i++) {
                  const node = result.snapshotItem(i);
                  if (node && node.nodeType === Node.ELEMENT_NODE) {
                    elements.push(node as Element);
                  }
                }
                return elements;
              } catch (err) {
                return [];
              }
            } else {
              try {
                return Array.from(doc.querySelectorAll(selector));
              } catch (err) {
                return [];
              }
            }
          }

          const elements = evaluateSelector(autoDetectedPagination.selector, iframeElement.contentDocument);
          elements.forEach((el: Element) => {
            (el as HTMLElement).style.outline = '';
            (el as HTMLElement).style.outlineOffset = '';
            (el as HTMLElement).style.zIndex = '';
          });
        } catch (error) {
          console.error('Error removing pagination highlight on discard:', error);
        }
      }
    }
    
    resetListState();
    stopPaginationMode();
    stopLimitMode();
    setShowPaginationOptions(false);
    setShowLimitOptions(false);
    setAutoDetectedPagination(null);
    setCaptureStage('initial');
    setCurrentListActionId('');
    clientSelectorGenerator.cleanup();
    notify('error', t('right_panel.errors.capture_list_discarded'));
  }, [currentListActionId, browserSteps, stopGetList, deleteStepsByActionId, resetListState, setShowPaginationOptions, setShowLimitOptions, setCaptureStage, notify, t, stopPaginationMode, stopLimitMode, socket, autoDetectedPagination]);

  const captureScreenshot = (fullPage: boolean) => {
    const screenshotCount = browserSteps.filter(s => s.type === 'screenshot').length + 1;
    const screenshotName = `Screenshot ${screenshotCount}`;
    
    const screenshotSettings = {
      fullPage,
      type: 'png' as const,
      timeout: 30000,
      animations: 'allow' as const,
      caret: 'hide' as const,
      scale: 'device' as const,
      name: screenshotName,
      actionId: currentScreenshotActionId
    };
    socket?.emit('captureDirectScreenshot', screenshotSettings);   
    addScreenshotStep(fullPage, currentScreenshotActionId);
    stopGetScreenshot();
    resetInterpretationLog();
    finishAction('screenshot');
    onFinishCapture();
    clientSelectorGenerator.cleanup();
  };

  const theme = useThemeMode();
  const isDarkMode = theme.darkMode;

  return (
    <Paper sx={{ height: panelHeight, width: 'auto', alignItems: "center", background: 'inherit', position: "relative", border: "none" }} id="browser-actions" elevation={0}>
      <ActionDescriptionBox isDarkMode={isDarkMode} />
      <Box display="flex" flexDirection="column" gap={2} style={{ margin: '13px' }}>
        {!isAnyActionActive && (
          <>
            {showCaptureList && (
              <Button 
                variant="contained" 
                onClick={handleStartGetList}
              >
                {t('right_panel.buttons.capture_list')}
              </Button>
            )}

            {showCaptureText && (
              <Button 
                variant="contained" 
                onClick={handleStartGetText}
              >
                {t('right_panel.buttons.capture_text')}
              </Button>
            )}

            {showCaptureScreenshot && (
              <Button 
                variant="contained" 
                onClick={handleStartGetScreenshot}
              >
                {t('right_panel.buttons.capture_screenshot')}
              </Button>
            )}
          </>
        )}

        {getList && (
          <Box>
            <Box display="flex" justifyContent="space-between" gap={2} style={{ margin: '15px' }}>
              {(captureStage === 'pagination' || captureStage === 'limit') && (
                <Button
                  variant="outlined"
                  onClick={handleBackCaptureList}
                  sx={{
                    color: '#ff00c3 !important',
                    borderColor: '#ff00c3 !important',
                    backgroundColor: 'whitesmoke !important',
                  }}
                >
                  {t('right_panel.buttons.back')}
                </Button>
              )}
              <Button
                variant="outlined"
                onClick={handleConfirmListCapture}
                sx={{
                  color: '#ff00c3 !important',
                  borderColor: '#ff00c3 !important',
                  backgroundColor: 'whitesmoke !important',
                }}
              >
                {captureStage === 'initial' ? t('right_panel.buttons.confirm_capture') :
                  captureStage === 'pagination' ? t('right_panel.buttons.confirm_pagination') :
                    captureStage === 'limit' ? t('right_panel.buttons.confirm_limit') :
                      t('right_panel.buttons.finish_capture')}
              </Button>
              <Button
                variant="outlined"
                color="error"
                onClick={discardGetList}
                sx={{
                  color: 'red !important',
                  borderColor: 'red !important',
                  backgroundColor: 'whitesmoke !important',
                }}
              >
                {t('right_panel.buttons.discard')}
              </Button>
            </Box>
          
            {showPaginationOptions && (
              <Box display="flex" flexDirection="column" gap={2} style={{ margin: '13px' }}>
                <Typography>{t('right_panel.pagination.title')}</Typography>
                
                {autoDetectedPagination && autoDetectedPagination.type !== '' && (
                  <Box
                    sx={{
                      p: 2,
                      mb: 1,
                      borderRadius: '8px',
                      backgroundColor: isDarkMode ? '#f4f6f4' : '#f4f6f4',
                      border: `1px solid ${isDarkMode ? '#f4f6f4' : '#f4f6f4'}`,
                    }}
                  >
                    <Typography
                      variant="body2"
                      sx={{
                        fontWeight: 'bold',
                        mb: 0.5
                      }}
                    >
                      ✓ Auto-detected: {
                        autoDetectedPagination.type === 'clickNext' ? 'Click Next' :
                          autoDetectedPagination.type === 'clickLoadMore' ? 'Click Load More' :
                            autoDetectedPagination.type === 'scrollDown' ? 'Scroll Down' :
                              autoDetectedPagination.type === 'scrollUp' ? 'Scroll Up' :
                                autoDetectedPagination.type
                      }
                    </Typography>
                    <Typography
                      variant="caption"
                      sx={{
                        display: 'block',
                        mb: 1
                      }}
                    >
                      You can continue with this or manually select a different pagination type below.
                    </Typography>
                    {autoDetectedPagination.selector && ['clickNext', 'clickLoadMore'].includes(autoDetectedPagination.type) && (
                      <Button
                        size="small"
                        variant="outlined"
                        onClick={() => {
                          const currentListStep = browserSteps.find(
                            step => step.type === 'list' && step.actionId === currentListActionId
                          ) as (BrowserStep & { type: 'list' }) | undefined;

                          if (currentListStep) {
                            const iframeElement = document.querySelector('#browser-window iframe') as HTMLIFrameElement;
                            if (iframeElement?.contentDocument && autoDetectedPagination.selector) {
                              try {
                                function evaluateSelector(selector: string, doc: Document): Element[] {
                                  if (selector.startsWith('//') || selector.startsWith('(//')) {
                                    try {
                                      const result = doc.evaluate(selector, doc, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
                                      const elements: Element[] = [];
                                      for (let i = 0; i < result.snapshotLength; i++) {
                                        const node = result.snapshotItem(i);
                                        if (node && node.nodeType === Node.ELEMENT_NODE) {
                                          elements.push(node as Element);
                                        }
                                      }
                                      return elements;
                                    } catch (err) {
                                      return [];
                                    }
                                  } else {
                                    try {
                                      return Array.from(doc.querySelectorAll(selector));
                                    } catch (err) {
                                      return [];
                                    }
                                  }
                                }

                                const elements = evaluateSelector(autoDetectedPagination.selector, iframeElement.contentDocument);
                                elements.forEach((el: Element) => {
                                  (el as HTMLElement).style.outline = '';
                                  (el as HTMLElement).style.outlineOffset = '';
                                  (el as HTMLElement).style.zIndex = '';
                                });
                              } catch (error) {
                                console.error('Error removing pagination highlight:', error);
                              }
                            }

                            updateListStepPagination(currentListStep.id, {
                              type: autoDetectedPagination.type,
                              selector: null,
                            });

                            startPaginationMode();
                            notify('info', 'Please select a different pagination element');
                          }
                        }}
                      >
                        Choose Different Element
                      </Button>
                    )}
                  </Box>
                )}
                <Button
                  variant={paginationType === 'clickNext' ? "contained" : "outlined"}
                  onClick={() => handlePaginationSettingSelect('clickNext')}
                  sx={{
                    color: paginationType === 'clickNext' ? 'whitesmoke !important' : '#ff00c3 !important',
                    borderColor: '#ff00c3 !important',
                    backgroundColor: paginationType === 'clickNext' ? '#ff00c3 !important' : 'whitesmoke !important',
                  }}>
                  {t('right_panel.pagination.click_next')}
                </Button>
                <Button
                  variant={paginationType === 'clickLoadMore' ? "contained" : "outlined"}
                  onClick={() => handlePaginationSettingSelect('clickLoadMore')}
                  sx={{
                    color: paginationType === 'clickLoadMore' ? 'whitesmoke !important' : '#ff00c3 !important',
                    borderColor: '#ff00c3 !important',
                    backgroundColor: paginationType === 'clickLoadMore' ? '#ff00c3 !important' : 'whitesmoke !important',
                  }}>
                  {t('right_panel.pagination.click_load_more')}
                </Button>
                <Button
                  variant={paginationType === 'scrollDown' ? "contained" : "outlined"}
                  onClick={() => handlePaginationSettingSelect('scrollDown')}
                  sx={{
                    color: paginationType === 'scrollDown' ? 'whitesmoke !important' : '#ff00c3 !important',
                    borderColor: '#ff00c3 !important',
                    backgroundColor: paginationType === 'scrollDown' ? '#ff00c3 !important' : 'whitesmoke !important',
                  }}>
                  {t('right_panel.pagination.scroll_down')}
                </Button>
                <Button
                  variant={paginationType === 'scrollUp' ? "contained" : "outlined"}
                  onClick={() => handlePaginationSettingSelect('scrollUp')}
                  sx={{
                    color: paginationType === 'scrollUp' ? 'whitesmoke !important' : '#ff00c3 !important',
                    borderColor: '#ff00c3 !important',
                    backgroundColor: paginationType === 'scrollUp' ? '#ff00c3 !important' : 'whitesmoke !important',
                  }}>
                  {t('right_panel.pagination.scroll_up')}
                </Button>
                <Button
                  variant={paginationType === 'none' ? "contained" : "outlined"}
                  onClick={() => handlePaginationSettingSelect('none')}
                  sx={{
                    color: paginationType === 'none' ? 'whitesmoke !important' : '#ff00c3 !important',
                    borderColor: '#ff00c3 !important',
                    backgroundColor: paginationType === 'none' ? '#ff00c3 !important' : 'whitesmoke !important',
                  }}>
                  {t('right_panel.pagination.none')}</Button>
              </Box>
            )}
          
            {showLimitOptions && (
              <FormControl>
                <Typography variant="h6" sx={{ 
                  fontSize: '16px', 
                  fontWeight: 'bold',
                  mb: 1,
                  whiteSpace: 'normal', 
                  wordBreak: 'break-word' 
                }}>
                  {t('right_panel.limit.title')}
                </Typography>
                <RadioGroup
                  value={limitType}
                  onChange={(e) => updateLimitType(e.target.value as LimitType)}
                  sx={{
                    display: 'flex',
                    flexDirection: 'column',
                    width: '100%',
                  }}
                >
                  <FormControlLabel value="10" control={<Radio />} label="10" />
                  <FormControlLabel value="100" control={<Radio />} label="100" />
                  <div style={{ display: 'flex', alignItems: 'center' }}>
                    <FormControlLabel value="custom" control={<Radio />} label={t('right_panel.limit.custom')} />
                    {limitType === 'custom' && (
                      <TextField
                        type="number"
                        value={customLimit}
                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                          const value = parseInt(e.target.value);
                          if (e.target.value === '' || value >= 1) {
                            updateCustomLimit(e.target.value);
                          }
                        }}
                        inputProps={{
                          min: 1,
                          onKeyPress: (e: React.KeyboardEvent<HTMLInputElement>) => {
                            const value = (e.target as HTMLInputElement).value + e.key;
                            if (parseInt(value) < 1) {
                              e.preventDefault();
                            }
                          }
                        }}
                        placeholder={t('right_panel.limit.enter_number')}
                        sx={{
                          marginLeft: '10px',
                          '& input': {
                            padding: '10px',
                          },
                          width: '150px',
                          background: isDarkMode ? "#1E2124" : 'white',
                          color: isDarkMode ? "white" : 'black',
                        }}
                      />
                    )}
                  </div>
                </RadioGroup>
              </FormControl>
            )}
          </Box>
        )}
        
        {getText && (
          <Box>
            <Box display="flex" justifyContent="space-between" gap={2} style={{ margin: '15px' }}>
              <Button
                variant="outlined"
                onClick={stopCaptureAndEmitGetTextSettings}
                sx={{
                  color: '#ff00c3 !important',
                  borderColor: '#ff00c3 !important',
                  backgroundColor: 'whitesmoke !important',
                }}
              >
                {t('right_panel.buttons.confirm')}
              </Button>
              <Button
                variant="outlined"
                color="error"
                onClick={discardGetText}
                sx={{
                  color: '#ff00c3 !important',
                  borderColor: '#ff00c3 !important',
                  backgroundColor: 'whitesmoke !important',
                }}
              >
                {t('right_panel.buttons.discard')}
              </Button>
            </Box>
          </Box>
        )}
        
        {getScreenshot && (
          <Box display="flex" flexDirection="column" gap={2}>
            <Button variant="contained" onClick={() => captureScreenshot(true)}>
              {t('right_panel.screenshot.capture_fullpage')}
            </Button>
            <Button variant="contained" onClick={() => captureScreenshot(false)}>
              {t('right_panel.screenshot.capture_visible')}
            </Button>
            <Button
              variant="outlined"
              color="error"
              onClick={() => {
                stopGetScreenshot();
                setActiveAction('none');
              }}
              sx={{
                color: '#ff00c3 !important',
                borderColor: '#ff00c3 !important',
                backgroundColor: 'whitesmoke !important',
              }}
            >
              {t('right_panel.buttons.discard')}
            </Button>
          </Box>
        )}
      </Box>
    </Paper>
  );
};