import 'package:cocobase_flutter/cocobase_flutter.dart';

class TodoService {
  final Cocobase db;

  TodoService(this.db);

  // Authentication
  Future<User?> register(String email, String password) async {
    await db.auth.register(email: email, password: password);
    return await db.auth.getUser();
  }

  Future<User?> login(String email, String password) async {
    await db.auth.login(email: email, password: password);
    return await db.auth.getUser();
  }

  // CRUD Operations
  Future<Document> createTodo(String title, {String? description}) async {
    final user = await db.auth.getUser();
    return await db.createDocument('todos', {
      'title': title,
      'description': description,
      'completed': false,
      'userId': user!.id,
      'createdAt': DateTime.now().toIso8601String(),
    });
  }

  Future<List<Document>> getTodos({String filter = 'all'}) async {
    final user = await db.auth.getUser();
    final filters = <String, dynamic>{
      'userId': user!.id,
      'orderBy': 'createdAt',
      'order': 'desc',
    };

    if (filter == 'active') {
      filters['completed'] = false;
    } else if (filter == 'completed') {
      filters['completed'] = true;
    }

    return await db.listDocuments('todos', filters: filters);
  }

  Future<void> toggleTodo(String todoId) async {
    final todo = await db.getDocument('todos', todoId);
    final completed = !(todo.data['completed'] as bool);

    await db.updateDocument('todos', todoId, {
      'completed': completed,
      'completedAt': completed ? DateTime.now().toIso8601String() : null,
    });
  }

  Future<void> deleteTodo(String todoId) async {
    await db.deleteDocument('todos', todoId);
  }

  // Real-time sync
  Stream<List<Document>> watchTodos() {
    final user = db.auth.currentUser;
    return db.watchCollectionStream('todos', filters: {
      'userId': user?.id,
    });
  }
}

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

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

interface Todo {
  id: string;
  title: string;
  completed: boolean;
}

export function TodoApp() {
  const [todos, setTodos] = useState<Todo[]>([]);
  const [newTodo, setNewTodo] = useState("");
  const [filter, setFilter] = useState<"all" | "active" | "completed">("all");

  useEffect(() => {
    loadTodos();

    // Real-time updates
    const unsubscribe = db.realtime.collection("todos", () => {
      loadTodos();
    });

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

  async function loadTodos() {
    const user = await db.auth.getUser();
    const filters: any = { userId: user.id };

    if (filter === "active") filters.completed = false;
    if (filter === "completed") filters.completed = true;

    const docs = await db.listDocuments("todos", { filters });
    setTodos(docs.map((d) => ({ id: d.id, ...d.data })));
  }

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

    const user = await db.auth.getUser();
    await db.createDocument("todos", {
      title: newTodo,
      completed: false,
      userId: user.id,
      createdAt: new Date().toISOString(),
    });

    setNewTodo("");
  }

  async function toggleTodo(id: string, completed: boolean) {
    await db.updateDocument("todos", id, { completed: !completed });
  }

  async function deleteTodo(id: string) {
    await db.deleteDocument("todos", id);
  }

  return (
    <div className="todo-app">
      <form onSubmit={addTodo}>
        <input
          value={newTodo}
          onChange={(e) => setNewTodo(e.target.value)}
          placeholder="What needs to be done?"
        />
        <button type="submit">Add</button>
      </form>

      <div className="filters">
        <button onClick={() => setFilter("all")}>All</button>
        <button onClick={() => setFilter("active")}>Active</button>
        <button onClick={() => setFilter("completed")}>Completed</button>
      </div>

      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            <input
              type="checkbox"
              checked={todo.completed}
              onChange={() => toggleTodo(todo.id, todo.completed)}
            />
            <span className={todo.completed ? "completed" : ""}>
              {todo.title}
            </span>
            <button onClick={() => deleteTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}