import {
  Check,
  CheckSquare,
  MoreHorizontal,
  Pencil,
  Plus,
  Square,
  Trash2,
} from 'lucide-react';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';

import { ApiClientError } from '../../services/apiClient';
import {
  createEditorProject,
  deleteEditorProject,
  type EditorProjectSnapshot,
  listEditorProjects,
  renameEditorProject,
} from '../../services/image-editor/editorProjectClient';
import { readEditorProjectCoverCache } from '../../services/image-editor/editorProjectCoverCache';
import { useAuthUi } from '../auth/AuthUiContext';
import { PlatformActionButton } from '../common/PlatformActionButton';
import { PlatformBatchActionToolbar } from '../common/PlatformBatchActionToolbar';
import { PlatformEmptyState } from '../common/PlatformEmptyState';
import {
  PlatformFloatingMenu,
  PlatformFloatingMenuItem,
} from '../common/PlatformFloatingMenu';
import { PlatformIconButton } from '../common/PlatformIconButton';
import { PlatformMediaFrame } from '../common/PlatformMediaFrame';
import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
import { PlatformTextField } from '../common/PlatformTextField';
import { PlatformToolModalShell } from '../common/PlatformToolModalShell';
import {
  LOCAL_PROJECT_COVER_CACHE_ASSET_KIND,
  resolveProjectCoverResource,
} from './ProjectCanvasCover';

type ProjectGalleryViewProps = {
  onOpenProject: (projectId: string, options?: { guide?: boolean }) => void;
  searchKeyword?: string;
};

type RenameDraft = {
  projectId: string;
  title: string;
};

type ProjectCoverObjectUrl = {
  projectId: string;
  url: string;
  updatedAt: string;
};

function isUnauthorizedError(error: unknown) {
  return error instanceof ApiClientError && error.status === 401;
}

function formatProjectUpdatedAt(value: string) {
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) {
    return '';
  }
  return new Intl.DateTimeFormat('zh-CN', {
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
  }).format(date);
}

export function ProjectGalleryView({
  onOpenProject,
  searchKeyword = '',
}: ProjectGalleryViewProps) {
  const authUi = useAuthUi();
  const [projects, setProjects] = useState<EditorProjectSnapshot[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
  const [activeMenuProjectId, setActiveMenuProjectId] = useState<string | null>(
    null,
  );
  const [renameDraft, setRenameDraft] = useState<RenameDraft | null>(null);
  const [selectedProjectIds, setSelectedProjectIds] = useState<Set<string>>(
    () => new Set(),
  );
  const [localCoverObjectUrls, setLocalCoverObjectUrls] = useState<
    ProjectCoverObjectUrl[]
  >([]);
  const localCoverObjectUrlsRef = useRef<ProjectCoverObjectUrl[]>([]);
  const [isSelectionMode, setIsSelectionMode] = useState(false);
  const selectedCount = selectedProjectIds.size;
  const allSelected =
    projects.length > 0 && selectedProjectIds.size === projects.length;
  const normalizedSearchKeyword = searchKeyword.trim().toLocaleLowerCase();
  const visibleProjects = useMemo(() => {
    if (!normalizedSearchKeyword) {
      return projects;
    }
    return projects.filter((project) =>
      project.title.toLocaleLowerCase().includes(normalizedSearchKeyword),
    );
  }, [normalizedSearchKeyword, projects]);

  const localCoverUrlByProjectId = useMemo(
    () =>
      new Map(
        localCoverObjectUrls.map((cover) => [cover.projectId, cover] as const),
      ),
    [localCoverObjectUrls],
  );

  const replaceLocalCoverObjectUrls = useCallback(
    (nextCoverObjectUrls: ProjectCoverObjectUrl[]) => {
      localCoverObjectUrlsRef.current.forEach((cover) =>
        URL.revokeObjectURL(cover.url),
      );
      localCoverObjectUrlsRef.current = nextCoverObjectUrls;
      setLocalCoverObjectUrls(nextCoverObjectUrls);
    },
    [],
  );

  const refreshProjects = useCallback(() => {
    setIsLoading(true);
    setErrorMessage(null);
    listEditorProjects()
      .then((items) => {
        setProjects(items);
        void readEditorProjectCoverCache(
          items.map((project) => project.projectId),
        )
          .then((cachedCovers) => {
            const nextCoverObjectUrls = [...cachedCovers.values()].map(
              (cover) => ({
                projectId: cover.projectId,
                url: URL.createObjectURL(cover.blob),
                updatedAt: cover.updatedAt,
              }),
            );
            replaceLocalCoverObjectUrls(nextCoverObjectUrls);
          })
          .catch(() => {
            replaceLocalCoverObjectUrls([]);
          });
        setSelectedProjectIds((currentIds) => {
          const availableIds = new Set(
            items.map((project) => project.projectId),
          );
          return new Set(
            [...currentIds].filter((projectId) => availableIds.has(projectId)),
          );
        });
      })
      .catch((error: unknown) => {
        if (isUnauthorizedError(error)) {
          authUi?.openLoginModal(refreshProjects);
          return;
        }
        setErrorMessage(
          error instanceof Error ? error.message : '读取项目列表失败',
        );
      })
      .finally(() => setIsLoading(false));
  }, [authUi, replaceLocalCoverObjectUrls]);

  useEffect(() => {
    return () => {
      localCoverObjectUrlsRef.current.forEach((cover) =>
        URL.revokeObjectURL(cover.url),
      );
      localCoverObjectUrlsRef.current = [];
    };
  }, []);

  useEffect(() => {
    refreshProjects();
  }, [refreshProjects]);

  const createProject = useCallback(() => {
    if (authUi && !authUi.user) {
      authUi.openLoginModal(createProject);
      return;
    }
    setErrorMessage(null);
    createEditorProject()
      .then((project) => onOpenProject(project.projectId, { guide: true }))
      .catch((error: unknown) => {
        setErrorMessage(
          error instanceof Error ? error.message : '创建项目失败',
        );
      });
  }, [authUi, onOpenProject]);

  const closeSelectionMode = useCallback(() => {
    setIsSelectionMode(false);
    setSelectedProjectIds(new Set());
  }, []);

  const toggleProjectSelection = useCallback((projectId: string) => {
    setSelectedProjectIds((currentIds) => {
      const nextIds = new Set(currentIds);
      if (nextIds.has(projectId)) {
        nextIds.delete(projectId);
      } else {
        nextIds.add(projectId);
      }
      return nextIds;
    });
  }, []);

  const deleteProjects = useCallback((projectIds: string[]) => {
    if (projectIds.length === 0) {
      return;
    }
    setErrorMessage(null);
    void Promise.all(
      projectIds.map((projectId) => deleteEditorProject(projectId)),
    )
      .then(() => {
        setProjects((currentProjects) =>
          currentProjects.filter(
            (project) => !projectIds.includes(project.projectId),
          ),
        );
        setSelectedProjectIds((currentIds) => {
          const nextIds = new Set(currentIds);
          projectIds.forEach((projectId) => nextIds.delete(projectId));
          return nextIds;
        });
        setActiveMenuProjectId(null);
      })
      .catch((error: unknown) => {
        setErrorMessage(
          error instanceof Error ? error.message : '删除项目失败',
        );
      });
  }, []);

  const submitRename = useCallback(() => {
    if (!renameDraft) {
      return;
    }
    const title = renameDraft.title.trim();
    if (!title) {
      return;
    }
    setErrorMessage(null);
    renameEditorProject(renameDraft.projectId, title)
      .then((project) => {
        setProjects((currentProjects) =>
          currentProjects.map((item) =>
            item.projectId === project.projectId ? project : item,
          ),
        );
        setRenameDraft(null);
        setActiveMenuProjectId(null);
      })
      .catch((error: unknown) => {
        setErrorMessage(
          error instanceof Error ? error.message : '重命名项目失败',
        );
      });
  }, [renameDraft]);

  const projectCards = useMemo(
    () =>
      visibleProjects.map((project) => {
        const selected = selectedProjectIds.has(project.projectId);
        const localCover = localCoverUrlByProjectId.get(project.projectId);
        const projectWithLocalCover = localCover
          ? {
              ...project,
              resources: [
                ...project.resources,
                {
                  resourceId: `local-cover-cache:${project.projectId}`,
                  projectId: project.projectId,
                  imageSrc: localCover.url,
                  width: 320,
                  height: 240,
                  sourceType: 'uploaded' as const,
                  assetKind: LOCAL_PROJECT_COVER_CACHE_ASSET_KIND,
                  updatedAt: localCover.updatedAt,
                },
              ],
            }
          : project;
        const coverResource = resolveProjectCoverResource(
          projectWithLocalCover,
        );
        return (
          <article
            key={project.projectId}
            className={[
              'project-gallery__card',
              selected ? 'project-gallery__card--selected' : '',
            ]
              .filter(Boolean)
              .join(' ')}
          >
            <button
              type="button"
              className="project-gallery__card-button"
              onClick={() => {
                if (isSelectionMode) {
                  toggleProjectSelection(project.projectId);
                  return;
                }
                if (authUi) {
                  authUi.requireAuth(() => onOpenProject(project.projectId));
                  return;
                }
                onOpenProject(project.projectId);
              }}
              aria-label={`打开项目${project.title}`}
            >
              <PlatformMediaFrame
                src={coverResource?.imageSrc ?? null}
                objectKey={coverResource?.objectKey ?? null}
                alt=""
                fallbackLabel="项目"
                aspect="standard"
                surface="bright"
                refreshKey={
                  coverResource?.updatedAt ??
                  coverResource?.createdAt ??
                  coverResource?.resourceId ??
                  null
                }
                className="project-gallery__preview"
              >
                {isSelectionMode ? (
                  <span className="project-gallery__checkbox">
                    {selected ? <Check className="h-4 w-4" /> : null}
                  </span>
                ) : null}
              </PlatformMediaFrame>
              <span className="project-gallery__meta">
                <span>{project.title}</span>
                <span>{formatProjectUpdatedAt(project.updatedAt)}</span>
              </span>
            </button>
            {!isSelectionMode ? (
              <div className="project-gallery__card-menu-wrap">
                <PlatformIconButton
                  label={`打开项目${project.title}菜单`}
                  icon={<MoreHorizontal className="h-4 w-4" />}
                  variant="surfaceFloating"
                  className="h-8 w-8"
                  onClick={(event) => {
                    event.stopPropagation();
                    setActiveMenuProjectId((currentProjectId) =>
                      currentProjectId === project.projectId
                        ? null
                        : project.projectId,
                    );
                  }}
                />
                {activeMenuProjectId === project.projectId ? (
                  <PlatformFloatingMenu>
                    <PlatformFloatingMenuItem
                      icon={<Pencil className="h-4 w-4" />}
                      onClick={() =>
                        setRenameDraft({
                          projectId: project.projectId,
                          title: project.title,
                        })
                      }
                    >
                      重命名
                    </PlatformFloatingMenuItem>
                    <PlatformFloatingMenuItem
                      icon={<Trash2 className="h-4 w-4" />}
                      onClick={() => deleteProjects([project.projectId])}
                    >
                      删除
                    </PlatformFloatingMenuItem>
                  </PlatformFloatingMenu>
                ) : null}
              </div>
            ) : null}
          </article>
        );
      }),
    [
      activeMenuProjectId,
      authUi,
      deleteProjects,
      isSelectionMode,
      localCoverUrlByProjectId,
      onOpenProject,
      selectedProjectIds,
      toggleProjectSelection,
      visibleProjects,
    ],
  );

  return (
    <main className="project-gallery" aria-label="项目">
      <header className="project-gallery__header">
        <div className="project-gallery__heading">
          <h1>项目</h1>
          <span>{projects.length} 个画布项目</span>
        </div>
        <div className="project-gallery__header-actions">
          <PlatformActionButton
            tone="secondary"
            size="sm"
            onClick={() => setIsSelectionMode(true)}
            disabled={projects.length === 0}
          >
            选择
          </PlatformActionButton>
          <PlatformActionButton size="sm" onClick={createProject}>
            <Plus className="h-4 w-4" />
            新建
          </PlatformActionButton>
        </div>
      </header>

      {errorMessage ? (
        <PlatformStatusMessage
          tone="error"
          surface="platform"
          className="project-gallery__error"
          role="alert"
        >
          {errorMessage}
        </PlatformStatusMessage>
      ) : null}

      {isLoading ? (
        <PlatformEmptyState surface="subpanel" size="panel">
          正在读取项目
        </PlatformEmptyState>
      ) : visibleProjects.length === 0 && normalizedSearchKeyword ? (
        <PlatformEmptyState surface="subpanel" size="panel">
          没有匹配项目
        </PlatformEmptyState>
      ) : projects.length === 0 ? (
        <PlatformEmptyState
          asChild="button"
          surface="subpanel"
          size="panel"
          className="project-gallery__new-card"
          onClick={createProject}
        >
          <Plus className="h-6 w-6" />
          <span>新建项目</span>
        </PlatformEmptyState>
      ) : (
        <section className="project-gallery__grid">{projectCards}</section>
      )}

      <PlatformToolModalShell
        open={Boolean(renameDraft)}
        title="重命名"
        size="sm"
        closeLabel="关闭重命名"
        onClose={() => setRenameDraft(null)}
        footer={
          <>
            <PlatformActionButton
              type="button"
              tone="secondary"
              onClick={() => setRenameDraft(null)}
            >
              取消
            </PlatformActionButton>
            <PlatformActionButton
              type="submit"
              form="project-gallery-rename-form"
            >
              保存
            </PlatformActionButton>
          </>
        }
      >
        {renameDraft ? (
          <form
            id="project-gallery-rename-form"
            onSubmit={(event) => {
              event.preventDefault();
              submitRename();
            }}
          >
            <PlatformTextField
              aria-label="项目名称"
              value={renameDraft.title}
              onChange={(event) =>
                setRenameDraft((currentDraft) =>
                  currentDraft
                    ? { ...currentDraft, title: event.target.value }
                    : currentDraft,
                )
              }
              autoFocus
            />
          </form>
        ) : null}
      </PlatformToolModalShell>

      {isSelectionMode ? (
        <PlatformBatchActionToolbar>
          <PlatformActionButton
            tone="secondary"
            size="sm"
            onClick={() => {
              setSelectedProjectIds(
                allSelected
                  ? new Set()
                  : new Set(projects.map((project) => project.projectId)),
              );
            }}
          >
            {allSelected ? (
              <CheckSquare className="h-4 w-4" />
            ) : (
              <Square className="h-4 w-4" />
            )}
            {selectedCount > 0
              ? `${allSelected ? '取消全选' : '全选'} · 已选 ${selectedCount}`
              : '全选'}
          </PlatformActionButton>
          <PlatformActionButton
            tone="warning"
            size="sm"
            disabled={selectedCount === 0}
            onClick={() => deleteProjects([...selectedProjectIds])}
          >
            <Trash2 className="h-4 w-4" />
            删除
          </PlatformActionButton>
          <PlatformActionButton
            tone="secondary"
            size="sm"
            onClick={closeSelectionMode}
          >
            取消
          </PlatformActionButton>
        </PlatformBatchActionToolbar>
      ) : null}
    </main>
  );
}

export default ProjectGalleryView;