'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>('meeting');
  const inputRef = useRef<HTMLInputElement>(null);

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

    const text = newCheckboxText.trim();
    
    // Vider et refocus IMMÉDIATEMENT pour l'UX optimiste
    setNewCheckboxText('');
    inputRef.current?.focus();

    // Lancer l'ajout en arrière-plan (fire and forget)
    onAdd(text, selectedType).catch(error => {
      console.error('Erreur lors de l\'ajout:', error);
      // En cas d'erreur, on pourrait restaurer le texte
      // setNewCheckboxText(text);
    });
  };

  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-500/30 text-white font-medium' 
              : 'border-l-green-300 hover:border-l-green-400 opacity-70 hover:opacity-90'
          }`}
          disabled={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-500/30 text-white font-medium' 
              : 'border-l-blue-300 hover:border-l-blue-400 opacity-70 hover:opacity-90'
          }`}
          disabled={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={disabled}
          className="flex-1 min-w-[300px]"
        />
        <Button
          onClick={handleAddCheckbox}
          disabled={!newCheckboxText.trim() || disabled}
          variant="primary"
          size="sm"
          className="min-w-[40px]"
        >
          +
        </Button>
      </div>
    </div>
  );
}