"use client";
import React, { useEffect, useState } from "react";

type Meldung = {
  t: string; // Zeitstempel
  s: number; // Status
  c: string; // Farbe
  m: string; // Meldung
  i: string; // Modul/Quelle
};

const Last20MessagesTable: React.FC<{ className?: string }> = ({
  className,
}) => {
  const [messages, setMessages] = useState<Meldung[]>([]);

  useEffect(() => {
    const fetchLast20Messages = async () => {
      const today = new Date();
      const prior30 = new Date();
      prior30.setDate(today.getDate() - 30);

      const format = (d: Date) =>
        `${d.getFullYear()};${(d.getMonth() + 1)
          .toString()
          .padStart(2, "0")};${d.getDate().toString().padStart(2, "0")}`;

      const from = format(prior30);
      const to = format(today);

      const isDev =
        typeof window !== "undefined" &&
        window.location.hostname === "localhost";

      const url = isDev
        ? `/api/cpl/last20MessagesAPIHandler`
        : `/CPL?Service/ae.ACP&MSS1=${from};${to};All`;

      try {
        const res = await fetch(url);
        const raw = await res.json();
        const data = Array.isArray(raw) ? raw : raw.data;
        if (!Array.isArray(data)) return;

        const sorted = [...data].sort(
          (a, b) => new Date(b.t).getTime() - new Date(a.t).getTime()
        );
        const last20 = sorted.slice(0, 20); // NEUESTE zuerst

        setMessages(last20);
      } catch (err) {
        console.error("Fehler beim Laden der Meldungen:", err);
      }
    };

    fetchLast20Messages();
  }, []);

  return (
    <div className={`bg-white p-1 rounded-lg overflow-auto ${className}`}>
      <div className="overflow-x-auto overflow-y-auto border rounded shadow-sm h-[95%] pt-1">
        <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">Zeit</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>
            {messages.length === 0 ? (
              <tr>
                <td
                  colSpan={5}
                  className="text-center italic text-gray-500 p-4"
                >
                  Keine Meldungen verfügbar.
                </td>
              </tr>
            ) : (
              messages.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 whitespace-nowrap">{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.s}</td>
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default Last20MessagesTable;