"use client";
// components/main/system/SystemChartActionBar.tsx
import React from "react";
import DateRangePicker from "@/components/common/DateRangePicker";
import { Listbox } from "@headlessui/react";

type Props = {
  zeitraum: "DIA0" | "DIA1" | "DIA2";
  setZeitraum: (typ: "DIA0" | "DIA1" | "DIA2") => void;
  onFetchData: () => void;
  isLoading?: boolean;
  className?: string;
};

const SystemChartActionBar: React.FC<Props> = ({
  zeitraum,
  setZeitraum,
  onFetchData,
  isLoading = false,
  className = "",
}) => {
  return (
    <div
      className={`flex items-center justify-start gap-3 mb-4 flex-wrap ${className}`}
    >
      {/* DateRangePicker – nutzt globalen Redux-Slice */}
      <DateRangePicker compact />

      {/* Zeitraum (DIA0/DIA1/DIA2) */}
      <label className="font-medium text-sm">Zeitraum:</label>
      <Listbox value={zeitraum} onChange={setZeitraum}>
        <div className="relative w-48">
          <Listbox.Button className="w-full border border-base px-3 py-1 rounded text-left bg-[var(--color-surface-alt)] text-fg flex justify-between items-center text-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-accent)]/40 transition">
            <span>
              {
                { DIA0: "Alle Messwerte", DIA1: "Stündlich", DIA2: "Täglich" }[
                  zeitraum
                ]
              }
            </span>
            <svg
              className="w-5 h-5 text-[var(--color-fg-muted)]"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                fillRule="evenodd"
                d="M5.23 7.21a.75.75 0 011.06.02L10 10.585l3.71-3.355a.75.75 0 111.02 1.1l-4.25 3.85a.75.75 0 01-1.02 0l-4.25-3.85a.75.75 0 01.02-1.06z"
                clipRule="evenodd"
              />
            </svg>
          </Listbox.Button>
          <Listbox.Options className="absolute z-50 mt-1 w-full border border-base rounded bg-[var(--color-surface)] text-fg shadow-lg max-h-60 overflow-auto text-sm focus:outline-none">
            {["DIA0", "DIA1", "DIA2"].map((option) => (
              <Listbox.Option
                key={option}
                value={option}
                className={({ selected, active }) => {
                  const base = "px-4 py-1 cursor-pointer text-sm";
                  if (selected) return `${base} bg-littwin-blue text-white`; // selected highlight
                  if (active)
                    return `${base} bg-[var(--color-surface-alt)] text-fg`;
                  return `${base} text-fg`;
                }}
              >
                {
                  {
                    DIA0: "Alle Messwerte",
                    DIA1: "Stündlich",
                    DIA2: "Täglich",
                  }[option as "DIA0" | "DIA1" | "DIA2"]
                }
              </Listbox.Option>
            ))}
          </Listbox.Options>
        </div>
      </Listbox>

      {/* Daten laden */}
      <button
        onClick={onFetchData}
        className={`px-4 py-1 bg-littwin-blue text-white rounded text-sm ${
          isLoading ? "cursor-wait opacity-70" : ""
        }`}
        disabled={isLoading}
        aria-busy={isLoading}
      >
        {isLoading ? "Laden..." : "Daten laden"}
      </button>
    </div>
  );
};

export default SystemChartActionBar;