cameleer-server/ui/src/pages/AppsTab/AppDeploymentPage/index.tsx

import { useState, useEffect, useRef } from 'react';
import { useParams, useLocation } from 'react-router';
import { useEnvironmentStore } from '../../../api/environment-store';
import { useEnvironments } from '../../../api/queries/admin/environments';
import { useApps, useAppVersions } from '../../../api/queries/admin/apps';
import { PageLoader } from '../../../components/PageLoader';
import { IdentitySection } from './IdentitySection';
import { deriveAppName } from './utils/deriveAppName';
import styles from './AppDeploymentPage.module.css';

export default function AppDeploymentPage() {
  const { appId } = useParams<{ appId?: string }>();
  const location = useLocation();
  const selectedEnv = useEnvironmentStore((s) => s.environment);
  const { data: environments = [], isLoading: envLoading } = useEnvironments();
  const { data: apps = [], isLoading: appsLoading } = useApps(selectedEnv);

  const isNetNew = location.pathname.endsWith('/apps/new');
  const app = isNetNew ? null : apps.find((a) => a.slug === appId) ?? null;

  const env = environments.find((e) => e.slug === selectedEnv);
  const { data: versions = [] } = useAppVersions(selectedEnv, app?.slug);
  const currentVersion = versions.slice().sort((a, b) => b.version - a.version)[0] ?? null;

  // Form state
  const [name, setName] = useState('');
  const [stagedJar, setStagedJar] = useState<File | null>(null);
  const lastDerivedRef = useRef<string>('');

  // Initialize name when app loads
  useEffect(() => {
    if (app) setName(app.displayName);
  }, [app]);

  // Auto-derive from staged JAR (net-new mode only, don't overwrite manual edits)
  useEffect(() => {
    if (!stagedJar || app) return;
    const derived = deriveAppName(stagedJar.name);
    if (!name || name === lastDerivedRef.current) {
      setName(derived);
      lastDerivedRef.current = derived;
    }
  }, [stagedJar, app, name]);

  if (envLoading || appsLoading) return <PageLoader />;
  if (!env) return <div>Select an environment first.</div>;

  const mode: 'net-new' | 'deployed' = app ? 'deployed' : 'net-new';

  return (
    <div className={styles.container}>
      <h2>{app ? app.displayName : 'Create Application'}</h2>
      <IdentitySection
        mode={mode}
        environment={env}
        app={app}
        currentVersion={currentVersion}
        name={name}
        onNameChange={setName}
        stagedJar={stagedJar}
        onStagedJarChange={setStagedJar}
        deploying={false}
      />
    </div>
  );
}