'use client';

import { ChevronDown, ChevronUp } from 'lucide-react';
import { adjustTimeInput } from '@/components/appointments/appointmentTime';

interface TimeStepInputProps {
  id?: string;
  label: string;
  value: string;
  onChange: (value: string) => void;
  stepMinutes?: number;
  disabled?: boolean;
}

const inputClassName =
  'min-w-0 flex-1 rounded-[var(--radius-md)] border border-border bg-background-secondary/90 text-text-primary px-3 py-2 text-sm text-center tabular-nums focus:outline-none focus:ring-2 focus:ring-primary/35';

export function TimeStepInput({
  id,
  label,
  value,
  onChange,
  stepMinutes = 5,
  disabled = false,
}: TimeStepInputProps) {
  const step = (delta: number) => {
    if (disabled) return;
    onChange(adjustTimeInput(value, delta * stepMinutes));
  };

  return (
    <div>
      <label htmlFor={id} className="block text-sm font-medium text-text-secondary mb-1">
        {label}
      </label>
        <div className="flex items-stretch gap-1.5">
          <div className="flex flex-col justify-center gap-0.5 shrink-0 self-stretch py-0.5">
            <button
              type="button"
              aria-label={`${label} +${stepMinutes}m`}
              disabled={disabled}
              onClick={() => step(1)}
              className="flex flex-1 min-h-[1.25rem] items-center justify-center rounded-[var(--radius-sm)] border border-border bg-background-secondary/90 px-1.5 text-text-muted hover:text-text-primary hover:bg-background-card/80 disabled:opacity-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/35"
            >
              <ChevronUp className="h-3.5 w-3.5 icon-flat" />
            </button>
            <button
              type="button"
              aria-label={`${label} -${stepMinutes}m`}
              disabled={disabled}
              onClick={() => step(-1)}
              className="flex flex-1 min-h-[1.25rem] items-center justify-center rounded-[var(--radius-sm)] border border-border bg-background-secondary/90 px-1.5 text-text-muted hover:text-text-primary hover:bg-background-card/80 disabled:opacity-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/35"
            >
              <ChevronDown className="h-3.5 w-3.5 icon-flat" />
            </button>
          </div>
        <input
          id={id}
          type="time"
          step={stepMinutes * 60}
          className={inputClassName}
          value={value}
          disabled={disabled}
          onChange={(e) => onChange(e.target.value)}
        />
      </div>
    </div>
  );
}
