import React, { useState } from 'react';

export default function CommentThread() {
  const [taskId, setTaskId] = useState('');
  const [comments, setComments] = useState<any[]>([]);
  const [newComment, setNewComment] = useState('');
  const [loading, setLoading] = useState(false);

  const loadComments = async () => {
    if (!taskId) return;
    setLoading(true);
    try {
      const result = await window.mcp.callTool('wrike_list_comments', { taskId });
      setComments(result.comments || []);
    } catch (error) {
      console.error('Failed to load comments:', error);
    } finally {
      setLoading(false);
    }
  };

  const addComment = async () => {
    if (!taskId || !newComment) return;
    setLoading(true);
    try {
      await window.mcp.callTool('wrike_create_comment', { taskId, text: newComment });
      setNewComment('');
      await loadComments();
    } catch (error) {
      console.error('Failed to add comment:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{ background: '#111827', color: '#f3f4f6', minHeight: '100vh', padding: '24px' }}>
      <h1 style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '24px' }}>Comment Thread</h1>
      
      <div style={{ marginBottom: '24px', display: 'flex', gap: '12px' }}>
        <input
          type="text"
          placeholder="Enter Task ID"
          value={taskId}
          onChange={(e) => setTaskId(e.target.value)}
          style={{
            flex: 1,
            background: '#1f2937',
            color: '#f3f4f6',
            padding: '8px 12px',
            borderRadius: '6px',
            border: '1px solid #374151',
          }}
        />
        <button
          onClick={loadComments}
          style={{
            background: '#3b82f6',
            color: 'white',
            padding: '8px 16px',
            borderRadius: '6px',
            border: 'none',
            cursor: 'pointer',
          }}
        >
          Load Comments
        </button>
      </div>

      {taskId && (
        <div style={{ background: '#1f2937', padding: '16px', borderRadius: '8px', marginBottom: '24px', border: '1px solid #374151' }}>
          <textarea
            placeholder="Write a comment..."
            value={newComment}
            onChange={(e) => setNewComment(e.target.value)}
            rows={3}
            style={{
              width: '100%',
              background: '#111827',
              color: '#f3f4f6',
              padding: '8px 12px',
              borderRadius: '6px',
              border: '1px solid #374151',
              marginBottom: '12px',
            }}
          />
          <button
            onClick={addComment}
            disabled={!newComment || loading}
            style={{
              background: '#10b981',
              color: 'white',
              padding: '8px 16px',
              borderRadius: '6px',
              border: 'none',
              cursor: 'pointer',
              opacity: !newComment || loading ? 0.5 : 1,
            }}
          >
            Add Comment
          </button>
        </div>
      )}

      {loading ? (
        <div>Loading...</div>
      ) : (
        <div style={{ display: 'grid', gap: '12px' }}>
          {comments.map(comment => (
            <div
              key={comment.id}
              style={{
                background: '#1f2937',
                padding: '16px',
                borderRadius: '6px',
                border: '1px solid #374151',
              }}
            >
              <div style={{ fontSize: '14px', color: '#9ca3af', marginBottom: '8px' }}>
                {new Date(comment.createdDate).toLocaleString()}
              </div>
              <div>{comment.text}</div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}
