import React, { useState, useEffect } from 'react';
import { toLocalDatetimeInputValue, toUTCFromLocalInput } from '../../utils/time';

interface TimeAdjusterProps {
  onTimeChange: (time: string) => void;
  defaultValue?: string;
}

const TimeAdjuster: React.FC<TimeAdjusterProps> = ({ onTimeChange, defaultValue }) => {
  const [value, setValue] = useState(() => {
    if (defaultValue) {
      const d = new Date(defaultValue);
      return toLocalDatetimeInputValue(d);
    }
    return toLocalDatetimeInputValue(new Date());
  });

  useEffect(() => {
    if (onTimeChange) {
      onTimeChange(toUTCFromLocalInput(value));
    }
  }, [value, onTimeChange]);

  const resetToNow = () => {
    const now = toLocalDatetimeInputValue(new Date());
    setValue(now);
    onTimeChange(toUTCFromLocalInput(now));
  };

  return (
    <div className="flex flex-col items-center space-y-3 w-full">
      <div className="relative w-full max-w-[280px]">
        <input
          type="datetime-local"
          value={value}
          onChange={(e) => setValue(e.target.value)}
          className="w-full p-4 bg-gray-50 border border-gray-200 rounded-2xl shadow-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-lg font-medium transition-all outline-none"
        />
      </div>
      <button
        onClick={resetToNow}
        className="text-sm font-medium text-indigo-600 hover:text-indigo-500 transition-colors"
      >
        Reset to now
      </button>
    </div>
  );
};

export default TimeAdjuster;