import { describe, it, expect, beforeEach } from "vitest";
import { render, screen } from "@testing-library/react";
import App from "@/App";
import { useFocusStore } from "@/stores/focus-store";
import { useNavStore } from "@/stores/nav-store";

describe("App", () => {
  beforeEach(() => {
    useNavStore.setState({ activeView: "focus" });
    useFocusStore.setState({
      current: null,
      queue: [],
      isLoading: false,
      error: null,
    });
  });

  it("renders the app shell with navigation", () => {
    render(<App />);
    expect(screen.getByText("Focus")).toBeInTheDocument();
    expect(screen.getByText("Queue")).toBeInTheDocument();
  });

  it("renders the focus view with empty state by default", () => {
    render(<App />);
    expect(screen.getByText(/all clear/i)).toBeInTheDocument();
  });

  it("shows loading state", () => {
    useFocusStore.setState({ isLoading: true });
    render(<App />);
    expect(screen.getByText(/loading/i)).toBeInTheDocument();
  });

  it("shows error state", () => {
    useFocusStore.setState({ error: "Connection failed" });
    render(<App />);
    expect(screen.getByText("Connection failed")).toBeInTheDocument();
  });
});