/**
 * Message Detail App - Detailed view of a single message
 */

import React from 'react';

export function MessageDetail({ messageId }: { messageId?: number }) {
  const message = {
    id: messageId || 1,
    subject: 'Project Kickoff',
    content: 'Welcome everyone to the Website Redesign project! We\'re excited to have such a talented team on board. This project will run through Q1 2024 with the goal of completely revamping our online presence.',
    creator: { name: 'Alice Johnson', avatar_url: '' },
    created_at: '2024-01-10T10:00:00Z',
    comments: [
      { id: 1, author: 'Bob Smith', content: 'Excited to get started!', created_at: '2024-01-10T11:30:00Z' },
      { id: 2, author: 'Charlie Davis', content: 'Looking forward to working with you all.', created_at: '2024-01-10T14:00:00Z' },
    ],
  };

  return (
    <div style={{ padding: '20px', fontFamily: 'system-ui, sans-serif', maxWidth: '800px' }}>
      <h1 style={{ fontSize: '32px', marginBottom: '15px' }}>{message.subject}</h1>
      
      <div style={{ display: 'flex', alignItems: 'center', marginBottom: '20px', fontSize: '14px', color: '#666' }}>
        <span style={{ fontWeight: 'bold', marginRight: '8px' }}>{message.creator.name}</span>
        <span>posted on {new Date(message.created_at).toLocaleDateString()}</span>
      </div>

      <div style={{ marginBottom: '30px', lineHeight: '1.6', fontSize: '16px' }}>
        {message.content}
      </div>

      <hr style={{ border: 'none', borderTop: '1px solid #ddd', marginBottom: '20px' }} />

      <h2 style={{ fontSize: '20px', marginBottom: '15px' }}>Comments ({message.comments.length})</h2>
      
      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
        {message.comments.map(comment => (
          <div key={comment.id} style={{ padding: '15px', background: '#f9f9f9', borderRadius: '6px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
              <span style={{ fontWeight: 'bold' }}>{comment.author}</span>
              <span style={{ fontSize: '12px', color: '#999' }}>{new Date(comment.created_at).toLocaleDateString()}</span>
            </div>
            <div>{comment.content}</div>
          </div>
        ))}
      </div>

      <div style={{ marginTop: '20px' }}>
        <textarea 
          placeholder="Add a comment..." 
          style={{ width: '100%', padding: '12px', borderRadius: '6px', border: '1px solid #ddd', minHeight: '80px', fontFamily: 'inherit' }}
        />
        <button style={{ marginTop: '10px', padding: '10px 20px', background: '#1d8cf8', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>
          Post Comment
        </button>
      </div>
    </div>
  );
}
