import { ChevronLeft, ChevronRight, MoreHorizontal, Play, Plus, RotateCcw, Trash2, Upload } from 'lucide-react';
import { useEffect, useMemo, useState } from 'react';
import { Badge, Button, Card, CardHeader, Modal } from '../../components/ui';
import { useToast } from '../../components/toast';
import { PageTitle } from '../../layout/AppLayout';
import { formatDateTime } from '../../lib/date-format';
import { LoadingModal, useMinimumLoading } from '../operations/operation-utils';
import {
  createLauncherBuildJob,
  deployLauncherBackend,
  getLauncherBackendDeployment,
  getLauncherSource,
  listLauncherBuildEnv,
  listLauncherBuildJobs,
  listLauncherBuildJobsPage,
  listLauncherVersions,
  saveLauncherBuildEnv,
  type LauncherSource,
  type LauncherBuildJob,
  type LauncherBuildEnvVariable,
  type LauncherBackendDeployment,
  type LauncherVersion
} from './launcher-api';

const r2PublicBaseUrl = import.meta.env.VITE_R2_PUBLIC_BASE_URL ?? '';
const r2ArtifactPrefix = import.meta.env.VITE_R2_ARTIFACT_PREFIX ?? 'studio-artifacts';

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

function statusText(status: LauncherBuildJob['status']) {
  if (status === 'SUCCEEDED') return '성공';
  if (status === 'RUNNING') return '실행 중';
  if (status === 'PENDING') return '대기';
  if (status === 'FAILED') return '실패';
  if (status === 'CANCELED') return '취소';
  return status;
}

function statusTone(status: LauncherBuildJob['status']): 'neutral' | 'green' | 'amber' | 'red' | 'blue' {
  if (status === 'SUCCEEDED') return 'green';
  if (status === 'RUNNING') return 'blue';
  if (status === 'PENDING') return 'amber';
  if (status === 'FAILED') return 'red';
  return 'neutral';
}

function jobTime(job: LauncherBuildJob) {
  const value = new Date(job.createdAt || job.startedAt || job.finishedAt || 0).getTime();
  return Number.isNaN(value) ? 0 : value;
}

function BuildWorker({ job }: { job: LauncherBuildJob }) {
  const [failed, setFailed] = useState(false);
  const name = job.requestedByName
    || job.createdByName
    || job.requestedBy
    || job.createdBy
    || '-';
  const avatarUrl = job.requestedByAvatarUrl
    || job.createdByAvatarUrl
    || '';
  const initial = name.trim().charAt(0).toUpperCase() || '?';

  return (
    <span className="inline-flex h-4 min-w-0 items-center gap-1.5 align-middle">
      {name === '-' ? null : avatarUrl && !failed ? (
        <img
          src={avatarUrl}
          alt=""
          className="size-4 shrink-0 rounded-full border border-border bg-muted object-cover"
          onError={() => setFailed(true)}
        />
      ) : (
        <span className="inline-flex size-4 shrink-0 items-center justify-center rounded-full border border-border bg-muted text-[9px] font-semibold leading-none text-muted-foreground">
          {initial}
        </span>
      )}
      <b className="truncate leading-none text-foreground">{name}</b>
    </span>
  );
}

const launcherBuildJobPageSize = 3;
type BuildTarget = 'launcher-client' | 'launcher-backend';
type BuildRange = 'week' | 'month' | 'all';

const buildRangeLabels: Record<BuildRange, string> = {
  week: '일주일',
  month: '한달',
  all: '전체'
};

function buildRangeSince(range: BuildRange) {
  if (range === 'all') return undefined;
  const date = new Date();
  date.setDate(date.getDate() - (range === 'week' ? 7 : 30));
  return date.toISOString();
}

function sanitizeObjectKeyPart(value: string) {
  return value
    .trim()
    .replace(/^\/+|\/+$/g, '')
    .replace(/[^a-zA-Z0-9._@+=-]+/g, '-')
    || 'unknown';
}

function encodeObjectKey(key: string) {
  return key.split('/').map(encodeURIComponent).join('/');
}

function launcherArtifactKey(version: string, branch: string, commitSha: string, artifactName: string) {
  const revision = commitSha.trim().slice(0, 7) || 'latest';
  return [
    r2ArtifactPrefix,
    'launcher',
    version || '0.0.0',
    branch || 'release',
    revision,
    artifactName,
  ].map(sanitizeObjectKeyPart).join('/');
}

export function LauncherBuildPage() {
  const { toast } = useToast();
  const [target, setTarget] = useState<BuildTarget>('launcher-client');
  const [versions, setVersions] = useState<LauncherVersion[]>([]);
  const [source, setSource] = useState<LauncherSource | null>(null);
  const [version, setVersion] = useState('');
  const [branch, setBranch] = useState('release');
  const [commitSha, setCommitSha] = useState('');
  const [jobs, setJobs] = useState<LauncherBuildJob[]>([]);
  const [buildEnv, setBuildEnv] = useState<LauncherBuildEnvVariable[]>([]);
  const [buildEnvSaving, setBuildEnvSaving] = useState(false);
  const [selectedJob, setSelectedJob] = useState<LauncherBuildJob | null>(null);
  const [quickDeployJob, setQuickDeployJob] = useState<LauncherBuildJob | null>(null);
  const [backendDeployment, setBackendDeployment] = useState<LauncherBackendDeployment | null>(null);
  const [quickDeploying, setQuickDeploying] = useState(false);
  const [confirmOpen, setConfirmOpen] = useState(false);
  const [loading, setLoading] = useState(true);
  const [page, setPage] = useState(1);
  const [range, setRange] = useState<BuildRange>('week');
  const [totalJobs, setTotalJobs] = useState(0);
  const loadingVisible = useMinimumLoading(loading);

  const activeVersion = useMemo(() => versions.find((item) => item.isActive) ?? versions[0], [versions]);
  const isBackend = target === 'launcher-backend';
  const backendSource = source?.backend;
  const clientSource = source?.client;
  const artifactName = `autonomy-studio-launcher-${version || activeVersion?.version || '0.0.0'}.deb`;
  const backendImageName = backendSource?.image || 'localhost:5000/studio-launcher-be';
  const backendDockerfile = backendSource?.dockerfile || 'Dockerfile';
  const uploadPath = launcherArtifactKey(version || activeVersion?.version || '0.0.0', branch, commitSha, artifactName);
  const downloadUrl = r2PublicBaseUrl ? `${r2PublicBaseUrl.replace(/\/$/, '')}/${encodeObjectKey(uploadPath)}` : '백엔드 R2 설정 기준으로 생성됩니다.';
  const currentPage = page;
  const totalPages = Math.max(1, Math.ceil(totalJobs / launcherBuildJobPageSize));
  const pagedJobs = jobs;
  const hasActiveJob = jobs.some((job) => job.status === 'PENDING' || job.status === 'RUNNING');

  const isQuickDeployable = (job: LauncherBuildJob) => (
    target === 'launcher-backend'
    && job.target === 'launcher-backend'
    && job.status === 'SUCCEEDED'
    && Boolean(job.downloadUrl)
  );

  const loadBuildJobs = (nextPage = page, nextTarget = target, nextRange = range) => (
    listLauncherBuildJobsPage({
      target: nextTarget,
      page: nextPage,
      limit: launcherBuildJobPageSize,
      since: buildRangeSince(nextRange)
    }).then((result) => {
      setJobs(result.jobs);
      setTotalJobs(result.total);
    })
  );

  const refresh = () => {
    setLoading(true);
    Promise.all([
      listLauncherVersions(),
      listLauncherBuildJobsPage({
        target,
        page,
        limit: launcherBuildJobPageSize,
        since: buildRangeSince(range)
      }),
      getLauncherSource(),
      listLauncherBuildEnv()
    ])
      .then(([nextVersions, nextJobs, nextSource, nextBuildEnv]) => {
        setVersions(nextVersions);
        setJobs(nextJobs.jobs);
        setTotalJobs(nextJobs.total);
        setSource(nextSource.source);
        setBuildEnv(nextBuildEnv.variables ?? []);
        const nextVersion = nextVersions.find((item) => item.isActive) ?? nextVersions[0];
        setVersion(nextVersion?.version ?? '');
        setBranch('release');
        setCommitSha(target === 'launcher-backend' ? nextSource.source.backend?.commitSha ?? '' : nextSource.source.client?.commitSha ?? nextVersion?.commitSha ?? '');
      })
      .catch((error: Error) => {
        toast({ type: 'error', title: '런처 버전 조회 실패', message: error.message });
      })
      .finally(() => setLoading(false));
  };

  useEffect(() => {
    refresh();
  }, []);

  useEffect(() => {
    setPage(1);
  }, [target, range]);

  useEffect(() => {
    loadBuildJobs().catch((error: Error) => {
      setJobs([]);
      setTotalJobs(0);
      toast({ type: 'error', title: '빌드 작업 조회 실패', message: error.message });
    });
  }, [target, page, range]);

  useEffect(() => {
    if (!source) return;
    if (target === 'launcher-backend') {
      setBranch('release');
      setCommitSha(source.backend?.commitSha ?? '');
      return;
    }

    setBranch('release');
    setCommitSha(source.client?.commitSha ?? activeVersion?.commitSha ?? '');
  }, [activeVersion?.branch, activeVersion?.commitSha, source, target]);

  useEffect(() => {
    if (!hasActiveJob) return;
    const timer = window.setInterval(() => {
      loadBuildJobs()
        .catch((error: Error) => {
          toast({ type: 'error', title: '빌드 작업 갱신 실패', message: error.message });
        });
    }, 2000);
    return () => window.clearInterval(timer);
  }, [hasActiveJob, toast, target, page, range]);

  useEffect(() => {
    if (!selectedJob) return;
    const nextSelectedJob = jobs.find((job) => job.id === selectedJob.id);
    if (nextSelectedJob && nextSelectedJob !== selectedJob) {
      setSelectedJob(nextSelectedJob);
    }
  }, [jobs, selectedJob]);

  const createJob = () => {
    setConfirmOpen(false);
    setLoading(true);
    createLauncherBuildJob({
      target,
      repository: isBackend ? backendSource?.repository ?? undefined : clientSource?.repository ?? activeVersion?.repository ?? undefined,
      branch,
      commitSha: commitSha.trim() || undefined,
      version: undefined,
      uploadPath: isBackend ? backendDockerfile : uploadPath,
      artifact: isBackend ? backendImageName.replace(/^localhost:5000\//, '') : undefined,
      downloadUrl: isBackend ? undefined : r2PublicBaseUrl ? downloadUrl : undefined
    })
      .then(({ job }) => {
        setPage(1);
        setRange('week');
        setJobs((prev) => [job, ...prev].slice(0, launcherBuildJobPageSize));
        setTotalJobs((prev) => prev + 1);
        setSelectedJob(job);
        toast({ type: 'success', title: '빌드 작업', message: '런처 빌드 작업이 생성되었습니다.' });
      })
      .catch((error: Error) => {
        toast({ type: 'error', title: '빌드 작업 실패', message: error.message });
      })
      .finally(() => setLoading(false));
  };

  const openQuickDeploy = (job: LauncherBuildJob) => {
    setQuickDeployJob(job);
    setBackendDeployment(null);
    getLauncherBackendDeployment()
      .then(setBackendDeployment)
      .catch((error: Error) => {
        toast({ type: 'error', title: '배포 대상 조회 실패', message: error.message });
      });
  };

  const quickDeploy = () => {
    if (!quickDeployJob?.downloadUrl) return;
    setQuickDeploying(true);
    deployLauncherBackend(quickDeployJob.downloadUrl)
      .then(() => {
        toast({ type: 'success', message: '런처 백엔드를 배포했습니다.' });
        setQuickDeployJob(null);
        refresh();
      })
      .catch((error: Error) => {
        toast({ type: 'error', title: '백엔드 배포 실패', message: error.message });
      })
      .finally(() => setQuickDeploying(false));
  };

  const updateBuildEnv = (index: number, patch: Partial<LauncherBuildEnvVariable>) => {
    setBuildEnv((prev) => prev.map((variable, variableIndex) => (
      variableIndex === index ? { ...variable, ...patch } : variable
    )));
  };

  const removeBuildEnv = (index: number) => {
    setBuildEnv((prev) => prev.filter((_, variableIndex) => variableIndex !== index));
  };

  const persistBuildEnv = () => {
    setBuildEnvSaving(true);
    saveLauncherBuildEnv(
      buildEnv
        .map((variable) => ({ ...variable, key: variable.key.trim() }))
        .filter((variable) => variable.key)
    )
      .then((result) => {
        setBuildEnv(result.variables ?? []);
        toast({ type: 'success', title: '빌드 환경변수 저장', message: '런처 클라이언트 빌드 환경변수를 저장했습니다.' });
      })
      .catch((error: Error) => {
        toast({ type: 'error', title: '빌드 환경변수 저장 실패', message: error.message });
      })
      .finally(() => setBuildEnvSaving(false));
  };

  return (
    <>
      <PageTitle
        eyebrow="런처"
        title="빌드 관리"
        description="런처 클라이언트 설치 파일과 백엔드 컨테이너 이미지를 구성요소별로 빌드합니다."
        actions={
          <div className="flex items-center gap-2">
            <Button variant="outline" className="h-8 px-3 text-[13px]" onClick={refresh} disabled={loading}>
              <RotateCcw className={loading ? 'size-4 animate-spin' : 'size-4'} />
              새로고침
            </Button>
            <Button className="h-8 px-3 text-[13px]" onClick={() => setConfirmOpen(true)}>
              <Play className="size-4" />
              실행
            </Button>
          </div>
        }
      />

      <div className="mb-4 flex flex-wrap gap-2">
        <Button variant={target === 'launcher-client' ? 'default' : 'outline'} onClick={() => setTarget('launcher-client')}>
          클라이언트
        </Button>
        <Button variant={target === 'launcher-backend' ? 'default' : 'outline'} onClick={() => setTarget('launcher-backend')}>
          백엔드
        </Button>
      </div>

      <div className="grid gap-4 xl:grid-cols-[420px_minmax(0,1fr)]">
        <Card className="min-w-0 overflow-hidden">
          <CardHeader title="빌드 요청" description={isBackend ? '브랜치와 커밋 기준으로 런처 백엔드 이미지를 빌드하고 레지스트리에 푸시합니다.' : '브랜치와 커밋 기준으로 런처 설치 파일을 생성합니다.'} />
          <div className="space-y-4 p-5">
            <div className="rounded-md border border-border bg-muted/20 px-3 py-2">
              <p className="text-xs font-medium text-muted-foreground">버전</p>
              <p className="mt-1 text-sm font-medium text-foreground">빌드 후 package.json 기준으로 자동 확정</p>
            </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={branch} onChange={(event) => setBranch(event.target.value)}>
                <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">Commit SHA</span>
              <input className="mt-2 h-9 w-full 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={commitSha} onChange={(event) => setCommitSha(event.target.value)} placeholder="비워두면 브랜치 최신 커밋" />
            </label>
            {isBackend ? (
              <div className="rounded-md border border-border bg-background p-3">
                <p className="text-xs text-muted-foreground">이미지 이름</p>
                <p className="mt-2 break-all font-mono text-xs text-foreground">{backendImageName}</p>
                <p className="mt-1 text-xs leading-5 text-muted-foreground">태그는 빌드 후 package.json 버전으로 자동 확정됩니다.</p>
                <p className="mt-2 text-xs text-muted-foreground">Repository</p>
                <p className="mt-1 break-all font-mono text-xs text-foreground">{backendSource?.repository || '-'}</p>
              </div>
            ) : (
              <div className="rounded-md border border-border bg-background p-3">
                <div className="flex items-start justify-between gap-3">
                  <div>
                    <p className="text-xs font-medium text-foreground">클라이언트 빌드 환경변수</p>
                    <p className="mt-1 text-xs leading-5 text-muted-foreground">저장 후 실행한 빌드부터 반영됩니다.</p>
                  </div>
                  <Button variant="outline" className="h-8 px-3 text-[13px]" onClick={persistBuildEnv} disabled={buildEnvSaving}>
                    {buildEnvSaving ? '저장 중' : '저장'}
                  </Button>
                </div>
                <div className="mt-3 space-y-2">
                  {buildEnv.map((variable, index) => (
                    <div key={`${variable.key}-${index}`} className="grid gap-2 md:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)_auto]">
                      <input
                        className="h-9 rounded-md border border-input bg-background px-3 font-mono text-xs outline-none focus:ring-2 focus:ring-ring"
                        value={variable.key}
                        onChange={(event) => updateBuildEnv(index, { key: event.target.value })}
                        placeholder="VITE_ATNMY_STDO_API_BASE_URL"
                      />
                      <input
                        className="h-9 rounded-md border border-input bg-background px-3 font-mono text-xs outline-none focus:ring-2 focus:ring-ring"
                        value={variable.value}
                        onChange={(event) => updateBuildEnv(index, { value: event.target.value })}
                        placeholder="https://portal-api.autonomystudio.net"
                      />
                      <Button variant="outline" className="size-9 px-0" title="삭제" aria-label="삭제" onClick={() => removeBuildEnv(index)}>
                        <Trash2 className="size-4" />
                      </Button>
                    </div>
                  ))}
                  {buildEnv.length === 0 ? <p className="rounded-md border border-dashed border-border px-3 py-4 text-center text-xs text-muted-foreground">등록된 빌드 환경변수가 없습니다.</p> : null}
                </div>
                <Button
                  variant="outline"
                  className="mt-3 h-8 px-3 text-[13px]"
                  onClick={() => setBuildEnv((prev) => [...prev, { key: '', value: '', isSecret: false }])}
                >
                  <Plus className="size-4" />
                  추가
                </Button>
              </div>
            )}
          </div>
        </Card>

        <Card className="min-w-0 overflow-hidden">
          <CardHeader
            title="빌드 작업 목록"
            description={isBackend ? '런처 백엔드 이미지 빌드 작업입니다.' : '생성된 런처 클라이언트 빌드 작업과 업로드 계획입니다.'}
            action={
              <div className="flex items-center gap-2">
                {(Object.keys(buildRangeLabels) as BuildRange[]).map((item) => (
                  <Button
                    key={item}
                    variant={range === item ? 'default' : 'outline'}
                    className="h-8 px-3 text-[13px]"
                    onClick={() => setRange(item)}
                  >
                    {buildRangeLabels[item]}
                  </Button>
                ))}
              </div>
            }
          />
          <div className="min-h-[410px] space-y-3 p-4">
            {jobs.length === 0 ? (
              <div className="flex min-h-44 items-center justify-center text-center text-sm text-muted-foreground">
                빌드 작업이 없습니다.
              </div>
            ) : null}
            {pagedJobs.map((job, index) => (
              <div key={job.id} className="rounded-md border border-border bg-background/70 p-4">
                <div className="flex items-start justify-between gap-4">
                  <div className="min-w-0">
                    <div className="flex flex-wrap items-center gap-2">
                      <span className="text-xs font-medium text-muted-foreground">No. {(currentPage - 1) * launcherBuildJobPageSize + index + 1}</span>
                      <Badge tone={statusTone(job.status)}>{statusText(job.status)}</Badge>
                      <span className="font-medium">{job.target}</span>
                    </div>
                    <div className="mt-3 flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
                      <span>브랜치 <b className="text-foreground">{job.branch}</b></span>
                      <span>커밋 <b className="font-mono text-foreground">{job.commitSha || '-'}</b></span>
                      <span className="inline-flex h-4 min-w-0 items-center gap-1.5 align-middle">작업자 <BuildWorker job={job} /></span>
                      <span>생성 <b className="text-foreground">{formatDate(job.createdAt)}</b></span>
                    </div>
                  </div>
                  <div className="flex shrink-0 items-center gap-1">
                    {isQuickDeployable(job) ? (
                      <Button
                        variant="outline"
                        className="size-8 px-0"
                        title="빠른 배포"
                        aria-label="빠른 배포"
                        onClick={() => openQuickDeploy(job)}
                      >
                        <Upload className="size-4" />
                      </Button>
                    ) : null}
                    <Button variant="outline" className="size-8 px-0" title="로그" aria-label="로그" onClick={() => setSelectedJob(job)}>
                      <MoreHorizontal className="size-4" />
                    </Button>
                  </div>
                </div>
                <div className="mt-3 grid gap-3 rounded-md border border-border bg-card px-3 py-2 text-xs md:grid-cols-[minmax(0,0.8fr)_minmax(0,1.2fr)]">
                  <div className="min-w-0">
                    <p className="text-muted-foreground">산출물</p>
                    <p className="mt-1 truncate font-mono font-medium">{job.artifact}</p>
                  </div>
                  <div className="min-w-0">
                    <p className="text-muted-foreground">다운로드 URL</p>
                    <p className="mt-1 truncate font-mono font-medium">{job.downloadUrl || '-'}</p>
                  </div>
                  <div className="min-w-0 md:col-span-2">
                    <p className="text-muted-foreground">R2 Object Key</p>
                    <p className="mt-1 truncate font-mono font-medium">{job.uploadPath}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
          <div className="flex items-center justify-between gap-4 border-t border-border px-5 py-3 text-sm">
            <span className="text-xs text-muted-foreground">
              {loading ? '불러오는 중' : `총 ${totalJobs}건 · ${currentPage} / ${totalPages}`}
            </span>
            <div className="flex gap-2">
              <Button
                variant="outline"
                className="h-8 px-3 text-[13px]"
                disabled={currentPage <= 1}
                onClick={() => setPage((prev) => Math.max(1, prev - 1))}
              >
                <ChevronLeft className="size-4" />
                이전
              </Button>
              <Button
                variant="outline"
                className="h-8 px-3 text-[13px]"
                disabled={currentPage >= totalPages}
                onClick={() => setPage((prev) => Math.min(totalPages, prev + 1))}
              >
                다음
                <ChevronRight className="size-4" />
              </Button>
            </div>
          </div>
        </Card>
      </div>

      <Modal
        open={Boolean(selectedJob)}
        title="런처 빌드 로그"
        onClose={() => setSelectedJob(null)}
        className="log-modal-shell"
        footer={<Button variant="outline" onClick={() => setSelectedJob(null)}>닫기</Button>}
      >
        <pre className="whitespace-pre-wrap bg-background p-4 font-mono text-xs leading-6 text-muted-foreground">
          {selectedJob?.logs || '작업을 선택하면 로그가 표시됩니다.'}
        </pre>
      </Modal>
      <Modal
        open={Boolean(quickDeployJob)}
        title="빠른 배포"
        onClose={() => !quickDeploying && setQuickDeployJob(null)}
        footer={
          <>
            <Button variant="outline" onClick={() => setQuickDeployJob(null)} disabled={quickDeploying}>취소</Button>
            <Button onClick={quickDeploy} disabled={quickDeploying || !quickDeployJob?.downloadUrl}>
              <Upload className="size-4" />
              {quickDeploying ? '배포 중' : '배포'}
            </Button>
          </>
        }
      >
        <div className="space-y-3 text-sm">
          <div className="rounded-md border border-border bg-muted/20 px-4 py-3">
            <p className="font-medium">성공한 백엔드 빌드 이미지를 바로 배포합니다.</p>
            <p className="mt-1 text-xs leading-5 text-muted-foreground">
              현재 설정된 복제 수와 CPU, 메모리 제한은 변경하지 않습니다.
            </p>
          </div>
          <div className="grid gap-2 rounded-md border border-border bg-background p-4">
            <div className="flex items-center justify-between gap-4">
              <span className="text-muted-foreground">대상</span>
              <span className="font-mono text-xs font-medium">
                {backendDeployment ? `${backendDeployment.namespace}/deployment/${backendDeployment.deployment}` : '배포 대상 확인 중'}
              </span>
            </div>
            <div className="flex items-center justify-between gap-4">
              <span className="text-muted-foreground">빌드</span>
              <span className="font-medium">{quickDeployJob?.version || '-'}</span>
            </div>
            <div className="grid gap-1 pt-1">
              <span className="text-muted-foreground">이미지</span>
              <span className="break-all font-mono text-xs font-medium">{quickDeployJob?.downloadUrl || '-'}</span>
            </div>
            {backendDeployment?.currentImage ? (
              <div className="grid gap-1 border-t border-border pt-3">
                <span className="text-muted-foreground">현재 이미지</span>
                <span className="break-all font-mono text-xs text-muted-foreground">{backendDeployment.currentImage}</span>
              </div>
            ) : null}
          </div>
        </div>
      </Modal>
      <Modal
        open={confirmOpen}
        title="빌드 실행 확인"
        onClose={() => setConfirmOpen(false)}
        footer={
          <>
            <Button variant="outline" onClick={() => setConfirmOpen(false)}>취소</Button>
            <Button onClick={createJob} disabled={loading}>
              <Play className="size-4" />
              실행
            </Button>
          </>
        }
      >
        <div className="space-y-3 text-sm">
          <div className="rounded-md border border-border bg-muted/20 px-4 py-3">
            <p className="font-medium">{isBackend ? '런처 백엔드 이미지 빌드' : '런처 클라이언트 설치 파일 빌드'}를 실행합니다.</p>
            <p className="mt-1 text-xs leading-5 text-muted-foreground">
              실행 후 빌드 작업이 생성되고, 작업 목록에서 진행 상태와 로그를 확인할 수 있습니다.
            </p>
          </div>
          <div className="grid gap-2 rounded-md border border-border bg-background p-4">
            <div className="flex items-center justify-between gap-4">
              <span className="text-muted-foreground">대상</span>
              <span className="font-medium">{isBackend ? '백엔드' : '클라이언트'}</span>
            </div>
            <div className="flex items-center justify-between gap-4">
              <span className="text-muted-foreground">저장소</span>
              <span className="truncate font-medium">
                {isBackend ? backendSource?.repository || '-' : clientSource?.repository || activeVersion?.repository || '-'}
              </span>
            </div>
            <div className="flex items-center justify-between gap-4">
              <span className="text-muted-foreground">브랜치</span>
              <span className="font-medium">{branch}</span>
            </div>
            <div className="flex items-center justify-between gap-4">
              <span className="text-muted-foreground">커밋</span>
              <span className="font-mono text-xs font-medium">{commitSha.trim() || '브랜치 최신'}</span>
            </div>
            {isBackend ? (
              <div className="flex items-center justify-between gap-4">
                <span className="text-muted-foreground">이미지 이름</span>
                <span className="truncate font-mono text-xs font-medium">{backendImageName}</span>
              </div>
            ) : null}
          </div>
        </div>
      </Modal>
      <LoadingModal open={loadingVisible} />
    </>
  );
}