import { useEffect, useRef, useState, type ReactNode } from "react";
import { Check, ChevronDown, Folder, FolderPlus, Shuffle } from "lucide-react";
import { open } from "@tauri-apps/plugin-dialog";
import { useT } from "@/i18n";
import { useLanguage } from "@/app/providers/language-provider";
import { cn } from "@/shared/lib/utils";
import { buildProjectOptionFromPath, formatProjectPathLabel } from "@/modules/workbench-shell/model/helpers";
import type { ProjectOption } from "@/modules/workbench-shell/model/types";

export function NewThreadEmptyState({
  recentProjects,
  selectedProject,
  isOverlayOpen,
  isLoading,
  onSelectProject,
  branchSlot,
  onRequestNewWorktree,
}: {
  recentProjects: ReadonlyArray<ProjectOption>;
  selectedProject: ProjectOption | null;
  isOverlayOpen: boolean;
  isLoading?: boolean;
  onSelectProject: (project: ProjectOption) => void;
  branchSlot?: ReactNode;
  onRequestNewWorktree?: (project: ProjectOption) => void;
}) {
  const t = useT();
  const { language } = useLanguage();
  const [isMenuOpen, setMenuOpen] = useState(false);
  const projectMenuRef = useRef<HTMLDivElement | null>(null);
  const activeProject = selectedProject ?? recentProjects[0] ?? null;

  useEffect(() => {
    if (!isOverlayOpen) {
      return;
    }

    setMenuOpen(false);
  }, [isOverlayOpen]);

  useEffect(() => {
    if (!isMenuOpen || typeof window === "undefined") {
      return;
    }

    const handlePointerDown = (event: MouseEvent) => {
      const target = event.target as Node | null;

      if (target && projectMenuRef.current?.contains(target)) {
        return;
      }

      setMenuOpen(false);
    };

    window.addEventListener("mousedown", handlePointerDown);
    return () => window.removeEventListener("mousedown", handlePointerDown);
  }, [isMenuOpen]);

  const handleChooseFolder = async () => {
    const selectedPath = await open({
      directory: true,
      multiple: false,
      title: t("newThread.chooseFolderTitle"),
    });

    if (typeof selectedPath !== "string") {
      return;
    }

    const nextProject = buildProjectOptionFromPath(selectedPath, language);

    if (!nextProject) {
      return;
    }

    onSelectProject(nextProject);
    setMenuOpen(false);
  };

  const newWorktreeRepo =
    onRequestNewWorktree && activeProject?.kind === "repo"
      ? activeProject
      : onRequestNewWorktree && activeProject?.kind === "worktree" && activeProject.parentWorkspaceId
        ? (recentProjects.find(
            (project) => project.id === activeProject.parentWorkspaceId,
          ) ?? null)
        : null;

  return (
    <div
      className={cn(
        "relative isolate flex h-full min-h-0 w-full self-stretch items-center justify-center px-4 py-8",
        isMenuOpen && "z-30",
      )}
    >
      <div className="relative flex w-full max-w-[28rem] flex-col items-center justify-center gap-4">
        <div className="flex size-12 items-center justify-center overflow-hidden rounded-2xl shadow-[0_10px_28px_rgba(15,23,42,0.08)] dark:shadow-[0_14px_30px_rgba(0,0,0,0.24)]">
          <img src="/app-icon.png" alt="TiyCode logo" className="size-full object-cover opacity-90" />
        </div>

        <div className="flex flex-col items-center gap-1 text-center">
          <h1 className="text-balance text-[1.45rem] font-medium tracking-[-0.035em] text-app-foreground">
            {t("newThread.headline")}
          </h1>
          <p className="max-w-[30rem] text-sm leading-6 text-app-muted">
            {t("newThread.description")}
          </p>
        </div>

        <div ref={projectMenuRef} className="relative w-full max-w-[24rem]">
          {isLoading ? (
            <div className="inline-flex w-full items-center gap-3 rounded-2xl border border-app-border bg-app-surface/85 px-3.5 py-3 shadow-[0_10px_24px_rgba(15,23,42,0.06)]">
              <div className="flex size-9 shrink-0 items-center justify-center rounded-xl border border-app-border bg-app-surface-muted">
                <div className="size-4 animate-pulse rounded bg-app-surface-hover" />
              </div>
              <div className="min-w-0 flex-1 space-y-2">
                <div className="h-4 w-32 animate-pulse rounded bg-app-surface-hover" />
                <div className="h-3 w-48 animate-pulse rounded bg-app-surface-hover" />
              </div>
            </div>
          ) : (
          <>
          <button
            type="button"
            aria-haspopup="menu"
            aria-expanded={isMenuOpen}
            className="inline-flex w-full items-center gap-3 rounded-2xl border border-app-border bg-app-surface/85 px-3.5 py-3 text-left shadow-[0_10px_24px_rgba(15,23,42,0.06)] transition-[border-color,background-color,box-shadow,color] duration-200 hover:border-app-border-strong hover:bg-app-surface hover:text-app-foreground hover:shadow-[0_16px_36px_rgba(15,23,42,0.1)] dark:shadow-[0_14px_32px_rgba(0,0,0,0.22)]"
            onClick={() => setMenuOpen((current) => !current)}
          >
            <div className="flex size-9 shrink-0 items-center justify-center rounded-xl border border-app-border bg-app-surface-muted text-app-subtle">
              {activeProject?.kind === "worktree" ? (
                <Shuffle className="size-4 shrink-0" />
              ) : (
                <Folder className="size-4 shrink-0" />
              )}
            </div>
            <div className="min-w-0 flex-1">
              <div className="flex items-center gap-2">
                <span className="min-w-0 flex-1 truncate text-[1rem] font-medium tracking-[-0.02em] text-app-foreground">
                  {activeProject?.name ?? t("newThread.chooseProject")}
                </span>
                {activeProject?.worktreeHash ? (
                  <span
                    title={t("worktree.tag.label")}
                    className="shrink-0 rounded bg-app-surface-muted px-1.5 py-0.5 font-mono text-[10px] text-app-subtle"
                  >
                    {activeProject.worktreeHash}
                  </span>
                ) : null}
                {activeProject ? (
                  <span className="shrink-0 rounded-full bg-app-surface-muted px-2 py-0.5 text-[10px] font-medium text-app-subtle">
                    {activeProject.lastOpenedLabel}
                  </span>
                ) : null}
              </div>
              <p className="mt-0.5 truncate text-[12px] text-app-subtle" title={activeProject?.path}>
                {activeProject ? formatProjectPathLabel(activeProject.path) : t("newThread.selectFolderHint")}
              </p>
            </div>
            <ChevronDown
              className={cn(
                "size-4 shrink-0 text-app-subtle transition-transform duration-200",
                isMenuOpen && "rotate-180",
              )}
            />
          </button>

          {isMenuOpen ? (
            <div className="absolute inset-x-0 top-[calc(100%+0.55rem)] z-30 max-h-[18rem] overflow-hidden rounded-[1.1rem] border border-app-border bg-app-menu/98 p-1.5 shadow-[0_18px_40px_-26px_rgba(15,23,42,0.38)] backdrop-blur-xl dark:bg-app-menu/94">
              <div className="flex max-h-[calc(18rem-0.75rem)] flex-col">
                <div className="flex items-center justify-between gap-3 px-2.5 pb-1.5 pt-0.5">
                  <span className="text-[11px] font-medium text-app-subtle">{t("newThread.recentProjects")}</span>
                  {activeProject ? (
                    <span className="rounded-full bg-app-surface-muted px-2 py-0.5 text-[10px] font-medium text-app-subtle">
                      {t("newThread.current")}
                    </span>
                  ) : null}
                </div>

                <div className="min-h-0 flex-1 overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
                  <div className="space-y-0.5">
                    {recentProjects.map((project) => {
                      const isSelected = activeProject?.id === project.id;
                      const isWorktree = project.kind === "worktree";

                      return (
                        <button
                          key={`${project.id}-${project.path}`}
                          type="button"
                          className={cn(
                            "flex w-full items-start gap-2.5 rounded-xl px-2.5 py-2 text-left transition-colors",
                            isSelected
                              ? "bg-app-surface/75 text-app-foreground"
                              : "text-app-muted hover:bg-app-surface-hover/70 hover:text-app-foreground",
                          )}
                          onClick={() => {
                            onSelectProject(project);
                            setMenuOpen(false);
                          }}
                        >
                          <div className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg border border-app-border bg-app-surface-muted text-app-subtle">
                            {isWorktree ? (
                              <Shuffle className="size-4 shrink-0" />
                            ) : (
                              <Folder className="size-4 shrink-0" />
                            )}
                          </div>
                          <div className="min-w-0 flex-1">
                            <div className="flex items-center gap-2">
                              <span className="min-w-0 flex-1 truncate text-sm font-medium">{project.name}</span>
                              {project.worktreeHash ? (
                                <span
                                  title={t("worktree.tag.label")}
                                  className="shrink-0 rounded bg-app-surface-muted px-1.5 py-0.5 font-mono text-[10px] text-app-subtle"
                                >
                                  {project.worktreeHash}
                                </span>
                              ) : null}
                              <span className="shrink-0 text-[10px] font-medium text-app-subtle">{project.lastOpenedLabel}</span>
                            </div>
                            <p className="mt-0.5 truncate text-[11px] leading-5 text-app-subtle" title={project.path}>
                              {formatProjectPathLabel(project.path)}
                            </p>
                          </div>
                          {isSelected ? <Check className="mt-0.5 size-4 shrink-0 text-app-foreground" /> : null}
                        </button>
                      );
                    })}
                  </div>
                </div>

                <div className="mx-2 my-1.5 h-px shrink-0 bg-app-border" />

                <button
                  type="button"
                  className="flex w-full shrink-0 items-start gap-2.5 rounded-xl px-2.5 py-2 text-left text-app-foreground transition-colors hover:bg-app-surface-hover/70"
                  onClick={() => void handleChooseFolder()}
                >
                  <div className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg border border-app-border bg-app-surface-muted text-app-subtle">
                    <FolderPlus className="size-4 shrink-0" />
                  </div>
                  <div className="min-w-0 flex-1">
                    <div className="text-sm font-medium">{t("newThread.chooseNewFolder")}</div>
                    <p className="mt-0.5 text-[11px] leading-5 text-app-subtle">{t("newThread.browseHint")}</p>
                  </div>
                </button>

                {newWorktreeRepo && onRequestNewWorktree ? (
                  <button
                    type="button"
                    className="flex w-full shrink-0 items-start gap-2.5 rounded-xl px-2.5 py-2 text-left text-app-foreground transition-colors hover:bg-app-surface-hover/70"
                    onClick={() => {
                      setMenuOpen(false);
                      onRequestNewWorktree(newWorktreeRepo);
                    }}
                  >
                    <div className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg border border-app-border bg-app-surface-muted text-app-subtle">
                      <Shuffle className="size-4 shrink-0" />
                    </div>
                    <div className="min-w-0 flex-1">
                      <div className="text-sm font-medium">{t("worktree.menu.newWorktree")}</div>
                      <p className="mt-0.5 truncate text-[11px] leading-5 text-app-subtle">
                        {newWorktreeRepo.name}
                      </p>
                    </div>
                  </button>
                ) : null}
              </div>
            </div>
          ) : null}
          </>
          )}
        </div>

        {branchSlot ? (
          <div className="flex w-full max-w-[24rem] justify-end">
            {branchSlot}
          </div>
        ) : null}
      </div>
    </div>
  );
}
