'use client';

import { useEffect, useRef } from 'react';
import './chat-overrides.css';
import { FiSend } from 'react-icons/fi';
import { useChatStreaming } from './useChatStreaming';

export default function ChatWindowStreaming({ api = '/api/chat', badgeId }: { api?: string, badgeId: string }) {
  const { messages, input, setInput, sending, sendMessage } = useChatStreaming({ api, badgeId });
  const listRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (listRef.current) listRef.current.scrollTop = listRef.current.scrollHeight;
  }, [messages]);

  // Prefill input from URL chatPrompt if present
  useEffect(() => {
    try {
      if (typeof window === 'undefined') return;
      const url = new URL(window.location.href);
      const prompt = url.searchParams.get('chatPrompt');
      if (prompt && prompt.trim()) {
        setInput(prompt);
      }
    } catch {}
  }, [setInput]);

  return (
    <div className="flex flex-col border rounded-lg overflow-hidden" style={{ background: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)'}}>
      <div ref={listRef} className="p-4 space-y-3 h-72 overflow-auto">
        {messages.map(m => (
          <div key={m.id} className={m.role === 'user' ? 'text-right' : 'text-left'}>
            <div
              className={`inline-block px-3 py-2 rounded border`}
              style={
                m.role === 'user'
                  ? { background: 'linear-gradient(135deg, var(--gradient-start), var(--gradient-end))', color: '#fff', borderColor: 'transparent' }
                  : { background: 'var(--bubble-background)', color: 'var(--bubble-foreground)', borderColor: 'var(--icon-button-secondary)' }
              }
            >
              {m.content}
            </div>
          </div>
        ))}
      </div>
      <div className="p-3 border-t flex gap-2" style={{ borderColor: 'var(--icon-button-secondary)', background: 'var(--content-card-background)'}}>
        <input
          value={input}
          onChange={e=>setInput(e.target.value)}
          onKeyDown={e=>{ if (e.key==='Enter') sendMessage(); }}
          className="flex-1 px-3 py-2 rounded border kyd-chat-input"
          style={{ background: 'var(--input-background)', color: 'var(--text-main)', borderColor: 'var(--icon-button-secondary)' }}
          placeholder="Ask KYD…"
        />
        <button
          onClick={()=>sendMessage()}
          disabled={sending}
          className="px-3 py-2 rounded disabled:opacity-60 kyd-chat-button"
          style={{ background: 'var(--gradient-start)', color: '#fff' }}
        >
          {sending ? 'Sending…' : <FiSend size={18} />}
        </button>
      </div>
    </div>
  );
}