freezmo/components/LibraryScreen.tsx

"use client";

import Link from "next/link";
import { useMemo, useRef, useState, useSyncExternalStore } from "react";

import { DeckCard } from "@/components/DeckCard";
import { FolderBar } from "@/components/FolderBar";
import { HomeworkCard } from "@/components/HomeworkCard";
import { FolderIcon, UploadIcon } from "@/components/icons";
import { Button, EmptyState } from "@/components/ui";
import { folderStore, renameFolder } from "@/lib/folders";
import { deleteHomework, homeworkStore, sortHomework } from "@/lib/homework";
import { useI18n } from "@/lib/i18n";
import { ALL_FOLDERS, folderSelection, useSelectedFolder } from "@/lib/nav";
import { UNORGANIZED_ID, type Deck } from "@/lib/schemas";
import { deckStore, deleteFolder, importDeck, sortDecks, upsertDeck } from "@/lib/storage";
import { cn } from "@/lib/utils";

/**
 * Dashboard with two separate pools: study decks (folders + card grid) and
 * saved homework (solutions and step-by-step guides). The tab bar picks one,
 * so the two never mix in a single list.
 */
export function LibraryScreen({ initialTab = "decks" }: { initialTab?: "decks" | "homework" }) {
  const tab = initialTab;
  const decks = useSyncExternalStore(deckStore.subscribe, deckStore.getSnapshot, deckStore.getServerSnapshot);
  const homeworkRecords = useSyncExternalStore(
    homeworkStore.subscribe,
    homeworkStore.getSnapshot,
    homeworkStore.getServerSnapshot,
  );
  const homework = useMemo(() => sortHomework(homeworkRecords), [homeworkRecords]);
  const folders = useSyncExternalStore(
    folderStore.subscribe,
    folderStore.getSnapshot,
    folderStore.getServerSnapshot,
  );
  const selected = useSelectedFolder();
  const setSelected = folderSelection.set;
  const { t, plural } = useI18n();
  const [message, setMessage] = useState<{ tone: "ok" | "error"; text: string } | null>(null);
  const [editingFolder, setEditingFolder] = useState<{ id: string; name: string } | null>(null);
  const [confirmDelete, setConfirmDelete] = useState<string | null>(null);
  const importRef = useRef<HTMLInputElement>(null);

  const sorted = useMemo(() => sortDecks(decks), [decks]);
  const folderList = useMemo(
    () => [...folders].sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: "base" })),
    [folders],
  );

  const counts = useMemo(() => {
    const map: Record<string, number> = {};
    for (const folder of folderList) map[folder.id] = 0;
    for (const deck of decks) {
      const key = deck.folderId && map[deck.folderId] !== undefined ? deck.folderId : UNORGANIZED_ID;
      map[key] = (map[key] ?? 0) + 1;
    }
    return map;
  }, [decks, folderList]);

  const groups = useMemo(() => {
    const unorganized: { id: string; name: string; decks: Deck[]; virtual: boolean } = {
      id: UNORGANIZED_ID,
      name: t("common.unorganized"),
      decks: sorted.filter((deck) => !deck.folderId),
      virtual: true,
    };

    if (selected === UNORGANIZED_ID) return [unorganized];
    if (selected !== ALL_FOLDERS) {
      const folder = folderList.find((entry) => entry.id === selected);
      if (!folder) return [unorganized];
      return [
        { id: folder.id, name: folder.name, decks: sorted.filter((deck) => deck.folderId === folder.id), virtual: false },
      ];
    }

    const named = folderList.map((folder) => ({
      id: folder.id,
      name: folder.name,
      decks: sorted.filter((deck) => deck.folderId === folder.id),
      virtual: false,
    }));
    return [...named, unorganized];
  }, [folderList, selected, sorted, t]);

  const handleImport = async (file: File | undefined) => {
    if (!file) return;
    try {
      const text = await file.text();
      const result = importDeck(text);
      if ("error" in result) setMessage({ tone: "error", text: result.error });
      else setMessage({ tone: "ok", text: t("library.imported", { title: result.deck.title }) });
    } catch {
      setMessage({ tone: "error", text: t("library.couldNotRead") });
    }
  };

  const removeFolderEverywhere = (folderId: string) => {
    deleteFolder(folderId);
    setConfirmDelete(null);
    setSelected(ALL_FOLDERS);
    setMessage({ tone: "ok", text: t("library.folderDeleted") });
  };

  const isEmpty = sorted.length === 0 && folderList.length === 0;
  // Group headings only earn their keep once real folders exist; with none,
  // desktop shows a single quiet “All decks” label instead of “Unorganized”.
  const hasFolders = folderList.length > 0;

  return (
    <div className="relative">
      {/* page header ---------------------------------------------------- */}
      <section className="mb-6 space-y-5">
        <div>
          <h1 className="text-[24px] font-semibold leading-tight tracking-[-0.02em] text-[var(--text)] sm:text-[26px]">
            {t("library.title")}
          </h1>
          <p className="mt-1.5 text-[13.5px] text-[var(--text-subtle)]">
            {t("library.subtitle")}
          </p>
        </div>

        {/* Desktop keeps Import above the tabs; phones get a small icon
            button in the tab row instead. */}
        <div className="hidden flex-wrap items-center gap-2 sm:flex">
          <Button
            variant="secondary"
            size="md"
            className="touch-target"
            onClick={() => importRef.current?.click()}
          >
            <UploadIcon className="size-4" />
            {t("library.import")}
          </Button>
        </div>
        <input
          ref={importRef}
          type="file"
          accept="application/json,.json"
          className="sr-only"
          onChange={(event) => {
            void handleImport(event.target.files?.[0]);
            event.target.value = "";
          }}
        />

        {/* Two pools, never mixed: study decks and saved homework. */}
        <div className="flex items-center gap-2">
          <div className="segmented min-w-0 flex-1 sm:max-w-sm">
            <Link href="/" aria-current={tab === "decks" ? "page" : undefined}>
              {t("tabDecks")}
            </Link>
            <Link href="/?tab=homework" aria-current={tab === "homework" ? "page" : undefined}>
              {t("tabHomework")}
            </Link>
          </div>
          <button
            type="button"
            onClick={() => importRef.current?.click()}
            aria-label={t("library.importAria")}
            title={t("library.import")}
            className="touch-target grid size-11 shrink-0 place-items-center rounded-2xl border border-[var(--glass-border)] bg-[var(--surface-strong)] text-[var(--text-muted)] transition hover:bg-[var(--hover)] hover:text-[var(--text)] sm:hidden"
          >
            <UploadIcon className="size-4" />
          </button>
        </div>

        {/* Mobile folder switcher; the sidebar covers desktop. Hidden while
            there are no folders — the drawer's “New folder” is the way in. */}
        {tab === "decks" && !isEmpty && hasFolders ? (
          <FolderBar
            className="lg:hidden"
            folders={folderList}
            counts={counts}
            selected={selected}
            onSelect={(id) => {
              setSelected(id);
              setConfirmDelete(null);
            }}
            onCreated={(id) => {
              setSelected(id);
              setMessage({
                tone: "ok",
                text: t("library.folderCreated"),
              });
            }}
          />
        ) : null}


        {tab === "decks" && message ? (
          <p
            role="status"
            className={cn(
              "flex items-center gap-2 rounded-xl border border-[var(--hairline)] bg-[var(--surface)] px-3.5 py-2.5 text-[13px] font-medium",
              message.tone === "ok" ? "text-emerald-700 dark:text-emerald-300" : "text-rose-700 dark:text-rose-300",
            )}
          >
            {message.text}
          </p>
        ) : null}
      </section>

      {/* decks: folders + card grid, or a decks-only empty state --------- */}
      {tab === "decks" && isEmpty ? (
        <EmptyState
          title={t("library.noDecks")}
          action={
            <Link href="/create?mode=deck" className="btn-primary touch-target h-11 px-5 text-sm">
              {t("emptyStateCreateDeck")}
            </Link>
          }
        >
          {t("library.emptyBody")}
        </EmptyState>
      ) : null}

      {/* deck grid (the decks tab, once there is something to show) ------- */}
      {tab === "decks" && !isEmpty ? (
        <div className="space-y-8">
          {groups.map((group) => {
            const isEditing = editingFolder?.id === group.id;
            return (
              <section key={group.id} aria-label={group.name}>
                {/* group header -------------------------------------- */}
                <div className={cn("mb-4 flex items-center gap-2", !hasFolders && "hidden")}>
                  <FolderIcon className="size-4 shrink-0 text-[var(--text-subtle)]" />

                  {isEditing && editingFolder ? (
                    <span className="flex flex-1 items-center gap-2">
                      <input
                        autoFocus
                        value={editingFolder.name}
                        onChange={(event) => setEditingFolder({ ...editingFolder, name: event.target.value })}
                        onKeyDown={(event) => {
                          event.stopPropagation();
                          if (event.key === "Enter") {
                            const result = renameFolder(editingFolder.id, editingFolder.name);
                            if ("error" in result) setMessage({ tone: "error", text: result.error });
                            else setEditingFolder(null);
                          }
                          if (event.key === "Escape") setEditingFolder(null);
                        }}
                        aria-label={t("library.renameFolderAria")}
                        maxLength={60}
                        className="min-w-32 max-w-xs flex-1 rounded-lg border border-[var(--hairline)] bg-[var(--surface-strong)] px-2.5 py-1.5 text-[15px] font-semibold text-[var(--text)] outline-none focus:border-accent-400"
                      />
                      <Button
                        size="sm"
                        onClick={() => {
                          const result = renameFolder(editingFolder.id, editingFolder.name);
                          if ("error" in result) setMessage({ tone: "error", text: result.error });
                          else setEditingFolder(null);
                        }}
                      >
                        {t("common.save")}
                      </Button>
                    </span>
                  ) : (
                    <button
                      type="button"
                      onClick={() => setSelected(group.virtual ? UNORGANIZED_ID : group.id)}
                      className="truncate text-[15px] font-semibold tracking-[-0.01em] text-[var(--text)]"
                    >
                      {group.name}
                      <span className="ml-2 text-[13px] font-normal tabular-nums text-[var(--text-subtle)]">
                        {group.decks.length}
                      </span>
                    </button>
                  )}

                  {!group.virtual && !isEditing ? (
                    <div className="flex items-center gap-0.5">
                      <button
                        type="button"
                        onClick={() => setEditingFolder({ id: group.id, name: group.name })}
                        className="rounded-lg px-2 py-1 text-[12.5px] font-medium text-[var(--text-subtle)] transition hover:bg-[var(--hover)] hover:text-[var(--text)]"
                      >
                        {t("common.rename")}
                      </button>
                      {confirmDelete === group.id ? (
                        <>
                          <Button size="sm" variant="danger" onClick={() => removeFolderEverywhere(group.id)}>
                            {t("common.delete")}
                          </Button>
                          <Button size="sm" variant="ghost" onClick={() => setConfirmDelete(null)}>
                            {t("common.cancel")}
                          </Button>
                        </>
                      ) : (
                        <button
                          type="button"
                          onClick={() => setConfirmDelete(group.id)}
                          className="rounded-lg px-2 py-1 text-[12.5px] font-medium text-[var(--text-subtle)] transition hover:bg-[var(--hover)] hover:text-rose-600 dark:hover:text-rose-300"
                        >
                          {t("common.delete")}
                        </button>
                      )}
                    </div>
                  ) : null}
                </div>

                {/* One quiet label replaces the redundant single-group heading. */}
                {!hasFolders ? (
                  <p className="mb-4 hidden text-[12px] font-medium text-[var(--text-subtle)] lg:block">
                    {t("common.allDecks")}
                  </p>
                ) : null}

                {confirmDelete === group.id ? (
                  <p className="mb-3 text-[12.5px] text-[var(--text-muted)]">
                    {plural(group.decks.length, "library.deleteWarning")}
                  </p>
                ) : null}

                {group.decks.length === 0 ? (
                  <div className="rounded-2xl border border-dashed border-[var(--hairline)] px-5 py-8 text-center text-[13px] text-[var(--text-subtle)]">
                    {group.virtual ? t("library.nothingUnfiled") : t("library.emptyFolder")}
                  </div>
                ) : (
                  <ul className="grid list-none grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-4 lg:grid-cols-[repeat(auto-fill,minmax(320px,1fr))]">
                    {group.decks.map((deck) => (
                      <DeckCard
                        key={deck.id}
                        deck={deck}
                        onMove={(folderId) => {
                          upsertDeck({ ...deck, folderId });
                          setMessage({
                            tone: "ok",
                            text: folderId ? t("library.deckMoved") : t("library.deckMovedUnorganized"),
                          });
                        }}
                      />
                    ))}
                  </ul>
                )}
              </section>
            );
          })}
        </div>
      ) : null}

      {/* homework: saved solutions and guides, or a homework-only empty state */}
      {tab === "homework" && homework.length === 0 ? (
        <EmptyState
          title={t("homework.emptyTitle")}
          action={
            <Link href="/homework?mode=homework" className="btn-primary touch-target h-11 px-5 text-sm">
              {t("emptyStateHomework")}
            </Link>
          }
        >
          {t("homework.emptyBody")}
        </EmptyState>
      ) : null}

      {tab === "homework" && homework.length > 0 ? (
        <ul className="grid list-none grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-4 lg:grid-cols-[repeat(auto-fill,minmax(320px,1fr))]">
          {homework.map((record) => (
            <HomeworkCard key={record.id} record={record} onDelete={deleteHomework} />
          ))}
        </ul>
      ) : null}


    </div>
  );
}