"use client"; // /components/main/uebersicht/Last20MessagesTable.tsx
import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { RootState } from "../../../redux/store";
import { setLast20Messages } from "../../../redux/slices/last20MessagesSlice";

const Last20MessagesTable: React.FC = () => {
  const dispatch = useDispatch();

  // Holt last20Messages aus Redux
  const rawLast20Messages = useSelector(
    (state: RootState) => state.last20MessagesSlice.last20Messages
  );

  // Holt Daten aus `window.win_last20Messages` und speichert sie in Redux
  useEffect(() => {
    const loadWindowMessages = () => {
      if (typeof window !== "undefined" && (window as any).win_last20Messages) {
        dispatch(setLast20Messages((window as any).win_last20Messages));
      }
    };

    // Initialen Wert setzen
    loadWindowMessages();

    // Falls die Daten erst später geladen werden, überprüfe jede Sekunde
    const interval = setInterval(loadWindowMessages, 1000);

    return () => clearInterval(interval);
  }, [dispatch]);

  // Hilfsfunktion zum Parsen der Nachrichten
  const parseMessages = (messages: string | null) => {
    if (!messages) return [];

    const rows = messages
      .split("<tr>")
      .slice(1) // erstes Element ist leer
      .map((row) => {
        const cols = row
          .replace(/<\/tr>/, "")
          .split("</td><td>")
          .map((col) => col.replace(/<[^>]+>/g, ""));
        return cols;
      });

    return rows;
  };

  const last20Messages = parseMessages(rawLast20Messages);

  return (
    <div className="bg-white shadow-md rounded-lg w-full lg:w-2/3 overflow-auto flex ">
      <table className="min-w-full border border-gray-200 text-left table-fixed ">
        <thead className="bg-gray-100 border-b border-gray-300">
          <tr>
            <th className="py-1 px-4 text-gray-700 text-sm font-medium">ID</th>
            <th className="py-1 px-4 text-gray-700 text-sm font-medium">
              Modul
            </th>
            <th className="py-1 px-4 text-gray-700 text-sm font-medium">
              Zeitstempel
            </th>
            <th className="py-1 px-4 text-gray-700 text-sm font-medium w-2/3">
              Meldung
            </th>
            <th className="py-1 px-4 text-gray-700 text-sm font-medium">
              Status
            </th>
          </tr>
        </thead>
        <tbody className="text-xs text-gray-600 laptop:text-xs flex-shrink-0">
          {last20Messages.length > 0 ? (
            last20Messages.map((columns, index) => (
              <tr
                key={index}
                className="border-b border-gray-200 hover:bg-gray-50"
              >
                <td className="px-4 w-1/7">{columns[0]}</td>
                <td className="px-4 w-1/7">{columns[1]}</td>
                <td className="px-4 w-3/7 whitespace-nowrap">
                  <div className="flex flex-row space-x-2">
                    <span>{columns[2].split(" ")[0]}</span>
                    <span>{columns[2].split(" ")[1]}</span>
                  </div>
                </td>
                <td className="px-4 w-2/7">{columns[3]}</td>
                <td className="px-4 w-1/7">{columns[4]}</td>
              </tr>
            ))
          ) : (
            <tr>
              <td className="px-4 text-center" colSpan={5}>
                Keine Meldungen verfügbar.
              </td>
            </tr>
          )}
        </tbody>
      </table>
    </div>
  );
};

export default Last20MessagesTable;