"use client";

import { Building2, Layers, UserCog, Rocket, Check } from "lucide-react";

export const WIZARD_STEPS = [
  { n: 1, key: "basic", label: "기본 정보", icon: Building2, desc: "회사 · 접속 주소 · DB" },
  { n: 2, key: "template", label: "템플릿 선택", icon: Layers, desc: "복사할 기준 데이터" },
  { n: 3, key: "admin", label: "관리자 계정", icon: UserCog, desc: "초기 관리자 생성" },
  { n: 4, key: "run", label: "생성 진행", icon: Rocket, desc: "DB · 스키마 · 복사" },
] as const;

export default function StepIndicator({ current }: { current: number }) {
  return (
    <div
      style={{
        display: "flex",
        alignItems: "stretch",
        background: "var(--v5-surface-solid)",
        borderBottom: "1px solid var(--v5-border)",
      }}
    >
      {WIZARD_STEPS.map((s, i) => {
        const done = current > s.n;
        const active = current === s.n;
        return (
          <div
            key={s.key}
            style={{
              flex: 1,
              display: "flex",
              alignItems: "center",
              gap: "0.85rem",
              padding: "0.95rem 1.2rem",
              position: "relative",
              background: active ? "rgba(var(--v5-cyan-rgb), 0.06)" : "transparent",
              borderRight: i < WIZARD_STEPS.length - 1 ? "1px solid var(--v5-border)" : "none",
              transition: "background 0.3s ease",
            }}
          >
            <div
              style={{
                width: 34,
                height: 34,
                borderRadius: 9,
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                background: done
                  ? "rgb(var(--v5-green-rgb))"
                  : active
                    ? "var(--v5-cyan)"
                    : "var(--v5-bg-subtle)",
                color: done || active ? "#fff" : "var(--v5-text-muted)",
                fontFamily: "var(--v5-font-mono)",
                fontSize: "0.82rem",
                fontWeight: 700,
                boxShadow: active ? "0 0 10px rgba(var(--v5-cyan-rgb), 0.3)" : "none",
                transition: "all 0.3s cubic-bezier(0.4,0,0.2,1)",
                flexShrink: 0,
                animation: active ? "wizPulseRing 2s ease-out infinite" : "none",
              }}
            >
              {done ? <Check size={17} strokeWidth={2.5} /> : s.n}
            </div>
            <div style={{ minWidth: 0, flex: 1 }}>
              <div
                style={{
                  fontSize: "0.65rem",
                  fontWeight: 700,
                  letterSpacing: "0.15em",
                  textTransform: "uppercase",
                  color: done || active ? "var(--v5-text-sec)" : "var(--v5-text-muted)",
                  fontFamily: "var(--v5-font-mono)",
                }}
              >
                STEP {s.n} / {WIZARD_STEPS.length}
              </div>
              <div
                style={{
                  fontSize: "0.95rem",
                  fontWeight: active || done ? 700 : 500,
                  color: active
                    ? "var(--v5-cyan)"
                    : done
                      ? "var(--v5-text)"
                      : "var(--v5-text-sec)",
                  marginTop: 2,
                  letterSpacing: "-0.01em",
                  transition: "color 0.3s ease",
                }}
              >
                {s.label}
              </div>
            </div>
            {active && (
              <div
                style={{
                  position: "absolute",
                  left: 0,
                  right: 0,
                  bottom: -1,
                  height: 2,
                  background:
                    "linear-gradient(90deg, transparent, var(--v5-cyan), transparent)",
                }}
              />
            )}
          </div>
        );
      })}
    </div>
  );
}
