import { Navigate, useParams } from 'react-router';
import type { LayoutNode } from 'officerdev';
import { WorkspaceView, DEFAULT_PHOTOS_SECTION, photosSectionPath, isPhotosSection } from 'officerdev';
import { useDashboardState } from 'state/useDashboardState';
import { defaultLayout } from './defaultLayout';

// /photos uses the Workspace/Panel system: the section nav (photos-nav) on the left, the section view
// (photos-view) on the right. Both talk to the officer-photos sidecar through the /api/photos auth proxy; the
// Immich URL and API key live in the sidecar's environment and the browser never sees either.
//
// The open section is :section in the URL; deeper selection (which asset, album, person, search) is in the
// query string. Nothing about "what is open" lives in a panel channel.

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

  // Bare /photos, 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 (!isPhotosSection(section)) {
    return <Navigate to={photosSectionPath(DEFAULT_PHOTOS_SECTION)} replace />;
  }

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