/**
 * Campfire Chat App - Real-time team chat
 */

import React, { useState, useEffect } from 'react';

export function CampfireChat({ campfireId }: { campfireId?: number }) {
  const [messages, setMessages] = useState<any[]>([]);
  const [newMessage, setNewMessage] = useState('');

  useEffect(() => {
    setMessages([
      { id: 1, creator: 'Alice', content: 'Hey team! Just finished the mockups.', created_at: '10:30 AM' },
      { id: 2, creator: 'Bob', content: 'Awesome! Can you share them?', created_at: '10:32 AM' },
      { id: 3, creator: 'Alice', content: 'Sure, uploading now...', created_at: '10:33 AM' },
      { id: 4, creator: 'Charlie', content: '👍', created_at: '10:35 AM' },
    ]);
  }, [campfireId]);

  const sendMessage = () => {
    if (newMessage.trim()) {
      setMessages([...messages, {
        id: messages.length + 1,
        creator: 'You',
        content: newMessage,
        created_at: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
      }]);
      setNewMessage('');
    }
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '600px', padding: '20px', fontFamily: 'system-ui, sans-serif' }}>
      <h1 style={{ fontSize: '24px', marginBottom: '20px' }}>Campfire</h1>
      
      <div style={{ flex: 1, overflowY: 'auto', marginBottom: '20px', border: '1px solid #ddd', borderRadius: '8px', padding: '16px', background: 'white' }}>
        {messages.map((message) => (
          <div key={message.id} style={{ marginBottom: '16px' }}>
            <div style={{ display: 'flex', gap: '8px', alignItems: 'baseline' }}>
              <span style={{ fontWeight: 'bold', fontSize: '14px' }}>{message.creator}</span>
              <span style={{ fontSize: '12px', color: '#999' }}>{message.created_at}</span>
            </div>
            <div style={{ marginTop: '4px' }}>{message.content}</div>
          </div>
        ))}
      </div>

      <div style={{ display: 'flex', gap: '10px' }}>
        <input 
          type="text" 
          value={newMessage}
          onChange={(e) => setNewMessage((e.target as HTMLInputElement).value)}
          onKeyPress={(e) => e.key === 'Enter' && sendMessage()}
          placeholder="Type a message..." 
          style={{ flex: 1, padding: '12px', borderRadius: '6px', border: '1px solid #ddd', fontSize: '14px' }}
        />
        <button onClick={sendMessage} style={{ padding: '12px 24px', background: '#1d8cf8', color: 'white', border: 'none', borderRadius: '6px', cursor: 'pointer' }}>
          Send
        </button>
      </div>
    </div>
  );
}
