"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 [];

      // Primärer Filter: Exakte CableLineX Übereinstimmung (X = slot + 1)
      const primaryIdentifier = `CableLine${slot + 1}`;

      console.log(
        `🔍 Filtere Nachrichten für Slot ${slot} (${primaryIdentifier}):`
      );
      console.log(`📥 Gesamt Nachrichten: ${allMessages.length}`);

      // Debug: Zeige alle verfügbaren Quellen
      const allSources = [...new Set(allMessages.map((msg) => msg.i))];
      console.log(`📋 Alle verfügbaren Quellen:`, allSources);

      // Filter basierend auf der Quelle (i-Feld) - EXAKTE Übereinstimmung
      const filtered = allMessages.filter((msg: Meldung) => {
        // Exakte Übereinstimmung: msg.i sollte genau "CableLineX" sein
        const isExactMatch = msg.i === primaryIdentifier;

        // Fallback: Falls die Quelle mehr Informationen enthält (z.B. "CableLine1_Sensor")
        const isPartialMatch =
          msg.i.startsWith(primaryIdentifier) &&
          (msg.i === primaryIdentifier ||
            msg.i.charAt(primaryIdentifier.length).match(/[^0-9]/));

        const isMatch = isExactMatch || isPartialMatch;

        if (isMatch) {
          console.log(`✅ Gefunden: "${msg.i}" -> ${msg.m}`);
        }
        return isMatch;
      });

      console.log(
        `📤 Gefilterte Nachrichten für ${primaryIdentifier}: ${filtered.length}`
      );

      // Falls keine Nachrichten mit CableLineX gefunden, versuche alternative Identifikatoren
      if (filtered.length === 0) {
        console.log(
          `⚠️ Keine Nachrichten für ${primaryIdentifier} gefunden. Versuche alternative Identifikatoren...`
        );

        const alternativeIdentifiers = [
          `Slot${slot + 1}`,
          `KÜ${slot + 1}`,
          `Kue${slot + 1}`,
          `Cable${slot + 1}`,
          `Line${slot + 1}`,
        ];

        const alternativeFiltered = allMessages.filter((msg: Meldung) => {
          return alternativeIdentifiers.some((identifier) => {
            const isExactMatch = msg.i === identifier;
            const isPartialMatch =
              msg.i.startsWith(identifier) &&
              (msg.i === identifier ||
                msg.i.charAt(identifier.length).match(/[^0-9]/));
            const isMatch = isExactMatch || isPartialMatch;

            if (isMatch) {
              console.log(`🔄 Alternative gefunden: "${msg.i}" -> ${msg.m}`);
            }
            return isMatch;
          });
        });

        console.log(
          `📤 Alternative gefilterte Nachrichten: ${alternativeFiltered.length}`
        );
        return alternativeFiltered;
      }

      return filtered;
    },
    []
  );

  // 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 p-4">
      {filteredMessages.length === 0 ? (
        <div className="text-center text-gray-500 ">
          Keine Meldungen für CableLine
          {slotNumber !== null ? slotNumber + 1 : "-"} im gewählten Zeitraum
          gefunden.
        </div>
      ) : (
        <div className="flex-1 overflow-auto ">
          <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 mt-4">
        {filteredMessages.length} Meldung(en) gefunden
      </div>
    </div>
  );
};

export default Report;