"use client";

import { useState } from "react";
import { Send, Loader2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { FileUpload } from "@/components/ui/file-upload";
import { RichTextEditor } from "@/components/ui/rich-text-editor";
import { useCreateComment } from "../api/use-create-comment";
import { useMembersForMentions } from "@/features/members/hooks/use-members-for-mentions";
import { useWorkspaceId } from "@/features/workspaces/hooks/use-workspace-id";

interface CommentFormProps {
  taskId: string;
  placeholder?: string;
  autoFocus?: boolean;
}

export const CommentForm = ({
  taskId,
  placeholder = "Write a comment...",
  autoFocus = false,
}: CommentFormProps) => {
  const [content, setContent] = useState("");
  const [attachments, setAttachments] = useState<string[]>([]);
  const { mutate, isPending } = useCreateComment();
  const workspaceId = useWorkspaceId();
  const { members: mentionableMembers } = useMembersForMentions({ workspaceId });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    
    if (!content.trim() && attachments.length === 0) {
      return;
    }

    mutate(
      {
        json: { content: content.trim(), attachments },
        param: { taskId },
      },
      {
        onSuccess: () => {
          setContent("");
          setAttachments([]);
        },
      }
    );
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
      e.preventDefault();
      handleSubmit(e);
    }
  };

  const canSubmit = content.trim() || attachments.length > 0;

  console.log('Comment form mentionableMembers:', mentionableMembers)
  console.log('Comment form workspaceId:', workspaceId)
  
  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div className="space-y-3">
        {/* Rich Text Editor for Comments */}
        <div className="border rounded-lg">
          <RichTextEditor
            content={content}
            onChange={setContent}
            placeholder={placeholder}
            className="min-h-[120px]"
            editable={true}
            minimal={false}
            members={mentionableMembers}
            workspaceId={workspaceId}
          />
        </div>
        
        {/* File Upload Section */}
        <FileUpload
          value={attachments}
          onChange={setAttachments}
          disabled={isPending}
          placeholder="Drop files here or click to attach"
          className="border-dashed border-gray-300"
        />
      </div>

      <div className="flex items-center justify-between pt-2">
        <p className="text-xs text-gray-500">
          Press <kbd className="px-1 py-0.5 bg-gray-100 rounded text-xs font-mono">Ctrl + Enter</kbd> to send
        </p>
        
        <Button
          type="submit"
          size="sm"
          disabled={!canSubmit || isPending}
          className="gap-2"
        >
          {isPending ? (
            <Loader2 className="h-4 w-4 animate-spin" />
          ) : (
            <Send className="h-4 w-4" />
          )}
          {isPending ? "Sending..." : "Send Comment"}
        </Button>
      </div>
    </form>
  );
}; 