import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
import axios from "axios";
import { io } from "socket.io-client";
import { useToast } from "./components/ToastProvider.jsx";
import { useMaintenance } from "./context/MaintenanceContext.jsx";

const SELECTION_PROMPT_STORAGE_KEY = "stackSelectionPreference";

const PER_PAGE_DEFAULT = "50";
const PER_PAGE_OPTIONS = [
  { value: "10", label: "10" },
  { value: "25", label: "25" },
  { value: "50", label: "50" },
  { value: "100", label: "100" },
  { value: "all", label: "Alle" }
];
const VALID_PER_PAGE_VALUES = new Set(PER_PAGE_OPTIONS.map((option) => option.value));
const STACKS_CACHE_DURATION = 30 * 1000;
const STACKS_REFRESH_INTERVAL = 30 * 1000;
let stacksCache = { data: null, timestamp: 0 };
let stacksCachePromise = null;

const REDEPLOY_PHASES = {
  QUEUED: 'queued',
  STARTED: 'started',
  SUCCESS: 'success',
  ERROR: 'error',
  INFO: 'info'
};

const isCacheFresh = () => Boolean(stacksCache.data) && (Date.now() - stacksCache.timestamp < STACKS_CACHE_DURATION);
const updateStacksCache = (data) => {
  stacksCache = { data, timestamp: Date.now() };
};

const prepareInitialStacks = (data) => {
  if (!Array.isArray(data)) return [];
  return [...data].sort((a, b) => (a?.Name || '').localeCompare(b?.Name || ''));
};


export default function Stacks() {
  const [stacks, setStacks] = useState(() => prepareInitialStacks(stacksCache.data));
  const [loading, setLoading] = useState(() => !stacksCache.data);
  const [error, setError] = useState("");
  const [selectedStackIds, setSelectedStackIds] = useState([]);
  const [statusFilter, setStatusFilter] = useState("all");
  const [searchQuery, setSearchQuery] = useState("");
  const [selectionPromptVisible, setSelectionPromptVisible] = useState(false);
  const [rememberSelectionChoice, setRememberSelectionChoice] = useState(false);
  const [selectionPreferenceStored, setSelectionPreferenceStored] = useState(false);
  const [perPage, setPerPage] = useState(PER_PAGE_DEFAULT);
  const [page, setPage] = useState(1);

  const { showToast } = useToast();

  const { maintenance, update } = useMaintenance();
  const maintenanceActive = Boolean(maintenance?.active);
  const maintenanceMessage = maintenance?.message;
  const maintenanceLocked = maintenanceActive || Boolean(update?.running);
  const maintenanceBanner = maintenanceLocked ? (maintenanceMessage || (update?.running ? "Portainer-Update läuft" : "Wartungsmodus aktiv")) : "";

  const stacksByIdRef = useRef(new Map());

  useEffect(() => {
    if (maintenanceLocked) {
      setLoading(false);
      setStacks([]);
      setSelectedStackIds([]);
    }
  }, [maintenanceLocked]);

  const mergeStackState = useCallback((previousStacks, incomingStacks) => {
    const prevMap = new Map(previousStacks.map((stack) => [stack.Id, stack]));
    const sortedIncoming = [...incomingStacks].sort((a, b) => a.Name.localeCompare(b.Name));

    return sortedIncoming.map((stack) => {
      const previous = prevMap.get(stack.Id);

      if (previous && previous.updateStatus === '✅' && stack.updateStatus === '⚠️') {
        const stackLabel = stack.Name ? `${stack.Name} (ID: ${stack.Id})` : `Stack ${stack.Id}`;
        showToast({
          variant: 'warning',
          title: 'Aktualisierung gefunden',
          description: stackLabel
        });
      }

      let effectivePhase = stack.redeployPhase ?? previous?.redeployPhase ?? null;
      if (!effectivePhase && (stack.redeploying || previous?.redeploying)) {
        effectivePhase = REDEPLOY_PHASES.STARTED;
      }

      const isQueued = effectivePhase === REDEPLOY_PHASES.QUEUED;
      const isRunning = effectivePhase === REDEPLOY_PHASES.STARTED;
      const isBusy = isQueued || isRunning;

      return {
        ...stack,
        redeployPhase: effectivePhase,
        redeployQueued: isQueued,
        redeploying: isBusy,
        redeployDisabled: stack.redeployDisabled ?? previous?.redeployDisabled ?? false,
        duplicateName: stack.duplicateName ?? previous?.duplicateName ?? false
      };
    });
  }, [showToast]);

  useEffect(() => {
    const socket = io("/", {
      path: "/socket.io",
      transports: ["websocket"]
    });
    console.log("🔌 Socket connected");

    socket.on("redeployStatus", async (payload = {}) => {
      const { stackId } = payload;
      if (!stackId) return;

      const resolvedPhaseRaw = payload.redeployPhase ?? payload.phase;
      let resolvedPhase = resolvedPhaseRaw;
      if (!resolvedPhase) {
        if (payload.isRedeploying === true) {
          resolvedPhase = REDEPLOY_PHASES.STARTED;
        } else if (payload.isRedeploying === false) {
          resolvedPhase = REDEPLOY_PHASES.SUCCESS;
        }
      } else if (resolvedPhaseRaw === 'started' || resolvedPhaseRaw === 'running') {
        resolvedPhase = REDEPLOY_PHASES.STARTED;
      } else if (resolvedPhaseRaw === 'queued') {
        resolvedPhase = REDEPLOY_PHASES.QUEUED;
      } else if (resolvedPhaseRaw === 'success') {
        resolvedPhase = REDEPLOY_PHASES.SUCCESS;
      } else if (resolvedPhaseRaw === 'error') {
        resolvedPhase = REDEPLOY_PHASES.ERROR;
      } else if (resolvedPhaseRaw === 'info') {
        resolvedPhase = REDEPLOY_PHASES.INFO;
      }

      const stackSnapshot = stacksByIdRef.current.get(stackId);
      const stackName = payload.stackName ?? stackSnapshot?.Name;
      const stackLabel = stackName ? `${stackName} (ID: ${stackId})` : `Stack ${stackId}`;

      console.log(`🔄 Stack ${stackId} Redeploy Update: ${resolvedPhase ?? 'unbekannt'}`);

      if (resolvedPhase === REDEPLOY_PHASES.STARTED) {
        showToast({
          variant: 'info',
          title: 'Redeploy gestartet',
          description: stackLabel
        });
      } else if (resolvedPhase === REDEPLOY_PHASES.SUCCESS) {
        showToast({
          variant: 'success',
          title: 'Redeploy abgeschlossen',
          description: stackLabel
        });
      } else if (resolvedPhase === REDEPLOY_PHASES.ERROR) {
        const detail = payload.message ? ` – ${payload.message}` : '';
        showToast({
          variant: 'error',
          title: 'Redeploy fehlgeschlagen',
          description: `${stackLabel}${detail}`
        });
      }

      setStacks(prev =>
        prev.map(stack => {
          if (stack.Id !== stackId) return stack;

          const nextPhase = resolvedPhase ?? stack.redeployPhase ?? null;
          const isQueued = nextPhase === REDEPLOY_PHASES.QUEUED;
          const isRunning = nextPhase === REDEPLOY_PHASES.STARTED;
          const isSuccess = nextPhase === REDEPLOY_PHASES.SUCCESS;
          const isError = nextPhase === REDEPLOY_PHASES.ERROR;
          const isBusy = isQueued || isRunning;

          const updated = {
            ...stack,
            redeployPhase: nextPhase,
            redeployQueued: isQueued,
            redeploying: isBusy
          };

          if (isSuccess) {
            updated.updateStatus = '✅';
            updated.redeploying = false;
            updated.redeployQueued = false;
          }

          if (isError) {
            updated.redeploying = false;
            updated.redeployQueued = false;
          }

          if (!isBusy && !isSuccess && !isError && resolvedPhase === undefined) {
            updated.redeploying = false;
            updated.redeployQueued = false;
            updated.redeployPhase = stack.redeployPhase ?? null;
          }

          return updated;
        })
      );

      const shouldRefresh =
        resolvedPhase === REDEPLOY_PHASES.SUCCESS ||
        resolvedPhase === REDEPLOY_PHASES.ERROR ||
        (payload.isRedeploying === false && !resolvedPhase);

      if (shouldRefresh) {
        try {
          const res = await axios.get('/api/stacks');
          updateStacksCache(res.data);
          setStacks(prev => mergeStackState(prev, res.data));
        } catch (err) {
          console.error('Fehler beim Aktualisieren nach Redeploy:', err);
        }
      }
    });

    return () => socket.disconnect();
  }, []);

  const fetchStacks = useCallback(async ({ force = false, silent = false } = {}) => {
    if (maintenanceActive) {
      if (!silent) {
        setLoading(false);
      }
      return;
    }

    const hadCache = Boolean(stacksCache.data);

    if (!force && hadCache) {
      setStacks(prev => mergeStackState(prev, stacksCache.data));
      if (!silent) {
        setLoading(false);
        if (isCacheFresh()) {
          return;
        }
      }
    }

    const shouldShowSpinner = !silent && (!hadCache || force);
    if (shouldShowSpinner) {
      setLoading(true);
    }

    try {
      if (force || !stacksCachePromise) {
        stacksCachePromise = axios.get("/api/stacks")
          .then((res) => {
            updateStacksCache(res.data);
            return res.data;
          })
          .finally(() => {
            stacksCachePromise = null;
          });
      }

      const data = await stacksCachePromise;
      setStacks(prev => mergeStackState(prev, data));
      setError("");
    } catch (err) {
      console.error("❌ Fehler beim Abrufen der Stacks:", err);
      if (!hadCache && !silent) {
        setError("Fehler beim Laden der Stacks");
      }
    } finally {
      if (shouldShowSpinner) {
        setLoading(false);
      }
    }
  }, [maintenanceActive, mergeStackState]);

  useEffect(() => {
    fetchStacks();
  }, [fetchStacks]);

  useEffect(() => {
    if (typeof document === 'undefined' || maintenanceActive) return undefined;

    const intervalId = setInterval(() => {
      if (!document.hidden) {
        fetchStacks({ force: true, silent: true });
      }
    }, STACKS_REFRESH_INTERVAL);

    return () => clearInterval(intervalId);
  }, [fetchStacks, maintenanceActive]);

  useEffect(() => {
    if (typeof document === 'undefined' || maintenanceActive) return undefined;

    const handleVisibility = () => {
      if (!document.hidden) {
        fetchStacks({ force: true, silent: true });
      }
    };

    document.addEventListener('visibilitychange', handleVisibility);
    return () => {
      document.removeEventListener('visibilitychange', handleVisibility);
    };
  }, [fetchStacks, maintenanceActive]);

  useEffect(() => {
    setSelectedStackIds(prev => {
      const filtered = prev.filter(id => {
        const match = stacks.find(stack => stack.Id === id);
        if (!match) return false;
        if (match.updateStatus === '✅') return false;
        if (match.redeployDisabled) return false;
        const phase = match.redeployPhase;
        if (phase === REDEPLOY_PHASES.STARTED || phase === REDEPLOY_PHASES.QUEUED) return false;
        return true;
      });
      return filtered.length === prev.length ? prev : filtered;
    });
  }, [stacks]);

  useEffect(() => {
    stacksByIdRef.current = new Map(stacks.map((stack) => [stack.Id, stack]));
  }, [stacks]);

  const normalizedSearch = searchQuery.trim().toLowerCase();

  const filteredStacks = useMemo(() => {
    return stacks.filter((stack) => {
      if (statusFilter === "current" && stack.updateStatus !== '✅') return false;
      if (statusFilter === "outdated" && stack.updateStatus === '✅') return false;

      if (normalizedSearch) {
        const identifier = `${stack.Name ?? ""} ${stack.Id ?? ""}`.toLowerCase();
        if (!identifier.includes(normalizedSearch)) return false;
      }

      return true;
    });
  }, [stacks, statusFilter, normalizedSearch]);

  const eligibleFilteredStacks = useMemo(
    () => filteredStacks.filter((stack) => {
      if (stack.updateStatus === '✅') return false;
      if (stack.redeployDisabled) return false;
      const phase = stack.redeployPhase;
      if (phase === REDEPLOY_PHASES.STARTED || phase === REDEPLOY_PHASES.QUEUED) return false;
      return true;
    }),
    [filteredStacks]
  );

  const stacksById = useMemo(() => {
    const map = new Map();
    stacks.forEach((stack) => {
      map.set(stack.Id, stack);
    });
    return map;
  }, [stacks]);

  const filteredStackIdSet = useMemo(() => new Set(filteredStacks.map((stack) => stack.Id)), [filteredStacks]);

  const paginatedStacks = useMemo(() => {
    if (perPage === 'all') {
      return filteredStacks;
    }
    const perPageNumber = Number(perPage);
    const start = (page - 1) * perPageNumber;
    return filteredStacks.slice(start, start + perPageNumber);
  }, [filteredStacks, perPage, page]);

  const visiblePageStackIds = useMemo(() => new Set(paginatedStacks.map((stack) => stack.Id)), [paginatedStacks]);

  const eligiblePageStacks = useMemo(
    () => paginatedStacks.filter((stack) => {
      if (stack.updateStatus === '✅') return false;
      if (stack.redeployDisabled) return false;
      const phase = stack.redeployPhase;
      if (phase === REDEPLOY_PHASES.STARTED || phase === REDEPLOY_PHASES.QUEUED) return false;
      return true;
    }),
    [paginatedStacks]
  );

  const selectionPreferenceRef = useRef({ action: 'keep', remember: false });
  const previousFiltersRef = useRef({ status: statusFilter, search: normalizedSearch });
  const didMountRef = useRef(false);

  useEffect(() => {
    if (typeof window === 'undefined') return;
    try {
      const storedValue = window.sessionStorage.getItem(SELECTION_PROMPT_STORAGE_KEY);
      if (!storedValue) return;
      const parsed = JSON.parse(storedValue);
      if (parsed && (parsed.action === 'keep' || parsed.action === 'clear')) {
        selectionPreferenceRef.current = { action: parsed.action, remember: true };
        setSelectionPreferenceStored(true);
      }
    } catch (err) {
      console.error('⚠️ Konnte gespeicherte Auswahl-Einstellung nicht laden:', err);
      selectionPreferenceRef.current = { action: 'keep', remember: false };
    }
  }, []);

  useEffect(() => {
    const normalized = normalizedSearch;
    if (!didMountRef.current) {
      didMountRef.current = true;
      previousFiltersRef.current = { status: statusFilter, search: normalized };
      return;
    }

    const prev = previousFiltersRef.current;
    const filtersChanged = prev.status !== statusFilter || prev.search !== normalized;

    if (!filtersChanged) {
      if (statusFilter === 'all' && normalized.length === 0 && selectionPromptVisible) {
        setSelectionPromptVisible(false);
      }
      return;
    }

    previousFiltersRef.current = { status: statusFilter, search: normalized };

    if (selectedStackIds.length === 0) {
      setSelectionPromptVisible(false);
      return;
    }

    const hasFilters = statusFilter !== 'all' || normalized.length > 0;
    if (!hasFilters) {
      setSelectionPromptVisible(false);
      return;
    }

    const storedPreference = selectionPreferenceRef.current;
    if (storedPreference?.remember) {
      if (storedPreference.action === 'clear') {
        setSelectedStackIds([]);
      }
      setSelectionPromptVisible(false);
      return;
    }

    setRememberSelectionChoice(Boolean(storedPreference?.remember));
    setSelectionPromptVisible(true);
  }, [statusFilter, normalizedSearch, selectedStackIds.length, selectionPromptVisible]);

  useEffect(() => {
    if (selectedStackIds.length === 0 && selectionPromptVisible) {
      setSelectionPromptVisible(false);
    }
  }, [selectedStackIds.length, selectionPromptVisible]);

  const hasActiveFilters = statusFilter !== "all" || normalizedSearch.length > 0;

  useEffect(() => {
    setPage(1);
  }, [statusFilter, normalizedSearch]);

  useEffect(() => {
    if (perPage === 'all') {
      if (page !== 1) setPage(1);
      return;
    }

    const perPageNumber = Number(perPage);
    const totalPagesCalc = Math.max(1, Math.ceil(filteredStacks.length / perPageNumber));
    if (page > totalPagesCalc) {
      setPage(totalPagesCalc);
    }
  }, [filteredStacks.length, perPage, page]);

  const totalItems = filteredStacks.length;
  const perPageNumber = perPage === 'all' ? (totalItems || 1) : Number(perPage);
  const totalPages = perPage === 'all' ? 1 : Math.max(1, Math.ceil(totalItems / perPageNumber));
  const pageStart = totalItems === 0 ? 0 : (perPage === 'all' ? 1 : ((page - 1) * perPageNumber + 1));
  const pageEnd = perPage === 'all' ? totalItems : Math.min(totalItems, page * perPageNumber);

  const toggleStackSelection = (stackId, disabled) => {
    if (maintenanceLocked || disabled) return;
    setSelectedStackIds(prev =>
      prev.includes(stackId)
        ? prev.filter(id => id !== stackId)
        : [...prev, stackId]
    );
  };

  const handlePerPageChange = (event) => {
    const value = event.target.value;
    if (!VALID_PER_PAGE_VALUES.has(value)) return;
    setPerPage(value);
    setPage(1);
  };

  const handlePrevPage = () => {
    setPage((prev) => Math.max(1, prev - 1));
  };

  const handleNextPage = () => {
    if (perPage === 'all') return;
    setPage((prev) => {
      const perPageNumberLocal = Number(perPage);
      const totalPagesCalc = Math.max(1, Math.ceil(filteredStacks.length / perPageNumberLocal));
      return Math.min(totalPagesCalc, prev + 1);
    });
  };

  const applySelectionPreference = (action) => {
    const remember = rememberSelectionChoice;
    if (typeof window !== 'undefined') {
      try {
        if (remember) {
          const payload = { action, remember: true };
          window.sessionStorage.setItem(SELECTION_PROMPT_STORAGE_KEY, JSON.stringify(payload));
          selectionPreferenceRef.current = payload;
        } else {
          window.sessionStorage.removeItem(SELECTION_PROMPT_STORAGE_KEY);
          selectionPreferenceRef.current = { action, remember: false };
        }
      } catch (err) {
        console.error('⚠️ Konnte Auswahl-Einstellung nicht speichern:', err);
        selectionPreferenceRef.current = { action, remember: false };
      }
    } else {
      selectionPreferenceRef.current = { action, remember: false };
    }

    setSelectionPreferenceStored(remember);
    setRememberSelectionChoice(remember);

    if (action === 'clear') {
      setSelectedStackIds([]);
    }

    setSelectionPromptVisible(false);
  };

  const clearStoredSelectionPreference = () => {
    if (typeof window !== 'undefined') {
      try {
        window.sessionStorage.removeItem(SELECTION_PROMPT_STORAGE_KEY);
      } catch (err) {
        console.error('⚠️ Konnte gespeicherte Auswahl-Einstellung nicht löschen:', err);
      }
    }

    selectionPreferenceRef.current = { action: 'keep', remember: false };
    setSelectionPreferenceStored(false);
    setRememberSelectionChoice(false);

    if (hasActiveFilters && selectedStackIds.length > 0) {
      setSelectionPromptVisible(true);
    }
  };

  const clearSelection = () => {
    setSelectedStackIds([]);
    setSelectionPromptVisible(false);
  };

  const handleChipRemove = (stackId) => {
    setSelectedStackIds((prev) => prev.filter((id) => id !== stackId));
  };

  const handleRedeploy = async (stackId) => {
    const snapshot = stacksByIdRef.current.get(stackId);
    const phase = snapshot?.redeployPhase;
    if (phase === REDEPLOY_PHASES.STARTED || phase === REDEPLOY_PHASES.QUEUED) return;

    setSelectedStackIds((prev) => prev.filter((id) => id !== stackId));
    setStacks((prev) =>
      prev.map((stack) =>
        stack.Id === stackId
          ? {
              ...stack,
              redeployPhase: REDEPLOY_PHASES.STARTED,
              redeploying: true,
              redeployQueued: false
            }
          : stack
      )
    );

    try {
      await axios.put(`/api/stacks/${stackId}/redeploy`);
      // Statusupdates kommen über Socket.IO
    } catch (err) {
      console.error("❌ Fehler beim Redeploy:", err);
      setStacks((prev) =>
        prev.map((stack) =>
          stack.Id === stackId
            ? {
                ...stack,
                redeployPhase: null,
                redeploying: false,
                redeployQueued: false
              }
            : stack
        )
      );

      if (!err.response) {
        const current = stacksByIdRef.current.get(stackId);
        const stackLabel = current?.Name ? `${current.Name} (ID: ${stackId})` : `Stack ${stackId}`;
        const errorText = err.message || 'Unbekannter Fehler';
        showToast({
          variant: 'error',
          title: 'Redeploy fehlgeschlagen',
          description: `${stackLabel} – ${errorText}`
        });
      }
    }
  };

  const handleRedeployAll = async () => {
    if (!eligiblePageStacks.length) return;

    const targetIds = new Set(eligiblePageStacks.map((stack) => stack.Id));

    setStacks(prev =>
      prev.map(stack =>
        targetIds.has(stack.Id)
          ? {
              ...stack,
              redeployPhase: REDEPLOY_PHASES.QUEUED,
              redeploying: true,
              redeployQueued: true
            }
          : stack
      )
    );

    try {
      if (targetIds.size === eligibleFilteredStacks.length) {
        await axios.put("/api/stacks/redeploy-all");
      } else {
        await axios.put("/api/stacks/redeploy-selection", { stackIds: Array.from(targetIds) });
      }
      setSelectedStackIds((prev) => prev.filter((id) => !targetIds.has(id)));
      // Statusupdates kommen über Socket.IO
    } catch (err) {
      console.error("❌ Fehler beim Redeploy ALL:", err);
      setStacks(prev =>
        prev.map(stack =>
          targetIds.has(stack.Id)
            ? {
                ...stack,
                redeployPhase: null,
                redeploying: false,
                redeployQueued: false
              }
            : stack
        )
      );

      const errorText = err.response?.data?.error || err.message || 'Unbekannter Fehler';
      showToast({
        variant: 'error',
        title: 'Redeploy ALL fehlgeschlagen',
        description: errorText
      });
    }
  };

  const handleRedeploySelection = async () => {
    if (!selectedStackIds.length) return;

    const eligibleIds = selectedStackIds.filter((id) => {
      const stack = stacks.find((entry) => entry.Id === id);
      if (!stack) return false;
      if (stack.updateStatus === '✅') return false;
      if (stack.redeployDisabled) return false;
      const phase = stack.redeployPhase;
      if (phase === REDEPLOY_PHASES.STARTED || phase === REDEPLOY_PHASES.QUEUED) return false;
      return true;
    });

    if (!eligibleIds.length) {
      setSelectedStackIds([]);
      return;
    }

    const eligibleSet = new Set(eligibleIds);

    setStacks(prev =>
      prev.map(stack =>
        eligibleSet.has(stack.Id)
          ? {
              ...stack,
              redeployPhase: REDEPLOY_PHASES.QUEUED,
              redeploying: true,
              redeployQueued: true
            }
          : stack
      )
    );

    try {
      await axios.put("/api/stacks/redeploy-selection", { stackIds: eligibleIds });
      setSelectedStackIds((prev) => prev.filter((id) => !eligibleSet.has(id)));
      // Statusupdates kommen über Socket.IO
    } catch (err) {
      console.error("❌ Fehler beim Redeploy Auswahl:", err);
      setStacks(prev =>
        prev.map(stack =>
          eligibleSet.has(stack.Id)
            ? {
                ...stack,
                redeployPhase: null,
                redeploying: false,
                redeployQueued: false
              }
            : stack
        )
      );

      const errorText = err.response?.data?.error || err.message || 'Unbekannter Fehler';
      showToast({
        variant: 'error',
        title: 'Redeploy Auswahl fehlgeschlagen',
        description: errorText
      });
    }
  };

  const hasSelection = selectedStackIds.length > 0;
  const hasOutdatedStacks = eligiblePageStacks.length > 0;
  const bulkButtonLabel = hasSelection
    ? `Redeploy Auswahl (${selectedStackIds.length})`
    : 'Redeploy All';

  const bulkActionDisabled = maintenanceLocked || (hasSelection
    ? selectionPromptVisible || selectedStackIds.length === 0 || selectedStackIds.every(id => {
        const targetStack = stacks.find(stack => stack.Id === id);
        if (!targetStack) return true;
        if (targetStack.updateStatus === '✅') return true;
        if (targetStack.redeployDisabled) return true;
        const phase = targetStack.redeployPhase;
        return phase === REDEPLOY_PHASES.STARTED || phase === REDEPLOY_PHASES.QUEUED;
      })
    : !hasOutdatedStacks);

  const handleBulkRedeploy = () => {
    if (maintenanceLocked) {
      showToast({
        variant: 'warning',
        title: 'Wartungsmodus aktiv',
        description: 'Redeploy-Aktionen sind während des Wartungsmodus deaktiviert.'
      });
      return;
    }

    if (hasSelection) {
      handleRedeploySelection();
    } else {
      handleRedeployAll();
    }
  };

  if (loading) return <p className="text-gray-400">Lade Stacks...</p>;
  if (error) return <p className="text-red-400">{error}</p>;

  return (
    <div className="mx-auto max-w-6xl p-6">
      {maintenanceLocked && (
        <div className="mb-6 rounded-lg border border-amber-500/60 bg-amber-900/30 px-4 py-3 text-sm text-amber-100">
          {maintenanceBanner}
        </div>
      )}
      <div className="mb-6 flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
        <div className="flex flex-col gap-4 md:flex-row md:items-end md:gap-6">
          <div>
            <span className="mb-2 block text-sm font-medium text-gray-300">Status</span>
            <div className="inline-flex overflow-hidden rounded-lg border border-gray-700 bg-gray-900">
              <button
                type="button"
                onClick={() => setStatusFilter('all')}
                className={`px-4 py-2 text-sm font-medium transition ${statusFilter === 'all' ? 'bg-purple-600 text-white' : 'text-gray-300 hover:text-white'} border-r border-gray-700 last:border-r-0`}
              >
                Alle
              </button>
              <button
                type="button"
                onClick={() => setStatusFilter('current')}
                className={`px-4 py-2 text-sm font-medium transition ${statusFilter === 'current' ? 'bg-purple-600 text-white' : 'text-gray-300 hover:text-white'} border-r border-gray-700 last:border-r-0`}
              >
                Aktuell
              </button>
              <button
                type="button"
                onClick={() => setStatusFilter('outdated')}
                className={`px-4 py-2 text-sm font-medium transition ${statusFilter === 'outdated' ? 'bg-purple-600 text-white' : 'text-gray-300 hover:text-white'}`}
              >
                Veraltet
              </button>
            </div>
          </div>
          <div className="md:w-64">
            <label htmlFor="stack-search" className="mb-2 block text-sm font-medium text-gray-300">Suche</label>
            <input
              id="stack-search"
              type="text"
              value={searchQuery}
              onChange={(event) => setSearchQuery(event.target.value)}
              placeholder="Name oder ID"
              className="w-full rounded-lg border border-gray-700 bg-gray-900 px-3 py-2 text-sm text-gray-100 placeholder-gray-500 focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500"
            />
          </div>
        </div>
        <div className="flex flex-col items-end gap-2">
          {selectionPreferenceStored && (
            <button
              type="button"
              onClick={clearStoredSelectionPreference}
              className="text-xs font-medium text-amber-300 underline underline-offset-2 transition hover:text-amber-100"
            >
              Gespeicherte Entscheidung löschen
            </button>
          )}
          <button
            onClick={handleBulkRedeploy}
            disabled={bulkActionDisabled}
            className={`px-5 py-2 rounded-lg font-medium transition ${bulkActionDisabled ? 'bg-purple-900 cursor-not-allowed text-gray-400' : 'bg-purple-500 hover:bg-purple-600'}`}
          >
            {bulkButtonLabel}
          </button>
          <label className="flex items-center gap-2 text-sm text-gray-300">
            <span>Einträge pro Seite</span>
            <select
              value={perPage}
              onChange={handlePerPageChange}
              className="rounded-md border border-gray-700 bg-gray-900 px-2 py-1 text-sm text-gray-100 focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500"
            >
              {PER_PAGE_OPTIONS.map((option) => (
                <option key={option.value} value={option.value}>
                  {option.label}
                </option>
              ))}
            </select>
          </label>
        </div>
      </div>

      {selectedStackIds.length > 0 && (
        <div className="mb-4 flex flex-col gap-2 text-sm text-gray-300 md:flex-row md:items-center md:justify-between">
          <div className="flex flex-wrap items-center gap-2">
            <span className="font-medium text-gray-200">Auswahl:</span>
            {selectedStackIds.map((id) => {
              const stack = stacksById.get(id);
              const name = stack?.Name || `Stack ${id}`;
              const isFiltered = filteredStackIdSet.has(id);
              const isVisibleOnPage = visiblePageStackIds.has(id);
              return (
                <button
                  key={id}
                  type="button"
                  onClick={() => handleChipRemove(id)}
                  className="inline-flex items-center gap-2 rounded-full border border-purple-500/60 bg-purple-500/10 px-3 py-1 text-purple-100 transition hover:border-purple-400 hover:bg-purple-500/20"
                >
                  <span>{name}</span>
                  {!isFiltered && (
                    <span className="text-xs uppercase tracking-wide text-amber-300">Ausgefiltert</span>
                  )}
                  {isFiltered && !isVisibleOnPage && (
                    <span className="text-xs uppercase tracking-wide text-blue-300">Andere Seite</span>
                  )}
                  <span className="text-xs font-semibold text-purple-200">x</span>
                </button>
              );
            })}
          </div>
          <button
            type="button"
            onClick={clearSelection}
            className="self-start text-xs font-medium text-gray-400 underline underline-offset-2 transition hover:text-gray-200 md:self-auto"
          >
            Auswahl aufheben
          </button>
        </div>
      )}

      {selectionPromptVisible && (
        <div className="mb-6 flex flex-col gap-3 rounded-lg border border-amber-500/50 bg-amber-900/40 px-4 py-3 text-amber-100 md:flex-row md:items-center md:justify-between">
          <div className="space-y-2">
            <p>
              {selectedStackIds.length === 1
                ? '1 Stack ist weiterhin ausgewählt.'
                : `${selectedStackIds.length} Stacks sind weiterhin ausgewählt.`}
              {' '}Soll die Auswahl entfernt werden?
            </p>
            <label className="flex items-center gap-2 text-sm">
              <input
                type="checkbox"
                checked={rememberSelectionChoice}
                onChange={(event) => setRememberSelectionChoice(event.target.checked)}
                className="h-4 w-4 rounded border border-amber-400 bg-amber-950 text-amber-400 focus:ring-amber-300"
              />
              <span>Einstellung merken (bis Browser geschlossen wird)</span>
            </label>
          </div>
          <div className="flex gap-2">
            <button
              type="button"
              onClick={() => applySelectionPreference('clear')}
              className="rounded-md bg-amber-500 px-4 py-2 text-sm font-medium text-amber-950 transition hover:bg-amber-400"
            >
              Auswahl entfernen
            </button>
            <button
              type="button"
              onClick={() => applySelectionPreference('keep')}
              className="rounded-md border border-amber-400 px-4 py-2 text-sm font-medium transition hover:bg-amber-400/20"
            >
              Auswahl behalten
            </button>
          </div>
        </div>
      )}

      <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
        {paginatedStacks.map(stack => {
          const phase = stack.redeployPhase;
          const isQueued = phase === REDEPLOY_PHASES.QUEUED;
          const isRunning = phase === REDEPLOY_PHASES.STARTED;
          const isBusy = isQueued || isRunning;
          const isSelected = selectedStackIds.includes(stack.Id);
          const isCurrent = stack.updateStatus === '✅';
          const isSelfStack = Boolean(stack.redeployDisabled);
          const isSelectable = !isBusy && !isCurrent && !isSelfStack && !maintenanceLocked;

          return (
            <div
              key={stack.Id}
              className={`flex justify-between items-center p-5 rounded-xl shadow-lg transition border
                ${isSelected ? 'border-purple-500 ring-1 ring-purple-500/40' : 'border-transparent'}
                ${isBusy ? 'bg-gray-700 cursor-wait' : 'bg-gray-800 hover:bg-gray-700'}
                ${!isSelectable && !isBusy ? 'opacity-75' : ''}`}
            >
              <div className="flex items-center space-x-4">
                <input
                  type="checkbox"
                  checked={isSelected}
                  onChange={() => toggleStackSelection(stack.Id, !isSelectable)}
                  className={`h-5 w-5 text-purple-500 focus:ring-purple-400 border-gray-600 bg-gray-900 rounded ${!isSelectable ? 'opacity-40 cursor-not-allowed' : ''}`}
                  disabled={!isSelectable}
                />
                <div className={`w-12 h-12 flex items-center justify-center rounded-full
                  ${stack.updateStatus === '✅' ? 'bg-green-500' :
                    stack.updateStatus === '⚠️' ? 'bg-yellow-500' :
                    'bg-red-500'}`}
                />
                <div>
                  <p className="text-lg font-semibold text-white">{stack.Name}</p>
                  <p className="text-sm text-gray-400">ID: {stack.Id}</p>
                  {stack.duplicateName && (
                    <p className="text-xs text-amber-300">⚠️ Doppelter Name erkannt</p>
                  )}
                </div>
              </div>

              <div className="flex flex-col items-end gap-1 text-sm">
                {isRunning ? (
                  <>
                    <span className="text-xs uppercase tracking-wide text-orange-300">Redeploy</span>
                    <span className="text-orange-200">läuft…</span>
                  </>
                ) : isQueued ? (
                  <>
                    <span className="text-xs uppercase tracking-wide text-orange-300">Redeploy</span>
                    <span className="text-orange-200">in Warteliste…</span>
                  </>
                ) : isSelfStack ? (
                  <>
                    <span className="text-xs uppercase tracking-wide text-gray-400">System</span>
                    <span className="text-gray-300">Redeploy deaktiviert</span>
                  </>
                ) : isCurrent ? (
                  <>
                    <span className="text-xs uppercase tracking-wide text-gray-400">Status</span>
                    <span className="text-green-300">Aktuell</span>
                  </>
                ) : (
                  <button
                    onClick={() => handleRedeploy(stack.Id)}
                    disabled={isBusy || maintenanceLocked}
                    className="px-5 py-2 rounded-lg font-medium transition bg-blue-500 hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed"
                  >
                    Redeploy
                  </button>
                )}
              </div>
            </div>
          );
        })}
        {filteredStacks.length === 0 && (
          <p className="text-gray-400">
            {hasActiveFilters ? 'Keine Stacks für die gesetzten Filter.' : 'Keine Stacks gefunden.'}
          </p>
        )}
      </div>

      <div className="mt-6 flex flex-wrap items-center justify-between gap-3 text-sm text-gray-300">
        <span>
          {totalItems === 0
            ? 'Keine Stacks verfügbar'
            : perPage === 'all'
              ? `Zeige alle ${totalItems} Stacks`
              : `Zeige ${pageStart}-${pageEnd} von ${totalItems} Stacks`}
        </span>
        {perPage !== 'all' && totalItems > 0 && (
          <div className="flex items-center gap-2">
            <button
              type="button"
              onClick={handlePrevPage}
              disabled={page <= 1}
              className="rounded-md border border-gray-600 px-3 py-1 text-sm text-gray-200 transition hover:bg-gray-700 disabled:opacity-60"
            >
              Zurück
            </button>
            <span className="text-gray-400">
              Seite {Math.min(page, totalPages)} / {totalPages}
            </span>
            <button
              type="button"
              onClick={handleNextPage}
              disabled={page >= totalPages}
              className="rounded-md border border-gray-600 px-3 py-1 text-sm text-gray-200 transition hover:bg-gray-700 disabled:opacity-60"
            >
              Weiter
            </button>
          </div>
        )}
      </div>
    </div>
  );
}