/**
 * Teams Page Tests
 * Tests for page structure and component integration
 */

import { describe, it, expect, vi } from "vitest";
import { render, screen } from "@testing-library/react";

// Mock next/navigation
vi.mock("next/navigation", () => ({
  useParams: (): { id: string } => ({ id: "workspace-1" }),
}));

// Mock next/link
vi.mock("next/link", () => ({
  default: ({ children, href }: { children: React.ReactNode; href: string }): React.JSX.Element => (
    <a href={href}>{children}</a>
  ),
}));

// Mock the TeamCard component
vi.mock("@/components/team/TeamCard", () => ({
  TeamCard: (): React.JSX.Element => <div data-testid="team-card">TeamCard</div>,
}));

// Mock @mosaic/ui components
vi.mock("@mosaic/ui", () => ({
  Button: ({
    children,
    onClick,
    disabled,
  }: {
    children: React.ReactNode;
    onClick?: () => void;
    disabled?: boolean;
  }): React.JSX.Element => (
    <button onClick={onClick} disabled={disabled}>
      {children}
    </button>
  ),
  Input: ({
    label,
    value,
    onChange,
    placeholder,
    disabled,
  }: {
    label: string;
    value: string;
    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
    placeholder?: string;
    disabled?: boolean;
  }): React.JSX.Element => (
    <div>
      <label>{label}</label>
      <input value={value} onChange={onChange} placeholder={placeholder} disabled={disabled} />
    </div>
  ),
  Modal: ({
    isOpen,
    onClose,
    title,
    children,
  }: {
    isOpen: boolean;
    onClose: () => void;
    title: string;
    children: React.ReactNode;
  }): React.JSX.Element | null =>
    isOpen ? (
      <div data-testid="modal">
        <h2>{title}</h2>
        <button onClick={onClose}>Close</button>
        {children}
      </div>
    ) : null,
}));

describe("TeamsPage", (): void => {
  // Note: NODE_ENV is "test" during test runs, which triggers the Coming Soon view
  // This tests the production-like behavior where mock data is hidden

  it("should render the Coming Soon view in non-development environments", async (): Promise<void> => {
    const { default: TeamsPage } = await import("./page");
    render(<TeamsPage />);

    // In test mode (non-development), should show Coming Soon
    expect(screen.getByText("Coming Soon")).toBeInTheDocument();
    expect(screen.getByText("Team Management")).toBeInTheDocument();
  });

  it("should display appropriate description for team feature", async (): Promise<void> => {
    const { default: TeamsPage } = await import("./page");
    render(<TeamsPage />);

    expect(
      screen.getByText(/organize workspace members into teams for better collaboration/i)
    ).toBeInTheDocument();
  });

  it("should not render mock team data in Coming Soon view", async (): Promise<void> => {
    const { default: TeamsPage } = await import("./page");
    render(<TeamsPage />);

    // Should not show team cards or create button in non-development mode
    expect(screen.queryByTestId("team-card")).not.toBeInTheDocument();
    expect(screen.queryByRole("button", { name: /create team/i })).not.toBeInTheDocument();
  });

  it("should include link back to settings", async (): Promise<void> => {
    const { default: TeamsPage } = await import("./page");
    render(<TeamsPage />);

    const link = screen.getByRole("link", { name: /back to settings/i });
    expect(link).toBeInTheDocument();
    expect(link).toHaveAttribute("href", "/settings");
  });
});
