"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 outline-none">
          <div
            className={`rounded-xl shadow-xl border border-base bg-[var(--color-surface)] text-fg flex flex-col transition-all duration-300 overflow-hidden`}
            style={{
              width: isFullscreen ? "90vw" : "70rem",
              height: isFullscreen ? "90vh" : "38rem",
            }}
          >
            {/* Header */}
            <header className="flex items-center justify-between px-6 py-4 border-b border-base select-none">
              <h2 className="text-base font-bold">
                Messkurve Messwerteingang {selectedId ?? "–"}
              </h2>
              <div className="flex items-center gap-3">
                <button
                  onClick={() => setIsFullscreen((v) => !v)}
                  className="icon-btn text-xl"
                  aria-label={isFullscreen ? "Vollbild verlassen" : "Vollbild"}
                  type="button"
                  title={isFullscreen ? "Vollbild verlassen" : "Vollbild"}
                >
                  <i
                    className={
                      isFullscreen
                        ? "bi bi-fullscreen-exit"
                        : "bi bi-arrows-fullscreen"
                    }
                  />
                </button>
                <button
                  onClick={() => dispatch(setIsChartModalOpen(false))}
                  className="icon-btn text-2xl"
                  aria-label="Modal schließen"
                  type="button"
                  title="Schließen"
                >
                  <i className="bi bi-x-circle-fill" />
                </button>
              </div>
            </header>

            {/* Body */}
            <div className="flex-1 min-h-0 px-4 pt-3 pb-4 bg-[var(--color-surface)]">
              <AnalogInputsChart loading={loading} setLoading={setLoading} />
            </div>
          </div>
        </Dialog.Panel>
      </div>
    </Dialog>
  );
}