"use client";

import React from "react";
import { Dialog } from "@headlessui/react";
import { useSelector, useDispatch } from "react-redux";
import { RootState } from "@/redux/store";
import { setIsChartModalOpen } from "@/redux/slices/analogInputs/analogInputsUiSlice";
import AnalogInputsChart from "@/components/main/analogInputs/AnalogInputsChart";

export default function AnalogInputsChartModal({
  loading,
  setLoading,
}: {
  loading: boolean;
  setLoading: (v: boolean) => void;
}) {
  const dispatch = useDispatch();
  const isOpen = useSelector(
    (state: RootState) => state.analogInputsUi.isChartModalOpen
  );
  const selectedId = useSelector(
    (state: RootState) => state.analogInputsHistory.selectedId
  );
  const [isFullscreen, setIsFullscreen] = React.useState(false);

  if (!isOpen) return null;

  return (
    <Dialog
      open={isOpen}
      onClose={() => dispatch(setIsChartModalOpen(false))}
      className="relative z-[9999]"
    >
      {/* Backdrop */}
      <div className="fixed inset-0 bg-black/50" aria-hidden="true" />
      {/* Centered panel */}
      <div className="fixed inset-0 flex items-center justify-center p-4">
        <Dialog.Panel className="relative">
          <div
            className="bg-white rounded-xl shadow-xl border border-gray-200"
            style={{
              width: isFullscreen ? "90vw" : "70rem",
              height: isFullscreen ? "90vh" : "35rem",
              padding: "1rem",
              transition: "all 0.3s ease-in-out",
              display: "flex",
              flexDirection: "column",
            }}
          >
            {/* Controls top-right (fullscreen + close) */}
            <div
              style={{
                position: "absolute",
                top: "0.625rem",
                right: "0.625rem",
                display: "flex",
                gap: "0.75rem",
              }}
            >
              <button
                onClick={() => setIsFullscreen((v) => !v)}
                style={{
                  background: "transparent",
                  border: "none",
                  fontSize: "1.5rem",
                  cursor: "pointer",
                }}
                title={isFullscreen ? "Exit fullscreen" : "Fullscreen"}
                aria-label={isFullscreen ? "Exit fullscreen" : "Fullscreen"}
              >
                <i
                  className={
                    isFullscreen
                      ? "bi bi-fullscreen-exit"
                      : "bi bi-arrows-fullscreen"
                  }
                ></i>
              </button>
              <button
                onClick={() => dispatch(setIsChartModalOpen(false))}
                style={{
                  background: "transparent",
                  border: "none",
                  fontSize: "1.5rem",
                  cursor: "pointer",
                }}
                title="Schließen"
                aria-label="Modal schließen"
              >
                <i className="bi bi-x-circle-fill"></i>
              </button>
            </div>

            {/* Title row (align like IsoChartView) */}
            <div className="flex justify-between items-center mb-2 pr-24">
              <Dialog.Title className="text-lg font-semibold text-gray-700">
                Messkurve Messwerteingang {selectedId ?? "–"}
              </Dialog.Title>
            </div>

            {/* Chart container (structure similar to IsoChartView) */}
            <div
              style={{
                flex: 1,
                display: "flex",
                flexDirection: "column",
                height: "90%",
              }}
            >
              {/* Optional: place an action bar here if needed */}
              <div style={{ flex: 1, height: "90%" }}>
                <AnalogInputsChart loading={loading} setLoading={setLoading} />
              </div>
            </div>
          </div>
        </Dialog.Panel>
      </div>
    </Dialog>
  );
}
