import 'package:cocobase_flutter/cocobase_flutter.dart';

class ChatService {
  final Cocobase db;

  ChatService(this.db);

  // Rooms
  Future<Document> createRoom(String name, String type) async {
    final user = await db.auth.getUser();

    return await db.createDocument('rooms', {
      'name': name,
      'type': type,
      'members': [user!.id],
      'createdBy': user.id,
      'createdAt': DateTime.now().toIso8601String(),
    });
  }

  Future<Document> createDirectMessage(String otherUserId) async {
    final user = await db.auth.getUser();
    final members = [user!.id, otherUserId]..sort();

    final existing = await db.listDocuments('rooms', filters: {
      'type': 'direct',
      'members__contains': members.join(','),
    });

    if (existing.isNotEmpty) {
      return existing.first;
    }

    return await db.createDocument('rooms', {
      'name': 'Direct Message',
      'type': 'direct',
      'members': members,
      'createdBy': user.id,
      'createdAt': DateTime.now().toIso8601String(),
    });
  }

  Future<List<Document>> getRooms() async {
    final user = await db.auth.getUser();

    return await db.listDocuments('rooms', filters: {
      'members__contains': user!.id,
      'orderBy': 'createdAt',
      'order': 'desc',
    });
  }

  // Messages
  Future<Document> sendMessage(
    String roomId,
    String content, {
    String type = 'text',
    String? attachmentUrl,
  }) async {
    final user = await db.auth.getUser();
    final profile = await db.getDocument('users', user!.id);

    return await db.createDocument('messages', {
      'roomId': roomId,
      'senderId': user.id,
      'senderName': profile.data['displayName'] ?? user.email,
      'content': content,
      'type': type,
      'attachmentUrl': attachmentUrl,
      'createdAt': DateTime.now().toIso8601String(),
      'readBy': [user.id],
    });
  }

  Future<List<Document>> getMessages(String roomId, {int limit = 50}) async {
    return await db.listDocuments('messages', filters: {
      'roomId': roomId,
      'orderBy': 'createdAt',
      'order': 'desc',
      'limit': limit,
    });
  }

  // Real-time
  Stream<Document> watchMessages(String roomId) {
    return db.watchCollectionStream('messages', filters: {
      'roomId': roomId,
    });
  }

  // Presence
  Future<void> updatePresence(String status) async {
    final user = await db.auth.getUser();

    final existing = await db.listDocuments('presence', filters: {
      'userId': user!.id,
    });

    final data = {
      'userId': user.id,
      'status': status,
      'lastSeen': DateTime.now().toIso8601String(),
    };

    if (existing.isNotEmpty) {
      await db.updateDocument('presence', existing.first.id, data);
    } else {
      await db.createDocument('presence', data);
    }
  }
}

import { useState, useEffect, useRef } from "react";
import { Cocobase } from "cocobase";

const db = new Cocobase({ apiKey: process.env.COCOBASE_API_KEY });

interface Message {
  id: string;
  content: string;
  senderName: string;
  senderId: string;
  createdAt: string;
}

export function ChatRoom({ roomId }: { roomId: string }) {
  const [messages, setMessages] = useState<Message[]>([]);
  const [newMessage, setNewMessage] = useState("");
  const [typingUsers, setTypingUsers] = useState<string[]>([]);
  const messagesEndRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    loadMessages();

    // Watch for new messages
    const unsubscribe = db.realtime.collection("messages", (event) => {
      if (event.type === "created" && event.document.data.roomId === roomId) {
        setMessages((prev) => [
          ...prev,
          { id: event.document.id, ...event.document.data },
        ]);
      }
    });

    return () => unsubscribe();
  }, [roomId]);

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

  async function loadMessages() {
    const docs = await db.listDocuments("messages", {
      filters: {
        roomId,
        orderBy: "createdAt",
        order: "asc",
        limit: 100,
      },
    });
    setMessages(docs.map((d) => ({ id: d.id, ...d.data })));
  }

  async function sendMessage(e: React.FormEvent) {
    e.preventDefault();
    if (!newMessage.trim()) return;

    const user = await db.auth.getUser();
    const profile = await db.getDocument("users", user.id);

    await db.createDocument("messages", {
      roomId,
      senderId: user.id,
      senderName: profile.data.displayName,
      content: newMessage,
      type: "text",
      createdAt: new Date().toISOString(),
      readBy: [user.id],
    });

    setNewMessage("");
  }

  return (
    <div className="chat-room">
      <div className="messages">
        {messages.map((msg) => (
          <div key={msg.id} className="message">
            <strong>{msg.senderName}</strong>
            <p>{msg.content}</p>
            <small>{new Date(msg.createdAt).toLocaleTimeString()}</small>
          </div>
        ))}
        <div ref={messagesEndRef} />
      </div>

      {typingUsers.length > 0 && (
        <div className="typing-indicator">
          {typingUsers.join(", ")} typing...
        </div>
      )}

      <form onSubmit={sendMessage}>
        <input
          value={newMessage}
          onChange={(e) => setNewMessage(e.target.value)}
          placeholder="Type a message..."
        />
        <button type="submit">Send</button>
      </form>
    </div>
  );
}