import React, { useState } from 'react';

export default function ThreadPanel({ thread, onClose }) {
  const [replyText, setReplyText] = useState('');
  
  const threadData = thread || {
    name: 'Authentication Discussion',
    parentMessage: {
      author: 'Trevor',
      avatar: 'T',
      gradient: 'linear-gradient(135deg, #ff0000, #cc0000)',
      content: 'Just pushed the authentication updates. All services should automatically migrate to the new protocols within 24 hours.',
      timestamp: '10:34 AM',
    },
    replies: [
      {
        id: 1,
        author: 'Marcus',
        avatar: 'M',
        gradient: 'linear-gradient(135deg, #0066ff, #003380)',
        content: 'Great work! How does this affect the API rate limiting?',
        timestamp: '10:36 AM',
      },
      {
        id: 2,
        author: 'Trevor',
        avatar: 'T',
        gradient: 'linear-gradient(135deg, #ff0000, #cc0000)',
        content: 'Rate limiting remains the same. The auth tokens now include refresh capabilities though.',
        timestamp: '10:38 AM',
      },
      {
        id: 3,
        author: 'Sarah',
        avatar: 'S',
        gradient: 'linear-gradient(135deg, #ffa500, #ff8c00)',
        content: 'Testing this on Labs now. Will report back in a few hours.',
        timestamp: '10:45 AM',
      },
    ],
    memberCount: 4,
    messageCount: 3,
  };

  const handleSendReply = () => {
    if (!replyText.trim()) return;
    // Handle sending reply
    setReplyText('');
  };

  return (
    <div className="thread-panel">
      <div className="thread-header">
        <div className="thread-title">
          <span className="thread-icon">🧵</span>
          <span>{threadData.name}</span>
        </div>
        <div className="thread-meta">
          <span>{threadData.memberCount} members</span>
          <span>•</span>
          <span>{threadData.messageCount} messages</span>
        </div>
        <button className="thread-close" onClick={onClose}>✕</button>
      </div>

      <div className="thread-parent">
        <div className="parent-message">
          <div className="message-avatar" style={{ background: threadData.parentMessage.gradient }}>
            {threadData.parentMessage.avatar}
          </div>
          <div className="message-content">
            <div className="message-header">
              <span className="message-author">{threadData.parentMessage.author}</span>
              <span className="message-time">{threadData.parentMessage.timestamp}</span>
            </div>
            <div className="message-text">{threadData.parentMessage.content}</div>
          </div>
        </div>
        <div className="thread-line"></div>
      </div>

      <div className="thread-replies">
        {threadData.replies.map(reply => (
          <div key={reply.id} className="thread-reply">
            <div className="message-avatar small" style={{ background: reply.gradient }}>
              {reply.avatar}
            </div>
            <div className="message-content">
              <div className="message-header">
                <span className="message-author">{reply.author}</span>
                <span className="message-time">{reply.timestamp}</span>
              </div>
              <div className="message-text">{reply.content}</div>
            </div>
          </div>
        ))}
      </div>

      <div className="thread-input-container">
        <input
          type="text"
          className="thread-input"
          placeholder="Reply to thread..."
          value={replyText}
          onChange={(e) => setReplyText(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' && handleSendReply()}
        />
        <button className="thread-send" onClick={handleSendReply}>
          ➤
        </button>
      </div>
    </div>
  );
}
