import { Navigate, useParams } from 'react-router';
import type { LayoutNode } from 'officerdev';
import { WorkspaceView, DEFAULT_JELLYFIN_SECTION, jellyfinSectionPath, isJellyfinSection } from 'officerdev';
import { useDashboardState } from 'state/useDashboardState';
import { defaultLayout } from './defaultLayout';

// /jellyfin uses the Workspace/Panel system: the section and library nav (jellyfin-nav) on the left, the
// section view (jellyfin-view) on the right. Both talk to the officer-jellyfin sidecar through the
// /api/jellyfin auth proxy; the Jellyfin URL and its access token live in the sidecar and the browser never
// sees either.
//
// Video only — the owner's audio is Officer's own /music player, and the sidecar already filters music
// libraries out of everything this screen can ask for.
//
// The open section is :section in the URL; which library, which item and what is playing are in the query
// string. Nothing about "what is open" lives in a panel channel.

export const JellyfinScreen = () => {
  const { section } = useParams();
  const workspace = useDashboardState<LayoutNode>('screens/jellyfin', defaultLayout);

  // Bare /jellyfin, or a section that doesn't exist, canonicalises rather than rendering a default behind a
  // URL that names something else — the nav highlight comes from the router, so a bogus URL highlights nothing.
  if (!isJellyfinSection(section)) {
    return <Navigate to={jellyfinSectionPath(DEFAULT_JELLYFIN_SECTION)} replace />;
  }

  return (
    <div className="h-full w-full pt-2">
      <WorkspaceView
        workspace={workspace}
        locked
        appTypes={{ allowed: ['jellyfin-nav', 'jellyfin-view'], fallback: 'jellyfin-view' }}
      />
    </div>
  );
};
