// import { useSignal } from "@preact/signals";
// import { customRangeEnd, customRangeStart, rangeMode, rangeValue, type RangeMode } from "./state/summary.ts";
// import { Minus, Plus } from "lucide-preact";
// import { useEffect } from "preact/hooks";

// interface RangeOption {
//   prefix: string;
//   mode: RangeMode;
//   default: number;
//   step: number;
//   min: number;
//   max: number;
// }

// function parseDateSafe(input: string | null): Date | null {
//   if (!input) return null;
//   const parsed = new Date(input);
//   return isNaN(parsed.getTime()) ? null : parsed;
// }

// useEffect(() => {
//   const params = new URLSearchParams(location.search);
//   const mode = params.get("range") as RangeMode;
//   const value = parseInt(params.get("value") || "", 10);

//   if (mode === "custom") {
//     const start = parseDateSafe(params.get("start"));
//     const end = parseDateSafe(params.get("end"));
//     if (start && end) {
//       rangeMode.value = "custom";
//       customRangeStart.value = start;
//       customRangeEnd.value = end;
//     }
//   } else if (["minutes", "hours", "days", "weeks", "months"].includes(mode)) {
//     rangeMode.value = mode;
//     if (!isNaN(value)) rangeValue.value = value;
//   }
// }, []);

// const rangeOptions: RangeOption[] = [
//   {
//     prefix: "Past",
//     mode: "minutes",
//     default: 15,
//     step: 5,
//     min: 5,
//     max: 60,
//   },
//   {
//     prefix: "Past",
//     mode: "hours",
//     default: 6,
//     step: 3,
//     min: 1,
//     max: 24,
//   },
//   {
//     prefix: "Past",
//     mode: "days",
//     default: 7,
//     step: 1,
//     min: 1,
//     max: 60,
//   },
//   {
//     prefix: "Past",
//     mode: "weeks",
//     default: 2,
//     step: 1,
//     min: 1,
//     max: 4,
//   },
//   {
//     prefix: "Past",
//     mode: "months",
//     default: 3,
//     step: 1,
//     min: 1,
//     max: 36,
//   },
// ];

// function DateRangeDropdownOption({ rangeOption, applyRange, active }: {rangeOption: RangeOption, active: boolean, applyRange: (mode: RangeMode, value: number) => void}) {
//   const localValue = useSignal(rangeOption.default);

//   return (
//     <li class={"flex flex-row items-center cursor-pointer " + (active ? "bg-base-200" : "")} onClick={(_) => {
//       applyRange(rangeOption.mode, localValue.value);
//     }}>
//       { rangeOption.prefix }
//       <button
//         type="button"
//         class="btn btn-xs btn-outline text-sm ms-2"
//         onClick={(e) => {
//           e.stopPropagation();
//           if(localValue.value - rangeOption.step >= rangeOption.min) {
//             localValue.value -= rangeOption.step;
//           } else {
//             localValue.value = rangeOption.min;
//           }
//         }}
//       >
//         <Minus size={12} />
//       </button>
//       <span class="w-8 text-center block p-0">{ localValue.value }</span>
//       <button
//         type="button"
//         class="btn btn-xs btn-outline text-sm me-2"
//         onClick={(e) => {
//           e.stopPropagation();
//           if(rangeOption.step > 1 && localValue.value == rangeOption.min) {
//             localValue.value += rangeOption.step - (rangeOption.min % rangeOption.step);
//           } else if(localValue.value + rangeOption.step <= rangeOption.max) {
//             localValue.value += rangeOption.step;
//           } else {
//             localValue.value = rangeOption.max;
//           }
//         }}
//       >
//         <Plus size={12} />
//       </button>
//       { rangeOption.mode }
//     </li>
//   )
// }

// export default function DateRangeDropdown() {
//   const applyRange = (mode: RangeMode, value: number) => {
//     rangeMode.value = mode;
//     rangeValue.value = value;
//   };

//   // const applyCustomRange = (start: Date, end: Date) => {
//   //   rangeMode.value = 'custom';
//   //   customRangeStart.value = start;
//   //   customRangeEnd.value = end;
//   // };

//   return (<>
//     <div class="dropdown">
//       <label tabIndex={0} class="btn btn-sm">
//         Date Range
//       </label>
//       <ul
//         tabIndex={0}
//         class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-60"
//       >
//         {rangeOptions.map((opt) => {
//           const isActive = rangeMode.value === opt.mode;

//           return <DateRangeDropdownOption active={isActive} rangeOption={opt} applyRange={applyRange} key={opt.mode} />;
//         })}

//         <li
//           class={rangeMode.value === "custom" ? "bg-base-200 font-semibold" : ""}
//           onClick={() => applyRange("custom", 0)}
//         >
//           <span>Custom...</span>
//         </li>
//       </ul>
//     </div>
//     { rangeMode.value === "custom" && <>
//       <input class="input" type="date"  ></input>
//     </> }
//   </>);
// }