import React, { Suspense, useState } from 'react';
import { createCollection, useLiveSuspenseQuery } from '@tanstack/react-db';
import { queryCollectionOptions } from '@tanstack/query-db-collection';
import { QueryClient } from '@tanstack/query-core';
import { ErrorBoundary } from 'react-error-boundary';

interface Todo {
  id: string;
  text: string;
  completed: boolean;
  createdAt: number;
}

const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));

let mockDb: Todo[] = [
  {
    id: '1',
    text: 'Learn TanStack DB',
    completed: false,
    createdAt: Date.now(),
  },
];

const api = {
  getTodos: async (): Promise<Todo[]> => {
    await sleep(1000);
    throw new Error('random error');
    // Uncomment this for normal usage.
    // return [...mockDb];
  },
  addTodo: async (todo: Todo): Promise<Todo> => {
    await sleep(600);
    mockDb.push(todo);
    return todo;
  },
  updateTodo: async (id: string, updates: Partial<Todo>): Promise<Todo> => {
    await sleep(800);
    const index = mockDb.findIndex((t) => t.id === id);
    mockDb[index] = { ...mockDb[index], ...updates };
    return mockDb[index];
  },
};

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: false,
      refetchOnWindowFocus: false,
      throwOnError: true,
    },
  },
});

const todoCollection = createCollection(
  queryCollectionOptions({
    queryClient: queryClient,
    queryKey: ['todos'],
    queryFn: () => api.getTodos(),
    getKey: (todo: Todo) => todo.id,
    onUpdate: async ({ transaction }) => {
      // The transaction contains the modified data
      const { modified } = transaction.mutations[0];
      await api.updateTodo(modified.id, modified);
    },
    onInsert: async ({ transaction }) => {
      // The transaction contains the modified data
      const { modified } = transaction.mutations[0];
      await api.addTodo(modified);
    },
  })
);

function TodoList() {
  const [text, setText] = useState('');

  const { data: todos = [] } = useLiveSuspenseQuery((q) =>
    q
      .from({ todo: todoCollection })
      .orderBy(({ todo }) => todo.createdAt, 'desc')
  );

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!text.trim()) return;

    const newTodo: Todo = {
      id: Math.random().toString(36).slice(2, 9),
      text,
      completed: false,
      createdAt: Date.now(),
    };

    // collection.insert updates the UI state instantly
    todoCollection.insert(newTodo);
    setText('');
  };

  const toggleTodo = (todo: Todo) => {
    todoCollection.update(todo.id, (draft) => {
      draft.completed = !draft.completed;
    });
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          value={text}
          onChange={(e) => setText(e.target.value)}
          placeholder="What needs to be done?"
        />
        <button type="submit">Add Todo</button>
      </form>

      <ul>
        {todos.map((todo) => (
          <li
            key={todo.id}
            onClick={() => toggleTodo(todo)}
            style={{
              cursor: 'pointer',
              textDecoration: todo.completed ? 'line-through' : 'none',
            }}
          >
            {todo.text} {todo.completed ? '✅' : '⭕'}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default function App() {
  return (
    <div>
      <ErrorBoundary fallback={<div>Something went wrong</div>}>
        <Suspense fallback={<p>Loading...</p>}>
          <TodoList />
        </Suspense>
      </ErrorBoundary>
    </div>
  );
}