// components/main/system/DetailModal.tsx
"use client";
import React from "react";
import { Line } from "react-chartjs-2";
import { useSelector } from "react-redux";
import { RootState } from "@/redux/store";

type Props = {
  isOpen: boolean;
  selectedKey: string | null;
  onClose: () => void;
  zeitraum: "DIA0" | "DIA1" | "DIA2";
  setZeitraum: (typ: "DIA0" | "DIA1" | "DIA2") => void;
};

export const DetailModal = ({
  isOpen,
  selectedKey,
  onClose,
  zeitraum,
  setZeitraum,
}: Props) => {
  const typMap: Record<string, "DIA0" | "DIA1" | "DIA2"> = {
    "+5V": zeitraum,
    "+15V": zeitraum,
    "-15V": zeitraum,
    "-98V": zeitraum,
  };

  const typ = selectedKey ? typMap[selectedKey] : null;
  type ReduxDataItem = { t: string; i: number };

  const reduxData = useSelector((state: RootState) =>
    typ ? (state.systemspannung5Vplus[typ] as ReduxDataItem[]) : []
  );

  const labels = reduxData.map((e: ReduxDataItem) => e.t);
  const values = reduxData.map((e: ReduxDataItem) => e.i);

  const baseOptions = {
    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: `Verlauf – ${selectedKey}` },
    },
  };

  if (!isOpen || !selectedKey) return null;

  return (
    <div className="fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center z-50">
      <div className="bg-white p-6 rounded-xl w-[90%] max-w-[1200px] h-[80vh] overflow-auto shadow-2xl">
        <div className="flex justify-between items-center mb-4">
          <h2 className="text-xl font-semibold">
            Detailansicht: {selectedKey}
          </h2>
          <button onClick={onClose} className="text-red-500 hover:text-red-700">
            ✕
          </button>
        </div>

        <div className="mb-4">
          <label className="mr-2 font-medium">Zeitraum:</label>
          <select
            className="border px-2 py-1 rounded"
            value={zeitraum}
            onChange={(e) =>
              setZeitraum(e.target.value as "DIA0" | "DIA1" | "DIA2")
            }
          >
            <option value="DIA0">Alle Messwerte</option>
            <option value="DIA1">Stündlich</option>
            <option value="DIA2">Täglich</option>
          </select>
        </div>

        <div className="h-[500px]">
          <Line
            data={{
              labels,
              datasets: [
                {
                  label: selectedKey,
                  data: values,
                  borderColor: "rgba(59,130,246,1)",
                  backgroundColor: "rgba(59,130,246,0.2)",
                  fill: false,
                },
              ],
            }}
            options={baseOptions}
          />
        </div>
      </div>
    </div>
  );
};