import React, { useEffect, useRef } from 'react';
import MessageBubble from './MessageBubble';

export default function ChatWindow({ messages, loadingHistory, streaming, onSendMessage, onCancel, activeSession, onTogglePanel }) {
  const bottomRef = useRef(null);
  const inputRef = useRef(null);
  const [input, setInput] = React.useState('');

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

  function handleSend() {
    const text = input.trim();
    if (!text || streaming) return;
    setInput('');
    onSendMessage(text);
  }

  function handleKeyDown(e) {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleSend();
    }
  }

  return (
    <div className="flex-col flex-1 overflow-hidden" style={{ background: 'var(--bg-base)' }}>

      {/* Header */}
      <div className="panel-header" style={{ padding: '0 12px 0 20px', justifyContent: 'space-between' }}>
        <span className="text-base text-secondary">
          {activeSession ? (activeSession.name || activeSession.external_id) : 'No session selected'}
        </span>
        <button className="btn-icon" onClick={onTogglePanel} title="Session info">⊹</button>
      </div>

      {/* Message thread */}
      <div className="flex-1 scroll-y" style={{ padding: '20px 0' }}>
        {!activeSession && (
          <div className="flex-col items-center justify-center" style={{
            height: '100%',
            color: 'var(--text-muted)',
            gap: '12px',
          }}>
            <div style={{ fontSize: '32px', opacity: 0.4 }}>✦</div>
            <p className="text-base">Select a session or start a new chat</p>
          </div>
        )}

        {loadingHistory && (
          <div className="flex justify-center text-muted" style={{ padding: '40px', fontSize: '13px' }}>
            Loading history...
          </div>
        )}

        {!loadingHistory && messages.map(msg => (
          <MessageBubble key={msg.id} message={msg} />
        ))}

        <div ref={bottomRef} />
      </div>

      {/* Input bar */}
      <div style={{
        borderTop: '1px solid var(--border)',
        padding: '12px 16px',
        background: 'var(--bg-surface)',
        flexShrink: 0,
      }}>
        <div className="flex items-end" style={{
          gap: '10px',
          background: 'var(--bg-elevated)',
          border: '1px solid var(--border)',
          borderRadius: 'var(--radius-lg)',
          padding: '8px 12px',
        }}>
          <textarea
            ref={inputRef}
            value={input}
            onChange={e => setInput(e.target.value)}
            onKeyDown={handleKeyDown}
            disabled={!activeSession}
            placeholder={activeSession ? 'Message NexusAI...' : 'Select a session to start chatting'}
            rows={1}
            style={{
              flex: 1,
              background: 'transparent',
              border: 'none',
              outline: 'none',
              color: 'var(--text-primary)',
              fontSize: '14px',
              lineHeight: '1.6',
              resize: 'none',
              fontFamily: 'inherit',
              maxHeight: '120px',
              overflowY: 'auto',
            }}
            onInput={e => {
              e.target.style.height = 'auto';
              e.target.style.height = `${e.target.scrollHeight}px`;
            }}
          />

          {streaming ? (
            <button onClick={onCancel} className="btn-reset" style={{
              background: 'var(--text-muted)',
              borderRadius: 'var(--radius-md)',
              width: '32px',
              height: '32px',
              flexShrink: 0,
              color: 'white',
              fontSize: '12px',
            }}>■</button>
          ) : (
            <button
              onClick={handleSend}
              disabled={!activeSession || !input.trim()}
              className="btn-primary"
              style={{
                width: '32px',
                height: '32px',
                flexShrink: 0,
                fontSize: '16px',
                border: '1px solid var(--border)',
              }}
            >↑</button>
          )}
        </div>

        <p className="text-xs text-muted" style={{ textAlign: 'center', marginTop: '8px' }}>
          Enter to send · Shift+Enter for new line
        </p>
      </div>
    </div>
  );
}