"use client"; // /pages/system.tsx
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { AppDispatch, RootState } from "../redux/store"; // passe an, falls dein Pfad anders ist
import { fetchSystemVoltTempThunk } from "../redux/thunks/fetchSystemVoltTempThunk";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from "chart.js";
import { Line } from "react-chartjs-2";

// Chart.js registrieren
ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
);

const SystemPage = () => {
  const dispatch = useDispatch<AppDispatch>();

  const voltages = useSelector(
    (state: RootState) => state.systemVoltTemp.voltages
  );
  const history = useSelector(
    (state: RootState) => state.systemVoltTemp.history
  );

  useEffect(() => {
    dispatch(fetchSystemVoltTempThunk());

    const interval = setInterval(() => {
      dispatch(fetchSystemVoltTempThunk());
    }, 5000);

    return () => clearInterval(interval);
  }, [dispatch]);

  const chartData = {
    labels: history.map((h) => new Date(h.time).toLocaleTimeString()),
    datasets: [
      {
        label: "+5V",
        data: history.map((h) => h["+5V"]),
        borderColor: "rgba(59,130,246,1)",
        backgroundColor: "rgba(59,130,246,0.5)",
        fill: false,
      },
      {
        label: "+15V",
        data: history.map((h) => h["+15V"]),
        borderColor: "rgba(34,197,94,1)",
        backgroundColor: "rgba(34,197,94,0.5)",
        fill: false,
      },
      {
        label: "-15V",
        data: history.map((h) => h["-15V"]),
        borderColor: "rgba(239,68,68,1)",
        backgroundColor: "rgba(239,68,68,0.5)",
        fill: false,
      },
      {
        label: "-98V",
        data: history.map((h) => h["-98V"]),
        borderColor: "rgba(234,179,8,1)",
        backgroundColor: "rgba(234,179,8,0.5)",
        fill: false,
      },
      {
        label: "ADC Temp",
        data: history.map((h) => h["ADC Temp"]),
        borderColor: "rgba(168,85,247,1)",
        backgroundColor: "rgba(168,85,247,0.5)",
        fill: false,
      },
      {
        label: "CPU Temp",
        data: history.map((h) => h["CPU Temp"]),
        borderColor: "rgba(251,191,36,1)",
        backgroundColor: "rgba(251,191,36,0.5)",
        fill: false,
      },
    ],
  };

  const chartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      y: {
        beginAtZero: false,
        grid: {
          color: "rgba(200,200,200,0.2)",
        },
        title: {
          display: true,
          text: "Wert",
        },
      },
      x: {
        grid: {
          color: "rgba(200,200,200,0.2)",
        },
        title: {
          display: true,
          text: "Zeit",
        },
      },
    },
    plugins: {
      legend: {
        position: "bottom" as const,
      },
      title: {
        display: true,
        text: "Systemspannungen und Temperaturen Verlauf",
      },
    },
  };

  return (
    <div className="p-4">
      <h1 className="text-xl font-bold mb-4">
        System Spannungen & Temperaturen
      </h1>

      <div className="grid grid-cols-2 gap-4">
        {Object.entries(voltages).map(([key, value]) => (
          <div key={key} className="p-4 border rounded shadow">
            <h2 className="font-semibold">{key}</h2>
            <p>{value}</p>
          </div>
        ))}
      </div>

      <div className="mt-8">
        <h2 className="text-lg font-semibold mb-2">Verlauf (Messkurve)</h2>
        <div className="w-full max-w-4xl h-[300px] mx-auto">
          <Line data={chartData} options={chartOptions} />
        </div>
      </div>
    </div>
  );
};

export default SystemPage;