/**
 * Todo Detail App - Detailed view of a single todo
 */

import React from 'react';

export function TodoDetail({ todoId }: { todoId?: number }) {
  const todo = {
    id: todoId || 1,
    content: 'Design homepage mockup',
    description: 'Create high-fidelity mockups for the new homepage design, including desktop and mobile views.',
    completed: false,
    assignees: [{ id: 1, name: 'Alice Johnson', avatar_url: '' }],
    due_on: '2024-01-20',
    created_at: '2024-01-10',
    comments: [
      { id: 1, author: 'Bob Smith', content: 'Looking great! Can we add more white space?', created_at: '2024-01-12' },
    ],
  };

  return (
    <div style={{ padding: '20px', fontFamily: 'system-ui, sans-serif', maxWidth: '800px' }}>
      <h1 style={{ fontSize: '28px', marginBottom: '20px' }}>{todo.content}</h1>
      
      <div style={{ marginBottom: '20px' }}>
        <label style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
          <input type="checkbox" checked={todo.completed} readOnly style={{ marginRight: '10px', width: '20px', height: '20px' }} />
          <span style={{ fontSize: '16px' }}>{todo.completed ? 'Completed' : 'Mark as complete'}</span>
        </label>
      </div>

      <div style={{ marginBottom: '20px' }}>
        <h3 style={{ fontSize: '14px', color: '#666', marginBottom: '8px' }}>Description</h3>
        <p style={{ lineHeight: '1.6' }}>{todo.description}</p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px', marginBottom: '30px' }}>
        <div>
          <h3 style={{ fontSize: '14px', color: '#666', marginBottom: '8px' }}>Assignees</h3>
          {todo.assignees.map(assignee => (
            <div key={assignee.id} style={{ padding: '8px', background: '#f5f5f5', borderRadius: '4px' }}>
              {assignee.name}
            </div>
          ))}
        </div>
        <div>
          <h3 style={{ fontSize: '14px', color: '#666', marginBottom: '8px' }}>Due Date</h3>
          <div style={{ padding: '8px', background: '#f5f5f5', borderRadius: '4px' }}>
            {todo.due_on}
          </div>
        </div>
      </div>

      <div>
        <h3 style={{ fontSize: '18px', marginBottom: '15px' }}>Comments</h3>
        {todo.comments.map(comment => (
          <div key={comment.id} style={{ marginBottom: '15px', padding: '12px', background: '#f9f9f9', borderRadius: '6px' }}>
            <div style={{ fontSize: '14px', fontWeight: 'bold', marginBottom: '4px' }}>{comment.author}</div>
            <div style={{ fontSize: '12px', color: '#999', marginBottom: '8px' }}>{comment.created_at}</div>
            <div>{comment.content}</div>
          </div>
        ))}
      </div>
    </div>
  );
}