import { useMemo, useRef, useState } from 'react';
import ChartTooltip from '../../charts/ChartTooltip';
import FloatingTooltip from '../../charts/native/FloatingTooltip';

const DEFAULT_EMOTION_RATIO = { positive: 0.34, objective: 0.33, negative: 0.33 };
const ROOT_WIDTH = 38;
const CARD_WIDTH_COLLAPSED = 346;
const CARD_WIDTH_EXPANDED = 158;
const CARD_ARROW_WIDTH = 14;
const CARD_BASE_HEIGHT = 88;
const CARD_MAX_HEIGHT = 120;
const ROW_GAP = 12;
const COLUMN_GAP = 81;
const COLUMN_GAP_COLLAPSED = 8;
const COLOR_PRIMARY_GREEN = 'var(--status-success, #24CDA5)';
const COLOR_PRIMARY_GREEN_LIGHT = 'var(--tfds-communicate-point-flow-primary-light, rgba(36, 205, 165, 0.42))';
const COLOR_POSITIVE_GREEN = COLOR_PRIMARY_GREEN;
const COLOR_NEGATIVE_RED = 'var(--status-danger, #F2496F)';
const COLOR_TEXT_MAIN = 'var(--tfds-communicate-point-flow-text, rgb(34, 39, 39))';
const COLOR_TEXT_SECONDARY = 'var(--tfds-communicate-point-flow-text-secondary, rgba(34, 39, 39, 0.8))';
const COLOR_TEXT_MUTED = 'var(--tfds-communicate-point-flow-text-muted, rgba(34, 39, 39, 0.6))';
const COLOR_LINK_DEFAULT = COLOR_PRIMARY_GREEN_LIGHT;
const COLOR_LINK_MUTED = 'var(--color-blueGrey-300)';
const COLOR_LINK_SELECTED = COLOR_PRIMARY_GREEN;

const EMOTION_LABEL_MAP = {
  positive: '正向',
  objective: '中立',
  negative: '负向',
};

const EMOTION_COLOR_MAP = {
  positive: COLOR_POSITIVE_GREEN,
  objective: 'var(--color-blueGrey-500, #98A2B3)',
  negative: COLOR_NEGATIVE_RED,
};

const defaultMockData = [
  {
    id: 'product',
    title: '产品讨论',
    value: 1657,
    percent: 0.33,
    emotion: { positive: 0.4, objective: 0.35, negative: 0.25 },
    children: [
      { id: 'product-1', title: '五一出游新玩法', value: 149, percent: 0.23 },
      { id: 'product-2', title: '城市踏青打卡地', value: 84, percent: 0.13 },
      { id: 'product-3', title: '活动与事件', value: 156, percent: 0.24 },
      { id: 'product-4', title: '五一出游新玩法', value: 202, percent: 0.31 },
      { id: 'product-5', title: '五一出游新玩法', value: 189, percent: 0.29 },
    ],
  },
  {
    id: 'activity',
    title: '活动及玩法',
    value: 652,
    percent: 0.13,
    emotion: { positive: 0.5, objective: 0.3, negative: 0.2 },
    children: [
      { id: 'activity-1', title: '五一出游新玩法', value: 149, percent: 0.23 },
      { id: 'activity-2', title: '城市踏青打卡地', value: 84, percent: 0.13 },
      { id: 'activity-3', title: '活动与事件', value: 156, percent: 0.24 },
      { id: 'activity-4', title: '五一出游新玩法', value: 202, percent: 0.31 },
      { id: 'activity-5', title: '五一出游新玩法', value: 189, percent: 0.29 },
    ],
  },
  {
    id: 'feedback',
    title: '反馈建议',
    value: 401,
    percent: 0.08,
    emotion: { positive: 0.28, objective: 0.32, negative: 0.4 },
    children: [
      { id: 'feedback-1', title: '功能体验反馈', value: 132, percent: 0.33 },
      { id: 'feedback-2', title: 'Bug 与卡顿反馈', value: 98, percent: 0.24 },
      { id: 'feedback-3', title: '产品建议', value: 85, percent: 0.21 },
      { id: 'feedback-4', title: '客服响应', value: 86, percent: 0.22 },
    ],
  },
  {
    id: 'content',
    title: '内容资源',
    value: 853,
    percent: 0.17,
    emotion: { positive: 0.45, objective: 0.3, negative: 0.25 },
    children: [
      { id: 'content-1', title: '短视频内容', value: 312, percent: 0.37 },
      { id: 'content-2', title: '直播内容', value: 221, percent: 0.26 },
      { id: 'content-3', title: '图文资讯', value: 168, percent: 0.2 },
      { id: 'content-4', title: '创作者生态', value: 152, percent: 0.17 },
    ],
  },
  {
    id: 'competitor',
    title: '相关竞对讨论',
    value: 451,
    percent: 0.09,
    emotion: { positive: 0.3, objective: 0.35, negative: 0.35 },
    children: [
      { id: 'competitor-1', title: '功能对比', value: 146, percent: 0.32 },
      { id: 'competitor-2', title: '价格对比', value: 112, percent: 0.25 },
      { id: 'competitor-3', title: '体验对比', value: 98, percent: 0.22 },
      { id: 'competitor-4', title: '品牌讨论', value: 95, percent: 0.21 },
    ],
  },
  {
    id: 'ad',
    title: '广告',
    value: 1004,
    percent: 0.2,
    emotion: { positive: 0.22, objective: 0.38, negative: 0.4 },
    children: [
      { id: 'ad-1', title: '开屏广告', value: 284, percent: 0.28 },
      { id: 'ad-2', title: '信息流广告', value: 312, percent: 0.31 },
      { id: 'ad-3', title: '贴片广告', value: 208, percent: 0.21 },
      { id: 'ad-4', title: '广告投放频次', value: 200, percent: 0.2 },
    ],
  },
];

function clampPercent(value) {
  if (!Number.isFinite(value)) return 0;
  if (value < 0) return 0;
  if (value > 1) return 1;
  return value;
}

function formatPercent(value) {
  return `${Math.round(clampPercent(value) * 100)}%`;
}

function formatCount(value) {
  if (value == null || !Number.isFinite(Number(value))) return '--';
  return new Intl.NumberFormat('zh-CN').format(Number(value));
}

function formatEmotionTooltipValue(item) {
  const percent = formatPercent(item.ratio);
  if (item.count == null || !Number.isFinite(Number(item.count))) return percent;
  return `${formatCount(item.count)} / ${percent}`;
}

function getColumnHeight(count, cardHeight) {
  if (count <= 0) return 0;
  return count * cardHeight + Math.max(count - 1, 0) * ROW_GAP;
}

function getAdaptiveCardHeight(count, containerHeight, maxHeight) {
  if (count <= 0) return CARD_BASE_HEIGHT;
  const totalGapHeight = Math.max(count - 1, 0) * ROW_GAP;
  const availableHeight = Math.max(containerHeight - totalGapHeight, 0);
  const cardHeight = availableHeight / count;
  return maxHeight ? Math.min(cardHeight, maxHeight) : cardHeight;
}

function getCssHeightValue(height, fallback) {
  if (height == null) return fallback;
  return typeof height === 'number' ? height : height;
}

function getNumericHeight(height, fallback) {
  if (typeof height === 'number') return Math.max(height, CARD_BASE_HEIGHT);
  const parsed = Number.parseFloat(String(height ?? ''));
  return Number.isFinite(parsed) ? Math.max(parsed, CARD_BASE_HEIGHT) : fallback;
}

function RootNode({ label, collapsed, height, onRootClick }) {
  return (
    <button
      type="button"
      className={[
        'absolute left-0 top-0 box-border flex items-center justify-center rounded border px-3 py-2 text-sm font-semibold leading-5 transition-all duration-300',
        collapsed
          ? 'border-border bg-blueGrey-50 text-foreground'
          : 'border-transparent text-white',
      ].join(' ')}
      style={{
        width: ROOT_WIDTH,
        height,
        writingMode: 'vertical-rl',
        textOrientation: 'mixed',
        background: collapsed ? undefined : COLOR_PRIMARY_GREEN,
        fontSize: 14,
        fontWeight: 600,
        lineHeight: '20px',
        letterSpacing: '0.16em',
      }}
      onPointerDown={(event) => {
        event.stopPropagation();
        onRootClick?.();
      }}
    >
      {!collapsed ? (
        <span
          className="absolute right-[-6px] top-1/2 z-[1] h-2.5 w-2.5 -translate-y-1/2 rounded-full border-2 border-white"
          style={{ background: COLOR_PRIMARY_GREEN_LIGHT }}
        />
      ) : null}
      {label}
    </button>
  );
}

function PointCardNode({
  item,
  selected,
  muted,
  active,
  overview,
  showConnectorArrow,
  width,
  height,
  onCardEnter,
  onCardLeave,
  onCardClick,
  onEmotionTooltipChange,
  onEmotionTooltipClear,
}) {
  if (!item) return null;
  const emotion = item.emotion || DEFAULT_EMOTION_RATIO;
  const positive = clampPercent(emotion.positive);
  const objective = clampPercent(emotion.objective);
  const negative = clampPercent(emotion.negative);
  const total = positive + objective + negative || 1;
  const emotionItems = [
    {
      key: 'positive',
      label: EMOTION_LABEL_MAP.positive,
      color: EMOTION_COLOR_MAP.positive,
      ratio: positive,
      count: emotion.positiveCount,
    },
    {
      key: 'objective',
      label: EMOTION_LABEL_MAP.objective,
      color: EMOTION_COLOR_MAP.objective,
      ratio: objective,
      count: emotion.objectiveCount,
    },
    {
      key: 'negative',
      label: EMOTION_LABEL_MAP.negative,
      color: EMOTION_COLOR_MAP.negative,
      ratio: negative,
      count: emotion.negativeCount,
    },
  ];
  const tooltipRows = emotionItems.map((emotionItem) => ({
    name: emotionItem.label,
    value: formatEmotionTooltipValue(emotionItem),
    color: emotionItem.color,
    dataKey: emotionItem.key,
  }));

  function updateEmotionTooltip(event) {
    onEmotionTooltipChange?.({
      label: item.title,
      rows: tooltipRows,
      mouse: { clientX: event.clientX, clientY: event.clientY },
    });
  }

  return (
    <div
      className={showConnectorArrow ? 'relative h-full w-full pl-3.5' : 'relative h-full w-full'}
      style={{ width, height }}
      onMouseEnter={(event) => {
        event.stopPropagation();
        onCardEnter?.(item.id);
      }}
      onMouseLeave={(event) => {
        event.stopPropagation();
        onCardLeave?.();
      }}
      onClick={(event) => {
        event.stopPropagation();
        onCardClick?.(item);
      }}
    >
      {showConnectorArrow ? (
        <svg
          className="absolute left-0 top-1/2 z-[2] h-4 w-3.5 -translate-y-1/2 overflow-visible"
          width="14"
          height="16"
          viewBox="0 0 14 16"
          aria-hidden="true"
        >
          <path
            d="M0 0 L14 8 L0 16 Z"
            fill="none"
            stroke={active ? COLOR_LINK_SELECTED : muted ? COLOR_LINK_MUTED : COLOR_LINK_DEFAULT}
            strokeWidth="2"
            strokeLinejoin="round"
            strokeLinecap="round"
          />
        </svg>
      ) : null}
      <button
        type="button"
        className={[
          'group relative box-border flex h-full w-full cursor-pointer flex-col justify-center gap-1 overflow-hidden rounded border px-4 py-2.5 text-left transition-all duration-300 hover:border-[#24CDA5]',
          overview ? 'bg-blueGrey-50' : 'bg-white',
          selected
            ? 'shadow-[0_2px_8px_rgba(46,202,180,0.20)]'
            : 'border-[rgba(45,66,107,0.12)]',
          muted ? 'opacity-100' : '',
        ].join(' ')}
        style={{
          borderColor: selected ? COLOR_PRIMARY_GREEN : undefined,
        }}
      >
        <span
          aria-hidden="true"
          className={[
            'pointer-events-none absolute -left-px -top-px bottom-[-1px] w-1.5 rounded-l transition-opacity duration-200',
            selected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100',
          ].join(' ')}
          style={{ background: COLOR_PRIMARY_GREEN }}
        />
        <span
          aria-hidden="true"
          className={[
            'pointer-events-none absolute -right-px -top-px bottom-[-1px] w-1.5 rounded-r transition-opacity duration-200',
            selected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100',
          ].join(' ')}
          style={{ background: COLOR_PRIMARY_GREEN }}
        />
        <span
          className="truncate"
          style={{
            color: COLOR_TEXT_SECONDARY,
            fontSize: 14,
            fontWeight: 600,
            lineHeight: '24px',
          }}
        >
          {item.title}
        </span>
        <span
          className="flex items-baseline gap-0"
          style={{
            color: COLOR_TEXT_MAIN,
            fontSize: 16,
            fontWeight: 600,
            lineHeight: '28px',
            letterSpacing: '-0.03em',
          }}
        >
          <span>{item.value}</span>
          <span style={{ color: COLOR_TEXT_MUTED }}>/ {formatPercent(item.percent)}</span>
        </span>
        <div
          className="flex h-1.5 min-h-1.5 w-full shrink-0 cursor-pointer gap-1 opacity-40 hover:opacity-100 group-[.selected]:opacity-100"
          onMouseEnter={updateEmotionTooltip}
          onMouseMove={updateEmotionTooltip}
          onMouseLeave={onEmotionTooltipClear}
        >
          {emotionItems.map((emotionItem) => (
            <div
              key={emotionItem.key}
              className="h-full min-w-0 rounded-lg"
              style={{
                flex: emotionItem.ratio / total,
                background: emotionItem.color,
              }}
            />
          ))}
        </div>
      </button>
    </div>
  );
}

function SkeletonCard({ left, top, width, height }) {
  return (
    <div
      className="absolute box-border flex flex-col justify-center rounded border border-[rgba(45,66,107,0.12)] bg-white px-4 py-3"
      style={{ left, top, width, height }}
    >
      <span className="mb-3 h-5 w-[52%] rounded bg-blueGrey-100" />
      <span className="mb-3 h-7 w-[36%] rounded bg-blueGrey-100" />
      <span className="h-1.5 w-full rounded bg-blueGrey-100" />
    </div>
  );
}

function Connector({ from, to, active = false, muted = false }) {
  const midX = from.x + Math.max(18, (to.x - from.x) * 0.5);
  const d = `M ${from.x} ${from.y} C ${midX} ${from.y}, ${midX} ${to.y}, ${to.x} ${to.y}`;
  const color = active ? COLOR_LINK_SELECTED : muted ? COLOR_LINK_MUTED : COLOR_LINK_DEFAULT;
  return (
    <g>
      <path
        d={d}
        fill="none"
        stroke={color}
        strokeWidth="2"
        strokeDasharray="2 4"
        strokeLinecap="round"
        opacity={muted ? 0.85 : 1}
      />
    </g>
  );
}

export default function CommunicatePointFlow(props) {
  const {
    rootLabel = '全网讨论',
    dataSource = defaultMockData,
    selectedId,
    selectedChildId,
    defaultSelectedId,
    defaultSelectedChildId,
    onPointClick,
    onSelectionChange,
    onRootClick,
    className = '',
    style,
    height = 600,
    loading = false,
  } = props;
  const items = Array.isArray(dataSource) && dataSource.length > 0 ? dataSource : defaultMockData;
  const [innerSelectedId, setInnerSelectedId] = useState(defaultSelectedId);
  const [innerSelectedChildId, setInnerSelectedChildId] = useState(defaultSelectedChildId);
  const [hoverId, setHoverId] = useState();
  const [emotionTooltip, setEmotionTooltip] = useState(null);
  const wrapperRef = useRef(null);

  const isSelectedIdControlled = Object.prototype.hasOwnProperty.call(props, 'selectedId');
  const isSelectedChildIdControlled = Object.prototype.hasOwnProperty.call(props, 'selectedChildId');
  const resolvedSelectedId = isSelectedIdControlled ? selectedId : innerSelectedId;
  const resolvedSelectedChildId = isSelectedChildIdControlled ? selectedChildId : innerSelectedChildId;
  const hasSelection = Boolean(resolvedSelectedId);
  const activeId = hoverId || resolvedSelectedId;
  const activeItem = useMemo(
    () => items.find((item) => item.id === resolvedSelectedId),
    [items, resolvedSelectedId],
  );
  const activeChildren = hasSelection ? activeItem?.children || [] : [];
  const cardWidth = hasSelection ? CARD_WIDTH_EXPANDED : CARD_WIDTH_COLLAPSED;
  const rootToLevel2Gap = hasSelection ? COLUMN_GAP_COLLAPSED : COLUMN_GAP;
  const level2Count = items.length;
  const level3Count = activeChildren.length;
  const naturalContainerHeight = useMemo(() => {
    const level2Height = getColumnHeight(level2Count, CARD_BASE_HEIGHT);
    const level3Height = hasSelection ? getColumnHeight(level3Count, CARD_BASE_HEIGHT) : 0;
    return Math.max(level2Height, level3Height, CARD_BASE_HEIGHT);
  }, [hasSelection, level2Count, level3Count]);
  const containerHeight = getNumericHeight(height, naturalContainerHeight);
  const level2CardHeight = getAdaptiveCardHeight(level2Count, containerHeight);
  const level3CardHeight = getAdaptiveCardHeight(level3Count, containerHeight, CARD_MAX_HEIGHT);
  const level3ColumnHeight = getColumnHeight(level3Count, level3CardHeight);
  const level3StartY = Math.max((containerHeight - level3ColumnHeight) / 2, 0);
  const rootX = 0;
  const level2X = ROOT_WIDTH + rootToLevel2Gap;
  const level3X = level2X + cardWidth + COLUMN_GAP;
  const flowWidth = level3X + cardWidth + CARD_ARROW_WIDTH;

  const loadingLevel2Count = Math.max(level2Count, 4);
  const loadingLevel3Count = Math.max(level3Count, 3);
  const loadingLevel2CardHeight = getAdaptiveCardHeight(loadingLevel2Count, containerHeight);
  const loadingLevel3CardHeight = getAdaptiveCardHeight(loadingLevel3Count, containerHeight, CARD_MAX_HEIGHT);
  const loadingLevel3ColumnHeight = getColumnHeight(loadingLevel3Count, loadingLevel3CardHeight);
  const loadingLevel3StartY = Math.max((containerHeight - loadingLevel3ColumnHeight) / 2, 0);

  function handleLevel2Click(item) {
    if (!isSelectedIdControlled) setInnerSelectedId(item.id);
    if (!isSelectedChildIdControlled) setInnerSelectedChildId(undefined);
    onPointClick?.(item);
    onSelectionChange?.({ level: 'level2', item });
  }

  function handleRootClick() {
    if (!isSelectedIdControlled) setInnerSelectedId(undefined);
    if (!isSelectedChildIdControlled) setInnerSelectedChildId(undefined);
    onRootClick?.();
    onSelectionChange?.({ level: 'root' });
  }

  function handleLevel3Click(item) {
    if (!isSelectedChildIdControlled) setInnerSelectedChildId(item.id);
    onSelectionChange?.({ level: 'level3', item, parentItem: activeItem });
  }

  const level2Nodes = items.map((item, index) => {
    const y = index * (level2CardHeight + ROW_GAP);
    const isActive = item.id === activeId;
    const isSelected = item.id === resolvedSelectedId;
    const isMuted = Boolean(activeId) && !isActive;
    return { item, x: level2X, y, isActive, isSelected, isMuted };
  });

  const level3Nodes = activeChildren.map((child, index) => {
    const y = level3StartY + index * (level3CardHeight + ROW_GAP);
    const isChildHovered = child.id === hoverId;
    const isChildSelected = child.id === resolvedSelectedChildId;
    return { item: child, x: level3X, y, isChildHovered, isChildSelected };
  });

  const isHoveringLevel3 = activeChildren.some((child) => child.id === hoverId);
  const hasSelectedLevel3 = activeChildren.some((child) => child.id === resolvedSelectedChildId);

  return (
    <div
      ref={wrapperRef}
      className={['relative w-full overflow-hidden bg-transparent touch-none', className].filter(Boolean).join(' ')}
      style={{
        height: getCssHeightValue(height, containerHeight),
        transition: 'height 0.3s ease',
        ...style,
      }}
      onWheelCapture={(event) => event.stopPropagation()}
      onTouchMoveCapture={(event) => event.stopPropagation()}
    >
      <div className="relative h-full" style={{ minWidth: flowWidth, height: containerHeight }}>
        <svg
          className="pointer-events-none absolute left-0 top-0 h-full overflow-visible"
          width={flowWidth}
          height={containerHeight}
          viewBox={`0 0 ${flowWidth} ${containerHeight}`}
        >
          {!hasSelection ? level2Nodes.map((node) => (
            <Connector
              key={`__root__-${node.item.id}`}
              from={{ x: rootX + ROOT_WIDTH, y: containerHeight / 2 }}
              to={{ x: node.x, y: node.y + level2CardHeight / 2 }}
              active={node.isActive}
              muted={Boolean(activeId) && !node.isActive}
            />
          )) : null}
          {hasSelection ? level3Nodes.map((node) => {
            const childEdgeActive = node.isChildHovered || node.isChildSelected;
            const childEdgeMuted = (isHoveringLevel3 || hasSelectedLevel3) && !childEdgeActive;
            const parentY = level2Nodes.find((row) => row.item.id === resolvedSelectedId)?.y || 0;
            return (
              <Connector
                key={`${resolvedSelectedId}-${node.item.id}`}
                from={{ x: level2X + cardWidth, y: parentY + level2CardHeight / 2 }}
                to={{ x: node.x, y: node.y + level3CardHeight / 2 }}
                active={childEdgeActive}
                muted={childEdgeMuted}
              />
            );
          }) : null}
        </svg>

        <RootNode
          label={rootLabel}
          collapsed={hasSelection}
          height={containerHeight}
          onRootClick={handleRootClick}
        />

        {level2Nodes.map((node) => (
          <div
            key={node.item.id}
            className="absolute"
            style={{ left: node.x, top: node.y, width: !hasSelection ? cardWidth + CARD_ARROW_WIDTH : cardWidth, height: level2CardHeight }}
          >
            <PointCardNode
              item={node.item}
              selected={node.isSelected}
              active={node.isActive}
              muted={node.isMuted}
              overview={!hasSelection}
              showConnectorArrow={!hasSelection}
              width={!hasSelection ? cardWidth + CARD_ARROW_WIDTH : cardWidth}
              height={level2CardHeight}
              onCardEnter={setHoverId}
              onCardLeave={() => {
                setHoverId(undefined);
                setEmotionTooltip(null);
              }}
              onCardClick={handleLevel2Click}
              onEmotionTooltipChange={setEmotionTooltip}
              onEmotionTooltipClear={() => setEmotionTooltip(null)}
            />
          </div>
        ))}

        {level3Nodes.map((node) => {
          const childActive = node.isChildHovered || node.isChildSelected;
          const childMuted = (isHoveringLevel3 || hasSelectedLevel3) && !childActive;
          return (
            <div
              key={node.item.id}
              className="absolute"
              style={{ left: node.x, top: node.y, width: cardWidth + CARD_ARROW_WIDTH, height: level3CardHeight }}
            >
              <PointCardNode
                item={node.item}
                selected={node.isChildSelected}
                active={childActive}
                muted={childMuted}
                showConnectorArrow
                width={cardWidth + CARD_ARROW_WIDTH}
                height={level3CardHeight}
                onCardEnter={setHoverId}
                onCardLeave={() => {
                  setHoverId(undefined);
                  setEmotionTooltip(null);
                }}
                onCardClick={handleLevel3Click}
                onEmotionTooltipChange={setEmotionTooltip}
                onEmotionTooltipClear={() => setEmotionTooltip(null)}
              />
            </div>
          );
        })}

        {loading ? (
          <div className="pointer-events-none absolute inset-0 z-[3]">
            {Array.from({ length: loadingLevel2Count }).map((_, index) => (
              <SkeletonCard
                key={`level2-loading-${index}`}
                left={level2X}
                top={index * (loadingLevel2CardHeight + ROW_GAP)}
                width={cardWidth}
                height={loadingLevel2CardHeight}
              />
            ))}
            {hasSelection ? Array.from({ length: loadingLevel3Count }).map((_, index) => (
              <SkeletonCard
                key={`level3-loading-${index}`}
                left={level3X}
                top={loadingLevel3StartY + index * (loadingLevel3CardHeight + ROW_GAP)}
                width={cardWidth}
                height={loadingLevel3CardHeight}
              />
            )) : null}
          </div>
        ) : null}
      </div>
      {emotionTooltip ? (
        <FloatingTooltip mouse={emotionTooltip.mouse}>
          <ChartTooltip
            variant="chart"
            label={emotionTooltip.label}
            rows={emotionTooltip.rows}
          />
        </FloatingTooltip>
      ) : null}
    </div>
  );
}
