import React, { useState } from 'react';
import { Plus, Music, Clock as ClockIcon } from 'lucide-react';
import { ScheduleItem } from '../types';

interface ScheduleFormProps {
  onAdd: (item: Omit<ScheduleItem, 'id' | 'isActive'>) => void;
}

const ScheduleForm: React.FC<ScheduleFormProps> = ({ onAdd }) => {
  const [time, setTime] = useState('');
  const [songName, setSongName] = useState('');
  const [file, setFile] = useState<File | null>(null);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!time || !songName || !file) return;

    onAdd({
      time,
      songName,
      songFile: file
    });

    setTime('');
    setSongName('');
    setFile(null);
  };

  return (
    <form onSubmit={handleSubmit} className="bg-white p-6 rounded-2xl shadow-sm border border-slate-100 space-y-4">
      <div className="flex items-center gap-2 mb-4">
        <Plus className="w-5 h-5 text-indigo-500" />
        <h2 className="text-lg font-semibold text-slate-800">Add New Bell</h2>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div className="space-y-1">
          <label className="text-xs font-semibold text-slate-500 uppercase ml-1">Time</label>
          <div className="relative">
            <ClockIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
            <input
              type="time"
              required
              value={time}
              onChange={(e) => setTime(e.target.value)}
              className="w-full pl-10 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all"
            />
          </div>
        </div>

        <div className="space-y-1">
          <label className="text-xs font-semibold text-slate-500 uppercase ml-1">Song Name</label>
          <div className="relative">
            <Music className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
            <input
              type="text"
              required
              placeholder="e.g. End of Math"
              value={songName}
              onChange={(e) => setSongName(e.target.value)}
              className="w-full pl-10 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all"
            />
          </div>
        </div>

        <div className="space-y-1">
          <label className="text-xs font-semibold text-slate-500 uppercase ml-1">Audio File</label>
          <input
            type="file"
            accept="audio/*"
            required
            onChange={(e) => setFile(e.target.files?.[0] || null)}
            className="w-full py-2 text-sm text-slate-500 file:mr-4 file:py-1 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100"
          />
        </div>
      </div>

      <button
        type="submit"
        disabled={!time || !songName || !file}
        className="w-full mt-4 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg shadow-md shadow-indigo-200 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
      >
        Schedule Bell
      </button>
    </form>
  );
};

export default ScheduleForm;