Pien-Studio/apps/web/app/page.tsx

"use client";

import React from "react";
import { useRouter } from "next/navigation";
import {
  addLayer,
  createLayer,
  createProject,
  parseProjectFile,
  setCanvasSize,
} from "@pien-studio/editor-core";
import type { Project } from "@pien-studio/types";
import { localProjectRepository } from "../lib/project-repository";
import { useEditorStore } from "../store/editor-store";
import { useUiStore, isDarkTheme } from "../store/ui-store";
import {
  accentButtonClass,
  cx,
  mutedSurfaceClass,
  subtleButtonClass,
  surfaceClass,
} from "../lib/theme";
import { UiPreferences } from "../components/ui-preferences";
import { useAssetCleanupJob } from "../hooks/use-asset-cleanup-job";
import { useTranslations } from "../hooks/use-translations";

export default function HomePage() {
  useAssetCleanupJob();
  const router = useRouter();
  const setProject = useEditorStore((s) => s.setProject);
  const { theme, hydrate } = useUiStore((s) => s);
  const { t } = useTranslations();
  const [projects, setProjects] = React.useState<Project[]>([]);
  const [showWipModal, setShowWipModal] = React.useState(true);
  const [projectPendingDelete, setProjectPendingDelete] =
    React.useState<Project | null>(null);
  const projectInputRef = React.useRef<HTMLInputElement | null>(null);
  const imageInputRef = React.useRef<HTMLInputElement | null>(null);
  const isDark = isDarkTheme(theme);

  const refreshProjects = React.useCallback(async () => {
    setProjects(await localProjectRepository.listProjects());
  }, []);

  React.useEffect(() => {
    let canceled = false;
    hydrate();
    localProjectRepository.listProjects().then((loadedProjects) => {
      if (!canceled) setProjects(loadedProjects);
    });
    return () => {
      canceled = true;
    };
  }, [hydrate]);

  function openProject(project: Project) {
    setProject(project);
    router.push(`/editor/${project.id}`);
  }

  async function confirmDeleteProject() {
    if (!projectPendingDelete) return;
    await localProjectRepository.deleteProject(projectPendingDelete.id);
    await refreshProjects();
    setProjectPendingDelete(null);
  }

  async function handleNewProject() {
    const project = createProject(t("home.untitledProject"));
    await localProjectRepository.upsertProject(project);
    openProject(project);
  }

  async function handleImportProjectFile(
    event: React.ChangeEvent<HTMLInputElement>,
  ) {
    const file = event.target.files?.[0];
    if (!file) return;
    const raw = await file.text();
    try {
      const parsed = parseProjectFile(raw);
      if (!parsed.ok) return;
      await localProjectRepository.upsertProject(parsed.project);
      await refreshProjects();
      openProject(parsed.project);
    } finally {
      event.target.value = "";
    }
  }

  function handleOpenImage(event: React.ChangeEvent<HTMLInputElement>) {
    const file = event.target.files?.[0];
    if (!file) return;
    const title = file.name.replace(/\.[^/.]+$/, "") || t("home.imageProject");
    const reader = new FileReader();
    reader.onload = async () => {
      try {
        const sourceUri =
          typeof reader.result === "string" ? reader.result : undefined;
        if (!sourceUri) return;

        const imageSize = await new Promise<{ width: number; height: number }>(
          (resolve) => {
            const image = new Image();
            image.onload = () => {
              resolve({
                width: Math.max(1, Math.round(image.naturalWidth)),
                height: Math.max(1, Math.round(image.naturalHeight)),
              });
            };
            image.onerror = () => resolve({ width: 1, height: 1 });
            image.src = sourceUri;
          },
        );

        const base = createProject(title, "free");
        const projectWithImageCanvas = setCanvasSize(
          base,
          imageSize.width,
          imageSize.height,
        );

        const project = addLayer(
          projectWithImageCanvas,
          createLayer("raster", {
            name: file.name,
            asset: { kind: "inline", uri: sourceUri },
            x: 0,
            y: 0,
            width: imageSize.width,
            height: imageSize.height,
          }),
        );

        await localProjectRepository.upsertProject(project);
        await refreshProjects();
        openProject(project);
      } finally {
        event.target.value = "";
      }
    };
    reader.readAsDataURL(file);
  }

  return (
    <>
      {showWipModal ? (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-black/45 p-4"
          onClick={() => setShowWipModal(false)}
        >
          <div
            className={cx(
              "w-full max-w-lg rounded-2xl border p-5 shadow-2xl",
              surfaceClass(isDark),
            )}
            onClick={(event) => event.stopPropagation()}
          >
            <h2 className="text-lg font-semibold">{t("home.wipTitle")}</h2>
            <p
              className={cx(
                "mt-2 text-sm leading-relaxed",
                isDark ? "text-[#c9ced8]" : "text-[#545d6d]",
              )}
            >
              {t("home.wipBody")}
            </p>
            <p
              className={cx(
                "mt-3 text-sm leading-relaxed",
                isDark ? "text-[#c9ced8]" : "text-[#545d6d]",
              )}
            >
              {t("home.wipSupportPrefix")}{" "}
              <a
                href="https://github.com/sponsors/YuzuZensai"
                target="_blank"
                rel="noreferrer noopener"
                className="font-semibold text-[var(--color-accent-strong)] underline underline-offset-2"
              >
                github.com/sponsors/YuzuZensai
              </a>
            </p>
            <div className="mt-5 flex justify-end">
              <button
                type="button"
                onClick={() => setShowWipModal(false)}
                className={cx(
                  "rounded border px-3 py-1.5 text-sm font-semibold",
                  accentButtonClass(),
                )}
              >
                {t("home.wipAcknowledge")}
              </button>
            </div>
          </div>
        </div>
      ) : null}

      {projectPendingDelete ? (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-black/45 p-4"
          onClick={() => setProjectPendingDelete(null)}
        >
          <div
            className={cx(
              "w-full max-w-md rounded-2xl border p-5 shadow-2xl",
              surfaceClass(isDark),
            )}
            onClick={(event) => event.stopPropagation()}
          >
            <h2 className="text-lg font-semibold">Delete project?</h2>
            <p
              className={cx(
                "mt-2 text-sm leading-relaxed",
                isDark ? "text-[#c9ced8]" : "text-[#545d6d]",
              )}
            >
              This will permanently delete{" "}
              <span className="font-semibold">
                {projectPendingDelete.title}
              </span>{" "}
              from local storage.
            </p>
            <div className="mt-5 flex justify-end gap-2">
              <button
                type="button"
                onClick={() => setProjectPendingDelete(null)}
                className={cx(
                  "rounded border px-3 py-1.5 text-sm font-semibold",
                  subtleButtonClass(isDark),
                )}
              >
                Cancel
              </button>
              <button
                type="button"
                onClick={() => {
                  void confirmDeleteProject();
                }}
                className="rounded border border-red-500/40 bg-red-500/15 px-3 py-1.5 text-sm font-semibold text-red-300"
              >
                Delete
              </button>
            </div>
          </div>
        </div>
      ) : null}

      <main
        className={`min-h-screen w-full px-4 py-5 sm:px-6 ${
          isDark ? "bg-[#1b1d21] text-[#e8eaed]" : "bg-[#f5f6f8] text-[#1f2430]"
        }`}
      >
        <section
          className={cx("rounded-xl border p-4 sm:p-5", surfaceClass(isDark))}
        >
          <div className="flex flex-wrap items-center justify-between gap-3">
            <div>
              <p
                className={cx(
                  "text-[10px] uppercase tracking-[0.2em]",
                  isDark ? "text-[#a8abb2]" : "text-[#6c7382]",
                )}
              >
                pien.studio
              </p>
              <h1 className="text-2xl font-semibold">{t("home.projectHub")}</h1>
              <p
                className={cx(
                  "text-sm",
                  isDark ? "text-[#b9bec8]" : "text-[#5f6672]",
                )}
              >
                {t("home.createOpenManage")}
              </p>
            </div>
            <UiPreferences />
          </div>
        </section>

        <section className="mt-4 grid gap-3 sm:grid-cols-3">
          <button
            type="button"
            onClick={handleNewProject}
            className={cx(
              "rounded border px-3 py-2 text-sm font-semibold",
              accentButtonClass(),
            )}
          >
            {t("home.newProject")}
          </button>
          <button
            type="button"
            onClick={() => projectInputRef.current?.click()}
            className={cx(
              "rounded border px-3 py-2 text-sm font-semibold",
              subtleButtonClass(isDark),
            )}
          >
            {t("home.openProjectFile")}
          </button>
          <button
            type="button"
            onClick={() => imageInputRef.current?.click()}
            className={cx(
              "rounded border px-3 py-2 text-sm font-semibold",
              subtleButtonClass(isDark),
            )}
          >
            {t("home.openImage")}
          </button>
          <input
            ref={projectInputRef}
            type="file"
            accept=".json,.pien.json,application/json"
            className="hidden"
            onChange={handleImportProjectFile}
          />
          <input
            ref={imageInputRef}
            type="file"
            accept="image/*"
            className="hidden"
            onChange={handleOpenImage}
          />
        </section>

        <section
          className={cx("mt-4 rounded-xl border p-4", surfaceClass(isDark))}
        >
          <h2
            className={cx(
              "mb-3 text-sm font-semibold uppercase tracking-wide",
              isDark ? "text-[#c5cad3]" : "text-[#6c7382]",
            )}
          >
            {t("home.myProjects")}
          </h2>
          {projects.length === 0 ? (
            <p
              className={cx(
                "text-sm",
                isDark ? "text-[#aeb3bc]" : "text-[#5f6672]",
              )}
            >
              {t("home.noProjectsYet")}
            </p>
          ) : null}
          <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
            {projects.map((project) => (
              <article
                key={project.id}
                className={cx("rounded border p-3", mutedSurfaceClass(isDark))}
              >
                <p
                  className={cx(
                    "truncate text-sm font-semibold",
                    isDark ? "text-[#f3f5f8]" : "text-[#1f2430]",
                  )}
                >
                  {project.title}
                </p>
                <p
                  className={cx(
                    "mt-1 text-xs",
                    isDark ? "text-[#aeb3bc]" : "text-[#5f6672]",
                  )}
                >
                  {new Date(project.updatedAt).toLocaleString()}
                </p>
                <div className="mt-3 flex flex-wrap gap-2">
                  <button
                    type="button"
                    onClick={() => openProject(project)}
                    className={cx(
                      "rounded border px-2 py-1 text-xs font-semibold",
                      accentButtonClass(),
                    )}
                  >
                    {t("home.open")}
                  </button>
                  <button
                    type="button"
                    onClick={() => {
                      void localProjectRepository
                        .duplicateProject(project.id)
                        .then(refreshProjects);
                    }}
                    className={cx(
                      "rounded border px-2 py-1 text-xs font-semibold",
                      subtleButtonClass(isDark),
                    )}
                  >
                    {t("home.duplicate")}
                  </button>
                  <button
                    type="button"
                    onClick={() => {
                      setProjectPendingDelete(project);
                    }}
                    className="rounded border border-red-400/30 bg-red-400/10 px-2 py-1 text-xs font-semibold text-red-200"
                  >
                    {t("home.delete")}
                  </button>
                </div>
              </article>
            ))}
          </div>
        </section>
      </main>
    </>
  );
}