"use client";

import type { ReactNode } from "react";
import { VideoListPane } from "../../components/VideoListPane";
import type { VideoFilter, VideoRow } from "../../lib/videoRows";
import type { TagDef } from "../../lib/videoTagRows";

// The two-pane video workspace: the list on the left, the selected video's
// detail on the right.
//
// This replaces VideoListPaneSection, and the things it does NOT do are the
// point. That component carried a localStorage left-collapse toggle, a
// selection-driven right-collapse, and a double-requestAnimationFrame
// scrollIntoView dance — all of it there because the pane was squeezed onto a
// page it shared with eight stage panels and a sticky header. On a route of its
// own there is nothing to make room for: both panes are simply visible, the
// grid is fixed, and nothing has to scroll itself into view.
//
// `detail` arrives as a prop rather than being rendered here because it is a
// SERVER component (VideoPanel reads the video's directory, download outcome and
// transcript coverage). Passing the element through keeps the list interactive
// without dragging that I/O into the client.

export function VideoWorkspace({
  slug,
  rows,
  tagDefs,
  selectedVideoId,
  initialFilters,
  initialQuery,
  initialTagFilter,
  defaultTranscribeQueue,
  defaultDownloadQueue,
  existingQueues,
  detail,
}: {
  slug: string;
  rows: VideoRow[];
  tagDefs: TagDef[];
  selectedVideoId: string | null;
  initialFilters: VideoFilter[];
  initialQuery: string;
  initialTagFilter: string[];
  defaultTranscribeQueue: string;
  defaultDownloadQueue: string;
  existingQueues: string[];
  detail: ReactNode;
}) {
  return (
    <section
      aria-label="video workspace"
      className="grid grid-cols-1 lg:grid-cols-[24rem_minmax(0,1fr)] gap-4 lg:gap-6 min-h-[calc(100vh-14rem)]"
    >
      <div className="flex flex-col min-h-0 lg:sticky lg:self-start lg:top-24 lg:max-h-[calc(100vh-8rem)]">
        <VideoListPane
          slug={slug}
          rows={rows}
          tagDefs={tagDefs}
          selectedVideoId={selectedVideoId}
          initialFilters={initialFilters}
          initialQuery={initialQuery}
          initialTagFilter={initialTagFilter}
          defaultTranscribeQueue={defaultTranscribeQueue}
          defaultDownloadQueue={defaultDownloadQueue}
          existingQueues={existingQueues}
        />
      </div>
      <div className="min-w-0">{detail}</div>
    </section>
  );
}