/* eslint-disable i18next/no-literal-string */
import { ResourceType, Timed } from 'Player';
import { WsChannel } from 'Player/web/messages';
import MobilePlayer from 'Player/mobile/IOSPlayer';
import WebPlayer from 'Player/web/WebPlayer';
import { observer } from 'mobx-react-lite';
import React, {
  useMemo,
  useState,
  useEffect,
  useCallback,
  useRef,
} from 'react';
import i18n from 'App/i18n'

import { useModal } from 'App/components/Modal';
import {
  MobilePlayerContext,
  PlayerContext,
} from 'App/components/Session/playerContext';
import { formatMs } from 'App/date';
import { useStore } from 'App/mstore';
import { formatBytes, debounceCall } from 'App/utils';
import { Icon, NoContent, Tabs } from 'UI';
import { Tooltip, Input, Switch, Form } from 'antd';
import {
  SearchOutlined,
  InfoCircleOutlined,
} from '@ant-design/icons';

import FetchDetailsModal from 'Shared/FetchDetailsModal';

import BottomBlock from '../BottomBlock';
import InfoLine from '../BottomBlock/InfoLine';
import TabSelector from '../TabSelector';
import TimeTable from '../TimeTable';
import useAutoscroll, { getLastItemTime } from '../useAutoscroll';
import WSPanel from './WSPanel';
import { useTranslation } from 'react-i18next';
import { mergeListsWithZoom, processInChunks } from './utils'

// Constants remain the same
const INDEX_KEY = 'network';
const ALL = 'ALL';
const XHR = 'xhr';
const JS = 'js';
const CSS = 'css';
const IMG = 'img';
const MEDIA = 'media';
const OTHER = 'other';
const WS = 'websocket';
const GRAPHQL = 'graphql';

const TYPE_TO_TAB = {
  [ResourceType.XHR]: XHR,
  [ResourceType.FETCH]: XHR,
  [ResourceType.SCRIPT]: JS,
  [ResourceType.CSS]: CSS,
  [ResourceType.IMG]: IMG,
  [ResourceType.MEDIA]: MEDIA,
  [ResourceType.WS]: WS,
  [ResourceType.OTHER]: OTHER,
  [ResourceType.GRAPHQL]: GRAPHQL,
};

const TAP_KEYS = [ALL, XHR, JS, CSS, IMG, MEDIA, OTHER, WS, GRAPHQL] as const;
export const NETWORK_TABS = TAP_KEYS.map((tab) => ({
  text: tab === 'xhr' ? 'Fetch/XHR' : tab,
  key: tab,
}));

const DOM_LOADED_TIME_COLOR = 'teal';
const LOAD_TIME_COLOR = 'red';

const BATCH_SIZE = 2500;
const INITIAL_LOAD_SIZE = 5000;

export function renderType(r: any) {
  return (
    <Tooltip style={{ width: '100%' }} title={<div>{r.type}</div>}>
      <div>{r.type}</div>
    </Tooltip>
  );
}

export function renderName(r: any) {
  return (
    <Tooltip style={{ width: '100%' }} title={<div>{r.url}</div>}>
      <div>{r.name}</div>
    </Tooltip>
  );
}

function renderSize(r: any) {
  const t = i18n.t;
  const notCaptured = t('Not captured');
  const resSizeStr = t('Resource size')
  let triggerText;
  let content;
  if (r.responseBodySize) {
    triggerText = formatBytes(r.responseBodySize);
    content = undefined;
  } else if (r.decodedBodySize == null || r.decodedBodySize === 0) {
    triggerText = 'x';
    content = notCaptured;
  } else {
    const headerSize = r.headerSize || 0;
    const showTransferred = r.headerSize != null;

    triggerText = formatBytes(r.decodedBodySize);
    content = (
      <ul>
        {showTransferred && (
          <li>
            {`${formatBytes(
              r.encodedBodySize + headerSize,
            )} transferred over network`}
          </li>
        )}
        <li>{`${resSizeStr}: ${formatBytes(r.decodedBodySize)} `}</li>
      </ul>
    );
  }

  return (
    <Tooltip style={{ width: '100%' }} title={content}>
      <div>{triggerText}</div>
    </Tooltip>
  );
}

export function renderDuration(r: any) {
  const { t } = useTranslation();
  if (!r.success) return 'x';

  const text = `${Math.floor(r.duration)}ms`;
  if (!r.isRed && !r.isYellow) return text;

  let tooltipText;
  if (r.isYellow) {
    tooltipText = t('Slower than average');
  } else {
    tooltipText = t('Much slower than average');
  }

  return (
    <Tooltip style={{ width: '100%' }} title={tooltipText}>
      <div> {text} </div>
    </Tooltip>
  );
}

function renderStatus({
  status,
  cached,
  error,
}: {
  status: string;
  cached: boolean;
  error?: string;
}) {
  const { t } = useTranslation();
  const displayedStatus = error ? (
    <Tooltip title={error}>
      <div style={{ width: 90 }} className="overflow-hidden overflow-ellipsis">
        {error}
      </div>
    </Tooltip>
  ) : (
    status
  );
  return (
    <>
      {cached ? (
        <Tooltip title={t('Served from cache')} placement="top">
          <div className="flex items-center">
            <span className="mr-1">{displayedStatus}</span>
            <Icon name="wifi" size={16} />
          </div>
        </Tooltip>
      ) : (
        displayedStatus
      )}
    </>
  );
}


// Main component for Network Panel
function NetworkPanelCont({ panelHeight }: { panelHeight: number }) {
  const { player, store } = React.useContext(PlayerContext);
  const { sessionStore, uiPlayerStore } = useStore();

  const { startedAt } = sessionStore.current;
  const {
    domContentLoadedTime,
    loadTime,
    domBuildingTime,
    tabStates,
    currentTab,
    tabNames,
  } = store.get();
  const tabsArr = Object.keys(tabStates);
  const tabValues = Object.values(tabStates);
  const { dataSource } = uiPlayerStore;
  const showSingleTab = dataSource === 'current';

  let fetchList = [];
  let resourceList = [];
  let fetchListNow = [];
  let resourceListNow = [];
  let websocketList = [];
  let websocketListNow = [];

  if (showSingleTab) {
    const state = tabStates[currentTab] ?? {};
    fetchList = state.fetchList ?? [];
    resourceList = state.resourceList ?? [];
    fetchListNow = state.fetchListNow ?? [];
    resourceListNow = state.resourceListNow ?? [];
    websocketList = state.websocketList ?? [];
    websocketListNow = state.websocketListNow ?? [];
  } else {
    fetchList = tabValues.flatMap((tab) => tab.fetchList);
    resourceList = tabValues.flatMap((tab) => tab.resourceList);
    fetchListNow = tabValues.flatMap((tab) => tab.fetchListNow).filter(Boolean);
    resourceListNow = tabValues
      .flatMap((tab) => tab.resourceListNow)
      .filter(Boolean);
    websocketList = tabValues.flatMap((tab) => tab.websocketList);
    websocketListNow = tabValues
      .flatMap((tab) => tab.websocketListNow)
      .filter(Boolean);
  }

  const getTabNum = (tab: string) => tabsArr.findIndex((t) => t === tab) + 1;
  const getTabName = (tabId: string) => tabNames[tabId];

  return (
    <NetworkPanelComp
      loadTime={loadTime}
      panelHeight={panelHeight}
      domBuildingTime={domBuildingTime}
      domContentLoadedTime={domContentLoadedTime}
      fetchList={fetchList}
      resourceList={resourceList}
      fetchListNow={fetchListNow}
      resourceListNow={resourceListNow}
      player={player}
      startedAt={startedAt}
      websocketList={websocketList}
      websocketListNow={websocketListNow}
      getTabNum={getTabNum}
      getTabName={getTabName}
      showSingleTab={showSingleTab}
    />
  );
}

function MobileNetworkPanelCont({ panelHeight }: { panelHeight: number }) {
  const { player, store } = React.useContext(MobilePlayerContext);
  const { uiPlayerStore, sessionStore } = useStore();
  const { startedAt } = sessionStore.current;
  const zoomEnabled = uiPlayerStore.timelineZoom.enabled;
  const zoomStartTs = uiPlayerStore.timelineZoom.startTs;
  const zoomEndTs = uiPlayerStore.timelineZoom.endTs;
  const domContentLoadedTime = undefined;
  const loadTime = undefined;
  const domBuildingTime = undefined;
  const {
    fetchList = [],
    resourceList = [],
    fetchListNow = [],
    resourceListNow = [],
    websocketList = [],
    websocketListNow = [],
  } = store.get();

  return (
    <NetworkPanelComp
      isMobile
      panelHeight={panelHeight}
      loadTime={loadTime}
      domBuildingTime={domBuildingTime}
      domContentLoadedTime={domContentLoadedTime}
      fetchList={fetchList}
      resourceList={resourceList}
      fetchListNow={fetchListNow}
      resourceListNow={resourceListNow}
      player={player}
      startedAt={startedAt}
      websocketList={websocketList}
      websocketListNow={websocketListNow}
      zoomEnabled={zoomEnabled}
      zoomStartTs={zoomStartTs}
      zoomEndTs={zoomEndTs}
    />
  );
}

const useInfiniteScroll = (loadMoreCallback: () => void, hasMore: boolean) => {
  const observerRef = useRef<IntersectionObserver>(null);
  const loadingRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0]?.isIntersecting && hasMore) {
          loadMoreCallback();
        }
      },
      { threshold: 0.1 },
    );

    if (loadingRef.current) {
      observer.observe(loadingRef.current);
    }

    // @ts-ignore
    observerRef.current = observer;

    return () => {
      if (observerRef.current) {
        observerRef.current.disconnect();
      }
    };
  }, [loadMoreCallback, hasMore, loadingRef]);

  return loadingRef;
};

interface Props {
  domContentLoadedTime?: {
    time: number;
    value: number;
  };
  loadTime?: {
    time: number;
    value: number;
  };
  domBuildingTime?: number;
  fetchList: Timed[];
  resourceList: Timed[];
  fetchListNow: Timed[];
  resourceListNow: Timed[];
  websocketList: Array<WsChannel>;
  websocketListNow: Array<WsChannel>;
  player: WebPlayer | MobilePlayer;
  startedAt: number;
  isMobile?: boolean;
  zoomEnabled?: boolean;
  zoomStartTs?: number;
  zoomEndTs?: number;
  panelHeight: number;
  onClose?: () => void;
  activeOutsideIndex?: number;
  isSpot?: boolean;
  getTabNum?: (tab: string) => number;
  getTabName?: (tabId: string) => string;
  showSingleTab?: boolean;
}

export const NetworkPanelComp = observer(
  ({
    loadTime,
    domBuildingTime,
    domContentLoadedTime,
    fetchList,
    resourceList,
    fetchListNow,
    resourceListNow,
    player,
    startedAt,
    isMobile,
    panelHeight,
    websocketList,
    zoomEnabled,
    zoomStartTs,
    zoomEndTs,
    onClose,
    activeOutsideIndex,
    isSpot,
    getTabNum,
    showSingleTab,
    getTabName,
  }: Props) => {
    const { t } = useTranslation();
    const [selectedWsChannel, setSelectedWsChannel] = React.useState<
      WsChannel[] | null
    >(null);
    const { showModal } = useModal();
    const [showOnlyErrors, setShowOnlyErrors] = useState(false);
    const [isDetailsModalActive, setIsDetailsModalActive] = useState(false);
    const [isLoading, setIsLoading] = useState(true);
    const [isProcessing, setIsProcessing] = useState(false);
    const [displayedItems, setDisplayedItems] = useState([]);
    const [totalItems, setTotalItems] = useState(0);
    const [summaryStats, setSummaryStats] = useState({
      resourcesSize: 0,
      transferredSize: 0,
    });

    const originalListRef = useRef([]);
    const socketListRef = useRef([]);

    const {
      sessionStore: { devTools },
    } = useStore();
    const { filter } = devTools[INDEX_KEY];
    const { activeTab } = devTools[INDEX_KEY];
    const activeIndex = activeOutsideIndex ?? devTools[INDEX_KEY].index;
    const [inputFilterValue, setInputFilterValue] = useState(filter);

    const debouncedFilter = useCallback(
      debounceCall((filterValue) => {
        devTools.update(INDEX_KEY, { filter: filterValue });
      }, 300),
      [],
    );

    // Process socket lists once
    useEffect(() => {
      const uniqueSocketList = websocketList.filter(
        (ws, i, arr) =>
          arr.findIndex((it) => it.channelName === ws.channelName) === i,
      );
      socketListRef.current = uniqueSocketList;
    }, [websocketList.length]);

    // Initial data processing - do this only once when data changes
    useEffect(() => {
      setIsLoading(true);

      // Heaviest operation here, will create a final merged network list
      const processData = async () => {
        const fetchUrls = new Set(
          fetchList.map((ft) => {
            return `${ft.name}-${Math.floor(ft.time / 100)}-${Math.floor(ft.duration / 100)}`;
          }),
        );

        // We want to get resources that aren't in fetch list
        const filteredResources = await processInChunks(resourceList, (chunk) =>
          chunk.filter((res: any) => {
            const key = `${res.name}-${Math.floor(res.time / 100)}-${Math.floor(res.duration / 100)}`;
            return !fetchUrls.has(key);
          }),
          BATCH_SIZE,
          25,
        );

        const processedSockets = socketListRef.current.map((ws: any) => ({
          ...ws,
          type: 'websocket',
          method: 'ws',
          url: ws.channelName,
          name: ws.channelName,
          status: '101',
          duration: 0,
          transferredBodySize: 0,
        }));

        const mergedList: Timed[] = mergeListsWithZoom(
          filteredResources as Timed[],
          fetchList,
          processedSockets as Timed[],
          { enabled: Boolean(zoomEnabled), start: zoomStartTs ?? 0, end: zoomEndTs ?? 0 }
        )

        originalListRef.current = mergedList;
        setTotalItems(mergedList.length);

        calculateResourceStats(resourceList);

        // Only display initial chunk
        setDisplayedItems(mergedList.slice(0, INITIAL_LOAD_SIZE));
        setIsLoading(false);
      };

      void processData();
    }, [
      resourceList.length,
      fetchList.length,
      socketListRef.current.length,
      zoomEnabled,
      zoomStartTs,
      zoomEndTs,
    ]);

    const calculateResourceStats = (resourceList: Record<string, any>) => {
      setTimeout(() => {
        let resourcesSize = 0
        let transferredSize = 0
        resourceList.forEach(({ decodedBodySize, headerSize, encodedBodySize }: any) => {
          resourcesSize += decodedBodySize || 0
          transferredSize += (headerSize || 0) + (encodedBodySize || 0)
        })

        setSummaryStats({
          resourcesSize,
          transferredSize,
        });
      }, 0);
    }

    useEffect(() => {
      if (originalListRef.current.length === 0) return;
      setIsProcessing(true);
      const applyFilters = async () => {
        let filteredItems: any[] = originalListRef.current;

        filteredItems = await processInChunks(filteredItems, (chunk) =>
          chunk.filter(
            (it) => {
              let valid = true;
              if (showOnlyErrors) {
                valid = parseInt(it.status) >= 400 || !it.success || it.error
              }
              if (filter) {
                try {
                  const regex = new RegExp(filter, 'i');
                  valid = valid && regex.test(it.status) || regex.test(it.name) || regex.test(it.type) || regex.test(it.method);
                } catch (e) {
                  valid = valid && String(it.status).includes(filter) || it.name.includes(filter) || it.type.includes(filter) || (it.method && it.method.includes(filter));
                }
              }
              if (activeTab !== ALL) {
                valid = valid && TYPE_TO_TAB[it.type] === activeTab;
              }

              return valid;
            },
          ),
        );

        // Update displayed items
        setDisplayedItems(filteredItems.slice(0, INITIAL_LOAD_SIZE));
        setTotalItems(filteredItems.length);
        setIsProcessing(false);
      };

      void applyFilters();
    }, [filter, activeTab, showOnlyErrors]);

    const loadMoreItems = useCallback(() => {
      if (isProcessing) return;

      setIsProcessing(true);
      setTimeout(() => {
        setDisplayedItems((prevItems) => {
          const currentLength = prevItems.length;
          const newItems = originalListRef.current.slice(
            currentLength,
            currentLength + BATCH_SIZE,
          );
          return [...prevItems, ...newItems];
        });
        setIsProcessing(false);
      }, 10);
    }, [isProcessing]);

    const hasMoreItems = displayedItems.length < totalItems;
    const loadingRef = useInfiniteScroll(loadMoreItems, hasMoreItems);

    const onTabClick = (activeTab) => {
      devTools.update(INDEX_KEY, { activeTab });
    };

    const onFilterChange = ({ target: { value } }) => {
      setInputFilterValue(value)
      debouncedFilter(value);
    };

    const [timeoutStartAutoscroll, stopAutoscroll] = useAutoscroll(
      displayedItems,
      getLastItemTime(fetchListNow, resourceListNow),
      activeIndex,
      (index) => devTools.update(INDEX_KEY, { index }),
    );
    const onMouseEnter = () => stopAutoscroll;
    const onMouseLeave = () => {
      if (isDetailsModalActive) {
        return;
      }
      timeoutStartAutoscroll();
    };

    const referenceLines = useMemo(() => {
      const arr = [];

      if (domContentLoadedTime != null) {
        arr.push({
          time: domContentLoadedTime.time,
          color: DOM_LOADED_TIME_COLOR,
        });
      }
      if (loadTime != null) {
        arr.push({
          time: loadTime.time,
          color: LOAD_TIME_COLOR,
        });
      }

      return arr;
    }, [domContentLoadedTime, loadTime]);

    const showDetailsModal = (item: any) => {
      if (item.type === 'websocket') {
        const socketMsgList = websocketList.filter(
          (ws) => ws.channelName === item.channelName,
        );

        return setSelectedWsChannel(socketMsgList);
      }
      setIsDetailsModalActive(true);
      showModal(
        <FetchDetailsModal
          isSpot={isSpot}
          time={item.time + startedAt}
          resource={item}
          rows={displayedItems}
          fetchPresented={fetchList.length > 0}
        />,
        {
          right: true,
          width: 500,
          onClose: () => {
            setIsDetailsModalActive(false);
            timeoutStartAutoscroll();
          },
        },
      );
      devTools.update(INDEX_KEY, { index: displayedItems.indexOf(item) });
      stopAutoscroll();
    };

    const tableCols = useMemo(() => {
      const cols = [
        {
          label: t('Status'),
          dataKey: 'status',
          width: 90,
          render: renderStatus,
        },
        {
          label: t('Type'),
          dataKey: 'type',
          width: 90,
          render: renderType,
        },
        {
          label: t('Method'),
          width: 80,
          dataKey: 'method',
        },
        {
          label: t('Name'),
          width: 240,
          dataKey: 'name',
          render: renderName,
        },
        {
          label: t('Size'),
          width: 80,
          dataKey: 'decodedBodySize',
          render: renderSize,
          hidden: activeTab === XHR,
        },
        {
          label: t('Duration'),
          width: 80,
          dataKey: 'duration',
          render: renderDuration,
        },
      ];
      if (!showSingleTab && !isSpot) {
        cols.unshift({
          label: t('Source'),
          width: 64,
          render: (r: Record<string, any>) => (
            <Tooltip
              title={`${getTabName?.(r.tabId) ?? `Tab ${getTabNum?.(r.tabId) ?? 0}`}`}
              placement="left"
            >
              <div className="bg-gray-light rounded-full min-w-5 min-h-5 w-5 h-5 flex items-center justify-center text-xs cursor-default">
                {getTabNum?.(r.tabId) ?? 0}
              </div>
            </Tooltip>
          ),
        });
      }
      return cols;
    }, [showSingleTab, activeTab, t, getTabName, getTabNum, isSpot]);

    return (
      <BottomBlock
        style={{ height: '100%' }}
        className="border"
        onMouseEnter={onMouseEnter}
        onMouseLeave={onMouseLeave}
      >
        <BottomBlock.Header onClose={onClose}>
          <div className="flex items-center">
            <span className="font-semibold color-gray-medium mr-4">
              {t('Network')}
            </span>
            {isMobile ? null : (
              <Tabs
                className="uppercase"
                tabs={NETWORK_TABS}
                active={activeTab}
                onClick={onTabClick}
                border={false}
              />
            )}
          </div>
          <div className="flex items-center gap-2">
            {!isMobile && !isSpot ? <TabSelector /> : null}
            <Input
              className="rounded-lg"
              placeholder="Filter by name, type, method or value"
              name="filter"
              onChange={onFilterChange}
              width={280}
              value={inputFilterValue}
              size="small"
              prefix={<SearchOutlined className="text-neutral-400" />}
            />
          </div>
        </BottomBlock.Header>
        <BottomBlock.Content>
          <div className="flex items-center justify-between px-4 border-b bg-teal/5 h-8">
            <div className="flex items-center">
              <Form.Item name="show-errors-only" className="mb-0">
                <label
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    cursor: 'pointer',
                  }}
                >
                  <Switch
                    checked={showOnlyErrors}
                    onChange={() => setShowOnlyErrors(!showOnlyErrors)}
                    size="small"
                  />
                  <span className="text-sm ms-2">4xx-5xx Only</span>
                </label>
              </Form.Item>

              {isProcessing && (
                <span className="text-xs text-gray-500 ml-4">
                  Processing data...
                </span>
              )}
            </div>
            <InfoLine>
              <InfoLine.Point label={`${totalItems}`} value="requests" />
              <InfoLine.Point
                label={`${displayedItems.length}/${totalItems}`}
                value="displayed"
                display={displayedItems.length < totalItems}
              />
              <InfoLine.Point
                label={formatBytes(summaryStats.transferredSize)}
                value="transferred"
                display={summaryStats.transferredSize > 0}
              />
              <InfoLine.Point
                label={formatBytes(summaryStats.resourcesSize)}
                value="resources"
                display={summaryStats.resourcesSize > 0}
              />
              <InfoLine.Point
                label={formatMs(domBuildingTime)}
                value="DOM Building Time"
                display={domBuildingTime != null}
              />
              <InfoLine.Point
                label={
                  domContentLoadedTime && formatMs(domContentLoadedTime.value)
                }
                value="DOMContentLoaded"
                display={domContentLoadedTime != null}
                dotColor={DOM_LOADED_TIME_COLOR}
              />
              <InfoLine.Point
                label={loadTime && formatMs(loadTime.value)}
                value="Load"
                display={loadTime != null}
                dotColor={LOAD_TIME_COLOR}
              />
            </InfoLine>
          </div>

          {isLoading ? (
            <div className="flex items-center justify-center h-full">
              <div className="text-center">
                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto mb-2"></div>
                <p>Processing initial network data...</p>
              </div>
            </div>
          ) : (
            <NoContent
              title={
                <div className="capitalize flex items-center gap-2">
                  <InfoCircleOutlined size={18} />
                  {t('No Data')}
                </div>
              }
              size="small"
              show={displayedItems.length === 0}
            >
              <div>
                <TimeTable
                  rows={displayedItems}
                  tableHeight={panelHeight - 102 - (hasMoreItems ? 30 : 0)}
                  referenceLines={referenceLines}
                  renderPopup
                  onRowClick={showDetailsModal}
                  sortBy="time"
                  sortAscending
                  onJump={(row) => {
                    devTools.update(INDEX_KEY, {
                      index: displayedItems.indexOf(row),
                    });
                    player.jump(row.time);
                  }}
                  activeIndex={activeIndex}
                >
                  {tableCols}
                </TimeTable>

                {hasMoreItems && (
                  <div
                    ref={loadingRef}
                    className="flex justify-center items-center text-xs text-gray-500"
                  >
                      <div className="flex items-center">
                        <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-gray-600 mr-2"></div>
                        Loading more data ({totalItems - displayedItems.length}{' '}
                        remaining)
                      </div>
                  </div>
                )}
              </div>

              {selectedWsChannel ? (
                <WSPanel
                  socketMsgList={selectedWsChannel}
                  onClose={() => setSelectedWsChannel(null)}
                />
              ) : null}
            </NoContent>
          )}
        </BottomBlock.Content>
      </BottomBlock>
    );
  },
);

const WebNetworkPanel = observer(NetworkPanelCont);
const MobileNetworkPanel = observer(MobileNetworkPanelCont);

export { WebNetworkPanel, MobileNetworkPanel };