import type { ReactNode } from "react";
import Link from "next/link";
import { notFound } from "next/navigation";
import { isSocialChannel } from "yt-dlp-transcript-common/lib/channelConfig";
import { ChannelTabs } from "./components/ChannelTabs";
import { RefreshSnapshotButton } from "./components/RefreshSnapshotButton";
import { readChannelConfigCached } from "./lib/channelConfigCache";

// Shared chrome for every channel route: the breadcrumb, the name, the refresh
// control and the Overview | Videos switch. This is what StatusHeader used to
// be, moved up a level now that the channel has more than one page.
//
// Next 16 caveats this file is written around (see
// node_modules/next/dist/docs/01-app/03-api-reference/03-file-conventions/layout.md):
//
//  - LAYOUTS DO NOT RERENDER on navigation and cannot read searchParams. So the
//    active-tab check lives in a client component (ChannelTabs), and anything
//    that varies with `?stage=` — the report freshness, the stage panels — stays
//    in page.tsx.
//  - NO loading.tsx HERE. In this app it turns notFound() 404s into 200s and
//    never shows on a client-side sibling navigation anyway.
//
// force-dynamic for the same reason page.tsx carries it: this reads the channel
// config off disk on every request and must never be statically prerendered.
export const dynamic = "force-dynamic";

export default async function ChannelLayout({
  children,
  params,
}: {
  children: ReactNode;
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  // Deduped with page.tsx's read of the same file via React cache().
  const config = await readChannelConfigCached(slug);
  if (!config) notFound();

  return (
    <div className="flex flex-col gap-6">
      <header
        aria-label="channel status header"
        className="sticky top-0 z-10 -mx-4 md:-mx-6 px-4 md:px-6 py-3 bg-card/95 backdrop-blur border-b border-border"
      >
        <div className="flex items-start justify-between gap-3 flex-wrap">
          <div className="flex flex-col gap-1 min-w-0">
            <nav className="flex items-center gap-2 text-sm text-muted-foreground">
              <Link href="/channels" className="underline hover:text-foreground">
                Channels
              </Link>
              <span aria-hidden="true">/</span>
              <span className="font-mono">{slug}</span>
            </nav>
            <h1 className="text-2xl font-semibold truncate">
              {config.name ?? slug}
            </h1>
          </div>
          {/* A social channel has no videos, no downloads and no transcripts:
              the video workspace would be an empty room, and there is no video
              report to refresh. Both controls stay off it — which is also what
              the header did before this layout existed. */}
          {!isSocialChannel(config) && (
            <div className="flex items-center gap-3">
              <ChannelTabs slug={slug} />
              <RefreshSnapshotButton slug={slug} />
            </div>
          )}
        </div>
      </header>
      {children}
    </div>
  );
}