"use client";

import { Loader2, Send } from "lucide-react";
import { type KeyboardEvent, useState } from "react";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { useChatTyping } from "@/lib/hooks/use-chat";
import { useSocket } from "@/lib/hooks/use-socket";

interface MessageInputProps {
  onSend: (content: string) => Promise<void>;
  isSending: boolean;
  disabled?: boolean;
  chatId: string | null;
}

export function MessageInput({
  onSend,
  isSending,
  disabled = false,
  chatId,
}: MessageInputProps) {
  const [content, setContent] = useState("");
  const { socket, isConnected } = useSocket();
  const { handleTypingStart, handleTypingStop } = useChatTyping(
    socket,
    isConnected,
    chatId,
  );

  const handleSubmit = async () => {
    if (!content.trim() || isSending || disabled) return;

    const messageContent = content.trim();
    setContent("");
    handleTypingStop();
    await onSend(messageContent);
  };

  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault();
      handleSubmit();
    }
  };

  const handleChange = (value: string) => {
    setContent(value);

    if (value.trim().length > 0) {
      handleTypingStart();
    } else {
      handleTypingStop();
    }
  };

  return (
    <div className="border-t p-4">
      <div className="flex items-end gap-2">
        <Textarea
          value={content}
          onChange={(e) => handleChange(e.target.value)}
          onKeyDown={handleKeyDown}
          placeholder="Digite sua mensagem... (Enter para enviar, Shift+Enter para nova linha)"
          className="min-h-[60px] max-h-[120px] resize-none"
          disabled={isSending || disabled}
          rows={2}
        />
        <Button
          onClick={handleSubmit}
          disabled={!content.trim() || isSending || disabled}
          size="icon"
          className="h-[60px] w-[60px] flex-shrink-0"
        >
          {isSending ? (
            <Loader2 className="h-5 w-5 animate-spin" />
          ) : (
            <Send className="h-5 w-5" />
          )}
        </Button>
      </div>
      <p className="text-xs text-muted-foreground mt-2">
        Máximo 1000 caracteres
      </p>
    </div>
  );
}