import { ArchiveIcon } from "lucide-react";
import { MemoRenderContext } from "@/components/MasonryView";
import MemoView from "@/components/MemoView";
import MobileHeader from "@/components/MobileHeader";
import PagedMemoList from "@/components/PagedMemoList";
import { useMemoFilters, useMemoSorting } from "@/hooks";
import useCurrentUser from "@/hooks/useCurrentUser";
import useMediaQuery from "@/hooks/useMediaQuery";
import { State } from "@/types/proto/api/v1/common_pb";
import { Memo } from "@/types/proto/api/v1/memo_service_pb";
import { useTranslate } from "@/utils/i18n";

const Archived = () => {
  const t = useTranslate();
  const md = useMediaQuery("md");
  const user = useCurrentUser();

  // Build filter using unified hook (no shortcuts or pinned filter)
  const memoFilter = useMemoFilters({
    creatorName: user?.name,
    includeShortcuts: false,
    includePinned: false,
  });

  // Get sorting logic using unified hook (pinned first, archived state)
  const { listSort, orderBy } = useMemoSorting({
    pinnedFirst: true,
    state: State.ARCHIVED,
  });

  return (
    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
      {!md && <MobileHeader />}
      <div className="w-full px-4 sm:px-6">
        <div className="w-full border border-border flex flex-col justify-start items-start rounded-xl bg-background text-foreground overflow-hidden">
          <div className="w-full px-4 py-4 border-b border-border">
            <div className="flex flex-row items-center gap-2">
              <ArchiveIcon className="w-5 h-auto text-muted-foreground" />
              <h1 className="text-xl font-semibold">{t("common.archived")}</h1>
            </div>
          </div>
          <div className="w-full px-4 py-8">
            <PagedMemoList
              renderer={(memo: Memo, context?: MemoRenderContext) => (
                <MemoView key={`${memo.name}-${memo.updateTime}`} memo={memo} showVisibility compact={context?.compact} />
              )}
              listSort={listSort}
              state={State.ARCHIVED}
              orderBy={orderBy}
              filter={memoFilter}
            />
          </div>
        </div>
      </div>
    </section>
  );
};

export default Archived;
