"use client"; //pages/dashboard.tsx
import React, { useEffect } from "react";
import "tailwindcss/tailwind.css";
import "@fontsource/roboto";
import "bootstrap-icons/font/bootstrap-icons.css";
import { Icon } from "@iconify/react";
import Last20MessagesTable from "../components/main/dashboard/Last20MessagesTable";
import NetworkInfo from "../components/main/dashboard/NetworkInfo";
import VersionInfo from "../components/main/dashboard/VersionInfo";
import Baugruppentraeger from "../components/main/dashboard/Baugruppentraeger";
import { getLast20MessagesThunk } from "../redux/thunks/getLast20MessagesThunk";
import { useAppDispatch } from "../redux/store";

const Dashboard: React.FC = () => {
  //-------------------------------------
  const dispatch = useAppDispatch();
  useEffect(() => {
    dispatch(getLast20MessagesThunk());
    const interval = setInterval(() => {
      dispatch(getLast20MessagesThunk());
    }, 10000); // oder 5000

    return () => clearInterval(interval);
  }, [dispatch]);
  //-------------------------------------
  return (
    <div className="flex flex-col gap-3 p-4 h-[calc(100vh-13vh-8vh)] laptop:h-[calc(100vh-10vh-5vh)] xl:h-[calc(100vh-10vh-6vh)] laptop:gap-0">
      {/* Header */}
      <div className="flex justify-between items-center w-full lg:w-2/3">
        <div className="flex justify-between gap-1">
          <Icon
            icon="ri:calendar-schedule-line"
            className="text-littwin-blue text-4xl xl:text-2xl"
          />
          <h1 className="text-xl font-bold text-gray-700 xl:text-base">
            Letzten 20 Meldungen
          </h1>
        </div>
      </div>

      {/* Hauptbereich mit Meldungstabelle und Baugruppenträger */}
      <div className="flex flex-col lg:flex-row gap-4 flex-grow overflow-hidden pt-4">
        <Last20MessagesTable className="w-full lg:w-2/3 h-full" />

        <div className="shadow-md rounded-lg w-full lg:w-1/3 flex flex-col gap-2">
          <VersionInfo className="w-full p-3 text-sm" />

          {/* Baugruppenträger jetzt mit voller Breite */}
          <div className="overflow-auto max-h-[50vh]">
            <Baugruppentraeger />
          </div>
        </div>
      </div>

      {/* NetworkInfo in einem div ,nimmt die gesamte Breite */}
      <NetworkInfo />
    </div>
  );
};

export default Dashboard;