import type { Metadata } from "next";
import Link from "next/link";
import { getSettings } from "yt-dlp-transcript-common/lib/settings";
import { buildStorage } from "./buildStorage";
import { StorageLocationsTable } from "./components/StorageLocationsTable";
import { HealthTimingForm } from "./components/HealthTimingForm";

// FORCE-DYNAMIC, and not as a formality. Every number on this page comes from a
// probe of the machine taken when the page was asked for — whether a disk is
// mounted, where, and how much room is on it. A cached render of that is a
// screenshot of a drive's past, and the whole reason the page exists is that
// the drive's past is not where the operator's media is.
export const dynamic = "force-dynamic";

export const metadata: Metadata = { title: "Storage" };

export default async function StoragePage() {
  const payload = await buildStorage();
  return (
    <div className="flex flex-col gap-6">
      <div className="flex items-center justify-between flex-wrap gap-2">
        <h1 className="text-2xl font-semibold">Storage</h1>
      </div>

      <p className="text-sm text-muted-foreground">
        Move a channel&rsquo;s media onto a location from its{" "}
        <Link href="/channels" className="underline">Storage panel</Link>.
      </p>

      <StorageLocationsTable payload={payload} />

      {/* THE TIMINGS EVERY LOCATION IS JUDGED BY (settings.storage.health),
          collapsed and last: a page-wide setting, not a fact about a row. */}
      <HealthTimingForm stored={getSettings().storage.health ?? {}} />
    </div>
  );
}