import { useEffect, useMemo, useState } from 'react';
import { Plus, RotateCcw, Square, Trash2 } from 'lucide-react';
import { Badge, Button, Card, Modal } from '../../components/ui';
import { useToast } from '../../components/toast';
import { PageTitle } from '../../layout/AppLayout';
import { formatDateTime } from '../../lib/date-format';
import { getStoredSelectedAppId, getStoredSelectedComponentId, selectedComponentChangedEventName, setStoredSelectedAppId, setStoredSelectedComponentId } from '../../lib/selected-app';
import { statusDotToneClass } from '../../lib/status-dot';
import type { ApiApp, ApiAppComponent, RuntimeEnvProfile, RuntimeEnvVariable, RuntimeIngressRule, RuntimeResource } from '../../types/runtime';
import { LoadingModal, useMinimumLoading } from '../operations/operation-utils';
import {
  applyRuntimeProfile,
  createRuntimeIngressRule,
  createRuntimeProfile,
  createRuntimeVariable,
  deleteRuntimeIngressRule,
  deleteRuntimeVariable,
  loadApps,
  loadRuntimeProfiles,
  loadRuntimeResources,
  restartRuntimeWorkload,
  scaleRuntimeWorkload
} from './runtime-api';

function environmentLabel(value?: string) {
  return {
    dev: '개발',
    stage: '검수',
    prod: '운영'
  }[value ?? ''] ?? value ?? '-';
}

function formatDate(value?: string | null) {
  return formatDateTime(value);
}

function getWorkloadKind(kind: string) {
  if (kind === 'Deployment') return 'deployment';
  if (kind === 'StatefulSet') return 'statefulset';
  if (kind === 'DaemonSet') return 'daemonset';
  return '';
}

function isStopped(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 (resource.status === 'Error' || resource.status === 'CrashLoopBackOff' || resource.status === 'ImagePullBackOff' || resource.status === 'Failed') 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 (resource.status === 'Error' || resource.status === 'CrashLoopBackOff' || resource.status === 'ImagePullBackOff' || resource.status === 'Failed') return 'red';
  return 'blue';
}

function preferredComponentId(appId: string, components: ApiAppComponent[]) {
  const storedComponentId = getStoredSelectedComponentId(appId);
  return components.some((component) => component.id === storedComponentId)
    ? storedComponentId
    : components[0]?.id ?? '';
}

export function RuntimeConfigPage() {
  const { toast } = useToast();
  const [apps, setApps] = useState<ApiApp[]>([]);
  const [appId, setAppId] = useState('');
  const [profiles, setProfiles] = useState<RuntimeEnvProfile[]>([]);
  const [profileId, setProfileId] = useState('');
  const [resources, setResources] = useState<RuntimeResource[]>([]);
  const [resourceCount, setResourceCount] = useState(0);
  const [loading, setLoading] = useState(true);
  const [actionKey, setActionKey] = useState('');
  const [error, setError] = useState('');
  const [profileModalOpen, setProfileModalOpen] = useState(false);
  const [deleteVariableTarget, setDeleteVariableTarget] = useState<RuntimeEnvVariable | null>(null);
  const [deleteIngressTarget, setDeleteIngressTarget] = useState<RuntimeIngressRule | null>(null);
  const loadingVisible = useMinimumLoading(loading);

  const [profileName, setProfileName] = useState('');
  const [profileEnvironment, setProfileEnvironment] = useState('dev');
  const [profileNamespace, setProfileNamespace] = useState('');
  const [variableComponentId, setVariableComponentId] = useState('');
  const [variableKey, setVariableKey] = useState('');
  const [variableValue, setVariableValue] = useState('');
  const [variableIsSecret, setVariableIsSecret] = useState(false);
  const [ingressComponentId, setIngressComponentId] = useState('');
  const [ingressHost, setIngressHost] = useState('');
  const [ingressPath, setIngressPath] = useState('/');
  const [ingressPort, setIngressPort] = useState('');
  const [ingressStripPrefix, setIngressStripPrefix] = useState(false);

  const selectedApp = apps.find((app) => app.id === appId);
  const selectedProfile = profiles.find((profile) => profile.id === profileId);
  const components = selectedApp?.components ?? [];
  const variables = selectedProfile?.variables ?? [];
  const ingressRules = selectedProfile?.ingressRules ?? [];
  const namespace = selectedProfile?.namespace || selectedApp?.namespace || profileNamespace || '';
  const workloads = resources.filter((resource) => ['Deployment', 'StatefulSet', 'DaemonSet'].includes(resource.kind));
  const envCount = variables.filter((variable) => !variable.isSecret).length;
  const secretCount = variables.filter((variable) => variable.isSecret).length;

  const selectedProfileLabel = selectedProfile
    ? `${selectedApp?.name ?? '앱'}${environmentLabel(selectedProfile.environment)} / ${environmentLabel(selectedProfile.environment)}`
    : '프로필 없음';

  const namespaceOptions = useMemo(() => [...new Set(apps.map((app) => app.namespace).filter(Boolean) as string[])], [apps]);
  const duplicateProfile = profiles.find((profile) => (
    profile.environment === profileEnvironment &&
    profile.namespace.trim() === profileNamespace.trim()
  ));

  const refreshResources = (targetNamespace = namespace) => {
    if (!targetNamespace.trim()) {
      setResourceCount(0);
      return;
    }

    loadRuntimeResources(targetNamespace)
      .then((data) => {
        setResources(data.resources);
        setResourceCount(data.resources.length);
      })
      .catch(() => {
        setResources([]);
        setResourceCount(0);
      });
  };

  const applyProfiles = (nextProfiles: RuntimeEnvProfile[], preferredProfileId?: string) => {
    setProfiles(nextProfiles);
    setProfileId((current) => {
      const nextId = preferredProfileId || (nextProfiles.some((profile) => profile.id === current) ? current : nextProfiles[0]?.id ?? '');
      const nextProfile = nextProfiles.find((profile) => profile.id === nextId);
      if (nextProfile) {
        setProfileNamespace(nextProfile.namespace);
        refreshResources(nextProfile.namespace);
      }
      return nextId;
    });
  };

  const refreshProfiles = (targetAppId = appId, preferredProfileId?: string) => {
    if (!targetAppId) return Promise.resolve();
    return loadRuntimeProfiles(targetAppId).then((nextProfiles) => applyProfiles(nextProfiles, preferredProfileId));
  };

  useEffect(() => {
    setLoading(true);
    loadApps()
      .then((nextApps) => {
        const storedAppId = getStoredSelectedAppId();
        const nextAppId = nextApps.some((app) => app.id === storedAppId) ? storedAppId : nextApps[0]?.id ?? '';
        const nextApp = nextApps.find((app) => app.id === nextAppId);
        const nextComponentId = preferredComponentId(nextAppId, nextApp?.components ?? []);
        setApps(nextApps);
        setAppId(nextAppId);
        setProfileNamespace(nextApp?.namespace ?? '');
        setVariableComponentId(nextComponentId);
        setIngressComponentId(nextComponentId);
        if (nextComponentId) setStoredSelectedComponentId(nextAppId, nextComponentId);
        setIngressPort('');
        return nextAppId ? loadRuntimeProfiles(nextAppId) : Promise.resolve([]);
      })
      .then((nextProfiles) => applyProfiles(nextProfiles))
      .catch((loadError: Error) => setError(loadError.message))
      .finally(() => setLoading(false));
  }, []);

  const changeApp = (nextAppId: string) => {
    const nextApp = apps.find((app) => app.id === nextAppId);
    const nextComponentId = preferredComponentId(nextAppId, nextApp?.components ?? []);
    setStoredSelectedAppId(nextAppId);
    setAppId(nextAppId);
    setProfileNamespace(nextApp?.namespace ?? '');
    setVariableComponentId(nextComponentId);
    setIngressComponentId(nextComponentId);
    if (nextComponentId) setStoredSelectedComponentId(nextAppId, nextComponentId);
    setIngressPort('');
    refreshProfiles(nextAppId).catch((loadError: Error) => setError(loadError.message));
  };

  useEffect(() => {
    const storedComponentId = preferredComponentId(appId, components);
    if (!storedComponentId) return;
    if (variableComponentId !== storedComponentId) setVariableComponentId(storedComponentId);
    if (ingressComponentId !== storedComponentId) setIngressComponentId(storedComponentId);
  }, [appId, components, ingressComponentId, variableComponentId]);

  useEffect(() => {
    const handleSelectedComponentChange = (event: Event) => {
      const detail = (event as CustomEvent<{ appId?: string; componentId?: string }>).detail;
      if (detail?.appId !== appId || !detail.componentId) return;
      if (!components.some((component) => component.id === detail.componentId)) return;
      setVariableComponentId(detail.componentId);
      setIngressComponentId(detail.componentId);
      setIngressPort('');
    };

    window.addEventListener(selectedComponentChangedEventName, handleSelectedComponentChange);
    return () => window.removeEventListener(selectedComponentChangedEventName, handleSelectedComponentChange);
  }, [appId, components]);

  const addProfile = () => {
    if (!appId || !profileName.trim() || !profileNamespace.trim()) return;
    if (duplicateProfile) {
      const message = `이미 ${environmentLabel(profileEnvironment)} / ${profileNamespace.trim()} 실행 설정이 있습니다.`;
      setError(message);
      toast({
        type: 'warning',
        title: '프로필 중복',
        message: '기존 프로필을 선택해 설정값을 수정하세요.'
      });
      return;
    }

    createRuntimeProfile({
      appId,
      name: profileName.trim(),
      environment: profileEnvironment,
      namespace: profileNamespace.trim()
    })
      .then(({ profile }) => {
        setProfileName('');
        setProfileModalOpen(false);
        refreshProfiles(appId, profile.id);
      })
      .catch((createError: Error) => setError(createError.message));
  };

  const addVariable = () => {
    if (!selectedProfile || !variableComponentId || !variableKey.trim() || !variableValue.trim()) return;
    const profile = selectedProfile;
    const key = variableKey.trim();
    setError('');
    setActionKey(`variable-add-${profile.id}`);
    createRuntimeVariable(selectedProfile.id, {
      componentId: variableComponentId,
      key,
      value: variableValue.trim(),
      isSecret: variableIsSecret
    })
      .then(() => applyRuntimeProfile(profile.id))
      .then(() => {
        setVariableKey('');
        setVariableValue('');
        setVariableIsSecret(false);
        toast({
          type: 'success',
          title: '설정값 등록',
          message: `${key} 설정값을 추가하고 클러스터 설정에 반영했습니다.`
        });
        refreshResources(profile.namespace);
        refreshProfiles(appId, profile.id);
      })
      .catch((createError: Error) => {
        setError(createError.message);
        toast({ type: 'error', title: '설정값 등록 실패', message: createError.message });
      })
      .finally(() => setActionKey(''));
  };

  const removeVariable = (variableId: string) => {
    if (!selectedProfile) return;
    const profile = selectedProfile;
    setActionKey(`variable-delete-${variableId}`);
    deleteRuntimeVariable(profile.id, variableId)
      .then(() => applyRuntimeProfile(profile.id))
      .then(() => {
        toast({ type: 'success', title: '설정값 삭제', message: '설정값을 삭제하고 클러스터 설정에 반영했습니다.' });
        refreshResources(profile.namespace);
        refreshProfiles(appId, profile.id);
      })
      .catch((deleteError: Error) => {
        setError(deleteError.message);
        toast({ type: 'error', title: '설정값 삭제 실패', message: deleteError.message });
      })
      .finally(() => setActionKey(''));
  };

  const addIngressRule = () => {
    if (!selectedProfile || !ingressComponentId || !ingressHost.trim() || !ingressPort.trim()) return;
    const profile = selectedProfile;
    const host = ingressHost.trim();
    setActionKey(`ingress-add-${profile.id}`);
    createRuntimeIngressRule(profile.id, {
      componentId: ingressComponentId,
      host,
      path: ingressPath.trim() || '/',
      servicePort: Number(ingressPort),
      stripPrefix: ingressStripPrefix,
      tlsEnabled: false
    })
      .then(() => applyRuntimeProfile(profile.id))
      .then(() => {
        setIngressHost('');
        setIngressPath('/');
        setIngressStripPrefix(false);
        toast({ type: 'success', title: '접속 설정 등록', message: `${host} 접속 설정을 추가하고 클러스터 설정에 반영했습니다.` });
        refreshResources(profile.namespace);
        refreshProfiles(appId, profile.id);
      })
      .catch((createError: Error) => {
        setError(createError.message);
        toast({ type: 'error', title: '접속 설정 등록 실패', message: createError.message });
      })
      .finally(() => setActionKey(''));
  };

  const removeIngressRule = (ruleId: string) => {
    if (!selectedProfile) return;
    const profile = selectedProfile;
    setActionKey(`ingress-delete-${ruleId}`);
    deleteRuntimeIngressRule(profile.id, ruleId)
      .then(() => applyRuntimeProfile(profile.id))
      .then(() => {
        toast({ type: 'success', title: '접속 설정 삭제', message: '접속 설정을 삭제하고 클러스터 설정에 반영했습니다.' });
        refreshResources(profile.namespace);
        refreshProfiles(appId, profile.id);
      })
      .catch((deleteError: Error) => {
        setError(deleteError.message);
        toast({ type: 'error', title: '접속 설정 삭제 실패', message: deleteError.message });
      })
      .finally(() => setActionKey(''));
  };

  const runWorkloadAction = (resource: RuntimeResource, action: 'restart' | 'start' | 'stop') => {
    const apiKind = getWorkloadKind(resource.kind);
    if (!apiKind || !namespace) return;
    const key = `${action}-${resource.kind}-${resource.name}`;
    setActionKey(key);
    setError('');

    const request = action === 'restart'
      ? restartRuntimeWorkload(namespace, apiKind, resource.name)
      : scaleRuntimeWorkload(namespace, apiKind, resource.name, action === 'start' ? 1 : 0);

    request
      .then(() => {
        toast({
          type: 'success',
          title: action === 'restart' ? '워크로드 재시작' : action === 'start' ? '워크로드 시작' : '워크로드 중지',
          message: `${resource.name} 작업을 요청했습니다.`
        });
        refreshResources(namespace);
      })
      .catch((workloadError: Error) => {
        setError(workloadError.message);
        toast({ type: 'error', title: '워크로드 제어 실패', message: workloadError.message });
      })
      .finally(() => setActionKey(''));
  };

  const requestDeleteWorkload = () => {
    toast({
      type: 'warning',
      title: '삭제 API 미구현',
      message: '워크로드 삭제는 백엔드 delete 엔드포인트 추가 후 연결할 수 있습니다.'
    });
  };

  return (
    <>
      <PageTitle
        eyebrow="어플리케이션"
        title="실행 설정"
        description="앱 구성요소별 환경변수와 시크릿을 프로필로 묶어 배포 환경에 적용합니다."
        actions={(
          <Button className="h-8 px-3 text-[13px]" onClick={() => setProfileModalOpen(true)} disabled={!appId}>
            <Plus className="size-4" />
            프로필 생성
          </Button>
        )}
      />

      {error ? <div className="mb-4 rounded-md border border-rose-500/30 bg-rose-950/30 px-4 py-3 text-sm text-rose-200">{error}</div> : null}

      <div className="space-y-4">
        <Card className="p-5">
          <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
            <div>
              <p className="text-sm font-semibold">앱 선택</p>
              <p className="mt-1 text-xs text-muted-foreground">설정값을 관리할 앱 그룹을 선택합니다.</p>
            </div>
            <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
              <select
                className="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 sm:w-72"
                value={appId}
                disabled={loading || apps.length === 0}
                onChange={(event) => changeApp(event.target.value)}
              >
                {apps.length === 0 ? <option value="">등록된 앱 없음</option> : null}
                {apps.map((app) => <option key={app.id} value={app.id}>{app.name}</option>)}
              </select>
              <Badge>{namespace || '-'}</Badge>
              <Badge>구성요소 {components.length}</Badge>
              <Badge>프로필 {profiles.length}</Badge>
            </div>
          </div>
        </Card>

        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
          <Card className="p-5">
            <p className="text-sm text-muted-foreground">네임스페이스</p>
            <p className="mt-4 text-2xl font-medium text-foreground">{namespace || '-'}</p>
          </Card>
          <Card className="p-5">
            <p className="text-sm text-muted-foreground">구성요소</p>
            <p className="mt-4 text-2xl font-medium text-foreground">{components.length}개</p>
          </Card>
          <Card className="p-5">
            <p className="text-sm text-muted-foreground">환경변수</p>
            <p className="mt-4 text-2xl font-medium text-foreground">{envCount}개</p>
          </Card>
          <Card className="p-5">
            <p className="text-sm text-muted-foreground">시크릿</p>
            <p className="mt-4 text-2xl font-medium text-foreground">{secretCount}개</p>
          </Card>
        </div>

        <Card className="min-w-0 overflow-hidden">
          <div className="flex items-start justify-between gap-4 border-b border-border px-5 py-4">
            <div>
              <h2 className="text-sm font-semibold text-foreground">런타임 프로필</h2>
              <p className="mt-1 text-xs leading-5 text-muted-foreground">개발과 운영처럼 배포 환경별로 적용할 설정 묶음입니다.</p>
            </div>
            <span className="text-xs text-muted-foreground">총 {profiles.length}개</span>
          </div>
          <div className="max-h-[260px] space-y-3 overflow-y-auto p-4">
            {profiles.length === 0 ? (
              <div className="flex min-h-28 items-center justify-center text-center text-sm text-muted-foreground">
                등록된 런타임 프로필이 없습니다.
              </div>
            ) : profiles.map((profile) => (
              <div
                key={profile.id}
                role="button"
                tabIndex={0}
                className={[
                  'w-full cursor-pointer rounded-md border px-4 py-3 text-left transition-colors',
                  profile.id === profileId
                    ? 'border-border bg-primary/15 shadow-[inset_4px_0_0_var(--color-primary)]'
                    : 'border-border bg-background/70 hover:bg-muted/20'
                ].join(' ')}
                onClick={() => {
                  setProfileId(profile.id);
                  setProfileNamespace(profile.namespace);
                  refreshResources(profile.namespace);
                }}
                onKeyDown={(event) => {
                  if (event.key !== 'Enter' && event.key !== ' ') return;
                  setProfileId(profile.id);
                  setProfileNamespace(profile.namespace);
                  refreshResources(profile.namespace);
                }}
              >
                <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
                  <div className="min-w-0">
                    <div className="flex flex-wrap items-center gap-2">
                      <span className="text-sm font-medium text-foreground">{profile.name}</span>
                      <Badge tone="blue">{environmentLabel(profile.environment)}</Badge>
                      <span className="text-xs text-muted-foreground">{profile.namespace}</span>
                    </div>
                    <div className="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
                      <span>환경변수 <b className="text-foreground">{profile.variables?.filter((variable) => !variable.isSecret).length ?? 0}</b></span>
                      <span>시크릿 <b className="text-foreground">{profile.variables?.filter((variable) => variable.isSecret).length ?? 0}</b></span>
                      <span>수정 <b className="text-foreground">{formatDate(profile.updatedAt ?? profile.createdAt)}</b></span>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </Card>

        <div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_380px]">
          <Card className="min-w-0 overflow-hidden">
            <div className="flex items-start justify-between gap-4 border-b border-border px-5 py-4">
              <div>
                <h2 className="text-sm font-semibold text-foreground">설정값</h2>
                <p className="mt-1 text-xs leading-5 text-muted-foreground">구성요소별로 ConfigMap 또는 Secret에 반영될 항목입니다.</p>
              </div>
              <span className="text-xs text-muted-foreground">총 {variables.length}개</span>
            </div>
            <div className="max-h-[480px] overflow-y-auto">
              <table className="w-full table-fixed text-left text-sm">
                <colgroup>
                  <col className="w-[22%]" />
                  <col className="w-[30%]" />
                  <col />
                  <col className="w-20" />
                </colgroup>
                <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">Key</th>
                    <th className="px-5 py-3 font-medium">Value</th>
                    <th className="w-16 px-5 py-3 text-right font-medium">관리</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-border">
                  {variables.length === 0 ? (
                    <tr><td colSpan={4} className="px-5 py-14 text-center text-muted-foreground">등록된 설정값이 없습니다.</td></tr>
                  ) : null}
                  {variables.map((variable) => (
                    <tr key={variable.id} className="hover:bg-muted/20">
                      <td className="px-4 py-3">
                        <span className="inline-flex items-center gap-2">
                          <span className={`block size-2.5 shrink-0 rounded-full ${variable.isSecret ? statusDotToneClass('amber') : statusDotToneClass('green')}`} />
                          <span className="truncate">{variable.component?.name ?? '-'}</span>
                        </span>
                      </td>
                      <td className="break-all px-4 py-3 font-mono text-xs font-medium text-foreground">{variable.key}</td>
                      <td className="break-all px-4 py-3 font-mono text-xs text-muted-foreground">{variable.isSecret ? '********' : variable.value}</td>
                      <td className="px-3 py-3 text-right">
                        <Button variant="ghost" className="h-8 w-8 p-0 text-rose-300 hover:text-rose-200" title="삭제" aria-label={`${variable.key} 삭제`} onClick={() => setDeleteVariableTarget(variable)} disabled={Boolean(actionKey)}>
                          <Trash2 className="size-4" />
                        </Button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </Card>

          <Card className="p-5">
            <p className="text-sm font-semibold">설정값 추가</p>
            <p className="mt-1 text-xs leading-5 text-muted-foreground">선택한 프로필에 구성요소별 환경변수 또는 시크릿을 추가합니다.</p>
            <div className="mt-5 space-y-4">
              <label className="block">
                <span className="text-xs font-medium text-muted-foreground">프로필</span>
                <input className="mt-2 h-9 w-full rounded-md border border-input bg-muted px-3 text-sm text-foreground outline-none" value={selectedProfileLabel} readOnly />
              </label>
              <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={variableComponentId}
                  onChange={(event) => {
                    const nextId = event.target.value;
                    setVariableComponentId(nextId);
                    setStoredSelectedComponentId(appId, nextId);
                  }}
                >
                  {components.map((component) => <option key={component.id} value={component.id}>{component.name}</option>)}
                  {components.length === 0 ? <option value="">구성요소 없음</option> : null}
                </select>
              </label>
              <label className="block">
                <span className="text-xs font-medium text-muted-foreground">Key</span>
                <div className="mt-2 flex items-center gap-2">
                  <input className="h-9 min-w-0 flex-1 rounded-md border border-input bg-background px-3 font-mono text-sm text-foreground outline-none placeholder:text-muted-foreground focus:ring-2 focus:ring-ring" value={variableKey} onChange={(event) => setVariableKey(event.target.value)} placeholder="키 입력" />
                  <label className="flex shrink-0 items-center gap-2 text-xs text-muted-foreground">
                    <input type="checkbox" className="size-4 accent-primary" checked={variableIsSecret} onChange={(event) => setVariableIsSecret(event.target.checked)} />
                    Secret
                  </label>
                </div>
              </label>
              <label className="block">
                <span className="text-xs font-medium text-muted-foreground">Value</span>
                <input
                  type={variableIsSecret ? 'password' : 'text'}
                  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 ${variableIsSecret ? 'login-password-input' : 'font-mono'}`}
                  value={variableValue}
                  onChange={(event) => setVariableValue(event.target.value)}
                  placeholder="값 입력"
                />
              </label>
              <Button className="h-9 w-full text-[13px]" onClick={addVariable} disabled={Boolean(actionKey) || !selectedProfile || !variableComponentId || !variableKey.trim() || !variableValue.trim()}>
                <Plus className="size-4" />
                {actionKey.startsWith('variable-add-') ? '저장 중' : '추가'}
              </Button>
            </div>
          </Card>
        </div>

        <div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_380px]">
          <Card className="min-w-0 overflow-hidden">
            <div className="flex items-start justify-between gap-4 border-b border-border px-5 py-4">
              <div>
                <h2 className="text-sm font-semibold text-foreground">접속 설정</h2>
                <p className="mt-1 text-xs leading-5 text-muted-foreground">배포 시 생성할 서비스와 도메인 연결 정보를 관리합니다.</p>
              </div>
              <span className="text-xs text-muted-foreground">총 {ingressRules.length}개</span>
            </div>
            <div className="max-h-[320px] overflow-y-auto">
              <table className="w-full table-fixed text-left text-sm">
                <colgroup>
                  <col className="w-[24%]" />
                  <col className="w-[32%]" />
                  <col className="w-[16%]" />
                  <col className="w-[10%]" />
                  <col className="w-[10%]" />
                  <col className="w-14" />
                </colgroup>
                <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">Path</th>
                    <th className="px-5 py-3 font-medium">포트</th>
                    <th className="px-5 py-3 font-medium">Prefix</th>
                    <th className="w-16 px-5 py-3 text-right font-medium">관리</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-border">
                  {ingressRules.length === 0 ? (
                    <tr><td colSpan={6} className="px-5 py-14 text-center text-muted-foreground">등록된 접속 설정이 없습니다.</td></tr>
                  ) : null}
                  {ingressRules.map((rule) => (
                    <tr key={rule.id} className="hover:bg-muted/20">
                      <td className="px-4 py-3">
                        <span className="inline-flex items-center gap-2">
                          <span className={`block size-2.5 shrink-0 rounded-full ${statusDotToneClass('blue')}`} />
                          <span className="truncate">{rule.component?.name ?? '-'}</span>
                        </span>
                      </td>
                      <td className="break-all px-4 py-3 text-foreground">{rule.host}</td>
                      <td className="break-all px-4 py-3 text-muted-foreground">{rule.path}</td>
                      <td className="px-4 py-3 text-muted-foreground">{rule.servicePort}</td>
                      <td className="px-4 py-3 text-muted-foreground">{rule.stripPrefix ? '제거' : '유지'}</td>
                      <td className="px-3 py-3 text-right">
                        <Button variant="ghost" className="h-8 w-8 p-0 text-rose-300 hover:text-rose-200" title="삭제" aria-label={`${rule.host} 삭제`} onClick={() => setDeleteIngressTarget(rule)} disabled={Boolean(actionKey)}>
                          <Trash2 className="size-4" />
                        </Button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </Card>

          <Card className="p-5">
            <p className="text-sm font-semibold">접속 설정 추가</p>
            <p className="mt-1 text-xs leading-5 text-muted-foreground">선택한 프로필에 도메인 연결 정보를 추가합니다.</p>
            <div className="mt-5 space-y-4">
              <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={ingressComponentId}
                  onChange={(event) => {
                    const nextId = event.target.value;
                    setIngressComponentId(nextId);
                    setStoredSelectedComponentId(appId, nextId);
                    setIngressPort('');
                  }}
                >
                  {components.map((component) => <option key={component.id} value={component.id}>{component.name}</option>)}
                  {components.length === 0 ? <option value="">구성요소 없음</option> : null}
                </select>
              </label>
              <label className="block">
                <span className="text-xs font-medium text-muted-foreground">도메인</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={ingressHost} onChange={(event) => setIngressHost(event.target.value)} placeholder="lms-api.local" />
              </label>
              <div className="grid gap-3 sm:grid-cols-2">
                <label className="block">
                  <span className="text-xs font-medium text-muted-foreground">Path</span>
                  <input 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={ingressPath} onChange={(event) => setIngressPath(event.target.value)} placeholder="/" />
                </label>
                <label className="block">
                  <span className="text-xs font-medium text-muted-foreground">서비스 포트</span>
                  <input type="number" min="1" 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={ingressPort} onChange={(event) => setIngressPort(event.target.value)} placeholder="80" />
                </label>
              </div>
              <label className="flex items-center gap-2 rounded-md border border-border bg-muted/10 px-3 py-2 text-xs font-medium text-muted-foreground">
                <input
                  type="checkbox"
                  className="size-4 accent-primary"
                  checked={ingressStripPrefix}
                  onChange={(event) => setIngressStripPrefix(event.target.checked)}
                />
                Path prefix 제거
              </label>
              <Button className="h-9 w-full text-[13px]" onClick={addIngressRule} disabled={Boolean(actionKey) || !selectedProfile || !ingressComponentId || !ingressHost.trim() || !ingressPort.trim()}>
                <Plus className="size-4" />
                {actionKey.startsWith('ingress-add-') ? '저장 중' : '추가'}
              </Button>
            </div>
          </Card>
        </div>
      </div>

      <Modal
        open={profileModalOpen}
        title="프로필 생성"
        onClose={() => setProfileModalOpen(false)}
        footer={(
          <>
            <Button variant="outline" onClick={() => setProfileModalOpen(false)}>취소</Button>
            <Button disabled={!profileName.trim() || !profileNamespace.trim() || Boolean(duplicateProfile)} onClick={addProfile}>생성</Button>
          </>
        )}
      >
        <div className="space-y-4">
          <label className="block">
            <span className="text-xs font-medium text-muted-foreground">프로필명</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={profileName} onChange={(event) => setProfileName(event.target.value)} placeholder="예: LMS개발" />
          </label>
          <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={profileEnvironment} onChange={(event) => setProfileEnvironment(event.target.value)}>
              <option value="dev">개발</option>
              <option value="prod">운영</option>
            </select>
          </label>
          <label className="block">
            <span className="text-xs font-medium text-muted-foreground">네임스페이스</span>
            <input
              list="runtime-namespace-options"
              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={profileNamespace}
              onChange={(event) => setProfileNamespace(event.target.value)}
              placeholder="stdo-lms"
            />
            <datalist id="runtime-namespace-options">
              {namespaceOptions.map((item) => <option key={item} value={item} />)}
            </datalist>
          </label>
          {duplicateProfile ? (
            <p className="rounded-md border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-xs text-amber-200">
              이미 같은 환경과 네임스페이스의 프로필이 있습니다. 기존 프로필을 선택해 설정값을 수정하세요.
            </p>
          ) : null}
        </div>
      </Modal>
      <Modal
        open={Boolean(deleteVariableTarget)}
        title="설정값 삭제"
        onClose={() => {
          if (!actionKey) setDeleteVariableTarget(null);
        }}
        footer={(
          <>
            <Button variant="outline" disabled={Boolean(actionKey)} onClick={() => setDeleteVariableTarget(null)}>취소</Button>
            <Button
              className="bg-rose-600 text-white hover:bg-rose-500"
              disabled={Boolean(actionKey)}
              onClick={() => {
                if (!deleteVariableTarget) return;
                removeVariable(deleteVariableTarget.id);
                setDeleteVariableTarget(null);
              }}
            >
              삭제
            </Button>
          </>
        )}
      >
        <div className="space-y-3 text-sm">
          <p>
            <span className="font-semibold text-foreground">{deleteVariableTarget?.key ?? '-'}</span>
            {' '}설정값을 삭제합니다.
          </p>
          <p className="text-muted-foreground">삭제 후 클러스터 설정에 바로 반영됩니다.</p>
        </div>
      </Modal>
      <Modal
        open={Boolean(deleteIngressTarget)}
        title="접속 설정 삭제"
        onClose={() => {
          if (!actionKey) setDeleteIngressTarget(null);
        }}
        footer={(
          <>
            <Button variant="outline" disabled={Boolean(actionKey)} onClick={() => setDeleteIngressTarget(null)}>취소</Button>
            <Button
              className="bg-rose-600 text-white hover:bg-rose-500"
              disabled={Boolean(actionKey)}
              onClick={() => {
                if (!deleteIngressTarget) return;
                removeIngressRule(deleteIngressTarget.id);
                setDeleteIngressTarget(null);
              }}
            >
              삭제
            </Button>
          </>
        )}
      >
        <div className="space-y-3 text-sm">
          <p>
            <span className="font-semibold text-foreground">{deleteIngressTarget?.host ?? '-'}</span>
            {' '}
            <span className="font-semibold text-foreground">{deleteIngressTarget?.path ?? ''}</span>
            {' '}접속 설정을 삭제합니다.
          </p>
          <p className="text-muted-foreground">삭제 후 클러스터 설정에 바로 반영됩니다.</p>
        </div>
      </Modal>
      <LoadingModal open={loadingVisible} />
    </>
  );
}