"use client"; // Report.tsx

import React, { useState, useEffect, useCallback } from "react";
import { useSelector, useDispatch } from "react-redux";
import { RootState, AppDispatch } from "@/redux/store";
import { getMessagesThunk } from "@/redux/thunks/getMessagesThunk";

// Gleiche Datenstruktur wie MeldungenView
type Meldung = {
  t: string; // timestamp
  s: number; // status/priority
  c: string; // color
  m: string; // message
  i: string; // source/info
  v: string; // value/status text
};

const Report: React.FC = () => {
  const dispatch = useDispatch<AppDispatch>();
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [filteredMessages, setFilteredMessages] = useState<Meldung[]>([]);

  const { vonDatum, bisDatum, slotNumber } = useSelector(
    (state: RootState) => state.kabelueberwachungChartSlice
  );

  // Nachrichten aus dem globalen Store
  const messages = useSelector((state: RootState) => state.messages.data);

  // Nachrichten für den aktuellen Slot filtern
  const filterMessagesForSlot = useCallback(
    (allMessages: Meldung[], slot: number) => {
      if (slot === null) return [];

      // Filter basierend auf der Quelle (i-Feld)
      return allMessages.filter((msg: Meldung) => {
        // Verschiedene mögliche Slot-Identifikationen
        const slotIdentifiers = [
          `CableLine${slot + 1}`,
          `Slot${slot + 1}`,
          `KÜ${slot + 1}`,
          `Kue${slot + 1}`,
          `Cable${slot + 1}`,
          `Line${slot + 1}`,
        ];

        return slotIdentifiers.some((identifier) => msg.i.includes(identifier));
      });
    },
    []
  );

  // Daten laden
  const loadMessages = useCallback(async () => {
    if (slotNumber === null) return;

    setLoading(true);
    setError(null);

    try {
      // Redux Thunk verwenden (wie in MeldungenView)
      await dispatch(
        getMessagesThunk({
          fromDate: vonDatum,
          toDate: bisDatum,
        })
      ).unwrap();
    } catch (err) {
      console.error("Fehler beim Laden der Berichte:", err);
      setError("Fehler beim Laden der Meldungen.");
    } finally {
      setLoading(false);
    }
  }, [dispatch, vonDatum, bisDatum, slotNumber]);

  // Filter anwenden wenn sich Nachrichten oder Slot ändern
  useEffect(() => {
    if (slotNumber !== null && messages.length > 0) {
      const filtered = filterMessagesForSlot(messages, slotNumber);
      setFilteredMessages(filtered);
    } else {
      setFilteredMessages([]);
    }
  }, [messages, slotNumber, filterMessagesForSlot]);

  // Automatisches Laden beim Mount und bei Änderungen
  useEffect(() => {
    if (slotNumber !== null) {
      loadMessages();
    }
  }, [loadMessages, slotNumber]);

  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="flex items-center space-x-2">
          <div className="w-4 h-4 border-2 border-t-2 border-blue-500 rounded-full animate-spin" />
          <span>Lade Meldungen...</span>
        </div>
      </div>
    );
  }

  if (error) {
    return <div className="text-center text-red-500 p-4">{error}</div>;
  }

  return (
    <div className="w-full h-full flex flex-col">
      <div className="flex justify-between items-center mb-4">
        <h4 className="text-lg font-semibold">
          Meldungen für KÜ {slotNumber !== null ? slotNumber + 1 : "-"}
        </h4>
        <button
          onClick={loadMessages}
          className="px-3 py-1 bg-littwin-blue text-white rounded text-sm hover:bg-blue-600"
        >
          Aktualisieren
        </button>
      </div>

      {filteredMessages.length === 0 ? (
        <div className="text-center text-gray-500 py-8">
          Keine Meldungen im gewählten Zeitraum gefunden.
        </div>
      ) : (
        <div className="flex-1 overflow-auto max-h-[80vh]">
          <table className="min-w-full border text-sm">
            <thead className="bg-gray-100 text-left sticky top-0 z-10">
              <tr>
                <th className="p-2 border">Prio</th>
                <th className="p-2 border">Zeitstempel</th>
                <th className="p-2 border">Quelle</th>
                <th className="p-2 border">Meldung</th>
                <th className="p-2 border">Status</th>
              </tr>
            </thead>
            <tbody>
              {filteredMessages.map((msg, index) => (
                <tr key={index} className="hover:bg-gray-200">
                  <td className="border p-2">
                    <div
                      className="w-4 h-4 rounded"
                      style={{ backgroundColor: msg.c }}
                    ></div>
                  </td>
                  <td className="border p-2">
                    {new Date(msg.t).toLocaleString("de-DE", {
                      day: "2-digit",
                      month: "2-digit",
                      year: "numeric",
                      hour: "2-digit",
                      minute: "2-digit",
                      second: "2-digit",
                    })}
                  </td>
                  <td className="border p-2">{msg.i}</td>
                  <td className="border p-2">{msg.m}</td>
                  <td className="border p-2">{msg.v}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      <div className="mt-4 text-sm text-gray-500 text-center">
        {filteredMessages.length} Meldung(en) gefunden
      </div>
    </div>
  );
};

export default Report;