import type { ComponentType, Dispatch, ReactElement, SetStateAction } from "react";
import { beforeEach, describe, expect, it, vi } from "vite-plus/test";
import type { EnvironmentId } from "@t3tools/contracts";
import { PROJECT_FAVICON_FALLBACK_MARKER } from "@t3tools/shared/projectFavicon";

const testState = vi.hoisted(() => ({
  faviconUrl: "https://environment.test/api/assets/token-a/v1-20-favicon.svg",
  lastTarget: null as unknown,
}));

const hooks = vi.hoisted(() => {
  let cursor = 0;
  let slots: unknown[] = [];
  const nextIndex = () => cursor++;

  return {
    beginRender() {
      cursor = 0;
    },
    reset() {
      cursor = 0;
      slots = [];
    },
    useMemoCache(size: number): unknown[] {
      const index = nextIndex();
      if (!slots[index]) {
        slots[index] = Array.from({ length: size }, () => Symbol.for("react.memo_cache_sentinel"));
      }
      return slots[index] as unknown[];
    },
    useState<T>(initialValue: T | (() => T)): [T, Dispatch<SetStateAction<T>>] {
      const index = nextIndex();
      if (index >= slots.length) {
        slots[index] =
          typeof initialValue === "function" ? (initialValue as () => T)() : initialValue;
      }
      const setValue: Dispatch<SetStateAction<T>> = (nextValue) => {
        const previous = slots[index] as T;
        slots[index] =
          typeof nextValue === "function" ? (nextValue as (value: T) => T)(previous) : nextValue;
      };
      return [slots[index] as T, setValue];
    },
  };
});

vi.mock("react", async (importOriginal) => {
  const actual = await importOriginal<typeof import("react")>();
  return {
    ...actual,
    useState: hooks.useState,
  };
});

vi.mock("react/compiler-runtime", () => ({ c: hooks.useMemoCache }));
vi.mock("lucide-react/dynamic", () => ({
  DynamicIcon: "dynamic-icon",
  iconNames: ["alarm-clock", "folder-code"],
}));
vi.mock("@effect/atom-react", () => ({
  useAtomValue: () => testState.faviconUrl,
}));
vi.mock("../state/assets", () => ({
  projectFaviconUrlAtom: (input: unknown) => {
    testState.lastTarget = input;
  },
}));

import { ProjectFavicon, type ProjectFaviconProject } from "./ProjectFavicon";

function makeProject(
  overrides: Partial<ProjectFaviconProject> &
    Pick<ProjectFaviconProject, "workspaceRoot" | "title">,
): ProjectFaviconProject {
  return { environmentId: "environment-test" as EnvironmentId, ...overrides };
}

type ProjectFaviconImageProps = {
  readonly cacheKey: string;
  readonly src: string;
  readonly className?: string | undefined;
  readonly fallbackIcon: ComponentType<{ className?: string }>;
};

type ImageElement = ReactElement<{
  readonly src: string;
  readonly onLoad?: () => void;
  readonly onError?: () => void;
}>;

type ProjectFaviconImageElement = ReactElement<{
  readonly children: [ReactElement | null, ImageElement | null, ImageElement | null];
}>;

function resolveImageComponent(): {
  readonly Component: (props: ProjectFaviconImageProps) => ProjectFaviconImageElement;
  readonly props: ProjectFaviconImageProps;
} {
  hooks.beginRender();
  const element = ProjectFavicon({
    project: makeProject({ workspaceRoot: "/workspace-test", title: "workspace-test" }),
  }) as ReactElement<ProjectFaviconImageProps>;
  hooks.reset();

  return {
    Component: element.type as (props: ProjectFaviconImageProps) => ProjectFaviconImageElement,
    props: element.props,
  };
}

function renderImage(
  Component: (props: ProjectFaviconImageProps) => ProjectFaviconImageElement,
  props: ProjectFaviconImageProps,
): ProjectFaviconImageElement {
  hooks.beginRender();
  return Component(props);
}

describe("ProjectFavicon", () => {
  beforeEach(() => {
    hooks.reset();
    testState.faviconUrl = "https://environment.test/api/assets/token-a/v1-20-favicon.svg";
  });

  it("shows a project-name icon when no favicon exists", () => {
    testState.faviconUrl = `https://environment.test/api/assets/token/${PROJECT_FAVICON_FALLBACK_MARKER}`;

    const element = ProjectFavicon({
      project: makeProject({ workspaceRoot: "/workspace/analytics-db", title: "analytics-db" }),
    }) as ReactElement<{
      readonly colorClassName?: string;
      readonly emoji?: string;
      readonly icon?: ComponentType<{ className?: string }>;
    }>;

    expect(element.props.icon).toBeDefined();
    expect(element.props.emoji).toBeUndefined();
    expect(element.props.colorClassName).toContain("text-cyan-600");
  });

  it("chooses a deterministic semantic icon", () => {
    testState.faviconUrl = `https://environment.test/api/assets/token/${PROJECT_FAVICON_FALLBACK_MARKER}`;

    const element = ProjectFavicon({
      project: makeProject({ workspaceRoot: "/workspace/agent-runtime", title: "agent-runtime" }),
    }) as ReactElement<{
      readonly colorClassName?: string;
      readonly emoji?: string;
      readonly icon?: ComponentType<{ className?: string }>;
    }>;

    expect(element.props.icon).toBeDefined();
    expect(element.props.emoji).toBeUndefined();
    expect(element.props.colorClassName).toContain("text-violet-600");
  });

  it("renders a saved Lucide icon and color ahead of an uploaded favicon", () => {
    const element = ProjectFavicon({
      project: makeProject({
        workspaceRoot: "/workspace/test",
        title: "test",
        faviconPath: "brand/icon.svg",
        projectIcon: { kind: "lucide", name: "alarm-clock", color: "violet" },
      }),
    }) as ReactElement<{
      readonly children: ReactElement<{
        readonly children: ReactElement<{ readonly name: string; readonly className: string }>;
      }>;
      readonly className: string;
    }>;

    expect(element.props.children.props.children.props.name).toBe("alarm-clock");
    expect(element.props.className).toContain("text-violet-600");
    expect(element.props.children.props.children.props.className).toContain("text-violet-600");
  });

  it("renders a saved emoji ahead of an uploaded favicon", () => {
    const element = ProjectFavicon({
      project: makeProject({
        workspaceRoot: "/workspace/test",
        title: "test",
        faviconPath: "brand/icon.svg",
        projectIcon: { kind: "emoji", emoji: "🦄" },
      }),
    }) as ReactElement<{ readonly emoji: string }>;

    expect(element.props.emoji).toBe("🦄");
  });

  it("falls back when the displayed favicon fails without discarding a valid older image early", () => {
    const { Component, props } = resolveImageComponent();
    const initialLoadingImage = renderImage(Component, props).props.children[2];
    initialLoadingImage?.props.onLoad?.();

    const refreshedProps = {
      ...props,
      src: "https://environment.test/api/assets/token-b/v1-20-favicon.svg",
    };
    const refreshing = renderImage(Component, refreshedProps).props.children;
    expect(refreshing[1]?.props.src).toBe(props.src);
    refreshing[2]?.props.onError?.();

    const afterRefreshError = renderImage(Component, refreshedProps).props.children;
    expect(afterRefreshError[1]?.props.src).toBe(props.src);
    afterRefreshError[1]?.props.onError?.();

    const afterDisplayedError = renderImage(Component, refreshedProps).props.children;
    expect(afterDisplayedError[0]).not.toBeNull();
    expect(afterDisplayedError[1]).toBeNull();
  });

  it("requests a saved favicon path when one is set", () => {
    ProjectFavicon({
      project: makeProject({
        workspaceRoot: "/workspace-test",
        title: "workspace-test",
        faviconPath: "brand/icon.svg",
      }),
    });

    expect(testState.lastTarget).toMatchObject({
      environmentId: "environment-test",
      cwd: "/workspace-test",
      faviconPath: "brand/icon.svg",
    });
  });
});