<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';

import DefaultLayout from '../layouts/DefaultLayout.vue';
import { trpc } from '../utils/trpc';

const adminClient = trpc.admin;

type Profile = {
    profileName: string;
    profile: string;
    scenario: string;
    status: string;
    buildStatus: string;
    buildCommitSha?: string;
    buildWorkspace?: string;
    buildError?: string;
    lastError?: string;
    runtime: {
        apiRunning: boolean;
        daemonRunning: boolean;
        auctionRunning: boolean;
        battleSimRunning: boolean;
        tournamentRunning: boolean;
    };
};

type Scenario = {
    id: number;
    title: string;
    year: number | null;
    npcCount: number;
};

type Operation = {
    id: string;
    profileName: string;
    type: 'RESET' | 'START' | 'STOP';
    status: 'QUEUED' | 'RUNNING' | 'SUCCEEDED' | 'FAILED' | 'CANCELLED';
    sourceMode?: 'BRANCH' | 'COMMIT';
    sourceRef?: string;
    resolvedCommitSha?: string;
    reason?: string;
    requestedBy: string;
    scheduledAt?: string;
    startedAt?: string;
    completedAt?: string;
    error?: string;
    createdAt: string;
};

const profiles = ref<Profile[]>([]);
const scenarios = ref<Scenario[]>([]);
const operations = ref<Operation[]>([]);
const selectedProfileName = ref('');
const loading = ref(false);
const catalogLoading = ref(false);
const submitting = ref(false);
const message = ref('');
const errorMessage = ref('');
let pollTimer: ReturnType<typeof setInterval> | undefined;
let stateRequestInFlight = false;

const form = reactive({
    sourceMode: 'BRANCH' as 'BRANCH' | 'COMMIT',
    sourceRef: 'main',
    scenarioId: 0,
    turnTermMinutes: 60,
    sync: true,
    fiction: 1,
    extend: true,
    blockGeneralCreate: 0,
    npcMode: 0,
    showImgLevel: 3,
    tournamentTrig: true,
    joinMode: 'full' as 'full' | 'onlyRandom',
    autorunEnabled: false,
    autorunUserMinutes: 1440,
    autorunDevelop: true,
    autorunWarp: true,
    autorunRecruit: true,
    autorunTrain: true,
    autorunBattle: true,
    openAt: '',
    preopenAt: '',
    scheduledAt: '',
    reason: '',
});

const selectedProfile = computed(
    () => profiles.value.find((profile) => profile.profileName === selectedProfileName.value) ?? null
);

const activeOperation = computed(
    () =>
        operations.value.find(
            (operation) =>
                operation.profileName === selectedProfileName.value &&
                (operation.status === 'QUEUED' || operation.status === 'RUNNING')
        ) ?? null
);

const sourceHelp = computed(() =>
    form.sourceMode === 'BRANCH'
        ? '작업이 실제로 시작될 때 원격 브랜치를 다시 fetch하여 최신 커밋을 사용합니다.'
        : '요청 시 커밋을 전체 SHA로 고정하므로 이후 브랜치가 이동해도 결과가 바뀌지 않습니다.'
);

const toIso = (value: string): string | undefined => {
    if (!value) {
        return undefined;
    }
    const parsed = new Date(value);
    return Number.isNaN(parsed.getTime()) ? undefined : parsed.toISOString();
};

const formatTime = (value?: string): string => (value ? new Date(value).toLocaleString('ko-KR') : '-');
const shortSha = (value?: string): string => (value ? value.slice(0, 12) : '-');

const clearStatus = () => {
    message.value = '';
    errorMessage.value = '';
};

const loadState = async (quiet = false) => {
    if (stateRequestInFlight) {
        return;
    }
    stateRequestInFlight = true;
    if (!quiet) {
        loading.value = true;
    }
    try {
        const profileResult = await adminClient.profiles.list.query();
        const operationResult = await adminClient.operations.list.query({ limit: 100 });
        profiles.value = profileResult as Profile[];
        operations.value = operationResult as Operation[];
        if (!selectedProfileName.value && profiles.value.length > 0) {
            selectedProfileName.value = profiles.value[0].profileName;
        }
    } catch (error) {
        errorMessage.value = error instanceof Error ? error.message : '운영 상태를 불러오지 못했습니다.';
    } finally {
        loading.value = false;
        stateRequestInFlight = false;
    }
};

const loadScenarios = async () => {
    clearStatus();
    if (!form.sourceRef.trim()) {
        errorMessage.value = '브랜치 또는 커밋을 입력해주세요.';
        return;
    }
    catalogLoading.value = true;
    try {
        const result = await adminClient.profiles.listScenarios.query({
            gitRef: form.sourceRef.trim(),
            sourceMode: form.sourceMode,
        });
        scenarios.value = result as Scenario[];
        if (!scenarios.value.some((scenario) => scenario.id === form.scenarioId)) {
            const profileScenario = Number(selectedProfile.value?.scenario);
            form.scenarioId =
                scenarios.value.find((scenario) => scenario.id === profileScenario)?.id ?? scenarios.value[0]?.id ?? 0;
        }
        message.value = `${scenarios.value.length}개 시나리오를 확인했습니다.`;
    } catch (error) {
        scenarios.value = [];
        errorMessage.value = error instanceof Error ? error.message : '소스에서 시나리오를 읽지 못했습니다.';
    } finally {
        catalogLoading.value = false;
    }
};

const requestRuntime = async (action: 'START' | 'STOP') => {
    clearStatus();
    if (!selectedProfile.value || activeOperation.value) {
        return;
    }
    const label = action === 'START' ? '시작' : '정지';
    if (!window.confirm(`${selectedProfile.value.profileName} 서버를 ${label}하시겠습니까?`)) {
        return;
    }
    submitting.value = true;
    try {
        await adminClient.operations.requestRuntime.mutate({
            profileName: selectedProfile.value.profileName,
            action,
            reason: form.reason.trim() || undefined,
        });
        message.value = `${label} 작업을 요청했습니다.`;
        await loadState(true);
    } catch (error) {
        errorMessage.value = error instanceof Error ? error.message : `${label} 요청에 실패했습니다.`;
    } finally {
        submitting.value = false;
    }
};

const selectedAutorunOptions = (): Array<'develop' | 'warp' | 'recruit' | 'train' | 'battle'> => {
    const options: Array<'develop' | 'warp' | 'recruit' | 'train' | 'battle'> = [];
    if (form.autorunDevelop) options.push('develop');
    if (form.autorunWarp) options.push('warp');
    if (form.autorunRecruit) options.push('recruit');
    if (form.autorunTrain) options.push('train');
    if (form.autorunBattle) options.push('battle');
    return options;
};

const requestReset = async () => {
    clearStatus();
    if (!selectedProfile.value || activeOperation.value) {
        return;
    }
    if (!form.sourceRef.trim() || !form.scenarioId) {
        errorMessage.value = '소스와 시나리오를 먼저 선택해주세요.';
        return;
    }
    const sourceLabel = form.sourceMode === 'BRANCH' ? '브랜치' : '커밋';
    if (
        !window.confirm(
            `${selectedProfile.value.profileName}의 게임 DB를 초기화합니다.\n${sourceLabel}: ${form.sourceRef}\n시나리오: ${form.scenarioId}`
        )
    ) {
        return;
    }
    submitting.value = true;
    try {
        await adminClient.operations.requestReset.mutate({
            profileName: selectedProfile.value.profileName,
            sourceMode: form.sourceMode,
            sourceRef: form.sourceRef.trim(),
            scheduledAt: toIso(form.scheduledAt),
            reason: form.reason.trim() || undefined,
            install: {
                scenarioId: form.scenarioId,
                turnTermMinutes: form.turnTermMinutes,
                sync: form.sync,
                fiction: form.fiction,
                extend: form.extend,
                blockGeneralCreate: form.blockGeneralCreate,
                npcMode: form.npcMode,
                showImgLevel: form.showImgLevel,
                tournamentTrig: form.tournamentTrig,
                joinMode: form.joinMode,
                autorunUser: form.autorunEnabled
                    ? {
                          limitMinutes: form.autorunUserMinutes,
                          options: selectedAutorunOptions(),
                      }
                    : null,
                openAt: toIso(form.openAt),
                preopenAt: toIso(form.preopenAt),
            },
        });
        message.value = form.scheduledAt ? '예약 초기화 작업을 등록했습니다.' : '초기화 작업을 등록했습니다.';
        await loadState(true);
    } catch (error) {
        errorMessage.value = error instanceof Error ? error.message : '초기화 요청에 실패했습니다.';
    } finally {
        submitting.value = false;
    }
};

const cancelOperation = async (operation: Operation) => {
    clearStatus();
    if (!window.confirm('대기 중인 작업을 취소하시겠습니까?')) {
        return;
    }
    try {
        await adminClient.operations.cancel.mutate({ id: operation.id });
        message.value = '작업을 취소했습니다.';
        await loadState(true);
    } catch (error) {
        errorMessage.value = error instanceof Error ? error.message : '작업 취소에 실패했습니다.';
    }
};

const retryOperation = async (operation: Operation) => {
    clearStatus();
    if (!window.confirm('같은 입력으로 작업을 다시 실행하시겠습니까?')) {
        return;
    }
    try {
        await adminClient.operations.retry.mutate({ id: operation.id });
        message.value = '재시도 작업을 등록했습니다.';
        await loadState(true);
    } catch (error) {
        errorMessage.value = error instanceof Error ? error.message : '작업 재시도에 실패했습니다.';
    }
};

watch(selectedProfileName, () => {
    const scenarioId = Number(selectedProfile.value?.scenario);
    if (Number.isFinite(scenarioId)) {
        form.scenarioId = scenarioId;
    }
});

onMounted(async () => {
    await loadState();
    await loadScenarios();
    pollTimer = setInterval(() => void loadState(true), 3000);
});

onBeforeUnmount(() => {
    if (pollTimer) {
        clearInterval(pollTimer);
    }
});
</script>

<template>
    <DefaultLayout>
        <div class="max-w-7xl mx-auto px-4 py-8 space-y-6" data-testid="server-operations-page">
            <header class="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
                <div>
                    <p class="text-xs uppercase tracking-[0.25em] text-amber-400">Operations console</p>
                    <h2 class="text-2xl font-bold text-white">서버 배포 · 시나리오 초기화</h2>
                    <p class="mt-2 text-sm text-zinc-400">
                        실행 소스, 초기화 옵션, 프로세스 상태와 작업 이력을 한 화면에서 관리합니다.
                    </p>
                </div>
                <button
                    class="rounded border border-zinc-700 bg-zinc-900 px-4 py-2 text-sm hover:border-zinc-500 disabled:opacity-50"
                    :disabled="loading"
                    data-testid="refresh-operations"
                    @click="loadState()"
                >
                    상태 새로고침
                </button>
            </header>

            <div v-if="errorMessage" class="rounded border border-red-800 bg-red-950/50 px-4 py-3 text-sm text-red-200">
                {{ errorMessage }}
            </div>
            <div
                v-if="message"
                class="rounded border border-emerald-800 bg-emerald-950/40 px-4 py-3 text-sm text-emerald-200"
            >
                {{ message }}
            </div>

            <section class="grid gap-4 lg:grid-cols-[1.1fr_1.9fr]">
                <div class="rounded-lg border border-zinc-800 bg-zinc-900 p-5 space-y-4">
                    <div>
                        <label class="text-xs text-zinc-400" for="profile-select">운영 프로필</label>
                        <select
                            id="profile-select"
                            v-model="selectedProfileName"
                            class="mt-2 w-full rounded border border-zinc-700 bg-zinc-950 px-3 py-2 text-white"
                            data-testid="profile-select"
                        >
                            <option v-for="profile in profiles" :key="profile.profileName" :value="profile.profileName">
                                {{ profile.profileName }}
                            </option>
                        </select>
                    </div>

                    <div
                        v-if="selectedProfile"
                        class="grid grid-cols-2 gap-3 text-sm"
                        data-testid="selected-profile-status"
                    >
                        <div class="rounded bg-zinc-950 p-3">
                            <div class="text-xs text-zinc-500">목표 상태</div>
                            <div class="mt-1 font-semibold">{{ selectedProfile.status }}</div>
                        </div>
                        <div class="rounded bg-zinc-950 p-3">
                            <div class="text-xs text-zinc-500">빌드</div>
                            <div class="mt-1 font-semibold">{{ selectedProfile.buildStatus }}</div>
                        </div>
                        <div class="rounded bg-zinc-950 p-3">
                            <div class="text-xs text-zinc-500">Game API</div>
                            <div :class="selectedProfile.runtime.apiRunning ? 'text-emerald-400' : 'text-zinc-500'">
                                {{ selectedProfile.runtime.apiRunning ? 'RUNNING' : 'STOPPED' }}
                            </div>
                        </div>
                        <div class="rounded bg-zinc-950 p-3">
                            <div class="text-xs text-zinc-500">Turn daemon</div>
                            <div :class="selectedProfile.runtime.daemonRunning ? 'text-emerald-400' : 'text-zinc-500'">
                                {{ selectedProfile.runtime.daemonRunning ? 'RUNNING' : 'STOPPED' }}
                            </div>
                        </div>
                        <div class="rounded bg-zinc-950 p-3">
                            <div class="text-xs text-zinc-500">Auction worker</div>
                            <div :class="selectedProfile.runtime.auctionRunning ? 'text-emerald-400' : 'text-zinc-500'">
                                {{ selectedProfile.runtime.auctionRunning ? 'RUNNING' : 'STOPPED' }}
                            </div>
                        </div>
                        <div class="rounded bg-zinc-950 p-3">
                            <div class="text-xs text-zinc-500">Battle sim worker</div>
                            <div
                                :class="selectedProfile.runtime.battleSimRunning ? 'text-emerald-400' : 'text-zinc-500'"
                            >
                                {{ selectedProfile.runtime.battleSimRunning ? 'RUNNING' : 'STOPPED' }}
                            </div>
                        </div>
                        <div class="rounded bg-zinc-950 p-3">
                            <div class="text-xs text-zinc-500">Tournament worker</div>
                            <div
                                :class="
                                    selectedProfile.runtime.tournamentRunning ? 'text-emerald-400' : 'text-zinc-500'
                                "
                            >
                                {{ selectedProfile.runtime.tournamentRunning ? 'RUNNING' : 'STOPPED' }}
                            </div>
                        </div>
                    </div>

                    <div v-if="selectedProfile" class="space-y-1 text-xs text-zinc-500">
                        <div>
                            현재 커밋:
                            <span class="font-mono text-zinc-300">{{ shortSha(selectedProfile.buildCommitSha) }}</span>
                        </div>
                        <div class="break-all">worktree: {{ selectedProfile.buildWorkspace ?? '기본 workspace' }}</div>
                        <div v-if="selectedProfile.buildError" class="text-red-400">
                            {{ selectedProfile.buildError }}
                        </div>
                        <div v-if="selectedProfile.lastError" class="text-red-400">{{ selectedProfile.lastError }}</div>
                    </div>

                    <div class="grid grid-cols-2 gap-2">
                        <button
                            class="rounded bg-emerald-700 px-3 py-2 font-semibold text-white hover:bg-emerald-600 disabled:opacity-40"
                            :disabled="submitting || Boolean(activeOperation)"
                            data-testid="start-server"
                            @click="requestRuntime('START')"
                        >
                            서버 시작
                        </button>
                        <button
                            class="rounded bg-red-800 px-3 py-2 font-semibold text-white hover:bg-red-700 disabled:opacity-40"
                            :disabled="submitting || Boolean(activeOperation)"
                            data-testid="stop-server"
                            @click="requestRuntime('STOP')"
                        >
                            서버 정지
                        </button>
                    </div>
                </div>

                <form
                    class="rounded-lg border border-zinc-800 bg-zinc-900 p-5 space-y-5"
                    @submit.prevent="requestReset"
                >
                    <div class="flex items-center justify-between">
                        <h3 class="text-lg font-semibold">시나리오 초기화</h3>
                        <span
                            v-if="activeOperation"
                            class="rounded-full bg-amber-500/15 px-3 py-1 text-xs text-amber-300"
                        >
                            {{ activeOperation.type }} · {{ activeOperation.status }}
                        </span>
                    </div>

                    <fieldset class="space-y-2">
                        <legend class="text-xs text-zinc-400">소스 종류</legend>
                        <div class="flex gap-5">
                            <label class="flex items-center gap-2">
                                <input
                                    v-model="form.sourceMode"
                                    type="radio"
                                    value="BRANCH"
                                    data-testid="source-branch"
                                />
                                브랜치
                            </label>
                            <label class="flex items-center gap-2">
                                <input
                                    v-model="form.sourceMode"
                                    type="radio"
                                    value="COMMIT"
                                    data-testid="source-commit"
                                />
                                커밋
                            </label>
                        </div>
                        <p class="text-xs text-amber-200/80" data-testid="source-help">{{ sourceHelp }}</p>
                    </fieldset>

                    <div class="grid gap-3 md:grid-cols-[1fr_auto]">
                        <input
                            v-model="form.sourceRef"
                            class="rounded border border-zinc-700 bg-zinc-950 px-3 py-2 font-mono text-sm text-white"
                            :placeholder="
                                form.sourceMode === 'BRANCH'
                                    ? '예: main 또는 release/season-12'
                                    : '예: 40자리 commit SHA'
                            "
                            data-testid="source-ref"
                        />
                        <button
                            type="button"
                            class="rounded border border-zinc-600 bg-zinc-800 px-4 py-2 text-sm hover:bg-zinc-700 disabled:opacity-50"
                            :disabled="catalogLoading"
                            data-testid="load-scenarios"
                            @click="loadScenarios"
                        >
                            시나리오 확인
                        </button>
                    </div>

                    <div class="grid gap-4 md:grid-cols-2">
                        <label class="text-xs text-zinc-400">
                            시나리오
                            <select
                                v-model.number="form.scenarioId"
                                class="mt-1 w-full rounded border border-zinc-700 bg-zinc-950 px-3 py-2 text-sm text-white"
                                data-testid="scenario-select"
                            >
                                <option v-for="scenario in scenarios" :key="scenario.id" :value="scenario.id">
                                    {{ scenario.id }} · {{ scenario.title }} (NPC {{ scenario.npcCount }})
                                </option>
                            </select>
                        </label>
                        <label class="text-xs text-zinc-400">
                            턴 간격
                            <select
                                v-model.number="form.turnTermMinutes"
                                class="mt-1 w-full rounded border border-zinc-700 bg-zinc-950 px-3 py-2 text-sm text-white"
                            >
                                <option
                                    v-for="minutes in [1, 2, 5, 10, 20, 30, 60, 120]"
                                    :key="minutes"
                                    :value="minutes"
                                >
                                    {{ minutes }}분
                                </option>
                            </select>
                        </label>
                    </div>

                    <details class="rounded border border-zinc-800 bg-zinc-950/50 p-4">
                        <summary class="cursor-pointer text-sm font-semibold">고급 시나리오 옵션</summary>
                        <div class="mt-4 grid gap-4 md:grid-cols-2 text-sm">
                            <label
                                >동기화
                                <select v-model="form.sync" class="ml-2 rounded bg-zinc-900 px-2 py-1">
                                    <option :value="true">사용</option>
                                    <option :value="false">미사용</option>
                                </select>
                            </label>
                            <label
                                >가상 장수
                                <select v-model.number="form.fiction" class="ml-2 rounded bg-zinc-900 px-2 py-1">
                                    <option :value="1">허용</option>
                                    <option :value="0">금지</option>
                                </select>
                            </label>
                            <label
                                >연장
                                <select v-model="form.extend" class="ml-2 rounded bg-zinc-900 px-2 py-1">
                                    <option :value="true">사용</option>
                                    <option :value="false">미사용</option>
                                </select>
                            </label>
                            <label
                                >가입 방식
                                <select v-model="form.joinMode" class="ml-2 rounded bg-zinc-900 px-2 py-1">
                                    <option value="full">전체</option>
                                    <option value="onlyRandom">랜덤만</option>
                                </select>
                            </label>
                            <label
                                >장수 생성 제한
                                <select
                                    v-model.number="form.blockGeneralCreate"
                                    class="ml-2 rounded bg-zinc-900 px-2 py-1"
                                >
                                    <option :value="0">없음</option>
                                    <option :value="1">제한</option>
                                    <option :value="2">차단</option>
                                </select>
                            </label>
                            <label
                                >NPC 모드
                                <select v-model.number="form.npcMode" class="ml-2 rounded bg-zinc-900 px-2 py-1">
                                    <option :value="0">기본</option>
                                    <option :value="1">확장</option>
                                    <option :value="2">전체</option>
                                </select>
                            </label>
                            <label
                                >이미지 표시
                                <select v-model.number="form.showImgLevel" class="ml-2 rounded bg-zinc-900 px-2 py-1">
                                    <option v-for="level in [0, 1, 2, 3]" :key="level" :value="level">
                                        {{ level }}
                                    </option>
                                </select>
                            </label>
                            <label class="flex items-center gap-2">
                                <input v-model="form.tournamentTrig" type="checkbox" /> 토너먼트 사용
                            </label>
                            <label class="flex items-center gap-2">
                                <input v-model="form.autorunEnabled" type="checkbox" /> 유저 자동턴
                            </label>
                            <input
                                v-if="form.autorunEnabled"
                                v-model.number="form.autorunUserMinutes"
                                type="number"
                                min="1"
                                max="43200"
                                class="rounded border border-zinc-700 bg-zinc-900 px-2 py-1"
                                aria-label="자동턴 제한 분"
                            />
                            <div v-if="form.autorunEnabled" class="md:col-span-2 flex flex-wrap gap-3 text-xs">
                                <label><input v-model="form.autorunDevelop" type="checkbox" /> 내정</label>
                                <label><input v-model="form.autorunWarp" type="checkbox" /> 이동</label>
                                <label><input v-model="form.autorunRecruit" type="checkbox" /> 징병</label>
                                <label><input v-model="form.autorunTrain" type="checkbox" /> 훈련</label>
                                <label><input v-model="form.autorunBattle" type="checkbox" /> 전투</label>
                            </div>
                        </div>
                    </details>

                    <div class="grid gap-4 md:grid-cols-3">
                        <label class="text-xs text-zinc-400"
                            >작업 예약
                            <input
                                v-model="form.scheduledAt"
                                type="datetime-local"
                                class="mt-1 w-full rounded border border-zinc-700 bg-zinc-950 px-3 py-2 text-white"
                            />
                        </label>
                        <label class="text-xs text-zinc-400"
                            >가오픈
                            <input
                                v-model="form.preopenAt"
                                type="datetime-local"
                                class="mt-1 w-full rounded border border-zinc-700 bg-zinc-950 px-3 py-2 text-white"
                            />
                        </label>
                        <label class="text-xs text-zinc-400"
                            >정식 오픈
                            <input
                                v-model="form.openAt"
                                type="datetime-local"
                                class="mt-1 w-full rounded border border-zinc-700 bg-zinc-950 px-3 py-2 text-white"
                            />
                        </label>
                    </div>

                    <input
                        v-model="form.reason"
                        class="w-full rounded border border-zinc-700 bg-zinc-950 px-3 py-2 text-sm text-white"
                        placeholder="작업 사유 또는 운영 메모"
                    />
                    <button
                        type="submit"
                        class="w-full rounded bg-amber-500 px-4 py-3 font-bold text-black hover:bg-amber-400 disabled:cursor-not-allowed disabled:opacity-40"
                        :disabled="submitting || Boolean(activeOperation) || !form.scenarioId"
                        data-testid="request-reset"
                    >
                        {{ form.scheduledAt ? '초기화 예약' : '초기화 시작' }}
                    </button>
                </form>
            </section>

            <section class="rounded-lg border border-zinc-800 bg-zinc-900 p-5">
                <div class="mb-4 flex items-center justify-between">
                    <h3 class="text-lg font-semibold">작업 이력</h3>
                    <span class="text-xs text-zinc-500">3초마다 상태 갱신</span>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full min-w-[920px] text-left text-sm" data-testid="operations-table">
                        <thead class="border-b border-zinc-700 text-xs text-zinc-500">
                            <tr>
                                <th class="p-2">요청/예약</th>
                                <th class="p-2">작업 ID</th>
                                <th class="p-2">프로필</th>
                                <th class="p-2">작업</th>
                                <th class="p-2">상태</th>
                                <th class="p-2">소스</th>
                                <th class="p-2">해석 커밋</th>
                                <th class="p-2">요청자/사유</th>
                                <th class="p-2">완료/오류</th>
                                <th class="p-2"></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr
                                v-for="operation in operations"
                                :key="operation.id"
                                class="border-b border-zinc-800 align-top"
                            >
                                <td class="p-2 text-xs">
                                    {{ formatTime(operation.createdAt) }}
                                    <div v-if="operation.scheduledAt" class="mt-1 text-amber-300">
                                        예약 {{ formatTime(operation.scheduledAt) }}
                                    </div>
                                </td>
                                <td class="max-w-48 break-all p-2 font-mono text-xs">{{ operation.id }}</td>
                                <td class="p-2">{{ operation.profileName }}</td>
                                <td class="p-2">{{ operation.type }}</td>
                                <td class="p-2 font-semibold">{{ operation.status }}</td>
                                <td class="p-2 font-mono text-xs">
                                    {{ operation.sourceMode ?? '-' }}<br />{{ operation.sourceRef ?? '' }}
                                </td>
                                <td class="p-2 font-mono text-xs">{{ shortSha(operation.resolvedCommitSha) }}</td>
                                <td class="max-w-xs p-2 text-xs">
                                    <div class="font-mono">{{ operation.requestedBy }}</div>
                                    <div v-if="operation.reason" class="mt-1 text-zinc-400">{{ operation.reason }}</div>
                                </td>
                                <td class="max-w-xs p-2 text-xs">
                                    {{ formatTime(operation.completedAt) }}
                                    <div
                                        v-if="operation.error"
                                        class="mt-1"
                                        :class="operation.status === 'FAILED' ? 'text-red-400' : 'text-amber-300'"
                                    >
                                        {{ operation.error }}
                                    </div>
                                </td>
                                <td class="p-2">
                                    <button
                                        v-if="operation.status === 'QUEUED'"
                                        class="rounded border border-red-800 px-2 py-1 text-xs text-red-300 hover:bg-red-950"
                                        @click="cancelOperation(operation)"
                                    >
                                        취소
                                    </button>
                                    <button
                                        v-else-if="operation.status === 'FAILED' || operation.status === 'CANCELLED'"
                                        class="rounded border border-amber-700 px-2 py-1 text-xs text-amber-300 hover:bg-amber-950"
                                        @click="retryOperation(operation)"
                                    >
                                        재시도
                                    </button>
                                </td>
                            </tr>
                            <tr v-if="operations.length === 0">
                                <td colspan="10" class="p-6 text-center text-zinc-500">작업 이력이 없습니다.</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </section>
        </div>
    </DefaultLayout>
</template>
