import React, { useEffect, useState } from "react";
import axios from "axios";
import { io } from "socket.io-client";

export default function Stacks() {
  const [stacks, setStacks] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [redeploying, setRedeploying] = useState({}); // { stackId: true/false }

  // WebSocket initialisieren
  useEffect(() => {
    const socket = io("/"); 
    console.log("Socket connected");

    socket.on("redeployStatus", async ({ stackId, status }) => {
      setRedeploying(prev => ({ ...prev, [stackId]: status }));

      // Wenn Redeploy beendet, Stack-Status neu laden
      if (!status) {
        try {
          const res = await axios.get("/api/stacks");
          const sortedStacks = res.data.sort((a, b) => a.Name.localeCompare(b.Name));
          setStacks(sortedStacks);
        } catch (err) {
          console.error("Fehler beim Aktualisieren des Status nach Redeploy:", err);
        }
      }
    });

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

  // Stacks initial laden
  const fetchStacks = async () => {
    try {
      const res = await axios.get("/api/stacks");
      const sortedStacks = res.data.sort((a, b) => a.Name.localeCompare(b.Name));
      setStacks(sortedStacks);
    } catch (err) {
      console.error("❌ Fehler beim Abrufen der Stacks:", err);
      setError("Fehler beim Laden der Stacks");
    } finally {
      setLoading(false);
    }
  };

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

  // Redeploy eines Stacks
  const handleRedeploy = async (stackId) => {
    // Button sofort auf Redeploying setzen
    setRedeploying(prev => ({ ...prev, [stackId]: true }));

    try {
      await axios.put(`/api/stacks/${stackId}/redeploy`);
    } catch (err) {
      console.error("❌ Fehler beim Redeploy:", err);
    }

    // Stack-Status immer neu laden
    try {
      const res = await axios.get("/api/stacks");
      const sortedStacks = res.data.sort((a, b) => a.Name.localeCompare(b.Name));
      setStacks(sortedStacks);
    } catch (err) {
      console.error("Fehler beim Aktualisieren nach Redeploy:", err);
    } finally {
      // Erst nach Datenaktualisierung Button zurücksetzen
      setRedeploying(prev => ({ ...prev, [stackId]: false }));
    }
  };

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

  return (
    <ul className="space-y-4">
      {stacks.map(stack => {
        const isRedeploying = redeploying[stack.Id] || false;
        return (
          <li
            key={stack.Id}
            className={`p-4 rounded-xl shadow transition flex justify-between items-center ${
              isRedeploying ? "bg-gray-100 cursor-not-allowed" : "bg-white hover:shadow-md"
            }`}
          >
            <div className="flex items-center space-x-4">
              <div className="text-xl">{stack.updateStatus}</div>
              <div>
                <p className="text-lg font-semibold text-gray-800">{stack.Name}</p>
                <p className="text-sm text-gray-500">ID: {stack.Id}</p>
              </div>
            </div>
            <button
              onClick={() => handleRedeploy(stack.Id)}
              disabled={isRedeploying}
              className={`px-4 py-2 rounded text-white font-medium transition ${
                isRedeploying ? "bg-orange-500 cursor-not-allowed" : "bg-blue-500 hover:bg-blue-600"
              }`}
            >
              {isRedeploying ? "Redeploying" : "Redeploy"}
            </button>
          </li>
        );
      })}
      {stacks.length === 0 && <p className="text-gray-500">Keine Stacks gefunden.</p>}
    </ul>
  );
}