import React, { useEffect, useMemo, useState } from 'react';
import { makeStyles, } from "@mui/styles";
import { 
	Typography, 
	ToggleButton, 
	ToggleButtonGroup, 
	Select, 
	MenuItem, 
	FormControl, 
	InputLabel, 
	Box,
	Autocomplete,
	TextField,
	Tooltip,
	IconButton,
} from '@mui/material';
import { BarChart, BarSeries, Bar, GridlineSeries, Gridline, TooltipArea, ChartTooltip, LinearYAxis, LinearYAxisTickSeries, LinearYAxisTickLabel } from 'reaviz';
import theme from '../theme.jsx';
import {green, yellow, red} from "../views/AngularWorkflow.jsx"
import {
	OpenInNew as OpenInNewIcon,
} from '@mui/icons-material';

// Compact number formatter for axis ticks (e.g. 12,000 -> 12k, 12,000,000 -> 12M)
function formatCompactNumber(value) {
  const n = Number(value) || 0;
  const abs = Math.abs(n);
  if (abs >= 1e9) return `${Math.round((n / 1e9) * 10) / 10}B`;
  if (abs >= 1e6) return `${Math.round((n / 1e6) * 10) / 10}M`;
  if (abs >= 1e3) return `${Math.round((n / 1e3) * 10) / 10}k`;
  return `${n}`;
}

// Helpers to keep date and "today" logic concise and consistent
function toYMD(date) {
  const d = new Date(date);
  const y = d.getFullYear();
  const m = String(d.getMonth() + 1).padStart(2, '0');
  const dd = String(d.getDate()).padStart(2, '0');
  return `${y}-${m}-${dd}`;
}

function entriesContainDateYMD(entries, date) {
  const target = toYMD(date);
  return Array.isArray(entries) && entries.some((e) => toYMD(e.date) === target);
}

function computeTodayValueForAll(key, data) {
  if (key === 'app_executions') {
    return Number(data?.daily_app_executions ?? 0) + Number(data?.daily_child_app_executions ?? 0);
  }
  if (key === 'workflow_executions') {
    const parent = Number(data?.daily_workflow_executions ?? 0);
    const parentFinished = Number(data?.daily_workflow_executions_finished ?? 0);
    const parentFailed = Number(data?.daily_workflow_executions_failed ?? 0);
    const childFinished = Number(data?.daily_child_workflow_executions_finished ?? 0);
    const childFailed = Number(data?.daily_child_workflow_executions_failed ?? 0);
    const parentVal = parent > 0 ? parent : (parentFinished + parentFailed);
    return parentVal + childFinished + childFailed;
  }
  return 0;
}

function computeTodayValueForOrg(key, orgStats) {
  if (key === 'workflow_executions') {
    const total = orgStats?.daily_workflow_executions;
    const finished = Number(orgStats?.daily_workflow_executions_finished ?? 0);
    const failed = Number(orgStats?.daily_workflow_executions_failed ?? 0);
    return total !== undefined ? Number(total || 0) : (finished + failed);
  }
  if (key === 'app_executions') {
    return Number(orgStats?.daily_app_executions ?? 0);
  }
  return 0;
}

  const RunsOverTimeWidget = (props) => {
    const { globalUrl, onLoadingChange, monthOverride, dummyMode, selectedOrganization, selectedOrgForStats, orgStats, orgForLimit, loadingSelectedOrgStats } = props;
  const [mode, setMode] = useState('workflows'); // 'apps' | 'workflows'
  const [selectedStatType, setSelectedStatType] = useState({
	  "value": 'total_workflow_executions',
	  "label": 'Workflows',
	  "amount": 0,
  })
  const [series, setSeries] = useState([]);
  const [days, setDays] = useState(365); // aggregate to last 12 months by default
  const [selectedMonth, setSelectedMonth] = useState(null); // Date representing first day of target month, or null for yearly view
  const [statTypeOptions, setStatTypeOptions] = useState([])
  const [loading, setLoading] = useState(false);
  const useStyles = makeStyles({
    notchedOutline: {
      borderColor: "#FF8544 !important",
    },
    root: {
      "& .MuiAutocomplete-listbox": {
        border: "2px solid #FF8544",
        color: theme.palette.text.primary,
        fontSize: 18,
        "& li:nth-child(even)": {
          backgroundColor: "#CCC",
        },
        "& li:nth-child(odd)": {
          backgroundColor: "#FFF",
        },
      },
    },
    inputRoot: {
      color: theme.palette.text.primary,
      "&:hover .MuiOutlinedInput-notchedOutline": {
        borderColor: "#f86a3e",
      },
    },
  });
  const classes = useStyles();

  // Helper: fetch time series for a specific statistics key
  const fetchSeriesForKey = async (key) => {

	if (statTypeOptions?.length < 3) {
		var foundkeys = {}
		for (var key in orgStats) {
			if (!key.startsWith("total_")) {
				continue
			}

			// Remove total
			foundkeys[key] = orgStats[key]
		}

		for (var foundKey in orgStats?.daily_statistics) {
			const dailyStats = orgStats?.daily_statistics[foundKey]

			for (var additionKey in dailyStats?.additions) {
				const addition = dailyStats?.additions[additionKey];
				if (foundkeys[addition?.key] === undefined) {
					foundkeys[addition?.key] = addition?.value
				} else {
					foundkeys[addition?.key] += addition?.value
				}
			}
		}

		var newarray = []
		for (var key in foundkeys) {
			const foundkey = key

			var parsedname = key
			if (parsedname?.startsWith("total_")) {
				parsedname = parsedname.replace("total_", "")
			}

			if (parsedname?.startsWith("categorylabel")) {
				parsedname = parsedname.replace("categorylabel", "")
			}

			parsedname = (parsedname.charAt(0).toUpperCase() + parsedname.substring(1)).replaceAll("_", " ") 

			newarray.push({
				"value": key,
				"label": parsedname,
				"amount": foundkeys[key],
			})
		}

		if (newarray.length > 0) {
			setStatTypeOptions(newarray)
		}
	}

    try {
      // If specific org is selected and pre-fetched stats are available, use them directly
      if (selectedOrgForStats && selectedOrgForStats !== 'ALL' && orgStats && Array.isArray(orgStats?.daily_statistics)) {

        const dailyStats = orgStats.daily_statistics;
        const processedEntries = [];
        const cutoff = new Date();
        cutoff.setDate(cutoff.getDate() - days);

		if (key.startsWith("total_")) {
			key = key.replace("total_", "")
		}

        for (const day of dailyStats) {
          if (!day?.date) continue;
          const dayDate = new Date(day.date);
          if (dayDate < cutoff) continue;

          let value = 0;

		  if (day[key] === undefined) {
			  for (var additionKey in day?.additions) {
				  const addition = day?.additions[additionKey];
				  if (addition?.key === key) {
					  value += Number(addition?.value || 0);
					  break
				  }
			  }
		  } else {
			  value = Number(day[key] || 0);
		  }

          processedEntries.push({ date: day.date, value });
        }

        // Append today's values if not present
        try {
          if (!entriesContainDateYMD(processedEntries, new Date())) {
            const todayVal = computeTodayValueForOrg(key, orgStats);
            if (!Number.isNaN(todayVal)) {
              processedEntries.push({ date: new Date().toISOString(), value: todayVal });
            }
          }
        } catch {}

        return processedEntries;
      }

      // If selectedOrgForStats is 'ALL', use parent org's full stats endpoint and combine app_executions + child_app_executions
      if (selectedOrgForStats === 'ALL' && selectedOrganization?.id) {
        // Use the full stats endpoint to get daily_statistics
        const url = `${globalUrl}/api/v1/orgs/${encodeURIComponent(selectedOrganization.id)}/stats`;
        const r = await fetch(url, { method: 'GET', credentials: 'include', headers: { 'Content-Type': 'application/json' } });
        if (r.ok) {
          const data = await r.json();
          const dailyStats = Array.isArray(data?.daily_statistics) ? data.daily_statistics : [];
          
          // Process each day's data, combining parent + child org runs
          const processedEntries = [];
          const cutoff = new Date();
          cutoff.setDate(cutoff.getDate() - days);
          
          for (const day of dailyStats) {
            if (day?.date) {
              const dayDate = new Date(day.date);
              if (dayDate < cutoff) continue; // Filter by days
              
              let value = day?.[key] || 0;
              // Add child org executions based on the key
              if (key === 'app_executions' && day?.child_app_executions !== undefined) {
                value += (day.child_app_executions || 0);
              } else if (key === 'workflow_executions') {
                // For workflow_executions, sum both child_workflow_executions_finished and child_workflow_executions_failed
                const childFinished = day?.child_workflow_executions_finished || 0;
                const childFailed = day?.child_workflow_executions_failed || 0;
                value += (childFinished + childFailed);
              }
              processedEntries.push({ date: day.date, value });
            }
          }

          // Append today's datapoint for ALL by combining parent + child daily_* counters
          try {
            if (!entriesContainDateYMD(processedEntries, new Date())) {
              const todayVal = computeTodayValueForAll(key, data);
              if (!Number.isNaN(todayVal)) {
                processedEntries.push({ date: new Date().toISOString(), value: todayVal });
              }
            }
          } catch {}
          return processedEntries;
        }
      }
      
      // // If a specific org is selected
      // if (selectedOrgForStats && selectedOrgForStats !== 'ALL') {
      //   const url = `${globalUrl}/api/v1/orgs/${encodeURIComponent(selectedOrgForStats)}/stats/${encodeURIComponent(key)}?days=${encodeURIComponent(days)}`;
      //   const r = await fetch(url, { method: 'GET', credentials: 'include', headers: { 'Content-Type': 'application/json' } });
      //   if (r.ok) {
      //     const j = await r.json();
      //     return Array.isArray(j?.entries) ? j.entries : [];
      //   }
      // }

      // Fallback to global stats
      const urlA = `${globalUrl}/api/v1/stats/${encodeURIComponent(key)}?days=${encodeURIComponent(days)}`;
      const doFetch = async (u) => {
        const r = await fetch(u, { method: 'GET', credentials: 'include', headers: { 'Content-Type': 'application/json' } });
        if (!r.ok) return [];
        const j = await r.json();
        return Array.isArray(j?.entries) ? j.entries : [];
      };
      const a = await doFetch(urlA);
      if (a.length > 0) return a;

      // // Final fallback: old aggregate endpoint returning daily_statistics
      // const fallback = await fetch(`${globalUrl}/api/v1/stats`, { method: 'GET', credentials: 'include', headers: { 'Content-Type': 'application/json' } });
      // if (fallback.ok) {
      //   const data = await fallback.json();
      //   const daily = Array.isArray(data?.daily_statistics) ? data.daily_statistics : [];
      //   const valField = key;
      //   return daily.map((d) => ({ date: d?.date, value: Number(d?.[valField] || 0) }));
      // }
      // return [];
    } catch (e) {
      return [];
    }
  };

  // Load and transform into monthly aggregation for last 12 months
  const loadStats = async (curMode, inputType) => {
    setLoading(true);
    try {
      // Clear current series immediately to avoid any visual overlap while switching views
      setSeries([]);
      if (dummyMode) {
        // Bring back the older dummy series with emphasis on earlier months
        const now = new Date();
        const months = [];
        for (let i = 11; i >= 0; i--) {
          const dt = new Date(now.getFullYear(), now.getMonth() - i, 1);
          months.push(new Date(dt.getFullYear(), dt.getMonth(), 1));
        }
        const base = [20, 18, 22, 24, 23, 21, 15, 12, 9, 15, 24, 20];
        const dummy = months.map((m, idx) => ({ key: m, id: `${m.getFullYear()}-${m.getMonth()}`, data: base[idx] }));
        setSeries(dummy);
        return;
      }

      const key = inputType !== undefined ? inputType : selectedStatType?.value?.length > 0 ? selectedStatType?.value : curMode === 'apps' ? 'app_executions' : 'workflow_executions';
      const entries = await fetchSeriesForKey(key);

      // Normalize variants: {Date, Value} or {date, value}
      const normalized = (entries || []).map((d) => ({
        date: d?.Date ? new Date(d.Date) : (d?.date ? new Date(d.date) : new Date()),
        value: Number(d?.Value ?? d?.value ?? 0),
      }));

      // If a month is selected, show DAILY bars for that month
      if (selectedMonth instanceof Date) {
        const year = selectedMonth.getFullYear();
        const month = selectedMonth.getMonth();

        // Build all days for selected month
        const firstDay = new Date(year, month, 1);
        const nextMonthFirst = new Date(year, month + 1, 1);
        const numDays = Math.round((nextMonthFirst - firstDay) / (1000 * 60 * 60 * 24));

        // Sum values per day (normalize time to midnight)
        const byDayKey = (d) => `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
        const sumPerDay = new Map();
        normalized.forEach((p) => {
          if (!p?.date || Number.isNaN(p.value)) return;
          const d = p.date;
          if (d.getFullYear() !== year || d.getMonth() !== month) return;
          const dayKey = byDayKey(new Date(d.getFullYear(), d.getMonth(), d.getDate()));
          sumPerDay.set(dayKey, (sumPerDay.get(dayKey) || 0) + p.value);
        });

        const dailySeries = Array.from({ length: numDays }, (_, i) => {
          const d = new Date(year, month, i + 1);
          const k = byDayKey(d);
          const v = sumPerDay.get(k) || 0;
          return { key: d, id: k, data: v };
        });

        // Ensure consistent ordering
        setSeries(dailySeries.sort((a, b) => a.key - b.key));
        return;
      }

      // Otherwise, show MONTHLY aggregation for last 12 months including current month
      const now = new Date();
      const months = [];
      for (let i = 11; i >= 0; i--) {
        const dt = new Date(now.getFullYear(), now.getMonth() - i, 1);
        months.push({ y: dt.getFullYear(), m: dt.getMonth(), key: new Date(dt.getFullYear(), dt.getMonth(), 1) });
      }

      const byMonthKey = (d) => `${d.getFullYear()}-${d.getMonth()}`;
      const sumPerMonth = new Map();
      normalized.forEach((p) => {
        if (!p?.date || Number.isNaN(p.value)) return;
        const k = byMonthKey(new Date(p.date.getFullYear(), p.date.getMonth(), 1));
        sumPerMonth.set(k, (sumPerMonth.get(k) || 0) + p.value);
      });

      const monthlySeries = months.map((mm) => {
        const k = `${mm.y}-${mm.m}`;
        const v = sumPerMonth.get(k) || 0;
        return { key: mm.key, id: k, data: v };
      });

      setSeries(monthlySeries);
    } finally {
      setLoading(false);
    }
  };


  useEffect(() => {
	  setTimeout(() => {
		  const starterWidgetStatType = localStorage.getItem("runsOverTimeWidgetStatType")
		  if (starterWidgetStatType) {
			  setSelectedStatType({
				  "value": starterWidgetStatType,
				  "label": (starterWidgetStatType.charAt(0).toUpperCase() + starterWidgetStatType.substring(1)).replaceAll("_", " "),
				  "amount": 0,
			  })
		  
			  loadStats(mode, starterWidgetStatType)
		  }
      
	  }, 1500)
  }, [])

  // Apply month override (e.g. onboarding Explore Now) - consolidated with main load effect
  useEffect(() => {
    if (monthOverride instanceof Date) {
      // Clear series immediately to prevent visual overlap
      setSeries([]);
      setSelectedMonth(new Date(monthOverride.getFullYear(), monthOverride.getMonth(), 1));
      setDays(370);
    }
  }, [monthOverride]);

    useEffect(() => {
      if (loadingSelectedOrgStats === true) {
        setSeries([]);
        return;
      }

      loadStats(mode);
    }, [selectedStatType, mode, globalUrl, days, selectedMonth, dummyMode, selectedOrgForStats, loadingSelectedOrgStats]);

  // Notify parent on loading changes
  useEffect(() => {
    if (typeof onLoadingChange === 'function') {
      onLoadingChange(loading);
    }
  }, [loading, onLoadingChange]);

  const barData = useMemo(() => (
    (Array.isArray(series) ? series : []).map((d) => {
      const dt = new Date(d.key);
      const label = selectedMonth instanceof Date
        ? `${dt.toLocaleString('default', { month: 'short' })} ${dt.getDate()}` // e.g., 'Oct 1'
        : dt.toLocaleString('default', { month: 'short' });
      return { key: label, data: Number(d?.data || 0) };
    })
  ), [series, mode, selectedMonth]);

  // Build month dropdown options for last 12 months
  const monthOptions = useMemo(() => {
    const now = new Date();
    const opts = [];
    for (let i = 0; i < 12; i++) {
      const dt = new Date(now.getFullYear(), now.getMonth() - i, 1);
      opts.push(dt);
    }
    return opts;
  }, []);

  const tooltip = <TooltipArea
					tooltip={
					<ChartTooltip
						placement={"top"}
						followCursor={true}
						content={(data) => (
						<div style={{
							borderRadius: 4,
							backgroundColor: "#1A1A1A",
							border: "1px solid rgba(255,255,255,0.22)",
							color: theme.palette.text.primary,
							padding: 10,
							maxWidth: 240,
							pointerEvents: 'none',
						}}>
							<Typography variant="body2" style={{fontWeight: 600, color: "#ffffff"}}>{data?.x ?? ''}</Typography>
							<Typography variant="body2" style={{color: "#ffffff"}}>{data?.y ?? ''}</Typography>
						</div>
						)}
					/>
					}
				/>;


	const barColorscheme = [
		  "#f85a3e", // anchor orange
		  "#ff7a57", // brighter, more playful
		  "#e14b2e", // slightly darker + redder
		  "#ff9b6b", // soft peachy highlight
		  "#c83f24", // deep burnt orange
	]
	
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <Typography sx={{ fontSize: 18, fontWeight: 500, fontFamily: theme.typography.fontFamily, paddingLeft: 1 }}>{selectedStatType?.label} ({selectedStatType?.amount})</Typography>
        <Box sx={{ display: 'flex', gap: 1.5, alignItems: 'center', justifyContent: 'center' }}>

	  	<Tooltip title="Learn about custom stats" arrow>
			<a href="/docs/API#count-stats-for-custom-key" target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none' }}>
				<IconButton>
					<OpenInNewIcon style={{ color: theme.palette.text.secondary, }} />
				</IconButton>
			</a>
	  	</Tooltip>

        <FormControl size="small" variant="outlined" style={{ minWidth: 350, }} sx={{
          '& .MuiInputBase-root': {
            height: 40,
            backgroundColor: 'rgba(255,255,255,0.06)',
            borderRadius: '20px',
          },
          '& .MuiOutlinedInput-notchedOutline': { borderColor: 'rgba(255,255,255,0.22)' },
        }}>
			<Autocomplete
              labelId="data-type-choice"
              label="Select Datatype"
              autoHighlight
              value={selectedStatType}
              classes={{ inputRoot: classes.inputRoot }}
              ListboxProps={{
                style: {
                  backgroundColor: theme.palette.inputColor,
                  color: theme.palette.text.primary,
                },
              }}
              sx={{
                '& .MuiOutlinedInput-root': {
                  height: 40, // Adjust the input height
                },
                '& .MuiAutocomplete-input': {
                  padding: '8px', // Adjust the text padding
                },
              }}
              getOptionSelected={(option, value) => option.id === value.id}
              getOptionLabel={(option) => {
                if (
                  option === undefined ||
                  option === null ||
                  option.label === undefined ||
                  option.label === null
                ) {
					if (option.value !== undefined && option.value !== null) {
                  		return option.value
					} else {
						return option
					}
                }

                const newname = (
                  option.label.charAt(0).toUpperCase() + option.label.substring(1)
                ).replaceAll("_", " ");
                return newname;
              }}
              options={statTypeOptions}
              fullWidth
              style={{
                backgroundColor: theme.palette?.inputColor,
                borderRadius: theme.palette?.borderRadius,
              }}
              onChange={(event, newValue) => {
				console.log("CHANGE: ", newValue)
              }}
              renderOption={(props, data, state) => {
				// Format to thousand or million
				const formattedamount = formatCompactNumber(data?.amount)
				const numbercolor = data?.amount >= 1000000 ? red : (data?.amount >= 100000 ? yellow : green)

                return (
                    <MenuItem
                      style={{
                        backgroundColor: theme.palette.inputColor,
                      }}
                      value={data}
                      onClick={() => {
						  setSelectedStatType(data)

						  // Set local storage for the key
						  if (data?.value) {
							localStorage.setItem("runsOverTimeWidgetStatType", data?.value)
						  }
                      }}
                    >
						<span style={{minWidth: 60, maxWidth: 60, color: numbercolor, }}>{formattedamount}</span> {data?.label} 
                    </MenuItem>
                )
              }}
              renderInput={(params) => {
                return (
				  <div style={{ display: "flex", }}>
                    <TextField
                      style={theme.palette.textFieldStyle}
                      {...params}
                      label="Find your Stat"
                      variant="outlined"
                    />
				  </div>
                )
              }}
            />
          </FormControl>

        <FormControl size="small" variant="outlined" style={{ minWidth: 170 }} sx={{
          '& .MuiInputBase-root': {
            height: 40,
            backgroundColor: 'rgba(255,255,255,0.06)',
            borderRadius: '20px',
          },
          '& .MuiOutlinedInput-notchedOutline': { borderColor: 'rgba(255,255,255,0.22)' },
        }}>
            <InputLabel id="runs-month-select-label">View Month</InputLabel>
            <Select
              labelId="runs-month-select-label"
              label="View Month"
              value={selectedMonth ? selectedMonth.getTime() : 'ALL'}
              onChange={(e) => {
                const v = e.target.value;
                if (v === 'ALL') {
                  setSelectedMonth(null);
                  setDays(365);
                } else {
                  const dt = new Date(Number(v));
                  setSelectedMonth(new Date(dt.getFullYear(), dt.getMonth(), 1));
                  setDays(370); // ensure enough historical range; backend param only hints
                }
              }}
              displayEmpty
            >
              <MenuItem value={'ALL'}><em>All months</em></MenuItem>
              {monthOptions.map((dt) => (
                <MenuItem key={dt.getTime()} value={dt.getTime()}>
                  {dt.toLocaleString('default', { month: 'long', year: 'numeric' })}
                </MenuItem>
              ))}
            </Select>
          </FormControl>
        </Box>
      </div>

      <div style={{ marginTop: 24 }}>
        <div style={{ width: '100%', position: 'relative' }}>
          {loadingSelectedOrgStats === true ? (
            <div style={{ height: 300, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Typography variant="body2" color="textSecondary">Loading…</Typography>
            </div>
          ) : (
          <BarChart
            key={`${mode}-${selectedMonth ? `${selectedMonth.getFullYear()}-${selectedMonth.getMonth()}` : 'yearly'}`}
            height={300}
            data={barData}
            series={<BarSeries colorScheme={barColorscheme} tooltip={tooltip} bar={<Bar rounded={true} />} />}
            gridlines={<GridlineSeries line={<Gridline direction="y" />} />}
            yAxis={
              <LinearYAxis
                tickSeries={
                  <LinearYAxisTickSeries
                    label={
                      <LinearYAxisTickLabel format={(d) => formatCompactNumber(d)} />
                    }
                  />
                }
              />
            }
            animated={false}
          />
          )}
          {/* Custom reference line overlays for app execution limits (suborg and parent) */}
          {mode === 'apps' && barData.length > 0 && (() => {
            // Determine limits
            const parentAppExecutionLimit = selectedOrganization?.sync_features?.app_executions?.limit ? Number(selectedOrganization.sync_features.app_executions.limit) : null;
            const suborgAppExecutionLimit = orgForLimit?.sync_features?.app_executions?.limit ? Number(orgForLimit.sync_features.app_executions.limit) : null;

            const maxValue = Math.max(...barData.map(d => Number(d.data) || 0), 0);
            if (maxValue <= 0) return null;

            const chartTopPadding = 1;
            const chartBottomPadding = 8;
            const usableHeight = 100 - chartTopPadding - chartBottomPadding;

            // Helpers to compute Y position in percentage
            const posFor = (limit) => {
              const perc = Math.max(0, Math.min(1, (Number(limit) || 0) / maxValue));
              return chartTopPadding + ((1 - perc) * usableHeight);
            };

            let showParentLimit = false;
            let showSuborgLimit = false;

            // Suborg/current limit: only when viewing a specific org (not ALL)
            if (selectedOrgForStats !== 'ALL' && typeof suborgAppExecutionLimit === 'number' && suborgAppExecutionLimit > 0 && suborgAppExecutionLimit <= maxValue && selectedOrgForStats === orgForLimit?.id) {
              showSuborgLimit = true;
            }

            if (typeof parentAppExecutionLimit === 'number' && parentAppExecutionLimit > 0 && parentAppExecutionLimit <= maxValue) {
              if (selectedOrgForStats === 'ALL') {
                showParentLimit = true;
              } else if (parentAppExecutionLimit !== suborgAppExecutionLimit) {
                showParentLimit = true;
              }
            }

            if (!showParentLimit && !showSuborgLimit) return null;

            const suborgTop = showSuborgLimit ? posFor(suborgAppExecutionLimit) : null;
            const parentTop = showParentLimit ? posFor(parentAppExecutionLimit) : null;

            return (
              <>
                {showSuborgLimit && (
                  <>
                    <div
                      style={{
                        position: 'absolute',
                        top: `${suborgTop}%`,
                        left: '2%',
                        right: '0%',
                        height: '2px',
                        backgroundImage: 'repeating-linear-gradient(to right, #ff8544 0px, #ff8544 8px, transparent 8px, transparent 16px)',
                        pointerEvents: 'none',
                        zIndex: 10,
                      }}
                    />
                    <div
                      style={{
                        position: 'absolute',
                        top: `${suborgTop}%`,
                        right: '-5%',
                        transform: 'translate(0, -50%)',
                        pointerEvents: 'none',
                        zIndex: 10,
                        backgroundColor: 'rgba(26, 26, 26, 0.95)',
                        padding: '2px 8px',
                        borderRadius: '4px',
                        border: '1px solid #ff8544',
                      }}
                    >
                      <Typography style={{ fontSize: '12px', fontWeight: 600, color: '#ff8544' }}>
                        {formatCompactNumber(suborgAppExecutionLimit)} limit
                      </Typography>
                    </div>
                  </>
                )}

                {showParentLimit && (
                  <>
                    <div
                      style={{
                        position: 'absolute',
                        top: `${parentTop}%`,
                        left: '2%',
                        right: '0%',
                        height: '2px',
                        backgroundImage: 'repeating-linear-gradient(to right, #FD4C62 0px, #FD4C62 12px, transparent 12px, transparent 22px)',
                        pointerEvents: 'none',
                        zIndex: 9,
                        opacity: 0.8,
                      }}
                    />
                    <div
                      style={{
                        position: 'absolute',
                        top: `${parentTop}%`,
                        right: '-5%',
                        transform: 'translate(0, -50%)',
                        pointerEvents: 'none',
                        zIndex: 9,
                        backgroundColor: 'rgba(26, 26, 26, 0.93)',
                        padding: '2px 8px',
                        borderRadius: '4px',
                        border: '1px solid #FD4C62',
                        display: 'flex', alignItems: 'center', gap: 6,
                      }}
                    >
                      <Typography style={{ fontSize: '12px', fontWeight: 600, color: '#FD4C62' }}>
                        {formatCompactNumber(parentAppExecutionLimit)} limit
                      </Typography>
                    </div>
                  </>
                )}
              </>
            );
          })()}
        </div>
      </div>
    </div>
  );
};

export default RunsOverTimeWidget;