"use client";

import { useState } from "react";
import { Icon } from "@/components/ui/Icon";

const HOURS = Array.from({ length: 24 }, (_, i) => i);
const MINUTES = Array.from({ length: 12 }, (_, i) => i * 5); // 5-Minuten-Schritte

function pad(n: number) {
  return String(n).padStart(2, "0");
}

/** Eigener Zeit-Picker (Popover mit Stunden-/Minutenauswahl). */
export function TimePicker({
  value,
  onChange,
  disabled,
}: {
  value: string;
  onChange: (value: string) => void;
  disabled?: boolean;
}) {
  const [open, setOpen] = useState(false);
  const [h, m] = value.split(":").map((x) => Number(x));
  const curH = Number.isFinite(h) ? h : 9;
  const curM = Number.isFinite(m) ? m : 0;

  const set = (nh: number, nm: number) => onChange(`${pad(nh)}:${pad(nm)}`);

  return (
    <div className="relative">
      <button
        type="button"
        className="input datepicker-trigger"
        disabled={disabled}
        onClick={() => setOpen((o) => !o)}
      >
        <Icon name="time" size={16} />
        <span className="flex-1 text-left">{value || "––:––"}</span>
        <Icon name="chevron" size={14} style={{ transform: "rotate(90deg)", opacity: 0.5 }} />
      </button>

      {open ? (
        <>
          <div className="pop-backdrop" onClick={() => setOpen(false)} />
          <div className="card-sm pop-solid timepicker-pop">
            <div className="timepicker-col">
              <div className="timepicker-col-label">Std.</div>
              <div className="timepicker-scroll">
                {HOURS.map((hh) => (
                  <button
                    key={hh}
                    type="button"
                    className="timepicker-item"
                    data-active={hh === curH}
                    onClick={() => set(hh, curM)}
                  >
                    {pad(hh)}
                  </button>
                ))}
              </div>
            </div>
            <div className="timepicker-col">
              <div className="timepicker-col-label">Min.</div>
              <div className="timepicker-scroll">
                {MINUTES.map((mm) => (
                  <button
                    key={mm}
                    type="button"
                    className="timepicker-item"
                    data-active={mm === curM}
                    onClick={() => { set(curH, mm); setOpen(false); }}
                  >
                    {pad(mm)}
                  </button>
                ))}
              </div>
            </div>
          </div>
        </>
      ) : null}
    </div>
  );
}