"use client";

import { Suspense } from "react";
import { PageContent } from "@/components/app/page";
import { Skeleton } from "@/components/ui/skeleton";
import ProtectedRoute from "../auth/protected-route";
import AppShell from "../components/app-shell";
import { useUrlFilters } from "../lib/useUrlFilters";
import { FileExplorer } from "./file-explorer";
import { EXPLORER_KEYS } from "./useFileExplorer";

// /documents: every file of the organization, filed under buyers › inquiries / orders › shipments.
// The place, search, filters and view live in the URL (?node=buyer:HM&folder=Lab dips&q=&category=&view=).
export function DocumentsExplorerPage() {
  return <ProtectedRoute><AppShell title="Files">
    <Suspense fallback={<ExplorerSkeleton />}><DocumentsExplorer /></Suspense>
  </AppShell></ProtectedRoute>;
}

function DocumentsExplorer() {
  const url = useUrlFilters(EXPLORER_KEYS);
  return <PageContent className="gap-4">
    <FileExplorer variant="page" rootNode="root" url={url} />
  </PageContent>;
}

function ExplorerSkeleton() {
  return <PageContent className="gap-4">
    <div className="grid gap-2"><Skeleton className="h-8 w-40" /><Skeleton className="h-4 w-96 max-w-full" /></div>
    <div className="flex h-[calc(100dvh-13rem)] min-h-[560px] overflow-hidden rounded-xl border">
      <div className="hidden w-64 shrink-0 gap-2 border-r p-3 md:grid md:content-start">{[70, 55, 80, 60, 75].map((size) => <Skeleton key={size} className="h-6" style={{ width: `${size}%` }} />)}</div>
      <div className="grid flex-1 content-start gap-3 p-4"><Skeleton className="h-9 w-full max-w-md" /><Skeleton className="h-64" /></div>
    </div>
  </PageContent>;
}