import React, { useState } from 'react';
import { Calendar, Clock, X } from 'lucide-react';

interface ScheduleSettingsProps {
  scheduledFor: Date | null;
  onScheduleChange: (date: Date | null) => void;
  onClose: () => void;
}

const ScheduleSettings: React.FC<ScheduleSettingsProps> = ({ 
  scheduledFor, 
  onScheduleChange, 
  onClose 
}) => {
  const [selectedDate, setSelectedDate] = useState(
    scheduledFor ? scheduledFor.toISOString().split('T')[0] : ''
  );
  const [selectedTime, setSelectedTime] = useState(
    scheduledFor ? scheduledFor.toTimeString().slice(0, 5) : ''
  );

  const handleSave = () => {
    if (selectedDate && selectedTime) {
      const dateTime = new Date(`${selectedDate}T${selectedTime}`);
      onScheduleChange(dateTime);
    } else {
      onScheduleChange(null);
    }
    onClose();
  };

  const handleClear = () => {
    setSelectedDate('');
    setSelectedTime('');
    onScheduleChange(null);
    onClose();
  };

  const today = new Date().toISOString().split('T')[0];
  const now = new Date().toTimeString().slice(0, 5);

  return (
    <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg p-4">
      <div className="flex items-center justify-between mb-4">
        <h4 className="font-semibold text-gray-900 dark:text-white flex items-center space-x-2">
          <Calendar size={18} className="text-gray-600 dark:text-gray-400" />
          <span>Schedule Post</span>
        </h4>
        <button
          onClick={onClose}
          className="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
        >
          <X size={18} />
        </button>
      </div>

      <div className="space-y-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
            Date
          </label>
          <input
            type="date"
            value={selectedDate}
            onChange={(e) => setSelectedDate(e.target.value)}
            min={today}
            className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 focus:border-gray-500 dark:focus:border-gray-400 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
            Time
          </label>
          <input
            type="time"
            value={selectedTime}
            onChange={(e) => setSelectedTime(e.target.value)}
            min={selectedDate === today ? now : undefined}
            className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 focus:border-gray-500 dark:focus:border-gray-400 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
          />
        </div>

        {selectedDate && selectedTime && (
          <div className="p-3 bg-gray-100 dark:bg-gray-700 rounded-lg">
            <div className="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
              <Clock size={16} />
              <span className="text-sm font-medium">
                Scheduled for {new Date(`${selectedDate}T${selectedTime}`).toLocaleDateString()} 
                at {new Date(`${selectedDate}T${selectedTime}`).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
              </span>
            </div>
          </div>
        )}

        <div className="flex space-x-2 pt-2">
          <button
            onClick={handleSave}
            className="flex-1 bg-gray-900 dark:bg-white text-white dark:text-gray-900 py-2 px-4 rounded-lg hover:bg-gray-800 dark:hover:bg-gray-100 transition-colors font-medium"
          >
            {selectedDate && selectedTime ? 'Set Schedule' : 'Post Now'}
          </button>
          {scheduledFor && (
            <button
              onClick={handleClear}
              className="px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
            >
              Clear
            </button>
          )}
        </div>
      </div>
    </div>
  );
};

export default ScheduleSettings;