ludops-todo/apps/web/src/components/CreateTaskForm.tsx

import { useState } from 'react';
import type { NewTaskInput } from '../types';
import './CreateTaskForm.css';

interface CreateTaskFormProps {
  onCreateTask: (task: NewTaskInput) => void;
}

export default function CreateTaskForm({ onCreateTask }: CreateTaskFormProps) {
  const [isOpen, setIsOpen] = useState(false);
  const [name, setName] = useState('');
  const [doesRepeat, setDoesRepeat] = useState(true);
  const [repeatAmount, setRepeatAmount] = useState('1');
  const [repeatUnit, setRepeatUnit] = useState<'WEEKS' | 'MONTHS' | 'YEARS'>('WEEKS');
  const [toDoToday, setToDoToday] = useState(true);
  const [priority, setPriority] = useState<'ESSENTIAL' | 'WHEN_I_HAVE_TIME'>('ESSENTIAL');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    
    if (!name.trim()) {
      alert('Please enter a task name');
      return;
    }

    const taskInput: NewTaskInput = {
      name: name.trim(),
      doesRepeat,
      repeatsEvery: doesRepeat ? `${repeatAmount}_${repeatUnit}` : undefined,
      priority,
      toDoToday,
    };

    onCreateTask(taskInput);
    
    // Reset form
    setName('');
    setDoesRepeat(true);
    setRepeatAmount('1');
    setRepeatUnit('WEEKS');
    setToDoToday(true);
    setPriority('ESSENTIAL');
    setIsOpen(false);
  };

  return (
    <div className="create-task-form">
      {!isOpen ? (
        <button className="open-form-btn" onClick={() => setIsOpen(true)}>
          + Create new task
        </button>
      ) : (
        <form onSubmit={handleSubmit} className="task-form">
          <h3>Create New Task</h3>
          
          <div className="form-group">
            <label>Task</label>
            <input
              type="text"
              value={name}
              onChange={(e) => setName(e.target.value.slice(0, 60))}
              placeholder="task name"
              maxLength={60}
              autoFocus
            />
            <span className="char-count">{name.length}/60</span>
          </div>

          <div className="form-group">
            <label>Repeats?</label>
            <div className="radio-group">
              <label>
                <input
                  type="radio"
                  checked={doesRepeat}
                  onChange={() => setDoesRepeat(true)}
                />
                Yes
              </label>
              <label>
                <input
                  type="radio"
                  checked={!doesRepeat}
                  onChange={() => setDoesRepeat(false)}
                />
                No
              </label>
            </div>
          </div>

          {doesRepeat && (
            <div className="form-group">
              <label>Every</label>
              <div className="repeat-input">
                <input
                  type="number"
                  value={repeatAmount}
                  onChange={(e) => setRepeatAmount(e.target.value)}
                  min="1"
                  max="999"
                  className="repeat-amount"
                />
                <select
                  value={repeatUnit}
                  onChange={(e) => setRepeatUnit(e.target.value as any)}
                  className="repeat-unit"
                >
                  <option value="DAYS">day{repeatAmount !== '1' ? 's' : ''}</option>
                  <option value="WEEKS">week{repeatAmount !== '1' ? 's' : ''}</option>
                  <option value="MONTHS">month{repeatAmount !== '1' ? 's' : ''}</option>
                  <option value="YEARS">year{repeatAmount !== '1' ? 's' : ''}</option>
                </select>
              </div>
            </div>
          )}

          <div className="form-group">
            <label>To do today?</label>
            <div className="radio-group">
              <label>
                <input
                  type="radio"
                  checked={toDoToday}
                  onChange={() => setToDoToday(true)}
                />
                Yes
              </label>
              <label>
                <input
                  type="radio"
                  checked={!toDoToday}
                  onChange={() => setToDoToday(false)}
                />
                No
              </label>
            </div>
          </div>

          <div className="form-group">
            <label>Priority</label>
            <div className="radio-group">
              <label>
                <input
                  type="radio"
                  checked={priority === 'ESSENTIAL'}
                  onChange={() => setPriority('ESSENTIAL')}
                />
                Essential
              </label>
              <label>
                <input
                  type="radio"
                  checked={priority === 'WHEN_I_HAVE_TIME'}
                  onChange={() => setPriority('WHEN_I_HAVE_TIME')}
                />
                When I have time
              </label>
            </div>
          </div>

          <div className="form-actions">
            <button type="submit" className="submit-btn">Create Task</button>
            <button type="button" className="cancel-btn" onClick={() => setIsOpen(false)}>
              Cancel
            </button>
          </div>
        </form>
      )}
    </div>
  );
}