"use client";

import { useEffect, useMemo, useRef, useState } from "react";
import { Check, X, AlertOctagon, Rocket, Sparkles, Terminal, Zap } from "lucide-react";
import { createCompany, getProvisioningStatus, CreateCompanyRequest } from "@/lib/api/provisioning";

/**
 * Step 4 · 생성 진행 — 대대적 개편.
 * 좌측: 중앙 pulsing orb + 진행률 + 단계 타임라인 + 결과 배너
 * 우측: 터미널 로그 (auto-scroll)
 *
 * 로직 (유지):
 *  - 마운트 즉시 POST /companies → jobId 취득 → 폴링 시작
 *  - 폴링 결과 status.currentStep 변화에 맞춰 단계 state 갱신
 *  - onDone 으로 최종 결과 상위에 통보
 */

const DISPLAY_STEPS: { key: string; label: string; sub: string; sec: number }[] = [
  { key: "CREATE_DATABASE", label: "DB 생성", sub: "CREATE DATABASE '%db%'", sec: 2 },
  { key: "COPY_SCHEMA", label: "스키마 복제", sub: "pg_dump --schema-only | psql", sec: 5 },
  { key: "COPY_DATA", label: "템플릿 데이터 복사", sub: "선택된 그룹의 공통 데이터", sec: 12 },
  { key: "CREATE_ADMIN", label: "관리자 계정 생성", sub: "BCrypt · user_info", sec: 3 },
  { key: "FINALIZE", label: "마무리", sub: "db_status=active · 캐시 무효화", sec: 2 },
];

type RowStatus = "pending" | "running" | "done" | "failed";

export default function Step4Run({
  state,
  onDone,
}: {
  state: Record<string, any>;
  onDone: (result: { success: boolean; subdomain?: string; companyCode?: string; error?: string }) => void;
}) {
  const [jobId, setJobId] = useState<string | null>(null);
  const [status, setStatus] = useState<Record<string, any>>({
    status: "in_progress",
    currentStep: "",
    progress: 0,
  });
  const [createError, setCreateError] = useState<string | null>(null);
  const [log, setLog] = useState<string[]>([]);
  const [startedAt] = useState<number>(() => Date.now());
  const pollRef = useRef<NodeJS.Timeout | null>(null);
  const startedRef = useRef(false);
  const prevStepRef = useRef<string>("");
  const logScrollRef = useRef<HTMLDivElement>(null);

  function appendLog(line: string) {
    const hhmmss = new Date().toTimeString().slice(0, 8);
    setLog((lg) => [...lg, `[${hhmmss}] ${line}`]);
  }

  // 로그 auto-scroll
  useEffect(() => {
    const el = logScrollRef.current;
    if (el) el.scrollTop = el.scrollHeight;
  }, [log]);

  useEffect(() => {
    if (startedRef.current) return;
    startedRef.current = true;
    appendLog(`▸ START provisioning · ${state.company_code || "—"}`);
    appendLog(`· subdomain=${state.subdomain}`);
    appendLog(`· db_prefix=${state.db_prefix}`);
    (async () => {
      try {
        const payload: CreateCompanyRequest = {
          company_code: state.company_code,
          company_name: state.company_name,
          subdomain: state.subdomain,
          db_prefix: state.db_prefix,
          business_registration_number: state.business_registration_number,
          representative_name: state.representative_name,
          representative_phone: state.representative_phone,
          email: state.email,
          website: state.website,
          address: state.address,
          selected_groups: state.selected_groups || [],
          initial_password: state.initial_password,
          force_password_change: state.force_password_change !== false,
        };
        const resp = await createCompany(payload);
        setJobId(resp.provisioning_id);
        appendLog(`✓ accepted · job_id=${resp.provisioning_id}`);
      } catch (e: any) {
        const msg = e?.response?.data?.message || e?.response?.data?.error || e?.message || "요청 실패";
        setCreateError(msg);
        appendLog(`✗ FAILED · ${msg}`);
        onDone({ success: false, error: msg });
      }
    })();
    return () => {
      if (pollRef.current) clearTimeout(pollRef.current);
    };
    // eslint-disable-next-line
  }, []);

  useEffect(() => {
    if (!jobId) return;
    let cancelled = false;

    async function tick() {
      try {
        const s = await getProvisioningStatus(jobId!);
        if (cancelled) return;
        setStatus(s);

        if (s.currentStep && s.currentStep !== prevStepRef.current) {
          const disp = DISPLAY_STEPS.find((d) => d.key === s.currentStep);
          appendLog(`▸ ${s.currentStep}${disp ? ` · ${disp.label}` : ""}`);
          prevStepRef.current = s.currentStep;
        }

        if (s.status === "completed") {
          appendLog(`━ READY · https://${s.subdomain || state.subdomain}.invyone.com`);
          onDone({ success: true, subdomain: s.subdomain || state.subdomain, companyCode: s.companyCode });
          return;
        }
        if (s.status === "failed") {
          appendLog(`✗ FAILED · ${s.failedStep || "—"} · ${s.errorMessage || "—"}`);
          onDone({ success: false, error: s.errorMessage || "프로비저닝 실패" });
          return;
        }
      } catch {
        // 네트워크 일시 장애 → 다음 틱에서 재시도
      }
      pollRef.current = setTimeout(tick, 2000);
    }
    tick();
    return () => {
      cancelled = true;
      if (pollRef.current) clearTimeout(pollRef.current);
    };
    // eslint-disable-next-line
  }, [jobId]);

  const current = status?.currentStep as string | undefined;
  const failed = status?.status === "failed";
  const done = status?.status === "completed";

  function rowStatus(key: string): RowStatus {
    if (!current && !done && !failed) return "pending";
    if (done) return "done";
    const idx = DISPLAY_STEPS.findIndex((s) => s.key === key);
    const curIdx = DISPLAY_STEPS.findIndex((s) => s.key === current);
    if (failed && status.failedStep === key) return "failed";
    if (idx < curIdx) return "done";
    if (idx === curIdx) return failed ? "failed" : "running";
    return "pending";
  }

  const progress: number = useMemo(() => {
    if (done) return 100;
    if (typeof status?.progress === "number") return Math.max(0, Math.min(100, Math.round(status.progress)));
    if (!current) return 0;
    const curIdx = DISPLAY_STEPS.findIndex((s) => s.key === current);
    if (curIdx < 0) return 0;
    return Math.round(((curIdx + 0.5) / DISPLAY_STEPS.length) * 100);
  }, [done, current, status?.progress]);

  const elapsedSec = Math.max(0, Math.round((Date.now() - startedAt) / 1000));

  const variant: "running" | "success" | "failed" = failed ? "failed" : done ? "success" : "running";
  const barLabel = variant === "success" ? "완료" : variant === "failed" ? "중단" : "진행 중";
  const accent =
    variant === "success" ? "rgb(var(--v5-green-rgb))" : variant === "failed" ? "var(--v5-red)" : "var(--v5-cyan)";
  const accentRgb =
    variant === "success" ? "var(--v5-green-rgb)" : variant === "failed" ? "var(--v5-red-rgb)" : "var(--v5-cyan-rgb)";

  return (
    <div
      className="wiz-step"
      style={{
        padding: "1.6rem 1.8rem",
        display: "grid",
        gridTemplateColumns: "1fr 360px",
        gap: "1.8rem",
        animation: "wizSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1)",
      }}
    >
      <style>{`
        @keyframes s4Orb {
          0%, 100% { transform: scale(1); }
          50%      { transform: scale(1.05); }
        }
        @keyframes s4OrbGlow {
          0%, 100% { opacity: 0.7; transform: scale(1); }
          50%      { opacity: 1;   transform: scale(1.15); }
        }
        @keyframes s4OrbRing1 {
          0%   { transform: translate(-50%, -50%) rotate(0deg); }
          100% { transform: translate(-50%, -50%) rotate(360deg); }
        }
        @keyframes s4OrbRing2 {
          0%   { transform: translate(-50%, -50%) rotate(360deg); }
          100% { transform: translate(-50%, -50%) rotate(0deg); }
        }
        @keyframes s4StepIn {
          from { opacity: 0; transform: translateX(-8px); }
          to   { opacity: 1; transform: translateX(0); }
        }
        @keyframes s4SuccessBurst {
          0%   { transform: scale(0.2); opacity: 0; }
          60%  { transform: scale(1.2); opacity: 1; }
          100% { transform: scale(1); opacity: 1; }
        }
        @keyframes s4SuccessRay {
          0%   { opacity: 0; transform: scaleY(0); }
          50%  { opacity: 0.9; transform: scaleY(1); }
          100% { opacity: 0; transform: scaleY(1); }
        }
        @keyframes s4Shake {
          0%, 100% { transform: translateX(0); }
          20%      { transform: translateX(-4px); }
          40%      { transform: translateX(4px); }
          60%      { transform: translateX(-3px); }
          80%      { transform: translateX(3px); }
        }
        @keyframes s4Sweep {
          0%   { left: -40%; }
          100% { left: 100%; }
        }
        @keyframes s4LogLine {
          from { opacity: 0; transform: translateY(-2px); }
          to   { opacity: 1; transform: translateY(0); }
        }
        .s4-step-row {
          animation: s4StepIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
        }
        .s4-log-line {
          animation: s4LogLine 0.2s ease-out both;
        }
        .s4-shake {
          animation: s4Shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
        }
      `}</style>

      <div>
        <div
          style={{
            fontSize: "0.72rem",
            fontWeight: 700,
            letterSpacing: "0.18em",
            textTransform: "uppercase",
            color: accent,
            marginBottom: 8,
            fontFamily: "var(--v5-font-mono)",
          }}
        >
          04 · 생성 진행
        </div>
        <h2
          style={{
            fontSize: "1.4rem",
            fontWeight: 800,
            letterSpacing: "-0.02em",
            margin: 0,
            color: "var(--v5-text)",
          }}
        >
          {variant === "success" ? "회사 생성 완료" : variant === "failed" ? "생성 실패" : "회사 생성 중"}
        </h2>
        <div style={{ fontSize: "0.85rem", color: "var(--v5-text-sec)", marginTop: 6, fontWeight: 500, lineHeight: 1.55 }}>
          {variant === "success" && (
            <>
              <b style={{ color: "rgb(var(--v5-green-rgb))" }}>
                {state.subdomain}.invyone.com
              </b>{" "}
              에서 접속 가능합니다. 회사에 URL 과 초기 비밀번호를 전달하세요.
            </>
          )}
          {variant === "failed" && <>오류가 발생했습니다. 로그를 확인 후 롤백/재시도를 진행하세요.</>}
          {variant === "running" && <>브라우저를 닫아도 서버에서 계속 진행됩니다.</>}
        </div>
        {createError && (
          <div style={{ marginTop: 8, fontSize: "0.78rem", color: "var(--v5-red)", fontFamily: "var(--v5-font-mono)" }}>
            {createError}
          </div>
        )}

        {/* ── 중앙 Orb + 큰 진행 바 ── */}
        <div
          className={variant === "failed" ? "s4-shake" : ""}
          style={{
            marginTop: "1.3rem",
            padding: "1.6rem 1.4rem 1.25rem",
            border: "1px solid var(--v5-border)",
            borderRadius: 14,
            background:
              variant === "running"
                ? "linear-gradient(180deg, rgba(var(--v5-cyan-rgb), 0.04), var(--v5-surface-solid))"
                : variant === "success"
                  ? "linear-gradient(180deg, rgba(var(--v5-green-rgb), 0.05), var(--v5-surface-solid))"
                  : "linear-gradient(180deg, rgba(var(--v5-red-rgb), 0.04), var(--v5-surface-solid))",
            boxShadow: `0 0 22px rgba(${accentRgb}, 0.08)`,
            position: "relative",
            overflow: "hidden",
          }}
        >
          {/* Orb */}
          <div
            style={{
              position: "relative",
              height: 140,
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              marginBottom: "1.1rem",
            }}
          >
            {/* outer glow */}
            <div
              style={{
                position: "absolute",
                top: "50%",
                left: "50%",
                width: 180,
                height: 180,
                borderRadius: "50%",
                transform: "translate(-50%, -50%)",
                background: `radial-gradient(circle, rgba(${accentRgb}, 0.14) 0%, rgba(${accentRgb}, 0) 70%)`,
                animation: variant === "running" ? "s4OrbGlow 2.4s ease-in-out infinite" : "none",
                pointerEvents: "none",
              }}
            />

            {/* rotating ring (single solid arc) */}
            {variant === "running" && (
              <div
                style={{
                  position: "absolute",
                  top: "50%",
                  left: "50%",
                  width: 110,
                  height: 110,
                  borderRadius: "50%",
                  border: "1.5px solid rgba(var(--v5-cyan-rgb), 0.12)",
                  borderTopColor: "rgba(var(--v5-cyan-rgb), 0.85)",
                  animation: "s4OrbRing2 2.4s linear infinite",
                  pointerEvents: "none",
                }}
              />
            )}

            {/* success rays */}
            {variant === "success" &&
              Array.from({ length: 8 }).map((_, i) => (
                <div
                  key={i}
                  style={{
                    position: "absolute",
                    top: "50%",
                    left: "50%",
                    width: 2,
                    height: 46,
                    marginLeft: -1,
                    marginTop: -46,
                    background: "linear-gradient(to top, rgba(var(--v5-green-rgb), 0.7), transparent)",
                    transformOrigin: "bottom center",
                    transform: `rotate(${i * 45}deg)`,
                    animation: `s4SuccessRay 1.2s ease-out ${0.15 + i * 0.04}s both`,
                    pointerEvents: "none",
                  }}
                />
              ))}

            {/* core */}
            <div
              style={{
                position: "relative",
                width: 78,
                height: 78,
                borderRadius: "50%",
                background:
                  variant === "success"
                    ? "linear-gradient(135deg, rgb(var(--v5-green-rgb)), #5de6b5)"
                    : variant === "failed"
                      ? "linear-gradient(135deg, var(--v5-red), #ff6b6b)"
                      : "linear-gradient(135deg, var(--v5-cyan), var(--v5-primary))",
                boxShadow: `0 0 18px rgba(${accentRgb}, 0.4), inset 0 -4px 10px rgba(0, 0, 0, 0.18)`,
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                color: "#fff",
                animation:
                  variant === "running"
                    ? "s4Orb 2.4s ease-in-out infinite"
                    : variant === "success"
                      ? "s4SuccessBurst 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both"
                      : "none",
              }}
            >
              {variant === "success" ? (
                <Check size={36} strokeWidth={2.5} />
              ) : variant === "failed" ? (
                <X size={36} strokeWidth={2.5} />
              ) : (
                <Rocket size={30} strokeWidth={1.75} />
              )}
            </div>
          </div>

          {/* 진행 바 */}
          <div
            style={{
              display: "flex",
              alignItems: "baseline",
              justifyContent: "space-between",
              marginBottom: "0.55rem",
            }}
          >
            <div
              style={{
                fontSize: "0.72rem",
                fontWeight: 700,
                letterSpacing: "0.15em",
                textTransform: "uppercase",
                color: "var(--v5-text-muted)",
                fontFamily: "var(--v5-font-mono)",
                display: "inline-flex",
                alignItems: "center",
                gap: 6,
              }}
            >
              {variant === "running" && (
                <span
                  style={{
                    width: 7,
                    height: 7,
                    borderRadius: "50%",
                    background: accent,
                    boxShadow: `0 0 4px ${accent}`,
                    animation: "pulsedot 1.4s ease-in-out infinite",
                  }}
                />
              )}
              {barLabel}
            </div>
            <div
              style={{
                fontSize: "1.75rem",
                fontWeight: 800,
                letterSpacing: "-0.03em",
                fontFamily: "var(--v5-font-mono)",
                color: accent,
                fontVariantNumeric: "tabular-nums",
              }}
            >
              {progress}
              <span style={{ fontSize: "0.9rem", color: "var(--v5-text-muted)", marginLeft: 1 }}>%</span>
            </div>
          </div>
          <div
            style={{
              height: 8,
              borderRadius: 4,
              background: "var(--v5-bg-subtle)",
              overflow: "hidden",
              position: "relative",
              border: "1px solid var(--v5-border)",
            }}
          >
            <div
              style={{
                height: "100%",
                width: `${progress}%`,
                background:
                  variant === "success"
                    ? "linear-gradient(90deg, rgb(var(--v5-green-rgb)), #5de6b5)"
                    : variant === "failed"
                      ? "linear-gradient(90deg, var(--v5-red), #ff6b6b)"
                      : "linear-gradient(90deg, var(--v5-cyan), var(--v5-primary))",
                boxShadow: `0 0 8px rgba(${accentRgb}, 0.35)`,
                transition: "width 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
                position: "relative",
              }}
            />
            {variant === "running" && (
              <div
                style={{
                  position: "absolute",
                  top: 0,
                  bottom: 0,
                  width: "40%",
                  background: "linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent)",
                  animation: "s4Sweep 1.6s ease-in-out infinite",
                  pointerEvents: "none",
                }}
              />
            )}
          </div>
          <div
            style={{
              marginTop: "0.7rem",
              display: "flex",
              justifyContent: "space-between",
              fontFamily: "var(--v5-font-mono)",
              fontSize: "0.72rem",
              color: "var(--v5-text-muted)",
              fontWeight: 500,
            }}
          >
            <span>작업번호 · {jobId || "—"}</span>
            <span>
              경과 {elapsedSec}s
              {variant === "running" && " · 진행 중"}
              {variant === "success" && " · 완료"}
              {variant === "failed" && " · 실패"}
            </span>
          </div>
        </div>

        {/* 단계 타임라인 */}
        <div
          style={{
            marginTop: "1.1rem",
            padding: "0.5rem 1.2rem",
            border: "1px solid var(--v5-border)",
            borderRadius: 11,
            background: "var(--v5-surface-solid)",
          }}
        >
          {DISPLAY_STEPS.map((s, i) => (
            <RunRow
              key={s.key}
              step={s}
              idx={i}
              status={rowStatus(s.key)}
              isLast={i === DISPLAY_STEPS.length - 1}
              dbName={`${state.db_prefix || "___"}_invyone`}
            />
          ))}
        </div>

        {/* 실패 에러 메시지 */}
        {failed && (
          <div
            style={{
              marginTop: "1.1rem",
              padding: "1rem 1.15rem",
              border: "1px solid rgba(var(--v5-red-rgb), 0.35)",
              background: "rgba(var(--v5-red-rgb), 0.05)",
              borderRadius: 11,
            }}
          >
            <div
              style={{
                fontSize: "0.75rem",
                fontWeight: 700,
                color: "var(--v5-red)",
                letterSpacing: "0.12em",
                textTransform: "uppercase",
                marginBottom: 8,
                display: "flex",
                alignItems: "center",
                gap: 7,
                fontFamily: "var(--v5-font-mono)",
              }}
            >
              <AlertOctagon size={14} /> 오류 · {status?.failedStep || "—"}
            </div>
            <div
              style={{
                fontFamily: "var(--v5-font-mono)",
                fontSize: "0.82rem",
                padding: "0.7rem 0.8rem",
                background: "var(--v5-bg)",
                borderRadius: 7,
                border: "1px solid var(--v5-border)",
                color: "var(--v5-text)",
                whiteSpace: "pre-wrap",
                wordBreak: "break-word",
                overflowX: "auto",
                fontWeight: 500,
              }}
            >
              {status?.errorMessage || createError || "—"}
            </div>
          </div>
        )}

        {/* 성공 접속 카드 */}
        {done && (
          <div
            style={{
              marginTop: "1.1rem",
              padding: "1.15rem 1.3rem",
              border: "1px solid rgba(var(--v5-green-rgb), 0.4)",
              background: "linear-gradient(135deg, rgba(var(--v5-green-rgb), 0.08), rgba(var(--v5-green-rgb), 0.03))",
              borderRadius: 12,
              boxShadow: "0 0 16px rgba(var(--v5-green-rgb), 0.08)",
              display: "flex",
              alignItems: "center",
              gap: "1rem",
              animation: "s4SuccessBurst 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both 0.2s",
            }}
          >
            <div
              style={{
                width: 48,
                height: 48,
                borderRadius: 12,
                background: "linear-gradient(135deg, rgb(var(--v5-green-rgb)), #5de6b5)",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                color: "#fff",
                boxShadow: "0 0 12px rgba(var(--v5-green-rgb), 0.3)",
                flexShrink: 0,
              }}
            >
              <Sparkles size={22} strokeWidth={1.75} />
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div
                style={{
                  fontSize: "0.72rem",
                  fontWeight: 700,
                  color: "rgb(var(--v5-green-rgb))",
                  letterSpacing: "0.08em",
                }}
              >
                접속 준비 완료
              </div>
              <div style={{ fontSize: "1rem", fontWeight: 700, marginTop: 3, color: "var(--v5-text)" }}>
                <span style={{ fontFamily: "var(--v5-font-mono)", color: "var(--v5-cyan)" }}>
                  {state.subdomain}.invyone.com
                </span>
                <span style={{ color: "var(--v5-text-sec)", fontWeight: 400 }}> 접속 가능</span>
              </div>
              <div
                style={{
                  fontSize: "0.78rem",
                  color: "var(--v5-text-muted)",
                  marginTop: 3,
                  fontFamily: "var(--v5-font-mono)",
                  fontWeight: 500,
                }}
              >
                로그인: {state.db_prefix}_admin / [Step 3 에서 복사한 비밀번호]
              </div>
            </div>
          </div>
        )}
      </div>

      {/* ── 우측: 터미널 로그 콘솔 ── */}
      <div style={{ alignSelf: "start" }}>
        <div
          style={{
            background: "#0a0a0c",
            borderRadius: 11,
            border: "1px solid var(--v5-border)",
            overflow: "hidden",
            boxShadow: "0 0 16px rgba(0, 0, 0, 0.25)",
          }}
        >
          <div
            style={{
              padding: "0.75rem 0.95rem",
              borderBottom: "1px solid rgba(255,255,255,0.08)",
              display: "flex",
              alignItems: "center",
              gap: 8,
              fontFamily: "var(--v5-font-mono)",
              fontSize: "0.7rem",
              letterSpacing: "0.15em",
              textTransform: "uppercase",
              color: "#a8a8b0",
              fontWeight: 600,
              background: "linear-gradient(180deg, #111114, #0a0a0c)",
            }}
          >
            <Terminal size={13} />
            <span
              style={{
                width: 7,
                height: 7,
                borderRadius: "50%",
                background: accent,
                boxShadow: `0 0 8px ${accent}`,
                animation: variant === "running" ? "pulsedot 1.4s ease-in-out infinite" : "none",
              }}
            />
생성 로그
            <span style={{ flex: 1 }} />
            <span style={{ fontSize: "0.62rem", color: "#6a6a72", letterSpacing: "0.08em" }}>
              {log.length} lines
            </span>
          </div>
          <div
            ref={logScrollRef}
            style={{
              padding: "0.75rem 0.95rem",
              fontFamily: "var(--v5-font-mono)",
              fontSize: "0.72rem",
              lineHeight: 1.7,
              color: "#d4d4dc",
              maxHeight: 480,
              overflow: "auto",
              whiteSpace: "pre-wrap",
              background:
                "radial-gradient(ellipse at top, rgba(var(--v5-cyan-rgb), 0.04), transparent 60%), #0a0a0c",
            }}
          >
            {log.length === 0 ? (
              <span style={{ color: "#70707a" }}>(로그 없음)</span>
            ) : (
              log.map((l, i) => (
                <div key={i} className="s4-log-line" style={{ color: colorizeLog(l) }}>
                  {l}
                </div>
              ))
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

function colorizeLog(line: string): string {
  if (line.includes("✓") || line.includes("━ READY")) return "#5de6b5";
  if (line.includes("✗") || line.includes("FAILED")) return "#ff8a8a";
  if (line.includes("▸")) return "#8ce7ff";
  return "#d4d4dc";
}

function RunRow({
  step,
  idx,
  status,
  isLast,
  dbName,
}: {
  step: { key: string; label: string; sub: string; sec: number };
  idx: number;
  status: RowStatus;
  isLast: boolean;
  dbName: string;
}) {
  const isDone = status === "done";
  const isActive = status === "running";
  const isFailed = status === "failed";
  const isPending = status === "pending";
  const barColor = isFailed
    ? "var(--v5-red)"
    : isDone
      ? "rgb(var(--v5-green-rgb))"
      : isActive
        ? "var(--v5-cyan)"
        : "var(--v5-border)";

  return (
    <div
      className="s4-step-row"
      style={{
        position: "relative",
        display: "grid",
        gridTemplateColumns: "40px 1fr 100px",
        gap: "1rem",
        padding: "0.85rem 0",
        alignItems: "center",
        animationDelay: `${idx * 60}ms`,
      }}
    >
      {/* circle + connecting line */}
      <div
        style={{
          position: "relative",
          height: 38,
          display: "flex",
          justifyContent: "center",
        }}
      >
        {!isLast && (
          <div
            style={{
              position: "absolute",
              top: 32,
              bottom: -18,
              width: 2,
              background: isDone ? "rgb(var(--v5-green-rgb))" : "var(--v5-border)",
              left: 19,
              transition: "background 0.4s ease",
            }}
          />
        )}
        <div
          style={{
            width: 34,
            height: 34,
            borderRadius: "50%",
            background: isFailed
              ? "var(--v5-red)"
              : isDone
                ? "rgb(var(--v5-green-rgb))"
                : isActive
                  ? "var(--v5-cyan)"
                  : "var(--v5-bg)",
            border: `2px solid ${barColor}`,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            color: isPending ? "var(--v5-text-muted)" : "#fff",
            boxShadow: isActive
              ? "0 0 10px rgba(var(--v5-cyan-rgb), 0.35)"
              : isFailed
                ? "0 0 10px rgba(var(--v5-red-rgb), 0.3)"
                : isDone
                  ? "0 0 6px rgba(var(--v5-green-rgb), 0.25)"
                  : "none",
            transition: "all 0.35s cubic-bezier(0.4,0,0.2,1)",
            position: "relative",
            zIndex: 1,
            flexShrink: 0,
            animation: isActive ? "wizPulseRing 1.8s ease-out infinite" : "none",
          }}
        >
          {isDone && <Check size={15} strokeWidth={2.5} />}
          {isFailed && <X size={15} strokeWidth={2.5} />}
          {isActive && (
            <span
              style={{
                width: 13,
                height: 13,
                border: "2.5px solid rgba(255,255,255,0.35)",
                borderTopColor: "#fff",
                borderRadius: "50%",
              }}
              className="spin"
            />
          )}
          {isPending && (
            <span
              style={{
                fontSize: "0.78rem",
                fontWeight: 700,
                color: "var(--v5-text-muted)",
                fontFamily: "var(--v5-font-mono)",
              }}
            >
              {idx + 1}
            </span>
          )}
        </div>
      </div>

      <div>
        <div
          style={{
            fontSize: "0.92rem",
            fontWeight: isActive ? 700 : 600,
            letterSpacing: "-0.01em",
            color: isFailed
              ? "var(--v5-red)"
              : isActive
                ? "var(--v5-cyan)"
                : isDone
                  ? "var(--v5-text)"
                  : "var(--v5-text-muted)",
            transition: "color 0.3s ease",
            display: "inline-flex",
            alignItems: "center",
            gap: 6,
          }}
        >
          {step.label}
          {isActive && (
            <Zap
              size={12}
              style={{ color: "var(--v5-cyan)", animation: "pulsedot 1.4s ease-in-out infinite" }}
            />
          )}
        </div>
        <div
          style={{
            fontSize: "0.72rem",
            color: "var(--v5-text-muted)",
            fontFamily: "var(--v5-font-mono)",
            marginTop: 3,
            fontWeight: 500,
          }}
        >
          {step.sub.replace("%db%", dbName)}
        </div>
      </div>

      <div
        style={{
          textAlign: "right",
          fontSize: "0.76rem",
          fontFamily: "var(--v5-font-mono)",
          fontWeight: 600,
          color: isFailed
            ? "var(--v5-red)"
            : isDone
              ? "rgb(var(--v5-green-rgb))"
              : isActive
                ? "var(--v5-cyan)"
                : "var(--v5-text-muted)",
          transition: "color 0.3s ease",
        }}
      >
        {isDone && "완료"}
        {isActive && "진행 중…"}
        {isPending && "대기"}
        {isFailed && "실패"}
      </div>
    </div>
  );
}
