import { useEffect, useMemo, useState } from "react";
import { listen } from "@tauri-apps/api/event";
import { ChartConfigModal } from "../../chartworkspace/components/ChartConfigModal";
import { openChartWindow } from "../../chartworkspace/utils/openChartWindow";
import { WebviewWindow } from "@tauri-apps/api/webviewWindow";
import {
    Cog,
    Copy,
    Maximize2,
    AreaChart,
    BarChart3,
    ChevronDown,
    Columns2,
    GripVertical,
    Grid2X2,
    LineChart,
    PanelTop,
    Play,
    Plus,
    Rows2,
    Search,
    X,
    Trash2
} from "lucide-react";

import {
    WorkspaceChart,
    type WorkspaceChartConfig,
    type WorkspaceChartMode,
    type WorkspaceChartTimeRange,
    type WorkspaceChartInterval,
} from "../../../components/charts/WorkspaceChart";
import { useTelemetryCatalog } from "../../telemetry/hooks/useTelemetryCatalog";
import type { ChartVariable } from "../../telemetry/types/telemetryCatalog";
import { useTelemetryChartSeries } from "../../telemetry/hooks/useTelemetryChartSeries";

import {
    useChartWorkspacePersistence,
    type PersistedChartWorkspaceItem,
    type ChartLayoutMode,
} from "../../chartworkspace/hooks/useChartWorkspacePersistence";

type MainChartsPageProps = {
    theme: "dark" | "light";
};

type ChartWorkspaceItem = PersistedChartWorkspaceItem & {
    hidden?: boolean;
    collapsed?: boolean;
    id: string;
    title: string;
    subtitle: string;
    mode: WorkspaceChartMode;
    selectedSensorKeys: string[];
    hiddenSensorKeys?: string[];
    timeRange: WorkspaceChartTimeRange;
    interval: WorkspaceChartInterval;
    detached?: boolean;
    windowX?: number;
    windowY?: number;
    windowWidth?: number;
    windowHeight?: number;
    windowZIndex?: number;
};

const RADIUS = "rounded-[6px]";
const MAX_CHARTS = 10;
const MAX_VARIABLES_PER_CHART = 6;

const INITIAL_CHARTS: ChartWorkspaceItem[] = [];

export function MainChartsPage({ theme }: MainChartsPageProps) {
    const isDark = theme === "dark";

    const { chartableVariables, connected } = useTelemetryCatalog();

    const [layoutMode, setLayoutMode] = useState<ChartLayoutMode>("twoColumns");
    const [charts, setCharts] = useState<ChartWorkspaceItem[]>(INITIAL_CHARTS);
    const [configChartId, setConfigChartId] = useState<string | null>(null);
    const [savedSearch, setSavedSearch] = useState("");
    const [savedOpen, setSavedOpen] = useState(false);
    const [movingChartId, setMovingChartId] = useState<string | null>(null);
    const [newChartOpen, setNewChartOpen] = useState(false);
    const [placingChartId, setPlacingChartId] = useState<string | null>(null);

    const changeLayoutMode = (nextLayoutMode: ChartLayoutMode) => {
        const nextVisibleCount = getVisibleSlotCount(nextLayoutMode);

        setCharts((current) => {
            let openSeen = 0;

            return current.map((chart) => {
                if (chart.hidden) {
                    return chart;
                }

                openSeen += 1;

                return {
                    ...chart,
                    collapsed: openSeen > nextVisibleCount,
                };
            });
        });

        setLayoutMode(nextLayoutMode);
        setPlacingChartId(null);
        setMovingChartId(null);
    };

    const workspacePersistence = useChartWorkspacePersistence({
        scope: "GLOBAL",
        layoutMode,
        charts,
        onLoaded: (workspace) => {
            setLayoutMode(workspace.layoutMode);
            setCharts(workspace.charts);
        },
    });

    const canAddMoreCharts = charts.length < MAX_CHARTS;

    const visibleCharts = useMemo(() => {
        const openCharts = charts.filter(
            (chart) => !chart.hidden && !chart.collapsed && !chart.detached,
        );

        if (layoutMode === "single") return openCharts.slice(0, 1);
        if (layoutMode === "twoColumns") return openCharts.slice(0, 2);
        if (layoutMode === "twoRows") return openCharts.slice(0, 2);
        return openCharts.slice(0, 4);
    }, [charts, layoutMode]);

    const savedCharts = useMemo(
        () =>
            charts.filter((chart) =>
                chart.title.toLowerCase().includes(savedSearch.toLowerCase()),
            ),
        [charts, savedSearch],
    );

    const configChart = charts.find((chart) => chart.id === configChartId) ?? null;

    const swapCharts = (sourceId: string, targetId: string) => {
        if (sourceId === targetId) {
            setMovingChartId(null);
            return;
        }

        setCharts((current) => {
            const sourceIndex = current.findIndex((chart) => chart.id === sourceId);
            const targetIndex = current.findIndex((chart) => chart.id === targetId);

            if (sourceIndex === -1 || targetIndex === -1) return current;

            const next = [...current];
            [next[sourceIndex], next[targetIndex]] = [
                next[targetIndex],
                next[sourceIndex],
            ];

            return next;
        });

        setMovingChartId(null);
    };

    const addChart = ({
        title,
        mode,
        selectedSensorKeys,
    }: {
        title: string;
        mode: WorkspaceChartMode;
        selectedSensorKeys: string[];
    }) => {
        if (!canAddMoreCharts) return;

        const newChartId = `chart-${Date.now()}`;

        setCharts((current) => {
            const visibleSlotCount = getVisibleSlotCount(layoutMode);
            const visibleOpenCount = current.filter(
                (chart) => !chart.hidden && !chart.collapsed && !chart.detached
            ).length;

            const shouldAskPlacement = visibleOpenCount >= visibleSlotCount;

            const newChart: ChartWorkspaceItem = {
                id: newChartId,
                title,
                subtitle: "Gráfico personalizado de telemetria.",
                mode,
                selectedSensorKeys,
                timeRange: "24h",
                interval: "5m",
                hidden: false,
                collapsed: shouldAskPlacement,
            };

            if (shouldAskPlacement) {
                setPlacingChartId(newChartId);
            }

            return [...current, newChart];
        });

        setNewChartOpen(false);
    };

    const duplicateChart = (chartId: string) => {
        if (!canAddMoreCharts) return;

        const chart = charts.find((item) => item.id === chartId);
        if (!chart) return;

        const copy: ChartWorkspaceItem = {
            ...chart,
            id: `chart-${Date.now()}`,
            title: `${chart.title} cópia`,
        };

        setCharts((current) => {
            const next = [...current, copy];

            if (next.length >= 3) {
                setLayoutMode("fourGrid");
            } else if (next.length === 2) {
                setLayoutMode("twoColumns");
            }

            return next;
        });
    };

    const setChartMode = (chartId: string, mode: WorkspaceChartMode) => {
        setCharts((current) =>
            current.map((chart) =>
                chart.id === chartId ? { ...chart, mode } : chart,
            ),
        );
    };

    const toggleVariable = (chartId: string, key: string) => {
        setCharts((current) =>
            current.map((chart) => {
                if (chart.id !== chartId) return chart;

                const hiddenSensorKeys = chart.hiddenSensorKeys ?? [];
                const isHidden = hiddenSensorKeys.includes(key);

                return {
                    ...chart,
                    hiddenSensorKeys: isHidden
                        ? hiddenSensorKeys.filter((item) => item !== key)
                        : [...hiddenSensorKeys, key],
                };
            }),
        );
    };

    const loadSavedChart = (chartId: string) => {
        setCharts((current) => {
            const selected = current.find((chart) => chart.id === chartId);
            if (!selected) return current;

            const remaining = current.filter((chart) => chart.id !== chartId);

            return [
                { ...selected, hidden: false, collapsed: false },
                ...remaining,
            ];
        });

        setSavedOpen(false);
        setPlacingChartId(null);
    };

    const closeChart = async (chartId: string) => {
        await closeDetachedChartWindow(chartId);

        setCharts((current) =>
            current.map((chart) =>
                chart.id === chartId
                    ? {
                        ...chart,
                        detached: false,
                        hidden: true,
                        collapsed: false,
                    }
                    : chart,
            ),
        );

        if (configChartId === chartId) setConfigChartId(null);
        if (movingChartId === chartId) setMovingChartId(null);
        if (placingChartId === chartId) setPlacingChartId(null);
    };

    const deleteChart = async (chartId: string) => {
        await closeDetachedChartWindow(chartId);

        setCharts((current) => current.filter((chart) => chart.id !== chartId));

        if (configChartId === chartId) setConfigChartId(null);
        if (movingChartId === chartId) setMovingChartId(null);
        if (placingChartId === chartId) setPlacingChartId(null);
    };

    const placeChartHere = (targetChartId: string) => {
        if (!placingChartId || placingChartId === targetChartId) return;

        setCharts((current) => {
            const sourceIndex = current.findIndex((chart) => chart.id === placingChartId);
            const targetIndex = current.findIndex((chart) => chart.id === targetChartId);

            if (sourceIndex === -1 || targetIndex === -1) return current;

            const next = [...current];
            const source = next[sourceIndex];
            const target = next[targetIndex];

            next[targetIndex] = {
                ...source,
                hidden: false,
                collapsed: false,
            };

            next[sourceIndex] = {
                ...target,
                hidden: false,
                collapsed: true,
            };

            return next;
        });

        setPlacingChartId(null);
    };

    const openSavedChart = (chartId: string) => {
        const chart = charts.find((item) => item.id === chartId);
        if (!chart) return;

        const isActuallyOpen = !chart.hidden && !chart.collapsed && !chart.detached;
        if (isActuallyOpen) return;

        const visibleSlotCount = getVisibleSlotCount(layoutMode);
        const visibleOpenCount = charts.filter(
            (item) => !item.hidden && !item.collapsed && !item.detached,
        ).length;

        if (visibleOpenCount === 0) {
            loadSavedChart(chartId);
            return;
        }

        if (visibleOpenCount < visibleSlotCount) {
            loadSavedChart(chartId);
            return;
        }

        setPlacingChartId(chartId);
        setSavedOpen(false);
    };

    const closeDetachedChartWindow = async (chartId: string) => {
        const label = `chart-${chartId}`;
        const existing = await WebviewWindow.getByLabel(label);

        if (!existing) return;

        try {
            await existing.destroy();
        } catch (error) {
            console.error(`Failed to destroy detached chart window: ${label}`, error);
        }
    };

    const detachChart = (chartId: string) => {
        setCharts((current) =>
            current.map((chart) =>
                chart.id === chartId
                    ? {
                        ...chart,
                        detached: true,
                        hidden: false,
                        collapsed: false,
                    }
                    : chart,
            ),
        );

        window.setTimeout(() => {
            const chart = charts.find((item) => item.id === chartId);

            void openChartWindow(
                chartId,
                theme,
                chart?.title ?? "Chart",
            );
        }, 100);
    };

    const attachChart = async (chartId: string) => {
        setCharts((current) =>
            current.map((chart) =>
                chart.id === chartId
                    ? {
                        ...chart,
                        detached: false,
                        hidden: false,
                        collapsed: false,
                    }
                    : chart,
            ),
        );

        await closeDetachedChartWindow(chartId);
    };

    const moveDetachedChart = (chartId: string, x: number, y: number) => {
        setCharts((current) =>
            current.map((chart) =>
                chart.id === chartId
                    ? { ...chart, windowX: x, windowY: y }
                    : chart,
            ),
        );
    };

    useEffect(() => {
        const unlistenAttachPromise = listen<{
            chartId: string;
            chart: ChartWorkspaceItem | null;
        }>("maincharts://attach-chart", (event) => {
            const chartId = event.payload.chartId;
            const updatedChart = event.payload.chart;

            setCharts((current) => {
                const visibleSlotCount = getVisibleSlotCount(layoutMode);

                const visibleOpenCount = current.filter(
                    (chart) =>
                        !chart.hidden &&
                        !chart.collapsed &&
                        !chart.detached &&
                        chart.id !== chartId,
                ).length;

                const shouldAskPlacement = visibleOpenCount >= visibleSlotCount;

                if (shouldAskPlacement) {
                    setPlacingChartId(chartId);
                }

                return current.map((chart) =>
                    chart.id === chartId
                        ? {
                            ...chart,
                            ...(updatedChart ?? {}),
                            detached: false,
                            hidden: false,
                            collapsed: shouldAskPlacement,
                        }
                        : chart,
                );
            });
        });

        const unlistenHidePromise = listen<{
            chartId?: string;
            chart?: ChartWorkspaceItem | null;
        }>("maincharts://hide-chart", (event) => {
            const chartId = event.payload.chartId ?? event.payload.chart?.id;
            if (!chartId) return;

            setCharts((current) =>
                current.map((chart) =>
                    chart.id === chartId
                        ? {
                            ...chart,
                            ...(event.payload.chart ?? {}),
                            detached: false,
                            hidden: true,
                            collapsed: false,
                        }
                        : chart,
                ),
            );

            setPlacingChartId((current) => (current === chartId ? null : current));
        });

        const unlistenUpdatePromise = listen<{
            chartId: string;
            patch: Partial<ChartWorkspaceItem>;
        }>(
            "maincharts://update-chart",
            (event) => {
                const { chartId, patch } = event.payload;

                setCharts((current) =>
                    current.map((chart) =>
                        chart.id === chartId
                            ? {
                                ...chart,
                                ...patch,
                            }
                            : chart,
                    ),
                );
            },
        );

        const unlistenReplacePromise = listen<{ chart: ChartWorkspaceItem }>(
            "maincharts://replace-chart",
            (event) => {
                const updatedChart = event.payload.chart;

                setCharts((current) =>
                    current.map((chart) =>
                        chart.id === updatedChart.id
                            ? { ...chart, ...updatedChart }
                            : chart,
                    ),
                );
            },
        );

        return () => {
            void unlistenAttachPromise.then((unlisten) => unlisten());
            void unlistenHidePromise.then((unlisten) => unlisten());
            void unlistenUpdatePromise.then((unlisten) => unlisten());
            void unlistenReplacePromise.then((unlisten) => unlisten());
        };
    }, [layoutMode]);
    return (
        <div className="space-y-4 pb-6">
            <div
                className={
                    isDark
                        ? `${RADIUS} relative flex flex-wrap items-center gap-3 border border-[#263247] bg-[#0E1726] p-2`
                        : `${RADIUS} relative flex flex-wrap items-center gap-3 border border-[#D7DEE8] bg-white p-2`
                }
            >
                <div className="flex items-center gap-2">
                    <LayoutButton
                        theme={theme}
                        active={layoutMode === "single"}
                        icon={<PanelTop className="h-4 w-4" />}
                        title="1 gráfico"
                        onClick={() => changeLayoutMode("single")}
                    />

                    <LayoutButton
                        theme={theme}
                        active={layoutMode === "twoColumns"}
                        icon={<Columns2 className="h-4 w-4" />}
                        title="2 lado a lado"
                        onClick={() => changeLayoutMode("twoColumns")}
                    />

                    <LayoutButton
                        theme={theme}
                        active={layoutMode === "twoRows"}
                        icon={<Rows2 className="h-4 w-4" />}
                        title="2 vertical"
                        onClick={() => changeLayoutMode("twoRows")}
                    />

                    <LayoutButton
                        theme={theme}
                        active={layoutMode === "fourGrid"}
                        icon={<Grid2X2 className="h-4 w-4" />}
                        title="4 gráficos"
                        onClick={() => changeLayoutMode("fourGrid")}
                    />
                </div>

                <div className="ml-auto flex items-center gap-4">
                    <div
                        className={
                            isDark
                                ? "text-xs font-bold text-[#7F8CA3]"
                                : "text-xs font-bold text-slate-500"
                        }
                    >
                        {!workspacePersistence.loaded
                            ? "A carregar..."
                            : workspacePersistence.saving
                                ? "A guardar..."
                                : workspacePersistence.error
                                    ? workspacePersistence.error
                                    : "Workspace guardado"}
                    </div>

                    <div className="relative">
                        <button
                            type="button"
                            onClick={() => setSavedOpen((value) => !value)}
                            className={
                                isDark
                                    ? `flex h-10 items-center gap-3 ${RADIUS} border border-[#263247] bg-[#111A2B] px-4 text-sm font-bold text-white transition hover:border-[#36506D]`
                                    : `flex h-10 items-center gap-3 ${RADIUS} border border-[#D7DEE8] bg-white px-4 text-sm font-bold text-[#0F172A] transition hover:bg-[#F8FAFC]`
                            }
                        >
                            <Search className="h-4 w-4" />
                            Gráficos Guardados
                            <ChevronDown
                                className={
                                    savedOpen
                                        ? "h-4 w-4 rotate-180 text-[#7F8CA3] transition"
                                        : "h-4 w-4 text-[#7F8CA3] transition"
                                }
                            />
                        </button>

                        {savedOpen && (
                            <SavedChartsDropdown
                                theme={theme}
                                charts={savedCharts}
                                search={savedSearch}
                                onSearchChange={setSavedSearch}
                                onClose={() => {
                                    setSavedOpen(false);
                                    setPlacingChartId(null);
                                }}
                                onStartPlacement={openSavedChart}
                                onDelete={deleteChart}
                            />
                        )}
                    </div>

                    <button
                        type="button"
                        disabled={!canAddMoreCharts}
                        onClick={() => setNewChartOpen(true)}
                        className={
                            canAddMoreCharts
                                ? `flex h-10 items-center gap-3 ${RADIUS} bg-[#18B8A6] px-5 text-sm font-black text-white transition hover:bg-[#21C7B5]`
                                : `flex h-10 cursor-not-allowed items-center gap-3 ${RADIUS} bg-[#18B8A6]/40 px-5 text-sm font-black text-white`
                        }
                    >
                        <Plus className="h-5 w-5" />
                        Novo Gráfico
                    </button>
                </div>
            </div>

            {visibleCharts.length === 0 ? (
                <EmptyWorkspace
                    theme={theme}
                    canAddMoreCharts={canAddMoreCharts}
                    onAddChart={() => {
                        if (canAddMoreCharts) setNewChartOpen(true);
                    }}
                    onOpenSaved={() => setSavedOpen(true)}
                />
            ) : (
                <section className={layoutGridClass(layoutMode)}>
                    {visibleCharts.map((chartItem) => (
                        <WorkspaceChartContainer
                            key={chartItem.id}
                            theme={theme}
                            chartItem={chartItem}
                            chartableVariables={chartableVariables}
                            connected={connected}
                            movingChartId={movingChartId}
                            setMovingChartId={setMovingChartId}
                            swapCharts={swapCharts}
                            duplicateChart={duplicateChart}
                            closeChart={closeChart}
                            setConfigChartId={setConfigChartId}
                            setChartMode={setChartMode}
                            toggleVariable={toggleVariable}
                            setCharts={setCharts}
                            placingChartId={placingChartId}
                            placeChartHere={placeChartHere}
                            detachChart={detachChart}
                            attachChart={attachChart}
                            moveDetachedChart={moveDetachedChart}
                        />
                    ))}

                    {placingChartId && visibleCharts.length < getVisibleSlotCount(layoutMode) && (
                        <button
                            type="button"
                            onClick={() => {
                                if (!placingChartId) return;

                                setCharts((current) => {
                                    const source = current.find((chart) => chart.id === placingChartId);
                                    if (!source || (!source.hidden && !source.collapsed)) return current;

                                    const withoutSource = current.filter((chart) => chart.id !== placingChartId);
                                    return [
                                        ...visibleCharts,
                                        {
                                            ...source,
                                            hidden: false,
                                            collapsed: false,
                                        },
                                        ...withoutSource.filter(
                                            (chart) => !visibleCharts.some((visible) => visible.id === chart.id),
                                        )];
                                });

                                if (visibleCharts.length + 1 >= 3) {
                                    setLayoutMode("fourGrid");
                                }

                                setPlacingChartId(null);
                            }}
                            className={
                                isDark
                                    ? `${RADIUS} flex min-h-[360px] items-center justify-center border-2 border-dashed border-[#4FD1C5] bg-[#07101B]/60 text-sm font-black text-[#4FD1C5]`
                                    : `${RADIUS} flex min-h-[360px] items-center justify-center border-2 border-dashed border-[#0F766E] bg-[#ECFDF5] text-sm font-black text-[#0F766E]`
                            }
                        >
                            Colocar em novo espaço
                        </button>
                    )}
                </section>
            )}

            {newChartOpen && (
                <NewChartModal
                    theme={theme}
                    variables={chartableVariables}
                    chartNumber={charts.length + 1}
                    onClose={() => setNewChartOpen(false)}
                    onCreate={addChart}
                />
            )}

            {configChart && (
                <ChartConfigModal
                    theme={theme}
                    chart={configChart}
                    variables={chartableVariables}
                    onClose={() => setConfigChartId(null)}
                    onSave={(updatedChart) => {
                        setCharts((current) =>
                            current.map((chart) =>
                                chart.id === updatedChart.id
                                    ? { ...chart, ...updatedChart }
                                    : chart,
                            ),
                        );

                        setConfigChartId(null);
                    }}
                />
            )}
        </div>
    );
}

function WorkspaceChartContainer({
    theme,
    chartItem,
    chartableVariables,
    connected,
    movingChartId,
    setMovingChartId,
    swapCharts,
    duplicateChart,
    closeChart,
    setConfigChartId,
    setChartMode,
    toggleVariable,
    setCharts,
    placingChartId,
    placeChartHere,
    detachChart,
    attachChart,
    moveDetachedChart
}: {
    theme: "dark" | "light";
    chartItem: ChartWorkspaceItem;
    chartableVariables: ChartVariable[];
    connected: boolean;
    movingChartId: string | null;
    setMovingChartId: React.Dispatch<React.SetStateAction<string | null>>;
    swapCharts: (sourceId: string, targetId: string) => void;
    duplicateChart: (chartId: string) => void;
    closeChart: (chartId: string) => void | Promise<void>;
    setConfigChartId: React.Dispatch<React.SetStateAction<string | null>>;
    setChartMode: (chartId: string, mode: WorkspaceChartMode) => void;
    toggleVariable: (chartId: string, key: string) => void;
    setCharts: React.Dispatch<React.SetStateAction<ChartWorkspaceItem[]>>;
    placingChartId: string | null;
    placeChartHere: (targetChartId: string) => void;
    detachChart: (chartId: string) => void;
    attachChart: (chartId: string) => void | Promise<void>;
    moveDetachedChart: (chartId: string, x: number, y: number) => void;
}) {
    const isMoving = movingChartId === chartItem.id;

    const canReceiveMove =
        (movingChartId !== null && movingChartId !== chartItem.id) ||
        (placingChartId !== null && placingChartId !== chartItem.id);

    const { seriesByKey, loading } = useTelemetryChartSeries(
        chartItem.selectedSensorKeys,
        chartItem.timeRange,
        chartItem.interval,
    );

    const selectedVariables = useMemo(
        () =>
            chartableVariables.filter((variable) =>
                chartItem.selectedSensorKeys.includes(variable.key),
            ),
        [
            chartItem.selectedSensorKeys.join("|"),
            chartableVariables.map((variable) =>
                `${variable.key}:${variable.label}:${variable.unit}`,
            ).join("|"),
        ],
    );

    const variablesStillResolving =
        chartItem.selectedSensorKeys.length > 0 &&
        selectedVariables.length === 0;

    const chartConfig: WorkspaceChartConfig = {
        id: chartItem.id,
        title: chartItem.title,
        subtitle:
            chartItem.selectedSensorKeys.length > 0
                ? `${chartItem.selectedSensorKeys.length} variáveis selecionadas`
                : chartItem.subtitle,
        icon: BarChart3,
        status: connected ? "online" : "offline",
        sourceLabel: connected ? "Telemetry" : "Offline",
        mode: chartItem.mode,
        timeRange: chartItem.timeRange,
        interval: chartItem.interval,
        variables: selectedVariables.map((variable, index) => ({
            key: variable.key,
            label: variable.label,
            unit: variable.unit,
            color: getVariableColor(index),
            data: seriesByKey[variable.key] ?? [],
            visible: !(chartItem.hiddenSensorKeys ?? []).includes(variable.key),
        })),
    };

    return (
        <div
            onClick={() => {
                if (movingChartId && movingChartId !== chartItem.id) {
                    swapCharts(movingChartId, chartItem.id);
                }
            }}
            className={
                canReceiveMove
                    ? "relative rounded-[7px] ring-2 ring-[#4FD1C5]/50 transition"
                    : isMoving
                        ? "relative rounded-[7px] opacity-60 ring-2 ring-[#4FD1C5]"
                        : "relative rounded-[7px]"
            }
        >
            <div className="absolute right-4 top-4 z-20 flex items-center gap-1.5">
                <button type="button" title="Configurar" className={floatingIconClass(theme)} onClick={() => setConfigChartId(chartItem.id)}>
                    <Cog className="h-4 w-4" />
                </button>

                <button type="button" title="Duplicar" className={floatingIconClass(theme)} onClick={() => duplicateChart(chartItem.id)}>
                    <Copy className="h-4 w-4" />
                </button>

                <button
                    type="button"
                    title={chartItem.detached ? "Repor janela" : "Destacar janela"}
                    className={floatingIconClass(theme)}
                    onClick={() =>
                        chartItem.detached
                            ? attachChart(chartItem.id)
                            : detachChart(chartItem.id)
                    }
                >
                    <Maximize2 className="h-4 w-4" />
                </button>

                <button
                    type="button"
                    title="Fechar"
                    className={floatingIconClass(theme)}
                    onClick={() => void closeChart(chartItem.id)}
                >
                    <X className="h-4 w-4" />
                </button>
            </div>

            {canReceiveMove && (
                <div className="absolute inset-0 z-30 flex items-center justify-center rounded-[7px] bg-[#07101B]/55 backdrop-blur-[2px]">
                    <button
                        type="button"
                        onClick={(event) => {
                            event.stopPropagation();

                            if (placingChartId && placingChartId !== chartItem.id) {
                                placeChartHere(chartItem.id);
                                return;
                            }

                            if (movingChartId && movingChartId !== chartItem.id) {
                                swapCharts(movingChartId, chartItem.id);
                            }
                        }}
                        className="rounded-[6px] bg-[#4FD1C5] px-5 py-2.5 text-sm font-black text-[#07101B] shadow-xl transition hover:bg-[#63E6D8]"
                    >
                        Colocar aqui
                    </button>
                </div>
            )}

            <WorkspaceChart
                theme={theme}
                chart={chartConfig}
                configuredVariableCount={chartItem.selectedSensorKeys.length}
                loading={loading || variablesStillResolving}
                detached={chartItem.detached}
                onDetach={() => detachChart(chartItem.id)}
                onAttach={() => attachChart(chartItem.id)}
                onTimeRangeChange={(range) =>
                    setCharts((current) =>
                        current.map((chart) =>
                            chart.id === chartItem.id
                                ? { ...chart, timeRange: range }
                                : chart,
                        ),
                    )
                }
                onIntervalChange={(interval) =>
                    setCharts((current) =>
                        current.map((chart) =>
                            chart.id === chartItem.id
                                ? { ...chart, interval }
                                : chart,
                        ),
                    )
                }
                dragHandle={
                    <button
                        type="button"
                        onClick={(event) => {
                            event.stopPropagation();

                            setMovingChartId((current) =>
                                current === chartItem.id
                                    ? null
                                    : chartItem.id,
                            );
                        }}
                        title={
                            isMoving
                                ? "Cancelar movimento"
                                : "Escolher este gráfico para mover"
                        }
                        className={
                            isMoving
                                ? `${RADIUS} border border-[#4FD1C5] bg-[#4FD1C5] p-2 text-[#07101B]`
                                : theme === "dark"
                                    ? `${RADIUS} border border-[#263247] bg-[#111A2B] p-2 text-[#7F8CA3] transition hover:text-white`
                                    : `${RADIUS} border border-[#D7DEE8] bg-white p-2 text-slate-500 transition hover:text-[#0F172A]`
                        }
                    >
                        <GripVertical className="h-4 w-4" />
                    </button>
                }
                onModeChange={(mode) =>
                    setChartMode(chartItem.id, mode)
                }
                onVariableToggle={(variableKey) =>
                    toggleVariable(chartItem.id, variableKey)
                }
                onHeaderPointerDown={
                    chartItem.detached
                        ? (event) => {
                            const startX = event.clientX;
                            const startY = event.clientY;
                            const initialX = chartItem.windowX ?? 120;
                            const initialY = chartItem.windowY ?? 120;

                            const handlePointerMove = (moveEvent: PointerEvent) => {
                                moveDetachedChart(
                                    chartItem.id,
                                    initialX + moveEvent.clientX - startX,
                                    initialY + moveEvent.clientY - startY,
                                );
                            };

                            const handlePointerUp = () => {
                                window.removeEventListener("pointermove", handlePointerMove);
                                window.removeEventListener("pointerup", handlePointerUp);
                            };

                            window.addEventListener("pointermove", handlePointerMove);
                            window.addEventListener("pointerup", handlePointerUp);
                        }
                        : undefined
                }
            />
        </div>
    );
}

function floatingIconClass(theme: "dark" | "light") {
    return theme === "dark"
        ? `${RADIUS} grid h-8 w-8 place-items-center border border-[#263247] bg-[#111A2B] text-[#A8B3C7] transition hover:text-white`
        : `${RADIUS} grid h-8 w-8 place-items-center border border-[#D7DEE8] bg-white text-slate-500 transition hover:text-[#0F172A]`;
}

function SavedChartsDropdown({
    theme,
    charts,
    search,
    onSearchChange,
    onClose,
    onStartPlacement,
    onDelete,
}: {
    theme: "dark" | "light";
    charts: ChartWorkspaceItem[];
    search: string;
    onSearchChange: (value: string) => void;
    onClose: () => void;
    onStartPlacement: (chartId: string) => void;
    onDelete: (chartId: string) => void | Promise<void>;
}) {
    const isDark = theme === "dark";

    return (
        <div
            className={
                isDark
                    ? `${RADIUS} absolute right-0 top-[calc(100%+8px)] z-40 w-[430px] border border-[#263247] bg-[#0E1726] p-3 shadow-2xl`
                    : `${RADIUS} absolute right-0 top-[calc(100%+8px)] z-40 w-[430px] border border-[#D7DEE8] bg-white p-3 shadow-2xl`
            }
        >
            <div className="mb-3 flex items-center justify-between">
                <div>
                    <h2 className="text-sm font-black">Gráficos Guardados</h2>
                    <p className={isDark ? "mt-1 text-xs text-[#7F8CA3]" : "mt-1 text-xs text-slate-500"}>
                        {charts.length}/10 gráficos no workspace.
                    </p>
                </div>

                <button type="button" onClick={onClose}>
                    <X className="h-4 w-4" />
                </button>
            </div>

            <div
                className={
                    isDark
                        ? `${RADIUS} mb-3 flex h-10 items-center gap-2 border border-[#263247] bg-[#07101B] px-3 text-sm text-[#7F8CA3]`
                        : `${RADIUS} mb-3 flex h-10 items-center gap-2 border border-[#D7DEE8] bg-[#F8FAFC] px-3 text-sm text-slate-500`
                }
            >
                <Search className="h-4 w-4" />
                <input
                    value={search}
                    onChange={(event) => onSearchChange(event.target.value)}
                    placeholder="Pesquisar gráficos..."
                    className="w-full bg-transparent outline-none placeholder:text-inherit"
                />
            </div>

            <div className="max-h-[280px] space-y-2 overflow-y-auto pr-1">
                {charts.map((chart) => (
                    <div
                        key={chart.id}
                        className={
                            isDark
                                ? `${RADIUS} flex w-full items-center justify-between gap-3 border border-[#263247] bg-[#111A2B] px-3 py-3 transition hover:border-[#36506D]`
                                : `${RADIUS} flex w-full items-center justify-between gap-3 border border-[#D7DEE8] bg-[#F8FAFC] px-3 py-3 transition hover:bg-white`
                        }
                    >
                        <div className="min-w-0">
                            <p className="truncate text-sm font-black">{chart.title}</p>
                            <p className={isDark ? "mt-1 truncate text-xs text-[#7F8CA3]" : "mt-1 truncate text-xs text-slate-500"}>
                                {chart.selectedSensorKeys.length} variáveis · {chart.timeRange} · {chart.interval}
                            </p>
                        </div>

                        <div className="flex shrink-0 items-center gap-3">
                            {chart.detached && !chart.hidden ? (
                                <span className="text-xs font-black text-[#FACC15]">
                                    Destacado
                                </span>
                            ) : chart.hidden || chart.collapsed ? (
                                <button
                                    type="button"
                                    onClick={() => onStartPlacement(chart.id)}
                                    title="Abrir gráfico"
                                    className="text-[#7F8CA3] transition hover:text-[#4FD1C5]"
                                >
                                    <Play className="h-4 w-4" />
                                </button>
                            ) : (
                                <span className="text-xs font-black text-[#4FD1C5]">
                                    Aberto
                                </span>
                            )}

                            <button
                                type="button"
                                onClick={() => void onDelete(chart.id)}
                                title="Eliminar gráfico"
                                className="text-[#7F8CA3] transition hover:text-red-400"
                            >
                                <Trash2 className="h-4 w-4" />
                            </button>
                        </div>
                    </div>
                ))}

                {charts.length === 0 && (
                    <div className={isDark ? `${RADIUS} border border-dashed border-[#263247] px-4 py-6 text-center text-sm font-bold text-[#7F8CA3]` : `${RADIUS} border border-dashed border-[#D7DEE8] px-4 py-6 text-center text-sm font-bold text-slate-500`}>
                        Nenhum gráfico guardado.
                    </div>
                )}
            </div>
        </div>
    );
}

function NewChartModal({
    theme,
    variables,
    chartNumber,
    onClose,
    onCreate,
}: {
    theme: "dark" | "light";
    variables: ChartVariable[];
    chartNumber: number;
    onClose: () => void;
    onCreate: (chart: {
        title: string;
        mode: WorkspaceChartMode;
        selectedSensorKeys: string[];
    }) => void;
}) {
    const isDark = theme === "dark";
    const [title, setTitle] = useState(`Novo Gráfico ${chartNumber}`);
    const [mode, setMode] = useState<WorkspaceChartMode>("line");
    const [search, setSearch] = useState("");
    const [selectedSensorKeys, setSelectedSensorKeys] = useState<string[]>([]);

    const filteredVariables = variables.filter((variable) =>
        `${variable.label} ${variable.category} ${variable.group} ${variable.unit}`
            .toLowerCase()
            .includes(search.toLowerCase()),
    );

    const toggleVariable = (key: string) => {
        setSelectedSensorKeys((current) => {
            const alreadySelected = current.includes(key);

            if (alreadySelected) {
                return current.filter((item) => item !== key);
            }

            if (current.length >= MAX_VARIABLES_PER_CHART) {
                return current;
            }

            return [...current, key];
        });
    };

    const canCreate = title.trim().length > 0 && selectedSensorKeys.length > 0;

    return (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/55 p-6">
            <div
                className={
                    isDark
                        ? `${RADIUS} w-full max-w-[760px] border border-[#263247] bg-[#0E1726] shadow-2xl`
                        : `${RADIUS} w-full max-w-[760px] border border-[#D7DEE8] bg-white shadow-2xl`
                }
            >
                <header
                    className={
                        isDark
                            ? "flex items-center justify-between border-b border-[#263247] px-6 py-5"
                            : "flex items-center justify-between border-b border-[#D7DEE8] px-6 py-5"
                    }
                >
                    <div>
                        <p
                            className={
                                isDark
                                    ? "text-xs font-black uppercase tracking-[0.2em] text-[#4FD1C5]"
                                    : "text-xs font-black uppercase tracking-[0.2em] text-[#0F766E]"
                            }
                        >
                            Novo gráfico
                        </p>

                        <h2 className="mt-1 text-xl font-black">Criar gráfico</h2>
                    </div>

                    <button
                        type="button"
                        onClick={onClose}
                        className={
                            isDark
                                ? `${RADIUS} p-2 text-[#A8B3C7] transition hover:bg-[#111A2B] hover:text-white`
                                : `${RADIUS} p-2 text-slate-500 transition hover:bg-[#F8FAFC] hover:text-[#0F172A]`
                        }
                    >
                        <X className="h-5 w-5" />
                    </button>
                </header>

                <main className="grid gap-6 p-6 md:grid-cols-[260px_minmax(0,1fr)]">
                    <section className="space-y-4">
                        <div>
                            <label className="mb-2 block text-sm font-black">Nome</label>
                            <input
                                value={title}
                                onChange={(event) => setTitle(event.target.value)}
                                className={
                                    isDark
                                        ? `${RADIUS} h-11 w-full border border-[#263247] bg-[#07101B] px-3 text-sm font-bold text-white outline-none`
                                        : `${RADIUS} h-11 w-full border border-[#D7DEE8] bg-[#F8FAFC] px-3 text-sm font-bold text-[#0F172A] outline-none`
                                }
                            />
                        </div>

                        <div>
                            <label className="mb-2 block text-sm font-black">
                                Tipo de gráfico
                            </label>

                            <div className="grid grid-cols-3 gap-2">
                                <ModeButton
                                    theme={theme}
                                    active={mode === "line"}
                                    icon={<LineChart className="h-4 w-4" />}
                                    label="Linha"
                                    onClick={() => setMode("line")}
                                />
                                <ModeButton
                                    theme={theme}
                                    active={mode === "area"}
                                    icon={<AreaChart className="h-4 w-4" />}
                                    label="Área"
                                    onClick={() => setMode("area")}
                                />
                                <ModeButton
                                    theme={theme}
                                    active={mode === "bar"}
                                    icon={<BarChart3 className="h-4 w-4" />}
                                    label="Barras"
                                    onClick={() => setMode("bar")}
                                />
                            </div>
                        </div>

                        <div
                            className={
                                isDark
                                    ? `${RADIUS} border border-[#263247] bg-[#111A2B] p-3`
                                    : `${RADIUS} border border-[#D7DEE8] bg-[#F8FAFC] p-3`
                            }
                        >
                            <p className="text-xs font-black uppercase tracking-[0.18em] text-[#7F8CA3]">
                                Selecionadas
                            </p>

                            <p className="mt-2 text-sm font-black">
                                {selectedSensorKeys.length}/{MAX_VARIABLES_PER_CHART}
                            </p>
                        </div>
                    </section>

                    <section>
                        <label className="mb-2 block text-sm font-black">
                            Variáveis de telemetria
                        </label>

                        <div
                            className={
                                isDark
                                    ? `${RADIUS} mb-3 flex h-10 items-center gap-2 border border-[#263247] bg-[#07101B] px-3 text-sm text-[#7F8CA3]`
                                    : `${RADIUS} mb-3 flex h-10 items-center gap-2 border border-[#D7DEE8] bg-[#F8FAFC] px-3 text-sm text-slate-500`
                            }
                        >
                            <Search className="h-4 w-4" />
                            <input
                                value={search}
                                onChange={(event) => setSearch(event.target.value)}
                                placeholder="Pesquisar variável..."
                                className="w-full bg-transparent outline-none placeholder:text-inherit"
                            />
                        </div>

                        <div className="max-h-[320px] space-y-2 overflow-y-auto pr-1">
                            {filteredVariables.map((variable, index) => {
                                const active = selectedSensorKeys.includes(variable.key);

                                return (
                                    <VariableRow
                                        key={variable.key}
                                        theme={theme}
                                        variable={variable}
                                        color={getVariableColor(index)}
                                        active={active}
                                        disabled={
                                            !active &&
                                            selectedSensorKeys.length >= MAX_VARIABLES_PER_CHART
                                        }
                                        onClick={() => toggleVariable(variable.key)}
                                    />
                                );
                            })}

                            {filteredVariables.length === 0 && (
                                <EmptyVariableList theme={theme} />
                            )}
                        </div>
                    </section>
                </main>

                <footer
                    className={
                        isDark
                            ? "flex justify-end gap-3 border-t border-[#263247] px-6 py-5"
                            : "flex justify-end gap-3 border-t border-[#D7DEE8] px-6 py-5"
                    }
                >
                    <button
                        type="button"
                        onClick={onClose}
                        className={
                            isDark
                                ? `${RADIUS} border border-[#263247] bg-[#111A2B] px-5 py-2.5 text-sm font-bold text-white`
                                : `${RADIUS} border border-[#D7DEE8] bg-[#F8FAFC] px-5 py-2.5 text-sm font-bold text-[#0F172A]`
                        }
                    >
                        Cancelar
                    </button>

                    <button
                        type="button"
                        disabled={!canCreate}
                        onClick={() =>
                            onCreate({
                                title: title.trim(),
                                mode,
                                selectedSensorKeys,
                            })
                        }
                        className={
                            canCreate
                                ? `flex items-center gap-2 ${RADIUS} bg-[#18B8A6] px-5 py-2.5 text-sm font-black text-white transition hover:bg-[#21C7B5]`
                                : `flex cursor-not-allowed items-center gap-2 ${RADIUS} bg-[#18B8A6]/40 px-5 py-2.5 text-sm font-black text-white`
                        }
                    >
                        <Plus className="h-4 w-4" />
                        Criar
                    </button>
                </footer>
            </div>
        </div>
    );
}

function VariableRow({
    theme,
    variable,
    color,
    active,
    disabled,
    onClick,
}: {
    theme: "dark" | "light";
    variable: ChartVariable;
    color: string;
    active: boolean;
    disabled: boolean;
    onClick: () => void;
}) {
    const isDark = theme === "dark";

    return (
        <button
            type="button"
            disabled={disabled}
            onClick={onClick}
            className={
                active
                    ? isDark
                        ? `${RADIUS} flex h-12 w-full items-center justify-between border border-[#36506D] bg-[#132033] px-3 text-left text-sm font-bold text-white`
                        : `${RADIUS} flex h-12 w-full items-center justify-between border border-[#0F766E]/30 bg-[#ECFDF5] px-3 text-left text-sm font-bold text-[#0F172A]`
                    : disabled
                        ? isDark
                            ? `${RADIUS} flex h-12 w-full cursor-not-allowed items-center justify-between border border-[#263247] bg-[#111A2B]/50 px-3 text-left text-sm font-semibold text-[#7F8CA3]/50`
                            : `${RADIUS} flex h-12 w-full cursor-not-allowed items-center justify-between border border-[#D7DEE8] bg-[#F8FAFC]/60 px-3 text-left text-sm font-semibold text-slate-400`
                        : isDark
                            ? `${RADIUS} flex h-12 w-full items-center justify-between border border-[#263247] bg-[#111A2B] px-3 text-left text-sm font-semibold text-white transition hover:border-[#36506D]`
                            : `${RADIUS} flex h-12 w-full items-center justify-between border border-[#D7DEE8] bg-[#F8FAFC] px-3 text-left text-sm font-semibold text-[#0F172A] transition hover:bg-white`
            }
        >
            <span className="flex min-w-0 items-center gap-2">
                <span
                    className="h-3 w-3 shrink-0 rounded-full"
                    style={{ backgroundColor: color }}
                />

                <span className="min-w-0">
                    <span className="block truncate">{variable.label}</span>
                    <span
                        className={
                            isDark
                                ? "mt-0.5 block truncate text-xs font-bold text-[#7F8CA3]"
                                : "mt-0.5 block truncate text-xs font-bold text-slate-500"
                        }
                    >
                        {variable.group} · {variable.category}
                        {variable.unit ? ` · ${variable.unit}` : ""}
                    </span>
                </span>
            </span>

            <span
                className={
                    active
                        ? "text-xs font-black text-[#4FD1C5]"
                        : "text-xs font-bold text-[#7F8CA3]"
                }
            >
                {active ? "ON" : "OFF"}
            </span>
        </button>
    );
}

function EmptyVariableList({ theme }: { theme: "dark" | "light" }) {
    const isDark = theme === "dark";

    return (
        <div
            className={
                isDark
                    ? `${RADIUS} border border-dashed border-[#263247] px-4 py-6 text-center text-sm font-bold text-[#7F8CA3]`
                    : `${RADIUS} border border-dashed border-[#D7DEE8] px-4 py-6 text-center text-sm font-bold text-slate-500`
            }
        >
            Nenhuma variável encontrada.
        </div>
    );
}

function layoutGridClass(layoutMode: ChartLayoutMode) {
    if (layoutMode === "twoColumns") {
        return "grid gap-4 2xl:grid-cols-2";
    }

    if (layoutMode === "fourGrid") {
        return "grid gap-4 2xl:grid-cols-2";
    }

    return "grid gap-4";
}

function getVisibleSlotCount(layoutMode: ChartLayoutMode) {
    if (layoutMode === "single") return 1;
    if (layoutMode === "twoColumns") return 2;
    if (layoutMode === "twoRows") return 2;
    return 4;
}

function LayoutButton({
    theme,
    active,
    icon,
    title,
    onClick,
}: {
    theme: "dark" | "light";
    active: boolean;
    icon: React.ReactNode;
    title: string;
    onClick: () => void;
}) {
    const isDark = theme === "dark";

    return (
        <button
            type="button"
            title={title}
            aria-label={title}
            onClick={onClick}
            className={
                active
                    ? isDark
                        ? `${RADIUS} grid h-10 w-10 place-items-center bg-[#4FD1C5] text-[#07101B]`
                        : `${RADIUS} grid h-10 w-10 place-items-center bg-[#0F766E] text-white`
                    : isDark
                        ? `${RADIUS} grid h-10 w-10 place-items-center border border-[#263247] bg-[#111A2B] text-[#A8B3C7] transition hover:border-[#36506D] hover:text-white`
                        : `${RADIUS} grid h-10 w-10 place-items-center border border-[#D7DEE8] bg-[#F8FAFC] text-slate-600 transition hover:bg-white hover:text-[#0F172A]`
            }
        >
            {icon}
        </button>
    );
}

function ModeButton({
    theme,
    active,
    icon,
    label,
    onClick,
}: {
    theme: "dark" | "light";
    active: boolean;
    icon?: React.ReactNode;
    label: string;
    onClick: () => void;
}) {
    return (
        <button
            type="button"
            onClick={onClick}
            className={
                active
                    ? theme === "dark"
                        ? `${RADIUS} flex items-center justify-center gap-2 bg-[#4FD1C5] px-3 py-2 text-xs font-black text-[#07101B]`
                        : `${RADIUS} flex items-center justify-center gap-2 bg-[#0F766E] px-3 py-2 text-xs font-black text-white`
                    : theme === "dark"
                        ? `${RADIUS} flex items-center justify-center gap-2 border border-[#263247] bg-[#111A2B] px-3 py-2 text-xs font-bold text-[#A8B3C7]`
                        : `${RADIUS} flex items-center justify-center gap-2 border border-[#D7DEE8] bg-[#F8FAFC] px-3 py-2 text-xs font-bold text-slate-600`
            }
        >
            {icon}
            {label}
        </button>
    );
}

function EmptyWorkspace({
    theme,
    canAddMoreCharts,
    onAddChart,
    onOpenSaved,
}: {
    theme: "dark" | "light";
    canAddMoreCharts: boolean;
    onAddChart: () => void;
    onOpenSaved: () => void;
}) {
    const isDark = theme === "dark";

    return (
        <section
            className={
                isDark
                    ? `${RADIUS} flex min-h-[520px] items-center justify-center border border-dashed border-[#33445F] bg-[#0E1726]/70`
                    : `${RADIUS} flex min-h-[520px] items-center justify-center border border-dashed border-[#CBD5E1] bg-white`
            }
        >
            <div className="max-w-[420px] text-center">
                <div
                    className={
                        isDark
                            ? "mx-auto grid h-16 w-16 place-items-center rounded-2xl border border-[#263247] bg-[#111A2B] text-[#4FD1C5]"
                            : "mx-auto grid h-16 w-16 place-items-center rounded-2xl border border-[#D7DEE8] bg-[#F8FAFC] text-[#0F766E]"
                    }
                >
                    <BarChart3 className="h-8 w-8" />
                </div>

                <h2
                    className={
                        isDark
                            ? "mt-5 text-xl font-black text-white"
                            : "mt-5 text-xl font-black text-[#0F172A]"
                    }
                >
                    Nenhum gráfico aberto
                </h2>

                <p
                    className={
                        isDark
                            ? "mt-3 text-sm leading-6 text-[#A8B3C7]"
                            : "mt-3 text-sm leading-6 text-slate-600"
                    }
                >
                    Abra um gráfico guardado ou crie um novo gráfico para continuar.
                </p>

                <div className="mt-6 flex items-center justify-center gap-3">
                    <button
                        type="button"
                        disabled={!canAddMoreCharts}
                        onClick={onAddChart}
                        className={
                            canAddMoreCharts
                                ? `inline-flex h-11 items-center gap-3 ${RADIUS} bg-[#18B8A6] px-5 text-sm font-black text-white transition hover:bg-[#21C7B5]`
                                : `inline-flex h-11 cursor-not-allowed items-center gap-3 ${RADIUS} bg-[#18B8A6]/40 px-5 text-sm font-black text-white`
                        }
                    >
                        <Plus className="h-5 w-5" />
                        Novo Gráfico
                    </button>

                    <button
                        type="button"
                        onClick={onOpenSaved}
                        className={
                            isDark
                                ? `inline-flex h-11 items-center gap-3 ${RADIUS} border border-[#263247] bg-[#111A2B] px-5 text-sm font-black text-white`
                                : `inline-flex h-11 items-center gap-3 ${RADIUS} border border-[#D7DEE8] bg-[#F8FAFC] px-5 text-sm font-black text-[#0F172A]`
                        }
                    >
                        <Search className="h-5 w-5" />
                        Abrir Guardado
                    </button>
                </div>
            </div>
        </section>
    );
}

function getVariableColor(index: number) {
    const colors = [
        "#4FD1C5",
        "#3B82F6",
        "#FACC15",
        "#7DD3FC",
        "#A5B4FC",
        "#FB7185",
    ];

    return colors[index % colors.length];
}

export default MainChartsPage;