import * as React from "react";
import { useSession } from "next-auth/react";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { Badge } from "@/components/ui/badge";
import { format } from "date-fns";
import { Comment } from "@/lib/qna/types";
import { Trash2, Pencil, Check, X } from "lucide-react";

interface CommentSectionProps {
  answerId: string;
  comments: Comment[];
  onAddComment: (content: string) => Promise<void>;
  onDeleteComment: (commentId: string) => Promise<void>;
  onUpdateComment?: (commentId: string, content: string) => Promise<void>;
}

export function CommentSection({ answerId, comments, onAddComment, onDeleteComment, onUpdateComment }: CommentSectionProps) {
  const { data: session } = useSession();
  const [content, setContent] = React.useState("");
  const [isSubmitting, setIsSubmitting] = React.useState(false);
  const [editingId, setEditingId] = React.useState<string | null>(null);
  const [editContent, setEditContent] = React.useState("");

  const handleSubmit = async () => {
    if (!content.trim() || !session?.user?.name) return;
    setIsSubmitting(true);
    try {
      await onAddComment(content);
      setContent("");
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleEditStart = (comment: Comment) => {
    setEditingId(comment.id);
    setEditContent(comment.content);
  };

  const handleEditCancel = () => {
    setEditingId(null);
    setEditContent("");
  };

  const handleEditSave = async (commentId: string) => {
    if (!editContent.trim() || !onUpdateComment) return;
    try {
      await onUpdateComment(commentId, editContent);
      setEditingId(null);
    } catch (error) {
      console.error("댓글 수정 실패:", error);
    }
  };

  return (
    <div className="space-y-4 mt-4">
      <div className="flex items-center gap-2">
        <h3 className="text-sm font-medium">댓글</h3>
        {comments.length > 0 && (
          <Badge variant="secondary" className="text-xs">
            {comments.length}
          </Badge>
        )}
      </div>

      {/* 댓글 목록 */}
      <div className="space-y-3">
        {comments.map((comment) => (
          <div key={comment.id} className="flex items-start justify-between text-sm bg-muted/50 rounded-md p-2">
            <div className="flex-1 space-y-1">
              <div className="flex items-center gap-2">
                <span className="font-medium">{comment.author}</span>
                <span className="text-xs text-muted-foreground">
                  {format(new Date(comment.createdAt), "yyyy.MM.dd HH:mm")}
                </span>
              </div>
              {editingId === comment.id ? (
                <Textarea
                  value={editContent}
                  onChange={(e) => setEditContent(e.target.value)}
                  className="min-h-[60px] text-sm"
                  maxLength={250}
                />
              ) : (
                <p className="text-sm">{comment.content}</p>
              )}
            </div>
            {session?.user?.name === comment.author && (
              <div className="flex gap-2">
                {editingId === comment.id ? (
                  <>
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-6 w-6 text-green-600 hover:text-green-700"
                      onClick={() => handleEditSave(comment.id)}
                    >
                      <Check className="h-4 w-4" />
                    </Button>
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-6 w-6 text-muted-foreground"
                      onClick={handleEditCancel}
                    >
                      <X className="h-4 w-4" />
                    </Button>
                  </>
                ) : (
                  <>
                    <Button
                      variant="ghost"
                      size="icon"
                      onClick={() => handleEditStart(comment)}
                      className="h-6 w-6 text-muted-foreground hover:text-blue-500 transition-colors"
                    >
                      <Pencil className="h-3.5 w-3.5" />
                    </Button>
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-6 w-6 text-muted-foreground hover:text-destructive transition-colors"
                      onClick={() => onDeleteComment(comment.id)}
                    >
                      <Trash2 className="h-3.5 w-3.5" />
                    </Button>
                  </>
                )}
              </div>
            )}
          </div>
        ))}
      </div>

      {/* 댓글 입력 */}
      {session?.user && (
        <div className="flex gap-2">
          <Textarea
            value={content}
            onChange={(e) => {
              if (e.target.value.length <= 250) {
                setContent(e.target.value);
              }
            }}
            placeholder="댓글을 입력하세요 (250자 이내)"
            className="min-h-[80px] flex-1"
            maxLength={250}
          />
          <Button 
            onClick={handleSubmit} 
            disabled={isSubmitting || !content.trim()}
            className="self-start"
          >
            {isSubmitting ? "저장 중..." : "등록"}
          </Button>
        </div>
      )}

      {/* 글자 수 표시 */}
      <div className="text-xs text-muted-foreground text-right">
        {content.length}/250
      </div>
    </div>
  );
}