'use client';

import { useState, useRef } from 'react';
import { DailyCheckboxType } from '@/lib/types';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';

interface DailyAddFormProps {
  onAdd: (text: string, type: DailyCheckboxType) => Promise<void>;
  disabled?: boolean;
  placeholder?: string;
}

export function DailyAddForm({ onAdd, disabled = false, placeholder = "Ajouter une tâche..." }: DailyAddFormProps) {
  const [newCheckboxText, setNewCheckboxText] = useState('');
  const [selectedType, setSelectedType] = useState<DailyCheckboxType>('task');
  const [addingCheckbox, setAddingCheckbox] = useState(false);
  const inputRef = useRef<HTMLInputElement>(null);

  const handleAddCheckbox = async () => {
    if (!newCheckboxText.trim()) return;

    setAddingCheckbox(true);
    try {
      await onAdd(newCheckboxText.trim(), selectedType); // Pas de taskId lors de l'ajout
      setNewCheckboxText('');
      // Garder le type sélectionné pour enchaîner les créations du même type
      // setSelectedType('task'); // <- Supprimé pour garder la sélection
      // Garder le focus sur l'input pour enchainer les entrées
      setTimeout(() => {
        inputRef.current?.focus();
      }, 100);
    } finally {
      setAddingCheckbox(false);
    }
  };

  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      handleAddCheckbox();
    }
  };

  const getPlaceholder = () => {
    if (placeholder !== "Ajouter une tâche...") return placeholder;
    return selectedType === 'meeting' ? 'Ajouter une réunion...' : 'Ajouter une tâche...';
  };

  return (
    <div className="space-y-2">
      {/* Sélecteur de type */}
      <div className="flex gap-2">
        <Button
          type="button"
          onClick={() => setSelectedType('task')}
          variant="ghost"
          size="sm"
          className={`flex items-center gap-1 text-xs border-l-4 ${
            selectedType === 'task' 
              ? 'border-l-green-500 bg-green-100 dark:bg-green-900/40 text-green-900 dark:text-green-100 font-medium' 
              : 'border-l-green-300 hover:border-l-green-400 opacity-70 hover:opacity-90'
          }`}
          disabled={addingCheckbox || disabled}
        >
          ✅ Tâche
        </Button>
        <Button
          type="button"
          onClick={() => setSelectedType('meeting')}
          variant="ghost"
          size="sm"
          className={`flex items-center gap-1 text-xs border-l-4 ${
            selectedType === 'meeting' 
              ? 'border-l-blue-500 bg-blue-100 dark:bg-blue-900/40 text-blue-900 dark:text-blue-100 font-medium' 
              : 'border-l-blue-300 hover:border-l-blue-400 opacity-70 hover:opacity-90'
          }`}
          disabled={addingCheckbox || disabled}
        >
          🗓️ Réunion
        </Button>
      </div>

      {/* Champ de saisie et options */}
      <div className="flex gap-2">
        <Input
          ref={inputRef}
          type="text"
          placeholder={getPlaceholder()}
          value={newCheckboxText}
          onChange={(e) => setNewCheckboxText(e.target.value)}
          onKeyDown={handleKeyPress}
          disabled={addingCheckbox || disabled}
          className="flex-1 min-w-[300px]"
        />
        <Button
          onClick={handleAddCheckbox}
          disabled={!newCheckboxText.trim() || addingCheckbox || disabled}
          variant="primary"
          size="sm"
          className="min-w-[40px]"
        >
          {addingCheckbox ? '...' : '+'}
        </Button>
      </div>
    </div>
  );
}