"use client";

import { useState } from "react";
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";
import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button";
import { Comment } from "@/components/shared/comment";
import { TaskWithRelations } from "@/types";
import { useAddComment } from "@/hooks/use-comments";

/**
 * Props für CommentSection Component
 */
interface CommentSectionProps {
  task: TaskWithRelations;
}

/**
 * Comment Section Component
 * Zeigt alle Kommentare einer Task an und ermöglicht das Hinzufügen neuer Kommentare
 * - Nur shadcn/ui Komponenten (Card, ScrollArea, Separator, Textarea, Button)
 * - Comment Component für einzelne Kommentare
 */
export function CommentSection({ task }: CommentSectionProps) {
  /**
   * State für neuen Kommentar-Text
   */
  const [newComment, setNewComment] = useState("");

  /**
   * Hook zum Hinzufügen eines Kommentars
   */
  const addComment = useAddComment(task.id);

  /**
   * Handler für Kommentar hinzufügen
   */
  const handleAddComment = () => {
    if (!newComment.trim()) return;

    addComment.mutate(newComment, {
      onSuccess: () => {
        setNewComment("");
      },
    });
  };

  return (
    <Card>
      <CardHeader>
        <CardTitle>Kommentare</CardTitle>
      </CardHeader>
      <CardContent>
        <ScrollArea className="h-[400px] pr-4">
          {task.comments.length === 0 ? (
            <p className="text-sm text-muted-foreground">
              Noch keine Kommentare vorhanden
            </p>
          ) : (
            <div className="space-y-4">
              {task.comments.map((comment, index) => (
                <div key={comment.id}>
                  <Comment comment={comment} />
                  {index < task.comments.length - 1 && <Separator className="mt-4" />}
                </div>
              ))}
            </div>
          )}
        </ScrollArea>
      </CardContent>
      <CardFooter className="flex-col gap-2">
        <Textarea
          placeholder="Kommentar hinzufügen..."
          value={newComment}
          onChange={(e) => setNewComment(e.target.value)}
        />
        <Button
          onClick={handleAddComment}
          disabled={!newComment.trim() || addComment.isPending}
          className="w-full"
        >
          {addComment.isPending ? "Wird hinzugefügt..." : "Kommentar hinzufügen"}
        </Button>
      </CardFooter>
    </Card>
  );
}