"use client";

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

type Meldung = {
  t: string;
  s: number;
  c: string;
  m: string;
  i: string;
  v: string;
};

type Props = {
  className?: string;
};

export default function Last20MessagesTable({ className }: Props) {
  const dispatch = useDispatch<AppDispatch>();
  type RootState = {
    messages: {
      data: Meldung[];
    };
  };
  const { data: messages } = useSelector((state: RootState) => state.messages);

  const [sourceFilter] = useState<string>("Alle");

  const today = new Date();
  const prior30 = new Date();
  prior30.setDate(today.getDate() - 30);
  const formatDate = (d: Date) => d.toISOString().split("T")[0];
  const [fromDate] = useState<string>(formatDate(prior30));
  const [toDate] = useState<string>(formatDate(today));

  useEffect(() => {
    dispatch(getMessagesThunk({ fromDate, toDate }));
  }, [dispatch, fromDate, toDate]);

  const filteredMessages =
    sourceFilter === "Alle"
      ? messages
      : messages.filter((m: Meldung) => m.i === sourceFilter);

  return (
    <div className={`flex flex-col gap-3 p-4 ${className}`}>
      <div className="overflow-auto max-h-[80vh]">
        <table className="min-w-full border">
          <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.slice(0, 20).map((msg, index) => (
              <tr key={index} className="hover:bg-gray-50">
                <td className="border p-2">
                  <div
                    className="w-4 h-4 rounded"
                    style={{ backgroundColor: msg.c }}
                  ></div>
                </td>
                <td className="border p-2">{msg.t}</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>
        {messages.length === 0 && (
          <div className="mt-4 text-center text-gray-500 italic">
            Keine Meldungen im gewählten Zeitraum vorhanden.
          </div>
        )}
      </div>
    </div>
  );
}