import { useEffect, useState, type MouseEvent } from 'react';
import { Database, Pencil, Play, Plus, RotateCcw, Settings2, Square, Trash2 } from 'lucide-react';
import { Badge, Button, Card, CardHeader } from '../../components/ui';
import { useToast } from '../../components/toast';
import { PageTitle } from '../../layout/AppLayout';
import { apiBaseUrl, apiFetch, authHeaders } from '../../lib/api';
import { filterAppsByCurrentAdmin, grantAppPermissionToCurrentAdmin } from '../../lib/admin-app-permissions';
import { runtimeStatusDotClass, statusDotToneClass } from '../../lib/status-dot';
import { cn } from '../../lib/utils';
import { getStoredSelectedAppId, setStoredSelectedAppId } from '../../lib/selected-app';
import type { ApiApp, ApiAppComponent, BuildEnvVariable, RuntimePersistentVolumeClaim, RuntimeResource } from '../../types/runtime';
import { LoadingModal } from '../operations/operation-utils';

type ComponentPortForm = {
  name: string;
  port: string;
  targetPort: string;
  protocol: string;
};

type BuildEnvVariableForm = {
  id?: string;
  key: string;
  value: string;
  isSecret: boolean;
};

const emptyComponentPort = (): ComponentPortForm => ({
  name: '',
  port: '',
  targetPort: '',
  protocol: 'TCP'
});

const emptyBuildEnvVariable = (): BuildEnvVariableForm => ({
  key: '',
  value: '',
  isSecret: false
});

function useMinimumLoading(loading: boolean, minimumMs = 500) {
  const [visible, setVisible] = useState(loading);

  useEffect(() => {
    if (loading) {
      setVisible(true);
      return;
    }

    const timer = window.setTimeout(() => setVisible(false), minimumMs);
    return () => window.clearTimeout(timer);
  }, [loading, minimumMs]);

  return visible;
}

function isPageAgentClick(event: MouseEvent<HTMLElement>) {
  return !event.nativeEvent.isTrusted;
}

function blockPageAgentDestructiveClick(event: MouseEvent<HTMLElement>) {
  if (!isPageAgentClick(event)) return false;
  event.preventDefault();
  event.stopPropagation();
  return true;
}

function getTone(status: string) {
  if (['활성', '완료', '게시됨', '실행 중', '배포됨', 'ACTIVE', 'READY'].includes(status)) return 'green';
  if (['주의', '예약됨', '대기', '준비중', '카나리'].includes(status)) return 'amber';
  if (['잠김', '실패', '오프라인', '비활성'].includes(status)) return 'red';
  if (['진행중', '동기화'].includes(status)) return 'blue';
  return 'neutral';
}

function formatStatus(status?: string | null) {
  const statusMap: Record<string, string> = {
    ACTIVE: '준비됨',
    READY: '준비됨',
    INACTIVE: '비활성',
    DISABLED: '비활성',
    ERROR: '오류'
  };

  return status ? statusMap[status] ?? status : '-';
}

function loadApps() {
  return apiFetch(`${apiBaseUrl}/apps`, { headers: authHeaders() })
    .then((response) => {
      if (!response.ok) {
        throw new Error('Apps request failed');
      }
      return response.json() as Promise<ApiApp[]>;
    })
    .then(filterAppsByCurrentAdmin);
}

function loadRuntimeResources(namespace: string) {
  return apiFetch(`${apiBaseUrl}/apps/runtime-namespaces/${encodeURIComponent(namespace)}/resources`, { headers: authHeaders() })
    .then((response) => {
      if (!response.ok) throw new Error('Runtime resources request failed');
      return response.json() as Promise<{ resources: RuntimeResource[] }>;
    });
}

function controlRuntimeWorkload(namespace: string, kind: string, name: string, action: 'restart' | 'start' | 'stop') {
  const apiKind = kind === 'Deployment' ? 'deployment' : kind === 'StatefulSet' ? 'statefulset' : kind === 'DaemonSet' ? 'daemonset' : '';
  if (!apiKind) return Promise.reject(new Error('지원하지 않는 워크로드 유형입니다.'));

  const path = action === 'restart'
    ? `/runtime/workloads/${encodeURIComponent(namespace)}/${encodeURIComponent(apiKind)}/${encodeURIComponent(name)}/restart`
    : `/runtime/workloads/${encodeURIComponent(namespace)}/${encodeURIComponent(apiKind)}/${encodeURIComponent(name)}/scale`;

  return apiFetch(`${apiBaseUrl}${path}`, {
    method: 'POST',
    headers: authHeaders({ 'Content-Type': 'application/json' }),
    body: action === 'restart' ? undefined : JSON.stringify({ replicas: action === 'start' ? 1 : 0 })
  }).then((response) => {
    if (!response.ok) throw new Error('워크로드 제어 요청이 실패했습니다.');
    return response.json().catch(() => null);
  });
}

function deleteRuntimeWorkload(namespace: string, kind: string, name: string, deleteService: boolean) {
  const apiKind = kind === 'Deployment' ? 'deployment' : kind === 'StatefulSet' ? 'statefulset' : kind === 'DaemonSet' ? 'daemonset' : '';
  if (!apiKind) return Promise.reject(new Error('지원하지 않는 워크로드 유형입니다.'));

  const query = deleteService ? '?deleteService=true' : '';
  return apiFetch(`${apiBaseUrl}/runtime/workloads/${encodeURIComponent(namespace)}/${encodeURIComponent(apiKind)}/${encodeURIComponent(name)}${query}`, {
    method: 'DELETE',
    headers: authHeaders()
  }).then(async (response) => {
    if (!response.ok) {
      const body = await response.json().catch(() => null);
      const message = Array.isArray(body?.message) ? body.message.join(', ') : body?.message;
      throw new Error(message || '워크로드 삭제 요청이 실패했습니다.');
    }
    return response.json().catch(() => null);
  });
}

function loadWorkloadPersistentVolumeClaims(namespace: string, kind: string, name: string) {
  const apiKind = kind === 'StatefulSet' ? 'statefulset' : '';
  if (!apiKind) return Promise.reject(new Error('StatefulSet 데이터 볼륨만 조회할 수 있습니다.'));

  return apiFetch(`${apiBaseUrl}/runtime/workloads/${encodeURIComponent(namespace)}/${encodeURIComponent(apiKind)}/${encodeURIComponent(name)}/pvcs`, {
    headers: authHeaders()
  }).then(async (response) => {
    if (!response.ok) {
      const body = await response.json().catch(() => null);
      const message = Array.isArray(body?.message) ? body.message.join(', ') : body?.message;
      throw new Error(message || '데이터 볼륨 조회 요청이 실패했습니다.');
    }
    return response.json() as Promise<{ claims: RuntimePersistentVolumeClaim[] }>;
  });
}

function deleteWorkloadPersistentVolumeClaim(namespace: string, kind: string, name: string, claimName: string) {
  const apiKind = kind === 'StatefulSet' ? 'statefulset' : '';
  if (!apiKind) return Promise.reject(new Error('StatefulSet 데이터 볼륨만 삭제할 수 있습니다.'));

  return apiFetch(`${apiBaseUrl}/runtime/workloads/${encodeURIComponent(namespace)}/${encodeURIComponent(apiKind)}/${encodeURIComponent(name)}/pvcs/${encodeURIComponent(claimName)}`, {
    method: 'DELETE',
    headers: authHeaders()
  }).then(async (response) => {
    if (!response.ok) {
      const body = await response.json().catch(() => null);
      const message = Array.isArray(body?.message) ? body.message.join(', ') : body?.message;
      throw new Error(message || '데이터 볼륨 삭제 요청이 실패했습니다.');
    }
    return response.json().catch(() => null);
  });
}

function loadComponentBuildEnv(componentId: string) {
  return apiFetch(`${apiBaseUrl}/apps/components/${encodeURIComponent(componentId)}/build-env`, {
    headers: authHeaders()
  }).then(async (response) => {
    if (!response.ok) {
      const body = await response.json().catch(() => null);
      const message = Array.isArray(body?.message) ? body.message.join(', ') : body?.message;
      throw new Error(message || '빌드 환경변수 조회 요청이 실패했습니다.');
    }
    return response.json() as Promise<{ variables: BuildEnvVariable[] }>;
  });
}

function saveComponentBuildEnv(componentId: string, variables: BuildEnvVariableForm[]) {
  return apiFetch(`${apiBaseUrl}/apps/components/${encodeURIComponent(componentId)}/build-env`, {
    method: 'PUT',
    headers: authHeaders({ 'Content-Type': 'application/json' }),
    body: JSON.stringify({
      variables: variables
        .map((variable) => ({
          key: variable.key.trim(),
          value: variable.value,
          isSecret: variable.isSecret
        }))
        .filter((variable) => variable.key)
    })
  }).then(async (response) => {
    if (!response.ok) {
      const body = await response.json().catch(() => null);
      const message = Array.isArray(body?.message) ? body.message.join(', ') : body?.message;
      throw new Error(message || '빌드 환경변수 저장 요청이 실패했습니다.');
    }
    return response.json() as Promise<{ variables: BuildEnvVariable[] }>;
  });
}

function isRunningResource(resource: RuntimeResource) {
  if (!['Pod', 'Deployment', 'StatefulSet', 'DaemonSet'].includes(resource.kind)) return false;
  return ['Running', 'Pending', 'ContainerCreating'].includes(resource.status) || !resource.ready.endsWith('/0');
}

function isWorkloadResource(resource: RuntimeResource) {
  return ['Deployment', 'StatefulSet', 'DaemonSet'].includes(resource.kind);
}

function isStoppedResource(resource: RuntimeResource) {
  return resource.ready.endsWith('/0');
}

function runtimeStatusLabel(resource: RuntimeResource, stopped: boolean) {
  if (stopped) return '중지됨';
  if (resource.status === 'Running') return '실행 중';
  if (resource.status === 'Pending' || resource.status === 'ContainerCreating') return '준비 중';
  if (['Error', 'CrashLoopBackOff', 'ImagePullBackOff', 'Failed'].includes(resource.status)) return '오류';
  return resource.status || '-';
}

function runtimeStatusTone(resource: RuntimeResource, stopped: boolean): 'neutral' | 'green' | 'amber' | 'red' | 'blue' {
  if (stopped) return 'neutral';
  if (resource.status === 'Running') return 'green';
  if (resource.status === 'Pending' || resource.status === 'ContainerCreating') return 'amber';
  if (['Error', 'CrashLoopBackOff', 'ImagePullBackOff', 'Failed'].includes(resource.status)) return 'red';
  return 'blue';
}

function isComponentRunning(component: ApiAppComponent, resources: RuntimeResource[]) {
  const name = component.name.toLowerCase();
  return resources.some((resource) => {
    const resourceName = resource.name.toLowerCase();
    return isRunningResource(resource) && (resourceName === name || resourceName.startsWith(`${name}-`));
  });
}

function componentPortForms(component: ApiAppComponent): ComponentPortForm[] {
  if (component.ports?.length) {
    return component.ports.map((port) => ({
      name: port.name ?? '',
      port: port.port ? String(port.port) : '',
      targetPort: port.targetPort ? String(port.targetPort) : '',
      protocol: port.protocol ?? 'TCP'
    }));
  }

  if (component.port) {
    return [{
      name: 'http',
      port: String(component.port),
      targetPort: String(component.targetPort ?? component.port),
      protocol: 'TCP'
    }];
  }

  return [emptyComponentPort()];
}

function formatComponentPorts(component: ApiAppComponent) {
  const ports = componentPortForms(component).filter((port) => port.port);
  if (ports.length === 0) return '-';
  return ports.map((port) => `${port.name || 'port'} ${port.port}:${port.targetPort || port.port}`).join(', ');
}

export function AppManagementPage() {
  const { toast } = useToast();
  const [apiApps, setApiApps] = useState<ApiApp[]>([]);
  const [isAppsLoading, setIsAppsLoading] = useState(true);
  const appsLoadingVisible = useMinimumLoading(isAppsLoading);
  const [selectedAppId, setSelectedAppId] = useState(() => getStoredSelectedAppId());
  const [isCreateAppOpen, setIsCreateAppOpen] = useState(false);
  const [newAppKey, setNewAppKey] = useState('');
  const [newAppName, setNewAppName] = useState('');
  const [newAppNamespace, setNewAppNamespace] = useState('');
  const [newAppDescription, setNewAppDescription] = useState('');
  const [appCreateStatus, setAppCreateStatus] = useState<'idle' | 'saving' | 'error'>('idle');
  const [isComponentOpen, setIsComponentOpen] = useState(false);
  const [componentName, setComponentName] = useState('');
  const [componentType, setComponentType] = useState('CONTAINER');
  const [componentImageSource, setComponentImageSource] = useState('SOURCE');
  const [componentExternalImage, setComponentExternalImage] = useState('');
  const [componentWorkloadType, setComponentWorkloadType] = useState('Deployment');
  const [componentReplicas, setComponentReplicas] = useState('1');
  const [componentServiceType, setComponentServiceType] = useState('ClusterIP');
  const [componentStorageEnabled, setComponentStorageEnabled] = useState(false);
  const [componentStorageSize, setComponentStorageSize] = useState('');
  const [componentStorageMountPath, setComponentStorageMountPath] = useState('');
  const [componentStorageRetain, setComponentStorageRetain] = useState(true);
  const [componentRepo, setComponentRepo] = useState('');
  const [componentBranch, setComponentBranch] = useState('develop');
  const [componentPort, setComponentPort] = useState('');
  const [componentTargetPort, setComponentTargetPort] = useState('');
  const [componentPorts, setComponentPorts] = useState<ComponentPortForm[]>([emptyComponentPort()]);
  const [componentSaveStatus, setComponentSaveStatus] = useState<'idle' | 'saving' | 'error'>('idle');
  const [editingComponent, setEditingComponent] = useState<ApiAppComponent | null>(null);
  const [buildEnvComponent, setBuildEnvComponent] = useState<ApiAppComponent | null>(null);
  const [buildEnvVariables, setBuildEnvVariables] = useState<BuildEnvVariableForm[]>([emptyBuildEnvVariable()]);
  const [buildEnvStatus, setBuildEnvStatus] = useState<'idle' | 'loading' | 'saving' | 'error'>('idle');
  const [deletingApp, setDeletingApp] = useState<ApiApp | null>(null);
  const [appDeleteStatus, setAppDeleteStatus] = useState<'idle' | 'deleting' | 'error'>('idle');
  const [appDeleteOptions, setAppDeleteOptions] = useState({
    unlinkSources: true,
    deleteRuntimeSettings: true,
    scaleDownWorkloads: true,
    deleteKubernetesResources: false,
    deletePersistentVolumes: false
  });
  const [deletingComponent, setDeletingComponent] = useState<ApiAppComponent | null>(null);
  const [runtimeResources, setRuntimeResources] = useState<RuntimeResource[]>([]);
  const [workloadActionKey, setWorkloadActionKey] = useState('');
  const [deletingWorkload, setDeletingWorkload] = useState<RuntimeResource | null>(null);
  const [deleteServiceWithWorkload, setDeleteServiceWithWorkload] = useState(false);
  const [deletingVolumeWorkload, setDeletingVolumeWorkload] = useState<RuntimeResource | null>(null);
  const [volumeClaims, setVolumeClaims] = useState<RuntimePersistentVolumeClaim[]>([]);
  const [selectedVolumeClaimName, setSelectedVolumeClaimName] = useState('');
  const [volumeDeleteConfirmText, setVolumeDeleteConfirmText] = useState('');
  const [volumeDeleteBackupChecked, setVolumeDeleteBackupChecked] = useState(false);
  const [volumeDeleteStatus, setVolumeDeleteStatus] = useState<'idle' | 'loading' | 'deleting' | 'error'>('idle');
  const selectedApp = apiApps.find((app) => app.id === selectedAppId) ?? apiApps[0];
  const totalComponents = selectedApp?.components?.length ?? 0;
  const linkedComponents = selectedApp?.components?.filter((component) => component.repository).length ?? 0;
  const workloads = runtimeResources.filter(isWorkloadResource);
  const selectedVolumeClaim = volumeClaims.find((claim) => claim.name === selectedVolumeClaimName);
  const volumeDeleteConfirmPhrase = selectedVolumeClaimName ? `${selectedVolumeClaimName} 삭제` : '';
  const canDeleteVolume = Boolean(
    deletingVolumeWorkload &&
    selectedVolumeClaimName &&
    volumeDeleteBackupChecked &&
    volumeDeleteConfirmText.trim() === volumeDeleteConfirmPhrase &&
    volumeDeleteStatus !== 'loading' &&
    volumeDeleteStatus !== 'deleting'
  );

  useEffect(() => {
    setIsAppsLoading(true);
    loadApps()
      .then((apps) => {
        setApiApps(apps);
        setSelectedAppId((current) => {
          const storedAppId = getStoredSelectedAppId();
          const preferredAppId = storedAppId || current;
          const nextAppId = apps.some((app) => app.id === preferredAppId) ? preferredAppId : apps[0]?.id || '';
          if (nextAppId) setStoredSelectedAppId(nextAppId);
          return nextAppId;
        });
        setIsAppsLoading(false);
      })
      .catch(() => {
        setApiApps([]);
        setIsAppsLoading(false);
      });
  }, []);

  const selectApp = (appId: string) => {
    setSelectedAppId(appId);
    setStoredSelectedAppId(appId);
  };

  useEffect(() => {
    if (!selectedApp?.namespace) {
      setRuntimeResources([]);
      return;
    }

    let mounted = true;
    loadRuntimeResources(selectedApp.namespace)
      .then((result) => {
        if (mounted) setRuntimeResources(result.resources ?? []);
      })
      .catch(() => {
        if (mounted) setRuntimeResources([]);
      });

    return () => {
      mounted = false;
    };
  }, [selectedApp?.namespace]);

  const refreshRuntimeResources = () => {
    if (!selectedApp?.namespace) {
      setRuntimeResources([]);
      return Promise.resolve();
    }

    return loadRuntimeResources(selectedApp.namespace)
      .then((result) => setRuntimeResources(result.resources ?? []))
      .catch(() => setRuntimeResources([]));
  };

  const runWorkloadAction = (resource: RuntimeResource, action: 'restart' | 'start' | 'stop') => {
    if (!selectedApp?.namespace) return;
    const actionKey = `${action}-${resource.kind}-${resource.name}`;
    setWorkloadActionKey(actionKey);
    controlRuntimeWorkload(selectedApp.namespace, resource.kind, resource.name, action)
      .then(() => {
        toast({
          type: 'success',
          title: action === 'restart' ? '워크로드 재시작' : action === 'start' ? '워크로드 시작' : '워크로드 중지',
          message: `${resource.name} 작업을 요청했습니다.`
        });
        return refreshRuntimeResources();
      })
      .catch((error: Error) => {
        toast({ type: 'error', title: '워크로드 제어 실패', message: error.message });
      })
      .finally(() => setWorkloadActionKey(''));
  };

  const requestDeleteWorkload = (resource: RuntimeResource) => {
    setDeletingWorkload(resource);
    setDeleteServiceWithWorkload(false);
  };

  const confirmDeleteWorkload = () => {
    if (!selectedApp?.namespace || !deletingWorkload) return;

    const actionKey = `delete-${deletingWorkload.kind}-${deletingWorkload.name}`;
    setWorkloadActionKey(actionKey);
    deleteRuntimeWorkload(selectedApp.namespace, deletingWorkload.kind, deletingWorkload.name, deleteServiceWithWorkload)
      .then(() => {
        toast({
          type: 'success',
          title: '워크로드 삭제',
          message: `${deletingWorkload.name} 삭제를 요청했습니다.`
        });
        setDeletingWorkload(null);
        return refreshRuntimeResources();
      })
      .catch((error: Error) => {
        toast({ type: 'error', title: '워크로드 삭제 실패', message: error.message });
      })
      .finally(() => setWorkloadActionKey(''));
  };

  const requestDeleteVolume = (resource: RuntimeResource) => {
    if (!selectedApp?.namespace) return;
    if (resource.kind !== 'StatefulSet') {
      toast({ type: 'error', title: '데이터 볼륨 삭제 불가', message: 'StatefulSet 워크로드만 데이터 볼륨을 삭제할 수 있습니다.' });
      return;
    }
    if (!isStoppedResource(resource)) {
      toast({ type: 'warning', title: '워크로드 중지 필요', message: '데이터 볼륨 삭제 전 DB 워크로드를 먼저 중지하세요.' });
      return;
    }

    setDeletingVolumeWorkload(resource);
    setVolumeClaims([]);
    setSelectedVolumeClaimName('');
    setVolumeDeleteConfirmText('');
    setVolumeDeleteBackupChecked(false);
    setVolumeDeleteStatus('loading');
    loadWorkloadPersistentVolumeClaims(selectedApp.namespace, resource.kind, resource.name)
      .then((result) => {
        const claims = result.claims ?? [];
        setVolumeClaims(claims);
        setSelectedVolumeClaimName(claims[0]?.name ?? '');
        setVolumeDeleteStatus('idle');
      })
      .catch((error: Error) => {
        setVolumeDeleteStatus('error');
        toast({ type: 'error', title: '데이터 볼륨 조회 실패', message: error.message });
      });
  };

  const closeVolumeDeleteModal = () => {
    setDeletingVolumeWorkload(null);
    setVolumeClaims([]);
    setSelectedVolumeClaimName('');
    setVolumeDeleteConfirmText('');
    setVolumeDeleteBackupChecked(false);
    setVolumeDeleteStatus('idle');
  };

  const confirmDeleteVolume = () => {
    if (!selectedApp?.namespace || !deletingVolumeWorkload || !selectedVolumeClaimName) return;

    setVolumeDeleteStatus('deleting');
    deleteWorkloadPersistentVolumeClaim(
      selectedApp.namespace,
      deletingVolumeWorkload.kind,
      deletingVolumeWorkload.name,
      selectedVolumeClaimName
    )
      .then(() => {
        toast({
          type: 'success',
          title: '데이터 볼륨 삭제',
          message: `${selectedVolumeClaimName} 삭제를 요청했습니다.`
        });
        closeVolumeDeleteModal();
        return refreshRuntimeResources();
      })
      .catch((error: Error) => {
        setVolumeDeleteStatus('error');
        toast({ type: 'error', title: '데이터 볼륨 삭제 실패', message: error.message });
      });
  };

  const createApp = () => {
    if (!newAppKey.trim() || !newAppName.trim()) return;

    const namespace = newAppNamespace.trim();
    setAppCreateStatus('saving');
    apiFetch(`${apiBaseUrl}/apps`, {
      method: 'POST',
      headers: authHeaders({ 'Content-Type': 'application/json' }),
      body: JSON.stringify({
        key: newAppKey,
        name: newAppName,
        namespace: namespace || undefined,
        description: newAppDescription || undefined
      })
    })
      .then((response) => {
        if (!response.ok) throw new Error('App create failed');
        return response.json();
      })
      .then((result) => {
        if (!namespace) return result;
        return apiFetch(`${apiBaseUrl}/apps/runtime-namespaces`, {
          method: 'POST',
          headers: authHeaders({ 'Content-Type': 'application/json' }),
          body: JSON.stringify({ namespace })
        })
          .then(async (response) => {
            if (!response.ok) {
              const body = await response.json().catch(() => null);
              const message = Array.isArray(body?.message) ? body.message.join(', ') : body?.message;
              throw new Error(message || '네임스페이스 create failed');
            }
            return response.json();
          })
          .then((namespaceResult) => {
            toast({
              type: 'success',
              title: '네임스페이스 생성/확인',
              message: namespaceResult.created ? `${namespaceResult.namespace} 네임스페이스를 생성했습니다.` : `${namespaceResult.namespace} 네임스페이스가 이미 있습니다.`
            });
            return result;
          })
          .catch((namespaceError: Error) => {
            toast({
              type: 'warning',
              title: '앱 등록 완료 / 네임스페이스 생성 실패',
              message: namespaceError.message
            });
            return result;
          });
      })
      .then((result) => {
        if (result?.app?.id) grantAppPermissionToCurrentAdmin(result.app.id);
        return loadApps();
      })
      .then((apps) => {
        setApiApps(apps);
        setNewAppKey('');
        setNewAppName('');
        setNewAppNamespace('');
        setNewAppDescription('');
        setAppCreateStatus('idle');
        setIsCreateAppOpen(false);
        toast({ type: 'success', title: '앱 등록', message: '앱 그룹이 등록되었습니다.' });
      })
      .catch(() => {
        setAppCreateStatus('error');
        toast({ type: 'error', title: '앱 등록 실패', message: '중복 Key 또는 백엔드 상태를 확인하세요.' });
      });
  };

  const getBuildTargetForType = (type: string) => {
    if (componentImageSource === 'EXTERNAL') return '외부 이미지';
    if (componentImageSource === 'DATABASE') return 'DB 이미지';

    const targets: Record<string, string> = {
      ELECTRON: 'AppImage',
      CONTAINER: 'container-image',
      STATIC_WEB: 'web-image',
      DATABASE: 'database',
      MIGRATION: 'prisma/migrations'
    };

    return targets[type] ?? 'container-image';
  };

  const isSourceBuildComponent = componentImageSource === 'SOURCE';
  const isStorageWorkload = componentWorkloadType === 'StatefulSet' || componentType === 'DATABASE';

  const componentPayload = () => {
    const normalizedPorts = componentPorts
      .map((item) => ({
        name: item.name.trim() || undefined,
        port: item.port ? Number(item.port) : undefined,
        targetPort: item.targetPort ? Number(item.targetPort) : item.port ? Number(item.port) : undefined,
        protocol: item.protocol || 'TCP'
      }))
      .filter((item) => item.port);

    const primaryPort = normalizedPorts[0];

    return {
      name: componentName.trim(),
      type: componentType,
      imageSource: componentImageSource,
      externalImage: componentImageSource !== 'SOURCE' ? componentExternalImage.trim() || undefined : undefined,
      workloadType: componentWorkloadType,
      replicas: componentReplicas ? Number(componentReplicas) : undefined,
      serviceType: componentServiceType,
      storageEnabled: componentStorageEnabled,
      storageSize: componentStorageEnabled ? componentStorageSize.trim() || undefined : undefined,
      storageMountPath: componentStorageEnabled ? componentStorageMountPath.trim() || undefined : undefined,
      storageRetain: componentStorageRetain,
      repository: isSourceBuildComponent ? componentRepo || undefined : undefined,
      branch: isSourceBuildComponent ? componentBranch || undefined : undefined,
      buildTarget: getBuildTargetForType(componentType),
      port: primaryPort?.port ?? (componentPort ? Number(componentPort) : undefined),
      targetPort: primaryPort?.targetPort ?? (componentTargetPort ? Number(componentTargetPort) : componentPort ? Number(componentPort) : undefined),
      ports: normalizedPorts.length ? normalizedPorts : undefined
    };
  };

  const createComponent = () => {
    if (!selectedApp?.id || !componentName.trim()) return;

    setComponentSaveStatus('saving');
    apiFetch(`${apiBaseUrl}/apps/${selectedApp.id}/components`, {
      method: 'POST',
      headers: authHeaders({ 'Content-Type': 'application/json' }),
      body: JSON.stringify(componentPayload())
    })
      .then((response) => {
        if (!response.ok) throw new Error('Component create failed');
        return response.json();
      })
      .then(() => loadApps())
      .then((apps) => {
        setApiApps(apps);
        setComponentName('');
        setComponentType('CONTAINER');
        setComponentImageSource('SOURCE');
        setComponentExternalImage('');
        setComponentWorkloadType('Deployment');
        setComponentReplicas('1');
        setComponentServiceType('ClusterIP');
        setComponentStorageEnabled(false);
        setComponentStorageSize('');
        setComponentStorageMountPath('');
        setComponentStorageRetain(true);
        setComponentRepo('');
        setComponentBranch('develop');
        setComponentPort('');
        setComponentTargetPort('');
        setComponentPorts([emptyComponentPort()]);
        setComponentSaveStatus('idle');
        setIsComponentOpen(false);
        toast({ type: 'success', title: '구성요소 추가', message: '앱 구성요소가 추가되었습니다.' });
      })
      .catch(() => {
        setComponentSaveStatus('error');
        toast({ type: 'error', title: '구성요소 추가 실패', message: '입력값 또는 백엔드 상태를 확인하세요.' });
      });
  };

  const openEditComponent = (component: ApiAppComponent) => {
    setEditingComponent(component);
    setComponentName(component.name);
    setComponentType(component.type);
    setComponentImageSource(component.imageSource ?? (component.type === 'DATABASE' ? 'DATABASE' : 'SOURCE'));
    setComponentExternalImage(component.externalImage ?? '');
    setComponentWorkloadType(component.workloadType ?? (component.type === 'DATABASE' ? 'StatefulSet' : 'Deployment'));
    setComponentReplicas(component.replicas ? String(component.replicas) : '1');
    setComponentServiceType(component.serviceType ?? 'ClusterIP');
    setComponentStorageEnabled(Boolean(component.storageEnabled));
    setComponentStorageSize(component.storageSize ?? '');
    setComponentStorageMountPath(component.storageMountPath ?? '');
    setComponentStorageRetain(component.storageRetain ?? true);
    setComponentRepo(component.repository ?? '');
    setComponentBranch(component.branch ?? 'develop');
    setComponentPort(component.port ? String(component.port) : '');
    setComponentTargetPort(component.targetPort ? String(component.targetPort) : '');
    setComponentPorts(componentPortForms(component));
    setComponentSaveStatus('idle');
    setIsComponentOpen(true);
  };

  const closeComponentModal = () => {
    setIsComponentOpen(false);
    setEditingComponent(null);
    setComponentName('');
    setComponentType('CONTAINER');
    setComponentImageSource('SOURCE');
    setComponentExternalImage('');
    setComponentWorkloadType('Deployment');
    setComponentReplicas('1');
    setComponentServiceType('ClusterIP');
    setComponentStorageEnabled(false);
    setComponentStorageSize('');
    setComponentStorageMountPath('');
    setComponentStorageRetain(true);
    setComponentRepo('');
    setComponentBranch('develop');
    setComponentPort('');
    setComponentTargetPort('');
    setComponentPorts([emptyComponentPort()]);
    setComponentSaveStatus('idle');
  };

  const updateComponent = () => {
    if (!editingComponent || !componentName.trim()) return;

    setComponentSaveStatus('saving');
    apiFetch(`${apiBaseUrl}/apps/components/${editingComponent.id}`, {
      method: 'PATCH',
      headers: authHeaders({ 'Content-Type': 'application/json' }),
      body: JSON.stringify(componentPayload())
    })
      .then((response) => {
        if (!response.ok) throw new Error('Component update failed');
        return response.json();
      })
      .then(() => loadApps())
      .then((apps) => {
        setApiApps(apps);
        closeComponentModal();
        toast({ type: 'success', title: '구성요소 수정', message: '앱 구성요소가 수정되었습니다.' });
      })
      .catch(() => {
        setComponentSaveStatus('error');
        toast({ type: 'error', title: '구성요소 수정 실패', message: '입력값 또는 백엔드 API 상태를 확인하세요.' });
      });
  };

  const openBuildEnvModal = (component: ApiAppComponent) => {
    setBuildEnvComponent(component);
    setBuildEnvStatus('loading');
    const fallbackVariables = component.buildVariables?.length
      ? component.buildVariables.map((variable) => ({
          id: variable.id,
          key: variable.key,
          value: variable.value,
          isSecret: variable.isSecret
        }))
      : [emptyBuildEnvVariable()];
    setBuildEnvVariables(fallbackVariables);
    loadComponentBuildEnv(component.id)
      .then(({ variables }) => {
        setBuildEnvVariables(variables.length
          ? variables.map((variable) => ({
              id: variable.id,
              key: variable.key,
              value: variable.value,
              isSecret: variable.isSecret
            }))
          : [emptyBuildEnvVariable()]);
        setBuildEnvStatus('idle');
      })
      .catch((error: Error) => {
        setBuildEnvStatus('error');
        toast({ type: 'error', title: '빌드 환경변수 조회 실패', message: error.message });
      });
  };

  const closeBuildEnvModal = () => {
    setBuildEnvComponent(null);
    setBuildEnvVariables([emptyBuildEnvVariable()]);
    setBuildEnvStatus('idle');
  };

  const saveBuildEnv = () => {
    if (!buildEnvComponent) return;
    setBuildEnvStatus('saving');
    saveComponentBuildEnv(buildEnvComponent.id, buildEnvVariables)
      .then(({ variables }) => {
        setApiApps((current) => current.map((app) => ({
          ...app,
          components: app.components?.map((component) => component.id === buildEnvComponent.id
            ? { ...component, buildVariables: variables }
            : component)
        })));
        toast({ type: 'success', title: '빌드 환경변수 저장', message: '구성요소 빌드 환경변수를 저장했습니다.' });
        closeBuildEnvModal();
      })
      .catch((error: Error) => {
        setBuildEnvStatus('error');
        toast({ type: 'error', title: '빌드 환경변수 저장 실패', message: error.message });
      });
  };

  const deleteComponent = () => {
    if (!deletingComponent) return;

    apiFetch(`${apiBaseUrl}/apps/components/${deletingComponent.id}`, { method: 'DELETE', headers: authHeaders() })
      .then((response) => {
        if (!response.ok) throw new Error('Component delete failed');
        return response.json().catch(() => null);
      })
      .then(() => loadApps())
      .then((apps) => {
        setApiApps(apps);
        setDeletingComponent(null);
        toast({ type: 'success', title: '구성요소 삭제', message: '앱 구성요소가 삭제되었습니다.' });
      })
      .catch(() => {
        toast({ type: 'error', title: '구성요소 삭제 실패', message: '참조 이력 또는 백엔드 API 상태를 확인하세요.' });
      });
  };

  const deleteApp = () => {
    if (!deletingApp) return;

    setAppDeleteStatus('deleting');
    apiFetch(`${apiBaseUrl}/apps/${deletingApp.id}/decommission`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        ...authHeaders()
      },
      body: JSON.stringify(appDeleteOptions)
    })
      .then((response) => {
        if (!response.ok) throw new Error('App delete failed');
        return response.json().catch(() => null);
      })
      .then(() => loadApps())
      .then((apps) => {
        setApiApps(apps);
        setDeletingApp(null);
        setAppDeleteStatus('idle');
        setSelectedAppId((current) => {
          if (current !== deletingApp.id) return current;
          const nextAppId = apps[0]?.id ?? '';
          setStoredSelectedAppId(nextAppId);
          return nextAppId;
        });
        toast({ type: 'success', title: '앱 삭제', message: '앱 그룹이 삭제되었습니다.' });
      })
      .catch(() => {
        setAppDeleteStatus('error');
        toast({ type: 'error', title: '앱 삭제 실패', message: '참조 이력 또는 백엔드 API 상태를 확인하세요.' });
      });
  };

  const updateAppDeleteOption = (key: keyof typeof appDeleteOptions, value: boolean) => {
    setAppDeleteOptions((current) => ({
      ...current,
      [key]: value,
      ...(key === 'deleteKubernetesResources' && !value ? { deletePersistentVolumes: false } : {})
    }));
  };

  return (
    <>
      <PageTitle
        eyebrow="어플리케이션"
        title="앱 관리"
        description="런처에 등록할 앱을 제품 단위로 관리하고, 앱을 구성하는 실행 요소와 운영 리소스를 하나의 묶음으로 운영합니다."
        actions={
          <Button className="h-8 px-3 text-[13px]" onClick={() => setIsCreateAppOpen(true)}>
            <Plus className="size-4" />앱 등록
          </Button>
        }
      />

      <div className="space-y-4">
        <Card className="min-w-0 overflow-hidden">
          <CardHeader title="등록된 앱 그룹" description="앱 그룹을 먼저 등록한 뒤 구성요소와 저장소를 연결합니다." />
          <div className="max-h-[320px] overflow-x-auto overflow-y-auto">
            <table className="w-full min-w-[760px] text-left text-sm">
              <thead className="sticky top-0 z-10 border-b border-border bg-card text-xs text-muted-foreground">
                <tr>
                  <th className="px-5 py-3 font-medium">Key</th>
                  <th className="px-5 py-3 font-medium">앱 이름</th>
                  <th className="px-5 py-3 font-medium">네임스페이스</th>
                  <th className="px-5 py-3 font-medium">구성요소</th>
                  <th className="px-5 py-3 font-medium">상태</th>
                  <th className="w-20 px-5 py-3 text-right font-medium">관리</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-border">
                {!isAppsLoading && apiApps.length === 0 ? (
                  <tr>
                    <td colSpan={6} className="px-5 py-6 text-center text-muted-foreground">등록된 앱 그룹이 없습니다.</td>
                  </tr>
                ) : (
                  apiApps.map((app) => (
                    <tr
                      key={app.id}
                      className={cn(
                        'cursor-pointer transition-colors hover:bg-muted/20',
                        selectedApp?.id === app.id && 'bg-primary/20 shadow-[inset_4px_0_0_var(--color-primary)] hover:bg-primary/25'
                      )}
                      onClick={() => selectApp(app.id)}
                    >
                      <td className="px-5 py-3 font-semibold">{app.key}</td>
                      <td className="px-5 py-3">{app.name}</td>
                      <td className="px-5 py-3 text-muted-foreground">{app.namespace || '-'}</td>
                      <td className="px-5 py-3">{app.components?.length ?? 0}</td>
                      <td className="px-5 py-3"><Badge tone={getTone(app.status)}>{formatStatus(app.status)}</Badge></td>
                      <td className="px-5 py-3">
                        <div className="flex justify-end">
                          <Button
                            variant="outline"
                            className="size-8 border-rose-500/50 px-0 text-rose-300 hover:border-rose-400 hover:bg-rose-500/10 hover:text-rose-200"
                            title="삭제"
                            aria-label="삭제"
	                            onClick={(event) => {
	                              if (blockPageAgentDestructiveClick(event)) return;
	                              event.stopPropagation();
	                              setAppDeleteStatus('idle');
	                              setAppDeleteOptions({
	                                unlinkSources: true,
	                                deleteRuntimeSettings: true,
	                                scaleDownWorkloads: true,
	                                deleteKubernetesResources: false,
	                                deletePersistentVolumes: false
	                              });
	                              setDeletingApp(app);
	                            }}
                          >
                            <Trash2 className="size-4" />
                          </Button>
                        </div>
                      </td>
                    </tr>
                  ))
                )}
              </tbody>
            </table>
          </div>
        </Card>

        {selectedApp ? (
          <div className="min-w-0 space-y-4">
            <Card className="min-w-0 overflow-hidden">
              <CardHeader
                title={`${selectedApp.name} 구성 요약`}
                description="앱 실행과 운영에 필요한 구성요소와 배포 리소스 요약입니다."
              />
              <div className="grid gap-4 p-5 md:grid-cols-4">
                {[
                  ['네임스페이스', selectedApp.namespace],
                  ['연결 소스', `${linkedComponents}개`],
                  ['구성요소', `${totalComponents}개`],
                  ['상태', formatStatus(selectedApp.status)]
                ].map(([label, value]) => (
                  <div key={label} className="rounded-md border border-border bg-muted/20 p-4">
                    <p className="text-xs text-muted-foreground">{label}</p>
                    <p className="mt-2 truncate text-sm font-semibold">{value}</p>
                  </div>
                ))}
              </div>
              <div className="px-5 pb-5">
                <div className="grid gap-4 text-sm md:grid-cols-2">
                  <div className="rounded-md border border-border bg-muted/20 p-4">
                    <p className="text-xs text-muted-foreground">Key</p>
                    <p className="mt-2 truncate font-semibold">{selectedApp.key}</p>
                  </div>
                  <div className="rounded-md border border-border bg-muted/20 p-4">
                    <p className="text-xs text-muted-foreground">설명</p>
                    <p className="mt-2 truncate font-semibold text-muted-foreground">{selectedApp.description || '-'}</p>
                  </div>
                </div>
              </div>
            </Card>

            <Card>
              <CardHeader
                title="앱 구성요소"
                description="앱을 구성하는 실행 요소와 관련 리소스를 관리합니다."
                action={
                  <Button variant="outline" className="h-8 px-3 text-[13px]" disabled={!selectedApp} onClick={() => setIsComponentOpen(true)}>
                    <Plus className="size-4" />
                    추가
                  </Button>
                }
              />
              <div className="max-h-[430px] overflow-x-auto overflow-y-auto">
                <table className="w-full min-w-[980px] text-left text-sm">
                  <thead className="border-b border-border text-xs text-muted-foreground">
                    <tr>
                      <th className="px-5 py-3 font-medium">구성요소</th>
                      <th className="px-5 py-3 font-medium">역할</th>
                      <th className="px-5 py-3 font-medium">유형</th>
                      <th className="px-5 py-3 font-medium">워크로드</th>
                      <th className="px-5 py-3 font-medium">포트</th>
                      <th className="px-5 py-3 font-medium">소스</th>
                      <th className="w-24 px-5 py-3 text-right font-medium">관리</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-border">
                    {!isAppsLoading && (selectedApp.components ?? []).map((component) => {
                      const running = isComponentRunning(component, runtimeResources);
                      const imageSourceLabel = component.imageSource === 'EXTERNAL' ? '외부 이미지' : component.imageSource === 'DATABASE' ? 'DB 이미지' : '소스 빌드';
                      return (
                        <tr key={component.name} className="hover:bg-muted/20">
                          <td className="px-5 py-3 font-medium">
                            <span className="inline-flex items-center gap-2">
                              <span className={cn('size-2.5 shrink-0 rounded-full', running ? statusDotToneClass('green') : component.repository ? statusDotToneClass('blue') : statusDotToneClass('neutral'))} />
                              {component.name}
                              {running ? <Badge tone="green">실행 중</Badge> : null}
                            </span>
                          </td>
                          <td className="px-5 py-3 text-muted-foreground">{imageSourceLabel}</td>
                          <td className="px-5 py-3">{component.type}</td>
                          <td className="px-5 py-3 text-muted-foreground">
                            {component.workloadType ?? '-'}
                          </td>
                          <td className="max-w-[220px] px-5 py-3 text-muted-foreground">
                            <span className="block truncate">{formatComponentPorts(component)}</span>
                          </td>
                          <td className="px-5 py-3 text-muted-foreground">{component.repository || (component.imageSource === 'EXTERNAL' ? '외부 이미지' : '미연결')}</td>
                          <td className="px-5 py-3">
                            <div className="grid grid-cols-[2rem_2rem_2rem] justify-end gap-2">
                              <Button variant="outline" className="size-8 px-0" title="수정" aria-label="수정" onClick={() => openEditComponent(component)}>
                                <Pencil className="size-4" />
                              </Button>
                              <Button variant="outline" className="size-8 px-0" title="빌드 환경변수" aria-label="빌드 환경변수" onClick={() => openBuildEnvModal(component)}>
                                <Settings2 className="size-4" />
                              </Button>
                              {!running ? (
                                <Button
                                  variant="outline"
                                  className="size-8 border-rose-500/50 px-0 text-rose-300 hover:border-rose-400 hover:bg-rose-500/10 hover:text-rose-200"
                                  title="삭제"
                                  aria-label="삭제"
	                                  onClick={(event) => {
	                                    if (blockPageAgentDestructiveClick(event)) return;
	                                    setDeletingComponent(component);
	                                  }}
                                >
                                  <Trash2 className="size-4" />
                                </Button>
                              ) : <span aria-hidden="true" />}
                            </div>
                          </td>
                        </tr>
                      );
                    })}
                    {!isAppsLoading && (selectedApp.components ?? []).length === 0 ? (
                      <tr>
                        <td colSpan={7} className="px-5 py-6 text-center text-muted-foreground">등록된 구성요소가 없습니다.</td>
                      </tr>
                    ) : null}
                  </tbody>
                </table>
              </div>
            </Card>

            <Card className="min-w-0 overflow-hidden">
              <CardHeader
                title="워크로드 제어"
                description="현재 실행 중인 리소스 상태를 확인하고 필요한 작업을 실행합니다."
                action={<span className="text-xs text-muted-foreground">총 {workloads.length}개</span>}
              />
              <div className="max-h-[360px] overflow-x-auto overflow-y-auto">
                <table className="w-full min-w-[980px] text-left text-sm">
                  <thead className="sticky top-0 z-10 border-b border-border bg-card text-xs text-muted-foreground">
                    <tr>
                      <th className="px-5 py-3 font-medium">이름</th>
                      <th className="px-5 py-3 font-medium">유형</th>
                      <th className="px-5 py-3 font-medium">준비 상태</th>
                      <th className="px-5 py-3 font-medium">이미지/상세</th>
                      <th className="w-52 px-5 py-3 text-right font-medium">작업</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-border">
                    {!isAppsLoading && workloads.length === 0 ? (
                      <tr>
                        <td colSpan={5} className="px-5 py-12 text-center text-muted-foreground">제어할 워크로드가 없습니다.</td>
                      </tr>
                    ) : null}
                    {workloads.map((resource) => {
                      const stopped = isStoppedResource(resource);
                      const actionBase = `${resource.kind}-${resource.name}`;
                      const pending = workloadActionKey.endsWith(actionBase);

                      return (
                        <tr key={actionBase} className="hover:bg-muted/20">
                          <td className="px-5 py-3">
                            <span className="inline-flex items-center gap-2">
                              <span className={cn('block size-2.5 shrink-0 rounded-full', stopped ? statusDotToneClass('neutral') : runtimeStatusDotClass(resource.status))} />
                              <span className="text-sm text-foreground">{resource.name}</span>
                              <Badge tone={runtimeStatusTone(resource, stopped)}>{runtimeStatusLabel(resource, stopped)}</Badge>
                            </span>
                          </td>
                          <td className="px-5 py-3 text-foreground">{resource.kind}</td>
                          <td className="px-5 py-3">{resource.ready}</td>
                          <td className="max-w-[420px] px-5 py-3">
                            <span className="block truncate font-mono text-xs text-muted-foreground">{resource.detail || '-'}</span>
                          </td>
                          <td className="px-5 py-3">
                            <div className="flex justify-end gap-2">
                              <Button
                                variant="outline"
                                className="size-8 px-0"
                                title="재시작"
                                aria-label={`${resource.name} 재시작`}
                                disabled={pending || stopped}
                                onClick={() => runWorkloadAction(resource, 'restart')}
                              >
                                <RotateCcw className={workloadActionKey === `restart-${actionBase}` ? 'size-4 animate-spin' : 'size-4'} />
                              </Button>
                              <Button
                                variant={stopped ? 'default' : 'outline'}
                                className="size-8 px-0"
                                title={stopped ? '시작' : '중지'}
                                aria-label={`${resource.name} ${stopped ? '시작' : '중지'}`}
                                disabled={pending}
                                onClick={() => runWorkloadAction(resource, stopped ? 'start' : 'stop')}
                              >
                                {stopped ? <Play className="size-4" /> : <Square className="size-3.5" />}
                              </Button>
                              <Button
                                variant="outline"
                                className="size-8 border-rose-500/50 px-0 text-rose-300 hover:border-rose-400 hover:bg-rose-500/10 hover:text-rose-200"
                                title="삭제"
                                aria-label={`${resource.name} 삭제`}
                                disabled={pending}
	                                onClick={(event) => {
	                                  if (blockPageAgentDestructiveClick(event)) return;
	                                  requestDeleteWorkload(resource);
	                                }}
                              >
                                <Trash2 className="size-4" />
                              </Button>
                              {resource.kind === 'StatefulSet' ? (
                                <Button
                                  variant="outline"
                                  className="size-8 border-amber-500/50 px-0 text-amber-300 hover:border-amber-400 hover:bg-amber-500/10 hover:text-amber-200"
                                  title={stopped ? '데이터 볼륨 삭제' : '중지 후 데이터 볼륨 삭제 가능'}
                                  aria-label={`${resource.name} 데이터 볼륨 삭제`}
                                  disabled={pending || !stopped}
	                                  onClick={(event) => {
	                                    if (blockPageAgentDestructiveClick(event)) return;
	                                    requestDeleteVolume(resource);
	                                  }}
                                >
                                  <Database className="size-4" />
                                </Button>
                              ) : null}
                            </div>
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
            </Card>
          </div>
        ) : !isAppsLoading ? (
          <Card className="px-5 py-8 text-center text-sm text-muted-foreground">
            등록된 앱을 선택해주세요.
          </Card>
        ) : null}
      </div>

      {isCreateAppOpen ? (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/55 px-4 backdrop-blur-[2px]">
          <div className="w-full max-w-lg rounded-lg border border-border bg-card shadow-xl">
            <div className="border-b border-border px-5 py-3">
              <h2 className="text-sm font-semibold">앱 그룹 등록</h2>
            </div>
            <div className="space-y-4 px-5 py-5">
              <label className="block">
                <span className="text-xs font-medium text-muted-foreground">앱 Key</span>
                <input value={newAppKey} onChange={(event) => setNewAppKey(event.target.value)} className="mt-2 h-9 w-full rounded-md border border-border bg-background px-3 text-sm outline-none focus:border-primary" />
              </label>
              <label className="block">
                <span className="text-xs font-medium text-muted-foreground">앱 이름</span>
                <input value={newAppName} onChange={(event) => setNewAppName(event.target.value)} className="mt-2 h-9 w-full rounded-md border border-border bg-background px-3 text-sm outline-none focus:border-primary" />
              </label>
              <label className="block">
                <span className="text-xs font-medium text-muted-foreground">네임스페이스</span>
                <input value={newAppNamespace} onChange={(event) => setNewAppNamespace(event.target.value)} className="mt-2 h-9 w-full rounded-md border border-border bg-background px-3 text-sm outline-none focus:border-primary" />
              </label>
              <label className="block">
                <span className="text-xs font-medium text-muted-foreground">설명</span>
                <textarea value={newAppDescription} onChange={(event) => setNewAppDescription(event.target.value)} className="mt-2 min-h-20 w-full rounded-md border border-border bg-background px-3 py-2 text-sm outline-none focus:border-primary" />
              </label>
              {appCreateStatus === 'error' ? <p className="text-xs text-rose-300">앱 등록에 실패했습니다. 중복 Key 또는 백엔드 상태를 확인하세요.</p> : null}
            </div>
            <div className="flex justify-end gap-2 border-t border-border px-5 py-3">
              <Button variant="ghost" onClick={() => setIsCreateAppOpen(false)}>취소</Button>
              <Button onClick={createApp} disabled={!newAppKey.trim() || !newAppName.trim() || appCreateStatus === 'saving'}>{appCreateStatus === 'saving' ? '등록 중' : '등록'}</Button>
            </div>
          </div>
        </div>
      ) : null}

      {isComponentOpen ? (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/55 px-4 backdrop-blur-[2px]">
          <div className="flex max-h-[88vh] w-full max-w-2xl flex-col rounded-lg border border-border bg-card shadow-xl">
            <div className="border-b border-border px-5 py-3">
              <h2 className="text-sm font-semibold">{editingComponent ? '앱 구성요소 수정' : '앱 구성요소 추가'}</h2>
            </div>
            <div className="min-h-0 space-y-4 overflow-y-auto px-5 py-5">
              <label className="block">
                <span className="text-xs font-medium text-muted-foreground">앱 그룹</span>
                <input
                  value={selectedApp?.name ?? ''}
                  readOnly
                  className="mt-2 h-9 w-full rounded-md border border-border bg-muted/40 px-3 text-sm text-muted-foreground outline-none"
                />
              </label>
              <label className="block">
                <span className="text-xs font-medium text-muted-foreground">구성요소명</span>
                <input value={componentName} onChange={(event) => setComponentName(event.target.value)} className="mt-2 h-9 w-full rounded-md border border-border bg-background px-3 text-sm outline-none focus:border-primary" />
              </label>
              <label className="block">
                <span className="text-xs font-medium text-muted-foreground">유형</span>
                <select
                  value={componentType}
                  onChange={(event) => {
                    const nextType = event.target.value;
                    setComponentType(nextType);
                    if (nextType === 'DATABASE') {
                      setComponentImageSource('DATABASE');
                      setComponentWorkloadType('StatefulSet');
                      setComponentStorageEnabled(true);
                      setComponentStorageSize((prev) => prev || '10Gi');
                      setComponentStorageMountPath((prev) => prev || '/var/lib/postgresql/data');
                    } else if (nextType === 'MIGRATION') {
                      setComponentWorkloadType('Job');
                    }
                  }}
                  className="mt-2 h-9 w-full rounded-md border border-border bg-background px-3 text-sm outline-none focus:border-primary"
                >
                  <option value="ELECTRON">ELECTRON</option>
                  <option value="CONTAINER">CONTAINER</option>
                  <option value="STATIC_WEB">STATIC_WEB</option>
                  <option value="DATABASE">DATABASE</option>
                  <option value="MIGRATION">MIGRATION</option>
                </select>
              </label>
              <div className="grid gap-3 sm:grid-cols-2">
                <label className="block">
                  <span className="text-xs font-medium text-muted-foreground">이미지 소스</span>
                  <select
                    value={componentImageSource}
                    onChange={(event) => {
                      const nextSource = event.target.value;
                      setComponentImageSource(nextSource);
                      if (nextSource === 'EXTERNAL') {
                        setComponentWorkloadType((prev) => prev === 'Job' ? 'Deployment' : prev);
                      }
                      if (nextSource === 'DATABASE') {
                        setComponentType('DATABASE');
                        setComponentWorkloadType('StatefulSet');
                        setComponentStorageEnabled(true);
                        setComponentStorageSize((prev) => prev || '10Gi');
                      }
                    }}
                    className="mt-2 h-9 w-full rounded-md border border-border bg-background px-3 text-sm outline-none focus:border-primary"
                  >
                    <option value="SOURCE">소스 빌드</option>
                    <option value="EXTERNAL">외부 이미지</option>
                    <option value="DATABASE">DB 이미지</option>
                  </select>
                </label>
                <label className="block">
                  <span className="text-xs font-medium text-muted-foreground">워크로드</span>
                  <select
                    value={componentWorkloadType}
                    onChange={(event) => {
                      const nextType = event.target.value;
                      setComponentWorkloadType(nextType);
                      if (nextType === 'StatefulSet') setComponentStorageEnabled(true);
                    }}
                    className="mt-2 h-9 w-full rounded-md border border-border bg-background px-3 text-sm outline-none focus:border-primary"
                  >
                    <option value="Deployment">Deployment</option>
                    <option value="StatefulSet">StatefulSet</option>
                    <option value="Job">Job</option>
                  </select>
                </label>
              </div>
              {componentImageSource === 'SOURCE' ? (
                <>
                  <label className="block">
                    <span className="text-xs font-medium text-muted-foreground">Repository</span>
                    <input
                      value={componentRepo}
                      onChange={(event) => setComponentRepo(event.target.value)}
                      className="mt-2 h-9 w-full rounded-md border border-border bg-background px-3 text-sm outline-none focus:border-primary"
                    />
                  </label>
                  <label className="block">
                    <span className="text-xs font-medium text-muted-foreground">기본 브랜치</span>
                    <select
                      value={componentBranch}
                      onChange={(event) => setComponentBranch(event.target.value)}
                      className="mt-2 h-9 w-full rounded-md border border-border bg-background px-3 text-sm outline-none focus:border-primary"
                    >
                      <option value="develop">develop</option>
                      <option value="release">release</option>
                      <option value="main">main</option>
                    </select>
                  </label>
                </>
              ) : (
                <label className="block">
                  <span className="text-xs font-medium text-muted-foreground">이미지명</span>
                  <input
                    value={componentExternalImage}
                    onChange={(event) => setComponentExternalImage(event.target.value)}
                    className="mt-2 h-9 w-full rounded-md border border-border bg-background px-3 font-mono text-sm outline-none focus:border-primary"
                    placeholder={componentImageSource === 'DATABASE' ? 'postgres:17' : 'gitea/gitea:1.22.6'}
                  />
                </label>
              )}
              <label className="block">
                <span className="text-xs font-medium text-muted-foreground">빌드 대상</span>
                <input
                  value={getBuildTargetForType(componentType)}
                  readOnly
                  className="mt-2 h-9 w-full rounded-md border border-border bg-muted/40 px-3 text-sm text-muted-foreground outline-none"
                />
              </label>
              <div className="rounded-md border border-border bg-muted/10 p-4">
                <div className="flex items-center justify-between gap-3">
                  <span className="text-xs font-medium text-muted-foreground">포트</span>
                  <Button
                    type="button"
                    variant="outline"
                    className="h-7 px-2 text-xs"
                    onClick={() => setComponentPorts((prev) => [...prev, emptyComponentPort()])}
                  >
                    <Plus className="size-3.5" />
                    추가
                  </Button>
                </div>
                <div className="mt-3 space-y-2">
                  {componentPorts.map((item, index) => (
                    <div key={index} className="grid min-w-0 gap-2 sm:grid-cols-[minmax(0,1fr)_minmax(0,0.85fr)_minmax(0,0.85fr)_minmax(0,0.7fr)_2.5rem]">
                      <input
                        value={item.name}
                        onChange={(event) => setComponentPorts((prev) => prev.map((port, portIndex) => portIndex === index ? { ...port, name: event.target.value } : port))}
                        className="h-9 min-w-0 rounded-md border border-border bg-background px-3 text-sm outline-none focus:border-primary"
                        placeholder={index === 0 ? 'http' : 'ssh'}
                      />
                      <input
                        type="number"
                        min="1"
                        value={item.port}
                        onChange={(event) => setComponentPorts((prev) => prev.map((port, portIndex) => portIndex === index ? { ...port, port: event.target.value, targetPort: port.targetPort || event.target.value } : port))}
                        className="h-9 min-w-0 rounded-md border border-border bg-background px-3 text-sm outline-none focus:border-primary"
                        placeholder="서비스 포트"
                      />
                      <input
                        type="number"
                        min="1"
                        value={item.targetPort}
                        onChange={(event) => setComponentPorts((prev) => prev.map((port, portIndex) => portIndex === index ? { ...port, targetPort: event.target.value } : port))}
                        className="h-9 min-w-0 rounded-md border border-border bg-background px-3 text-sm outline-none focus:border-primary"
                        placeholder="컨테이너 포트"
                      />
                      <select
                        value={item.protocol}
                        onChange={(event) => setComponentPorts((prev) => prev.map((port, portIndex) => portIndex === index ? { ...port, protocol: event.target.value } : port))}
                        className="h-9 min-w-0 rounded-md border border-border bg-background px-2 text-sm outline-none focus:border-primary"
                      >
                        <option value="TCP">TCP</option>
                        <option value="UDP">UDP</option>
                      </select>
                      <Button
                        type="button"
                        variant="ghost"
                        className="size-9 justify-self-end px-0 text-rose-300"
                        disabled={componentPorts.length === 1}
	                        onClick={(event) => {
	                          if (blockPageAgentDestructiveClick(event)) return;
	                          setComponentPorts((prev) => prev.filter((_, portIndex) => portIndex !== index));
	                        }}
                        title="포트 삭제"
                        aria-label="포트 삭제"
                      >
                        <Trash2 className="size-4" />
                      </Button>
                    </div>
                  ))}
                </div>
              </div>
              <div className="grid gap-3 sm:grid-cols-2">
                <label className="block">
                  <span className="text-xs font-medium text-muted-foreground">복제 수</span>
                  <input
                    type="number"
                    min="0"
                    value={componentReplicas}
                    onChange={(event) => setComponentReplicas(event.target.value)}
                    className="mt-2 h-9 w-full rounded-md border border-border bg-background px-3 text-sm outline-none focus:border-primary"
                  />
                </label>
                <label className="block">
                  <span className="text-xs font-medium text-muted-foreground">서비스 타입</span>
                  <select
                    value={componentServiceType}
                    onChange={(event) => setComponentServiceType(event.target.value)}
                    className="mt-2 h-9 w-full rounded-md border border-border bg-background px-3 text-sm outline-none focus:border-primary"
                  >
                    <option value="ClusterIP">ClusterIP</option>
                    <option value="NodePort">NodePort</option>
                    <option value="LoadBalancer">LoadBalancer</option>
                  </select>
                </label>
              </div>
              <div className="rounded-md border border-border bg-muted/10 p-4">
                <label className="flex items-center gap-2 text-xs font-medium text-muted-foreground">
                  <input
                    type="checkbox"
                    className="size-4 accent-primary"
                    checked={componentStorageEnabled}
                    onChange={(event) => setComponentStorageEnabled(event.target.checked)}
                  />
                  스토리지 사용
                </label>
                {componentStorageEnabled ? (
                  <div className="mt-4 grid gap-3 sm:grid-cols-2">
                    <label className="block">
                      <span className="text-xs font-medium text-muted-foreground">용량</span>
                      <input
                        value={componentStorageSize}
                        onChange={(event) => setComponentStorageSize(event.target.value)}
                        className="mt-2 h-9 w-full rounded-md border border-border bg-background px-3 text-sm outline-none focus:border-primary"
                        placeholder="10Gi"
                      />
                    </label>
                    <label className="block">
                      <span className="text-xs font-medium text-muted-foreground">마운트 경로</span>
                      <input
                        value={componentStorageMountPath}
                        onChange={(event) => setComponentStorageMountPath(event.target.value)}
                        className="mt-2 h-9 w-full rounded-md border border-border bg-background px-3 font-mono text-sm outline-none focus:border-primary"
                        placeholder={isStorageWorkload ? '/data' : '/app/data'}
                      />
                    </label>
                    <label className="flex items-center gap-2 text-xs font-medium text-muted-foreground sm:col-span-2">
                      <input
                        type="checkbox"
                        className="size-4 accent-primary"
                        checked={componentStorageRetain}
                        onChange={(event) => setComponentStorageRetain(event.target.checked)}
                      />
                      워크로드 삭제 시 데이터 보존
                    </label>
                  </div>
                ) : null}
              </div>
              {componentSaveStatus === 'error' ? <p className="text-xs text-rose-300">구성요소 저장에 실패했습니다.</p> : null}
            </div>
            <div className="flex justify-end gap-2 border-t border-border px-5 py-3">
              <Button variant="ghost" onClick={closeComponentModal}>취소</Button>
              <Button
                onClick={editingComponent ? updateComponent : createComponent}
                disabled={!selectedApp || !componentName.trim() || (componentImageSource !== 'SOURCE' && !componentExternalImage.trim()) || componentSaveStatus === 'saving'}
              >
                {componentSaveStatus === 'saving' ? '저장 중' : '저장'}
              </Button>
            </div>
          </div>
        </div>
      ) : null}

      {buildEnvComponent ? (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/55 px-4 backdrop-blur-[2px]">
          <div className="flex max-h-[86vh] w-full max-w-3xl flex-col rounded-lg border border-border bg-card shadow-xl">
            <div className="flex items-center gap-2 border-b border-border px-5 py-3">
              <Settings2 className="size-4 text-primary" />
              <div>
                <h2 className="text-sm font-semibold">빌드 환경변수</h2>
                <p className="mt-1 text-xs text-muted-foreground">{buildEnvComponent.name}</p>
              </div>
            </div>
            <div className="min-h-0 flex-1 overflow-y-auto px-5 py-5">
              {buildEnvStatus === 'loading' ? (
                <div className="rounded-md border border-border bg-background/60 px-4 py-6 text-center text-sm text-muted-foreground">
                  환경변수를 불러오는 중입니다.
                </div>
              ) : (
                <div className="space-y-3">
                  <div className="grid gap-2 text-xs font-medium text-muted-foreground sm:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_5.5rem_2.5rem]">
                    <span>키</span>
                    <span>값</span>
                    <span>비밀값</span>
                    <span />
                  </div>
                  {buildEnvVariables.map((variable, index) => (
                    <div key={variable.id ?? index} className="grid min-w-0 gap-2 sm:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_5.5rem_2.5rem]">
                      <input
                        value={variable.key}
                        onChange={(event) => setBuildEnvVariables((prev) => prev.map((item, itemIndex) => itemIndex === index ? { ...item, key: event.target.value } : item))}
                        className="h-9 min-w-0 rounded-md border border-border bg-background px-3 font-mono text-sm outline-none focus:border-primary"
                        placeholder="VITE_API_BASE_URL"
                      />
                      <input
                        value={variable.value}
                        onChange={(event) => setBuildEnvVariables((prev) => prev.map((item, itemIndex) => itemIndex === index ? { ...item, value: event.target.value } : item))}
                        className="h-9 min-w-0 rounded-md border border-border bg-background px-3 font-mono text-sm outline-none focus:border-primary"
                        placeholder="https://workspace-api.autonomystudio.net/api"
                      />
                      <label className="flex h-9 items-center gap-2 rounded-md border border-border bg-background px-3 text-xs text-muted-foreground">
                        <input
                          type="checkbox"
                          className="size-4 accent-primary"
                          checked={variable.isSecret}
                          onChange={(event) => setBuildEnvVariables((prev) => prev.map((item, itemIndex) => itemIndex === index ? { ...item, isSecret: event.target.checked } : item))}
                        />
                        사용
                      </label>
                      <Button
                        type="button"
                        variant="ghost"
                        className="size-9 justify-self-end px-0 text-rose-300"
                        disabled={buildEnvVariables.length === 1}
	                        onClick={(event) => {
	                          if (blockPageAgentDestructiveClick(event)) return;
	                          setBuildEnvVariables((prev) => prev.filter((_, itemIndex) => itemIndex !== index));
	                        }}
                        title="환경변수 삭제"
                        aria-label="환경변수 삭제"
                      >
                        <Trash2 className="size-4" />
                      </Button>
                    </div>
                  ))}
                  <Button
                    type="button"
                    variant="outline"
                    className="h-8 px-3 text-xs"
                    onClick={() => setBuildEnvVariables((prev) => [...prev, emptyBuildEnvVariable()])}
                  >
                    <Plus className="size-3.5" />
                    추가
                  </Button>
                </div>
              )}
              {buildEnvStatus === 'error' ? <p className="mt-4 text-xs text-rose-300">빌드 환경변수 처리에 실패했습니다.</p> : null}
            </div>
            <div className="flex justify-end gap-2 border-t border-border px-5 py-3">
              <Button variant="ghost" onClick={closeBuildEnvModal}>취소</Button>
              <Button onClick={saveBuildEnv} disabled={buildEnvStatus === 'loading' || buildEnvStatus === 'saving'}>
                {buildEnvStatus === 'saving' ? '저장 중' : '저장'}
              </Button>
            </div>
          </div>
        </div>
      ) : null}

      {deletingComponent ? (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/55 px-4 backdrop-blur-[2px]">
          <div className="w-full max-w-md rounded-lg border border-border bg-card shadow-xl">
            <div className="border-b border-border px-5 py-3">
              <h2 className="text-sm font-semibold">구성요소 삭제</h2>
            </div>
            <div className="px-5 py-5 text-sm text-muted-foreground">
              <span className="font-semibold text-foreground">{deletingComponent.name}</span> 구성요소를 삭제합니다. 빌드/릴리즈 이력이 연결되어 있으면 실패할 수 있습니다.
            </div>
            <div className="flex justify-end gap-2 border-t border-border px-5 py-3">
              <Button variant="ghost" onClick={() => setDeletingComponent(null)}>취소</Button>
              <Button
                variant="secondary"
                onClick={(event) => {
                  if (blockPageAgentDestructiveClick(event)) return;
                  deleteComponent();
                }}
              >
                삭제
              </Button>
            </div>
          </div>
        </div>
      ) : null}

      {deletingApp ? (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/55 px-4 backdrop-blur-[2px]">
          <div className="w-full max-w-xl rounded-lg border border-border bg-card shadow-xl">
            <div className="flex items-center gap-2 border-b border-border px-5 py-3">
              <Trash2 className="size-4 text-rose-300" />
              <h2 className="text-sm font-semibold">앱 폐기</h2>
            </div>
            <div className="space-y-4 px-5 py-6 text-sm">
              <p className="text-muted-foreground">
                <span className="font-semibold text-foreground">{deletingApp.name}</span> 앱을 목록에서 삭제하고 선택한 운영 리소스를 정리합니다.
              </p>
              <div className="space-y-2 rounded-md border border-border bg-muted/20 p-3">
                {[
                  ['unlinkSources', '저장소 연결 정보 삭제'],
                  ['deleteRuntimeSettings', '실행 설정 삭제'],
                  ['scaleDownWorkloads', 'Kubernetes 워크로드 중지'],
                  ['deleteKubernetesResources', 'Kubernetes 리소스 삭제'],
                  ['deletePersistentVolumes', 'PVC/데이터 볼륨 삭제']
                ].map(([key, label]) => {
                  const optionKey = key as keyof typeof appDeleteOptions;
                  const disabled = optionKey === 'deletePersistentVolumes' && !appDeleteOptions.deleteKubernetesResources;

                  return (
                    <label key={key} className={cn('flex items-center gap-2 text-sm', disabled && 'opacity-50')}>
                      <input
                        type="checkbox"
                        checked={appDeleteOptions[optionKey]}
                        disabled={disabled}
                        onChange={(event) => updateAppDeleteOption(optionKey, event.target.checked)}
                        className="size-4 accent-primary"
                      />
                      {label}
                    </label>
                  );
                })}
              </div>
              <div className="rounded-md border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-xs leading-5 text-amber-200">
                PVC/데이터 볼륨 삭제는 되돌릴 수 없습니다. DB 데이터 백업을 확인한 경우에만 선택하세요.
              </div>
              {appDeleteStatus === 'error' ? (
                <p className="text-xs text-rose-300">앱 폐기에 실패했습니다. 백엔드 로그와 Kubernetes 권한을 확인하세요.</p>
              ) : null}
            </div>
            <div className="flex justify-end gap-2 border-t border-border px-5 py-3">
              <Button variant="ghost" onClick={() => setDeletingApp(null)} disabled={appDeleteStatus === 'deleting'}>취소</Button>
              <Button
                variant="outline"
                className="border-rose-500/50 text-rose-300 hover:border-rose-400 hover:bg-rose-500/10 hover:text-rose-200"
                onClick={(event) => {
                  if (blockPageAgentDestructiveClick(event)) return;
                  deleteApp();
                }}
                disabled={appDeleteStatus === 'deleting'}
              >
                {appDeleteStatus === 'deleting' ? '폐기 중' : '폐기'}
              </Button>
            </div>
          </div>
        </div>
      ) : null}

      {deletingWorkload ? (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/55 px-4 backdrop-blur-[2px]">
          <div className="w-full max-w-lg rounded-lg border border-border bg-card shadow-xl">
            <div className="border-b border-border px-5 py-3">
              <h2 className="text-sm font-semibold">워크로드 삭제</h2>
            </div>
            <div className="space-y-4 px-5 py-5 text-sm">
              <p className="text-muted-foreground">
                워크로드를 삭제합니다. 앱 구성요소는 남아 있으며, 필요하면 삭제 완료 후 앱 구성요소에서 별도로 삭제하세요.
              </p>
              <div className="rounded-md border border-border bg-background/70 p-4">
                <div className="grid gap-3 text-xs md:grid-cols-2">
                  <div>
                    <p className="text-muted-foreground">대상</p>
                    <p className="mt-1 font-mono text-foreground">{deletingWorkload.name}</p>
                  </div>
                  <div>
                    <p className="text-muted-foreground">유형</p>
                    <p className="mt-1 text-foreground">{deletingWorkload.kind}</p>
                  </div>
                  <div>
                    <p className="text-muted-foreground">네임스페이스</p>
                    <p className="mt-1 font-mono text-foreground">{selectedApp?.namespace || '-'}</p>
                  </div>
                  <div>
                    <p className="text-muted-foreground">준비 상태</p>
                    <p className="mt-1 text-foreground">{deletingWorkload.ready}</p>
                  </div>
                </div>
              </div>
              <label className="flex items-center gap-2 text-sm text-muted-foreground">
                <input
                  type="checkbox"
                  className="size-4 accent-primary"
                  checked={deleteServiceWithWorkload}
                  onChange={(event) => setDeleteServiceWithWorkload(event.target.checked)}
                />
                관련 Service도 함께 삭제
              </label>
              <div className="rounded-md border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-xs leading-5 text-amber-200">
                ConfigMap/Secret은 삭제하지 않습니다. StatefulSet의 PVC도 기본 삭제하지 않으므로 DB 데이터는 별도 백업 확인 후 처리하세요.
              </div>
            </div>
            <div className="flex justify-end gap-2 border-t border-border px-5 py-3">
              <Button variant="ghost" onClick={() => setDeletingWorkload(null)}>취소</Button>
              <Button
                variant="outline"
                className="border-rose-500/50 text-rose-300 hover:border-rose-400 hover:bg-rose-500/10 hover:text-rose-200"
                disabled={workloadActionKey === `delete-${deletingWorkload.kind}-${deletingWorkload.name}`}
                onClick={(event) => {
                  if (blockPageAgentDestructiveClick(event)) return;
                  confirmDeleteWorkload();
                }}
              >
                삭제
              </Button>
            </div>
          </div>
        </div>
      ) : null}

      {deletingVolumeWorkload ? (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/55 px-4 backdrop-blur-[2px]">
          <div className="w-full max-w-xl rounded-lg border border-border bg-card shadow-xl">
            <div className="flex items-center gap-2 border-b border-border px-5 py-3">
              <Trash2 className="size-4 text-rose-300" />
              <h2 className="text-sm font-semibold">데이터 볼륨 삭제</h2>
            </div>
            <div className="space-y-4 px-5 py-5 text-sm">
              <p className="text-muted-foreground">
                선택한 DB 워크로드의 PVC를 삭제합니다. 이 작업은 저장된 데이터 삭제로 이어지며 되돌릴 수 없습니다.
              </p>
              <div className="rounded-md border border-border bg-background/70 p-4">
                <div className="grid gap-3 text-xs md:grid-cols-2">
                  <div>
                    <p className="text-muted-foreground">워크로드</p>
                    <p className="mt-1 font-mono text-foreground">{deletingVolumeWorkload.name}</p>
                  </div>
                  <div>
                    <p className="text-muted-foreground">네임스페이스</p>
                    <p className="mt-1 font-mono text-foreground">{selectedApp?.namespace || '-'}</p>
                  </div>
                  <div>
                    <p className="text-muted-foreground">상태</p>
                    <p className="mt-1 text-foreground">{runtimeStatusLabel(deletingVolumeWorkload, isStoppedResource(deletingVolumeWorkload))}</p>
                  </div>
                  <div>
                    <p className="text-muted-foreground">준비 상태</p>
                    <p className="mt-1 text-foreground">{deletingVolumeWorkload.ready}</p>
                  </div>
                </div>
              </div>

              <label className="block">
                <span className="text-xs font-medium text-muted-foreground">삭제할 데이터 볼륨</span>
                <select
                  className="mt-2 h-9 w-full rounded-md border border-input bg-background px-3 text-sm text-foreground outline-none focus:ring-2 focus:ring-ring"
                  value={selectedVolumeClaimName}
                  disabled={volumeDeleteStatus === 'loading' || volumeClaims.length === 0}
                  onChange={(event) => {
                    setSelectedVolumeClaimName(event.target.value);
                    setVolumeDeleteConfirmText('');
                  }}
                >
                  {volumeDeleteStatus === 'loading' ? <option value="">조회 중</option> : null}
                  {volumeClaims.length === 0 && volumeDeleteStatus !== 'loading' ? <option value="">연결된 PVC 없음</option> : null}
                  {volumeClaims.map((claim) => (
                    <option key={claim.name} value={claim.name}>{claim.name}</option>
                  ))}
                </select>
              </label>

              {selectedVolumeClaim ? (
                <div className="rounded-md border border-border bg-background/70 p-4">
                  <div className="grid gap-3 text-xs md:grid-cols-2">
                    <div>
                      <p className="text-muted-foreground">용량</p>
                      <p className="mt-1 text-foreground">{selectedVolumeClaim.capacity || '-'}</p>
                    </div>
                    <div>
                      <p className="text-muted-foreground">상태</p>
                      <p className="mt-1 text-foreground">{selectedVolumeClaim.status || '-'}</p>
                    </div>
                    <div>
                      <p className="text-muted-foreground">스토리지 클래스</p>
                      <p className="mt-1 text-foreground">{selectedVolumeClaim.storageClass || '-'}</p>
                    </div>
                    <div>
                      <p className="text-muted-foreground">접근 모드</p>
                      <p className="mt-1 text-foreground">{selectedVolumeClaim.accessModes?.join(', ') || '-'}</p>
                    </div>
                  </div>
                </div>
              ) : null}

              <label className="flex items-center gap-2 rounded-md border border-border bg-muted/20 px-3 py-2 text-sm text-muted-foreground">
                <input
                  type="checkbox"
                  className="size-4 accent-primary"
                  checked={volumeDeleteBackupChecked}
                  onChange={(event) => setVolumeDeleteBackupChecked(event.target.checked)}
                />
                백업 여부를 확인했습니다.
              </label>

              <label className="block">
                <span className="text-xs font-medium text-muted-foreground">
                  확인 문구 입력: <b className="font-mono text-foreground">{volumeDeleteConfirmPhrase || '-'}</b>
                </span>
                <input
                  className="mt-2 h-9 w-full rounded-md border border-input bg-background px-3 text-sm text-foreground outline-none placeholder:text-muted-foreground focus:ring-2 focus:ring-ring"
                  value={volumeDeleteConfirmText}
                  onChange={(event) => setVolumeDeleteConfirmText(event.target.value)}
                  placeholder={volumeDeleteConfirmPhrase || '삭제할 PVC를 선택하세요'}
                />
              </label>

              <div className="rounded-md border border-rose-500/30 bg-rose-500/10 px-3 py-2 text-xs leading-5 text-rose-200">
                PVC를 삭제하면 해당 DB 데이터가 삭제됩니다. 워크로드가 다시 시작되면 빈 볼륨으로 생성될 수 있습니다.
              </div>
            </div>
            <div className="flex justify-end gap-2 border-t border-border px-5 py-3">
              <Button variant="ghost" onClick={closeVolumeDeleteModal}>취소</Button>
              <Button
                variant="outline"
                className="border-rose-500/50 text-rose-300 hover:border-rose-400 hover:bg-rose-500/10 hover:text-rose-200"
                disabled={!canDeleteVolume}
	                onClick={(event) => {
	                  if (blockPageAgentDestructiveClick(event)) return;
	                  confirmDeleteVolume();
	                }}
              >
                {volumeDeleteStatus === 'deleting' ? '삭제 중' : '삭제'}
              </Button>
            </div>
          </div>
        </div>
      ) : null}

      <LoadingModal open={appsLoadingVisible} />
    </>
  );
}