import React from 'react';
import { Task } from './TasksProvider';
import { FiEdit, FiCalendar, FiClock } from 'react-icons/fi';
import { BsFire } from 'react-icons/bs';

interface TaskDialogProps {
  isOpen: boolean;
  onClose: () => void;
  onSave: (task: Partial<Task>) => void;
  onDelete: (id: string) => void;
  task?: Task;
}

export default function TaskDialog({
  isOpen,
  onClose,
  onSave,
  onDelete,
  task,
}: TaskDialogProps) {
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const formData = new FormData(e.target as HTMLFormElement);
    const data = Object.fromEntries(formData.entries());
    
    onSave({
      name: data.name as string,
      start_date: new Date(data.start_date as string).toISOString(),
      interval: Number(data.interval),
      difficulty: Number(data.difficulty),
      time: data.time as string,
    });
    onClose();
  };

  if (!isOpen) return null;

  return (
    <dialog className="modal modal-open">
      <div className="modal-box w-11/12 max-w-2xl bg-white p-0 flex flex-col max-h-[90vh]">
        <h3 className="font-bold text-xl flex items-center gap-2 bg-white p-6 border-b sticky top-0">
          {task?.id ? (
            <>
              <FiEdit className="w-5 h-5" />
              Редактиране на задача
            </>
          ) : (
            <>
              <FiCalendar className="w-5 h-5" />
              Нова задача
            </>
          )}
        </h3>

        <form onSubmit={handleSubmit} className="flex flex-col flex-1">
          <div className="space-y-6 p-6 overflow-y-auto flex-1">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-4">
                <div>
                  <label className="label">
                    <span className="label-text font-medium">Име</span>
                  </label>
                  <label className="input input-bordered flex items-center gap-2 bg-white">
                    <FiCalendar className="w-4 h-4 opacity-70" />
                    <input
                      type="text"
                      name="name"
                      defaultValue={task?.name || ''}
                      className="grow"
                      required
                    />
                  </label>
                </div>

                <div>
                  <label className="label">
                    <span className="label-text font-medium">Начална дата</span>
                  </label>
                  <label className="input input-bordered flex items-center gap-2 bg-white">
                    <FiCalendar className="w-4 h-4 opacity-70" />
                    <input
                      type="date"
                      name="start_date"
                      defaultValue={task?.start_date ? task.start_date.slice(0, 10) : new Date().toISOString().slice(0, 10)}
                      className="grow"
                      required
                    />
                  </label>
                </div>
              </div>

              <div className="space-y-4">
                <div>
                  <label className="label">
                    <span className="label-text font-medium">Интервал (дни)</span>
                  </label>
                  <label className="input input-bordered flex items-center gap-2 bg-white">
                    <FiCalendar className="w-4 h-4 opacity-70" />
                    <input
                      type="number"
                      name="interval"
                      min="1"
                      max="30"
                      defaultValue={task?.interval || 7}
                      className="grow"
                      required
                    />
                  </label>
                </div>

                <div>
                  <label className="label">
                    <span className="label-text font-medium">Трудност</span>
                  </label>
                  <label className="input input-bordered flex items-center gap-2 bg-white">
                    <BsFire className="w-4 h-4 opacity-70" />
                    <select
                      name="difficulty"
                      defaultValue={task?.difficulty || 1}
                      className="grow bg-transparent outline-none"
                      required
                    >
                      {Array.from({ length: 5 }, (_, i) => i + 1).map((diff) => (
                        <option key={diff} value={diff}>
                          {diff}
                        </option>
                      ))}
                    </select>
                  </label>
                </div>

                <div>
                  <label className="label">
                    <span className="label-text font-medium">Време</span>
                  </label>
                  <label className="input input-bordered flex items-center gap-2 bg-white">
                    <FiClock className="w-4 h-4 opacity-70" />
                    <input
                      type="time"
                      name="time"
                      defaultValue={task?.time || '09:00'}
                      className="grow"
                      required
                    />
                  </label>
                </div>
              </div>
            </div>
          </div>

          <div className="flex items-center justify-between p-6 border-t sticky bottom-0 bg-white">
            {task?.id && (
              <button
                type="button"
                onClick={() => {
                  if (confirm('Сигурни ли сте, че искате да изтриете тази задача?')) {
                    onDelete(task.id);
                    onClose();
                  }
                }}
                className="btn btn-error btn-sm"
              >
                Изтрий задачата
              </button>
            )}
            <div className="flex gap-2">
              <button
                type="button"
                onClick={onClose}
                className="btn btn-ghost btn-sm"
              >
                Затвори
              </button>
              <button
                type="submit"
                className="btn btn-primary btn-sm"
              >
                Запази
              </button>
            </div>
          </div>
        </form>
      </div>
      <div className="modal-backdrop bg-black/50" onClick={onClose} />
    </dialog>
  );
}