import React from "react";
import { renderToStaticMarkup } from "react-dom/server";
import { describe, expect, it, vi } from "vitest";
import { AppShell } from "./AppShell";

vi.mock("../components/UI/ThemeToggle", () => ({
  ThemeToggle: () => <button type="button">Theme</button>,
}));

describe("AppShell", () => {
  it("renders mobile header and bottom navigation alongside desktop shell", () => {
    const markup = renderToStaticMarkup(
      <AppShell
        user={{ name: "Анна Мельник", role: "manager" }}
        onSignOut={() => {}}
        navItems={[
          { key: "overview", label: "Обзор" },
          { key: "orders", label: "Заказы", badge: "7" },
        ]}
        activeSection="orders"
        onSectionChange={() => {}}
        onOpenGuide={() => {}}
        sectionMeta={{ label: "Заказы", description: "Рабочая область заказов" }}
      >
        <div>content</div>
      </AppShell>,
    );

    expect(markup).toContain("xl:grid-cols-[220px_1fr]");
    expect(markup).toContain("xl:flex");
    expect(markup).toContain("xl:hidden");
    expect(markup).toContain("fixed inset-x-0 bottom-0");
    expect(markup).toContain("min-w-0");
    expect(markup).toContain("flex flex-col gap-3 md:flex-row md:items-start md:justify-between");
    expect(markup).toContain("Рабочая область");
    expect(markup).toContain("Заказы");
    expect(markup).toContain("aria-label=\"Справка\"");
  });

  it("hides bottom navigation and shows a back action when guide is open", () => {
    const markup = renderToStaticMarkup(
      <AppShell
        user={{ name: "Анна Мельник", role: "manager" }}
        onSignOut={() => {}}
        onOpenGuide={() => {}}
        isGuideOpen={true}
        navItems={[{ key: "orders", label: "Заказы", badge: "7" }]}
        activeSection="orders"
        onSectionChange={() => {}}
        sectionMeta={{ label: "Справка", description: "Описание продукта" }}
      >
        <div>content</div>
      </AppShell>,
    );

    expect(markup).toContain("Назад");
    expect(markup).not.toContain("fixed inset-x-0 bottom-0");
  });

  it("hides bottom navigation when the role has only one section", () => {
    const markup = renderToStaticMarkup(
      <AppShell
        user={{ name: "Анна Мельник", role: "manager" }}
        onSignOut={() => {}}
        onOpenGuide={() => {}}
        navItems={[{ key: "orders", label: "Заказы", badge: "0" }]}
        activeSection="orders"
        onSectionChange={() => {}}
        sectionMeta={{ label: "Заказы" }}
      >
        <div>content</div>
      </AppShell>,
    );

    expect(markup).not.toContain("fixed inset-x-0 bottom-0");
  });
});