"use client";

import { useChat } from "@livekit/components-react";
import { useState } from "react";
import { Send, User } from "lucide-react";

interface StreamChatProps {
  roomName?: string;
}

export function StreamChat({ roomName }: StreamChatProps) {
  const [message, setMessage] = useState("");
  const [isOpen, setIsOpen] = useState(false);

  const { send, chatMessages, isSending } = useChat();

  const handleSend = () => {
    if (!message.trim()) return;
    send?.(message);
    setMessage("");
  };

  return (
    <div className="flex flex-col h-full">
      <div className="flex items-center justify-between mb-2">
        <h3 className="text-sm font-medium">Stream Chat</h3>
        <button
          onClick={() => setIsOpen(!isOpen)}
          className="text-xs text-muted-foreground hover:text-primary"
        >
          {isOpen ? "Collapse" : "Expand"}
        </button>
      </div>

      {isOpen && (
        <div className="flex-1 border border-border rounded-lg bg-background p-3 overflow-y-auto space-y-3 max-h-64">
          {chatMessages.map((msg, index) => {
            const m = msg as any;
            return (
              <div key={m.id || msg.timestamp || index} className="flex gap-2">
                <div className="w-6 h-6 rounded-full bg-muted flex items-center justify-center">
                  <User size={12} />
                </div>
                <div className="flex-1">
                  <div className="text-xs font-medium">{m.author?.name || "Unknown"}</div>
                  <div className="text-xs text-muted-foreground">{m.message}</div>
                  <div className="text-[10px] text-muted-foreground">
                    {new Date(m.timestamp || 0).toLocaleTimeString()}
                  </div>
                </div>
              </div>
            );
          })}
          {chatMessages.length === 0 && (
            <div className="text-xs text-muted-foreground text-center py-2">
              No messages yet
            </div>
          )}
        </div>
      )}

      <div className="flex items-center gap-2 mt-2">
        <input
          value={message}
          onChange={(e) => setMessage(e.target.value)}
          placeholder="Type a message..."
          className="flex-1 h-8 rounded-md border border-input bg-input px-3 text-sm"
          disabled={!isOpen}
        />
        <button
          onClick={handleSend}
          disabled={!message.trim() || !isOpen || isSending}
          className="h-8 px-3 bg-primary text-primary-foreground hover:bg-primary/90 rounded-md text-sm"
        >
          <Send size={16} />
        </button>
      </div>
    </div>
  );
}