'use client'

import { useState, useEffect, useRef } from 'react'
import type { MessageData } from 'lib/messages'
import { formatTime } from 'lib/utils'
import { Chat } from './Chat'

interface TestRoomClientProps {
  initialCode?: string
  roomName?: string
}

export function TestRoomClient({ initialCode = 'TST01', roomName = 'Test místnost' }: TestRoomClientProps) {
  const demoRoomId = 'demo-room'
  const [messages, setMessages] = useState<MessageData[]>([
    { id: 'm1', room_id: demoRoomId, content: 'Vítejte v testovací místnosti!', created_at: new Date(Date.now() - 100000).toISOString(), code_id: initialCode },
    { id: 'm2', room_id: demoRoomId, content: 'Zkuste napsat zprávu níže.', created_at: new Date(Date.now() - 50000).toISOString(), code_id: 'OTHER' }
  ])

  const messagesEndRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
  }, [messages])

  const handleSend = (content: string) => {
    const msg: MessageData = {
      id: Date.now().toString(),
      room_id: demoRoomId,
      content,
      created_at: new Date().toISOString(),
      code_id: initialCode
    }

    setMessages(prev => [...prev, msg])
  }

  return (
    <div className="page leftright">
      <div className="frame">
        <Chat messages={messages} currentCodeId={initialCode} roomName={roomName} onSend={handleSend} />
        <div ref={messagesEndRef} />
      </div>
    </div>
  )
}