"use client";

import { useState, useEffect } from "react";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button";
import { useFlowEditorStore } from "@/lib/stores/flowEditorStore";
import { CommentNodeData } from "@/types/node-editor";
import { MessageSquare } from "lucide-react";

interface CommentPropertiesProps {
  nodeId: string;
  data: CommentNodeData;
}

export function CommentProperties({ nodeId, data }: CommentPropertiesProps) {
  const { updateNode } = useFlowEditorStore();

  const [content, setContent] = useState(data.content || "");

  useEffect(() => {
    setContent(data.content || "");
  }, [data]);

  const handleApply = () => {
    updateNode(nodeId, {
      content,
    });
  };

  return (
    <div className="space-y-4 p-4 pb-8">
      <div className="flex items-center gap-2 rounded-md bg-yellow-50 p-2">
        <MessageSquare className="h-4 w-4 text-yellow-600" />
        <span className="font-semibold text-yellow-600">주석</span>
      </div>

      <div>
        <Label htmlFor="content" className="text-xs">
          메모 내용
        </Label>
        <Textarea
          id="content"
          value={content}
          onChange={(e) => setContent(e.target.value)}
          placeholder="플로우 설명이나 메모를 입력하세요..."
          className="mt-1 text-sm"
          rows={8}
        />
        <p className="mt-1 text-xs text-gray-500">이 노드는 플로우 실행에 영향을 주지 않습니다.</p>
      </div>

      <Button onClick={handleApply} className="w-full">
        적용
      </Button>
    </div>
  );
}