import { Navigate, useParams } from 'react-router';
import type { LayoutNode } from 'officerdev';
import { WorkspaceView, DEFAULT_SOULSEEK_SECTION, soulseekSectionPath, isSoulseekSection } from 'officerdev';
import { useDashboardState } from 'state/useDashboardState';
import { defaultLayout } from './defaultLayout';

// /soulseek uses the Workspace/Panel system (like /photos): a section nav (soulseek-nav) on the left and
// a section view (soulseek-view) on the right, both reading `:section` from the URL. Deeper selection —
// which search, which peer — is the query string. Both talk to slskd through the /api/slskd auth proxy.

export const SoulseekScreen = () => {
  const { section } = useParams();
  // v2: nav + view (replaced the earlier search + transfers split) — new key so the old persisted
  // layout doesn't resurrect as two mismatched panels.
  const workspace = useDashboardState<LayoutNode>('screens/soulseek-v2', defaultLayout);

  // After the hooks — it returns early.
  if (!isSoulseekSection(section)) return <Navigate to={soulseekSectionPath(DEFAULT_SOULSEEK_SECTION)} replace />;

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