import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { StickyNote, X } from "lucide-react";
import { cn } from "@/lib/utils";

interface TextAnnotationProps {
  onAdd: (text: string) => void;
}

const TextAnnotation = ({ onAdd }: TextAnnotationProps) => {
  const [isOpen, setIsOpen] = useState(false);
  const [text, setText] = useState("");

  const handleAdd = () => {
    if (text.trim()) {
      onAdd(text.trim());
      setText("");
      setIsOpen(false);
    }
  };

  return (
    <div className="relative">
      <Button
        onClick={() => setIsOpen(!isOpen)}
        size="sm"
        variant={isOpen ? "default" : "outline"}
        title="Ajouter une note"
      >
        <StickyNote className="w-4 h-4 mr-1" />
        Note
      </Button>

      {isOpen && (
        <div className="absolute top-full right-0 mt-2 w-72 bg-card border border-border rounded-lg shadow-lg p-4 z-50 animate-scale-in">
          <div className="flex items-center justify-between mb-2">
            <span className="text-sm font-medium">Nouvelle note</span>
            <button
              onClick={() => setIsOpen(false)}
              className="hover:bg-muted rounded p-1"
            >
              <X className="w-4 h-4" />
            </button>
          </div>
          
          <Textarea
            value={text}
            onChange={(e) => setText(e.target.value)}
            placeholder="Écrivez votre observation..."
            className="mb-2 min-h-[80px]"
            autoFocus
          />
          
          <div className="flex gap-2">
            <Button onClick={handleAdd} size="sm" className="flex-1">
              Ajouter sur le plan
            </Button>
            <Button onClick={() => setIsOpen(false)} size="sm" variant="outline">
              Annuler
            </Button>
          </div>
        </div>
      )}
    </div>
  );
};

export default TextAnnotation;