spsays-training/app/(app)/offline-content/page.tsx

"use client";

/**
 * /offline-content — the reader's device-local offline library.
 *
 * Lists everything saved via the header's "Save offline" button and lets them
 * open (offline-capable) or remove each item. Items link with a plain <a> (a
 * hard navigation) so the service worker can serve the cached HTML document
 * when there's no network — a soft client navigation would try the network and
 * fail. This page also doubles as the SW's offline navigation fallback.
 */

import { useCallback, useEffect, useState } from "react";
import {
  BookOpen,
  FileText,
  HardDriveDownload,
  Mail,
  Mic,
  Newspaper,
  Trash2,
  Wifi,
  WifiOff,
} from "lucide-react";
import {
  listOffline,
  offlineSupported,
  removeOffline,
  usageBytes,
  type OfflineItem,
  type OfflineType,
} from "@/lib/offline";
import { cn } from "@/lib/utils";

const TYPE_META: Record<OfflineType, { label: string; icon: React.ReactNode }> = {
  verse: { label: "Verse", icon: <BookOpen className="size-4" /> },
  prose: { label: "Chapter", icon: <BookOpen className="size-4" /> },
  letter: { label: "Letter", icon: <Mail className="size-4" /> },
  magazine: { label: "Magazine", icon: <Newspaper className="size-4" /> },
  transcript: { label: "Transcript", icon: <Mic className="size-4" /> },
  journal: { label: "Journal", icon: <FileText className="size-4" /> },
  essay: { label: "Essay", icon: <FileText className="size-4" /> },
  document: { label: "Document", icon: <FileText className="size-4" /> },
};

function formatBytes(n: number): string {
  if (!n || n < 1024) return `${n || 0} B`;
  const units = ["KB", "MB", "GB"];
  let v = n / 1024;
  let i = 0;
  while (v >= 1024 && i < units.length - 1) {
    v /= 1024;
    i++;
  }
  return `${v.toFixed(v >= 10 ? 0 : 1)} ${units[i]}`;
}

function formatDate(ms: number): string {
  try {
    return new Date(ms).toLocaleDateString(undefined, {
      year: "numeric",
      month: "short",
      day: "numeric",
    });
  } catch {
    return "";
  }
}

export default function OfflineContentPage() {
  const [items, setItems] = useState<OfflineItem[] | null>(null);
  const [usage, setUsage] = useState<number | null>(null);
  const [online, setOnline] = useState(true);
  const [supported, setSupported] = useState(true);

  const refresh = useCallback(async () => {
    setItems(await listOffline());
    setUsage(await usageBytes());
  }, []);

  useEffect(() => {
    if (!offlineSupported()) {
      setSupported(false);
      setItems([]);
      return;
    }
    setOnline(navigator.onLine);
    void refresh();
    const on = () => setOnline(true);
    const off = () => setOnline(false);
    window.addEventListener("online", on);
    window.addEventListener("offline", off);
    return () => {
      window.removeEventListener("online", on);
      window.removeEventListener("offline", off);
    };
  }, [refresh]);

  async function remove(key: string) {
    await removeOffline(key);
    await refresh();
  }

  return (
    <>
      <header className="border-b border-border bg-card/85 backdrop-blur px-4 sm:px-6 py-5">
        <div className="max-w-6xl mx-auto">
          <h1 className="text-2xl font-bold text-foreground">Offline library</h1>
          <p className="mt-1 text-sm text-muted-foreground">
            Pages and lectures you&rsquo;ve saved to read or listen to without a
            connection. Stored on this device.
          </p>
          <div className="mt-3 flex items-center gap-3 text-xs text-muted-foreground">
            <span
              className={cn(
                "inline-flex items-center gap-1.5",
                online ? "text-muted-foreground" : "text-amber-600",
              )}
            >
              {online ? (
                <Wifi className="size-3.5" />
              ) : (
                <WifiOff className="size-3.5" />
              )}
              {online ? "Online" : "Offline"}
            </span>
            {usage !== null && (
              <span className="inline-flex items-center gap-1.5">
                <HardDriveDownload className="size-3.5" />
                {formatBytes(usage)} used
              </span>
            )}
          </div>
        </div>
      </header>

      <main className="max-w-6xl mx-auto px-4 sm:px-6 py-8">
        {!supported ? (
          <p className="py-16 text-center text-sm text-muted-foreground">
            This browser doesn&rsquo;t support offline saving.
          </p>
        ) : items === null ? (
          <p className="py-16 text-center text-sm text-muted-foreground">
            Loading…
          </p>
        ) : items.length === 0 ? (
          <div className="py-16 text-center">
            <HardDriveDownload className="mx-auto size-8 text-muted-foreground/50" />
            <p className="mt-3 text-sm text-muted-foreground">
              Nothing saved yet. Tap{" "}
              <span className="font-medium text-foreground">Save offline</span>{" "}
              on any chapter, letter, magazine, or transcript to keep it here.
            </p>
          </div>
        ) : (
          <ul className="space-y-2.5">
            {items.map((item) => {
              const meta = TYPE_META[item.type] ?? TYPE_META.document;
              return (
                <li
                  key={item.key}
                  className="flex items-start gap-3 rounded-xl border border-border bg-card px-4 py-3.5 sm:px-5 sm:py-4 transition-colors hover:bg-muted/50"
                >
                  {/* Hard navigation so the SW can serve the cached document offline. */}
                  <a
                    href={item.href}
                    className="flex min-w-0 flex-1 items-start gap-3"
                  >
                    <span className="mt-0.5 shrink-0 text-muted-foreground">
                      {meta.icon}
                    </span>
                    <span className="min-w-0">
                      <span className="line-clamp-2 text-[15px] sm:text-base font-medium text-foreground">
                        {item.title}
                      </span>
                      <span className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
                        <span className="rounded bg-muted px-1.5 py-0.5">
                          {meta.label}
                        </span>
                        {item.audioKey && (
                          <span className="inline-flex items-center gap-1">
                            <Mic className="size-3" /> audio
                          </span>
                        )}
                        <span>{formatDate(item.savedAt)}</span>
                        <span>· {formatBytes(item.bytes)}</span>
                      </span>
                    </span>
                  </a>
                  <button
                    type="button"
                    onClick={() => remove(item.key)}
                    aria-label={`Remove ${item.title} from offline`}
                    title="Remove from offline"
                    className="-mr-1 mt-0.5 shrink-0 rounded-md p-2 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive"
                  >
                    <Trash2 className="size-4" />
                  </button>
                </li>
              );
            })}
          </ul>
        )}
      </main>
    </>
  );
}