"use client";

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { cn } from "@/lib/utils";
import {
  durationPartsToMinutes,
  formatDurationHHMM,
  minutesToDurationParts,
} from "@/features/training-records/utils/time-utils";

const DEFAULT_MAX_HOURS = 30;
const DEFAULT_MINUTE_STEP = 5;

function buildHourOptions(maxHours: number) {
  return Array.from({ length: maxHours + 1 }, (_, index) => index);
}

function buildMinuteOptions(step: number) {
  return Array.from(
    { length: Math.floor(55 / step) + 1 },
    (_, index) => index * step,
  );
}

export function DurationPicker({
  valueMinutes,
  onChange,
  maxHours = DEFAULT_MAX_HOURS,
  minuteStep = DEFAULT_MINUTE_STEP,
  disabled = false,
  className,
}: {
  valueMinutes: number | null;
  onChange: (minutes: number | null) => void;
  maxHours?: number;
  minuteStep?: number;
  disabled?: boolean;
  className?: string;
}) {
  const value = minutesToDurationParts(valueMinutes);
  const hourOptions = buildHourOptions(maxHours);
  const minuteOptions = buildMinuteOptions(minuteStep);

  return (
    <div className={cn("space-y-3", className)}>
      <div className="grid grid-cols-2 gap-3">
        <div className="space-y-2">
          <div className="text-muted-foreground text-xs">ชั่วโมง</div>
          <Select
            value={value.hours === null ? "__empty__" : String(value.hours)}
            onValueChange={(nextValue) => {
              if (nextValue === "__empty__") {
                onChange(null);
                return;
              }

              const nextHours = Number(nextValue);
              const nextMinutes = value.minutes ?? 0;
              onChange(durationPartsToMinutes(nextHours, nextMinutes));
            }}
            disabled={disabled}
          >
            <SelectTrigger className="w-full">
              <SelectValue placeholder="ชั่วโมง" />
            </SelectTrigger>
            <SelectContent>
              {hourOptions.map((option) => (
                <SelectItem key={option} value={String(option)}>
                  {String(option).padStart(2, "0")}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>

        <div className="space-y-2">
          <div className="text-muted-foreground text-xs">นาที</div>
          <Select
            value={value.minutes === null ? "__empty__" : String(value.minutes)}
            onValueChange={(nextValue) => {
              if (nextValue === "__empty__") {
                onChange(null);
                return;
              }

              const nextHours = value.hours ?? 0;
              const nextMinutes = Number(nextValue);
              onChange(durationPartsToMinutes(nextHours, nextMinutes));
            }}
            disabled={disabled}
          >
            <SelectTrigger className="w-full">
              <SelectValue placeholder="นาที" />
            </SelectTrigger>
            <SelectContent>
              {minuteOptions.map((option) => (
                <SelectItem key={option} value={String(option)}>
                  {String(option).padStart(2, "0")}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      </div>
    </div>
  );
}
