"use client";

import { useLayoutEffect, useRef, useState } from "react";
import {
  ChevronRight,
  MoreHorizontal,
  Info,
  Users,
  Layers,
  AlertTriangle,
  ArrowUpRight,
  KeyRound,
  Copy,
  PauseCircle,
  PlayCircle,
  Trash2,
  FileText,
} from "lucide-react";
import StatusDot from "./StatusDot";
import MembersTab from "./tabs/MembersTab";
import TemplatesTab from "./tabs/TemplatesTab";
import AuditLogDrawer from "./AuditLogDrawer";
import AdminInfoModal from "./modals/AdminInfoModal";
import DeactivateModal from "./modals/DeactivateModal";
import DeleteCompanyModal from "./modals/DeleteCompanyModal";
import RecopyTemplatesModal from "./modals/RecopyTemplatesModal";
import { useQuery } from "@tanstack/react-query";
import { getInstalledGroups, getCompanyAuditLog } from "@/lib/api/provisioning";

const TABS = [
  { key: "overview", label: "개요", Icon: Info, soon: false },
  { key: "members", label: "구성원", Icon: Users, soon: false },
  { key: "templates", label: "템플릿", Icon: Layers, soon: false },
  { key: "audit", label: "감사 로그", Icon: FileText, soon: false },
  { key: "danger", label: "위험 영역", Icon: AlertTriangle, soon: false },
] as const;

/**
 * 단일 회사 row. 클릭 시 accordion 펼쳐지며 탭 4개 (개요/구성원/템플릿/위험영역) 표시.
 * 목업 v9 AccRow 포팅. API 데이터 스키마는 /companies-stats 응답.
 */
export default function CompanyAccordionRow({
  r,
  open,
  onToggle,
}: {
  r: Record<string, any>;
  open: boolean;
  onToggle: () => void;
}) {
  const [tab, setTab] = useState<"overview" | "members" | "templates" | "audit" | "danger">("overview");
  const tabsWrapRef = useRef<HTMLDivElement>(null);
  const tabBtnRefs = useRef<Record<string, HTMLButtonElement | null>>({});
  const [indicator, setIndicator] = useState<{ left: number; width: number }>({ left: 0, width: 0 });

  const [adminModal, setAdminModal] = useState<false | "view" | "reset-warn">(false);
  const [recopyModal, setRecopyModal] = useState(false);
  const [deactivateModal, setDeactivateModal] = useState(false);
  const [deleteModal, setDeleteModal] = useState(false);
  const [auditDrawer, setAuditDrawer] = useState(false);

  useLayoutEffect(() => {
    if (!open) return;
    const el = tabBtnRefs.current[tab];
    const wrap = tabsWrapRef.current;
    if (el && wrap) {
      const r1 = el.getBoundingClientRect();
      const r2 = wrap.getBoundingClientRect();
      setIndicator({ left: r1.left - r2.left, width: r1.width });
    }
  }, [tab, open]);

  const sub = r.subdomain || "";
  const name = r.company_name || r.name || r.company_code;
  const plan = (r.plan || "Starter").toString();
  const dbName = r.db_name || `${sub}_invyone`;
  const dbPct = Number(r.db_pct) || 0;
  const users = Number(r.users) || 0;
  const active30 = Number(r.active30) || 0;

  return (
    <div
      data-accrow
      data-prov-row
      style={{
        background: open ? "var(--v5-surface-hover)" : "var(--v5-surface-solid)",
        borderBottom: "1px solid var(--v5-border)",
        position: "relative",
      }}
    >
      <div
        style={{
          position: "absolute",
          left: 0,
          top: 0,
          bottom: 0,
          width: 2,
          background: "var(--v5-primary)",
          transform: open ? "scaleY(1)" : "scaleY(0)",
          transformOrigin: "center",
          transition: "transform 0.25s cubic-bezier(0.4,0,0.2,1)",
        }}
      />

      <button
        onClick={onToggle}
        style={{
          width: "100%",
          textAlign: "left",
          background: "transparent",
          border: 0,
          cursor: "pointer",
          padding: "0.7rem 2rem",
          display: "grid",
          gridTemplateColumns: "14px minmax(300px, 440px) minmax(170px, 1fr) 100px 120px 120px 110px 90px 18px",
          gap: "0.9rem",
          alignItems: "center",
        }}
      >
        <ChevronRight
          size={14}
          color={open ? "var(--v5-primary)" : "var(--v5-text-muted)"}
          strokeWidth={1.75}
          style={{
            transform: open ? "rotate(90deg)" : "rotate(0deg)",
            transition: "transform 0.25s cubic-bezier(0.4,0,0.2,1), color 0.2s ease",
          }}
        />

        <div style={{ minWidth: 0 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
            <span style={{ fontSize: "0.9rem", fontWeight: 700, letterSpacing: "-0.01em", color: "var(--v5-text)" }}>
              {name}
            </span>
          </div>
          <div
            style={{
              fontSize: "0.72rem",
              color: "var(--v5-text-sec)",
              fontFamily: "var(--v5-font-mono)",
              marginTop: 3,
              display: "flex",
              alignItems: "center",
              gap: 6,
            }}
          >
            <span style={{ color: "var(--v5-primary)" }}>{sub ? `${sub}.invyone.com` : "—"}</span>
            <span style={{ opacity: 0.4 }}>·</span>
            <span>{r.company_code}</span>
            {r.industry && (
              <>
                <span style={{ opacity: 0.4 }}>·</span>
                <span>{r.industry}</span>
              </>
            )}
          </div>
        </div>

        {/* 담당자 */}
        <div style={{ minWidth: 0 }}>
          {r.owner || r.representative_name ? (
            <>
              <div
                style={{
                  fontSize: "0.8125rem",
                  fontWeight: 600,
                  color: "var(--v5-text)",
                  lineHeight: 1.2,
                  whiteSpace: "nowrap",
                  overflow: "hidden",
                  textOverflow: "ellipsis",
                }}
              >
                {r.owner || r.representative_name}
              </div>
              {r.email && (
                <div
                  style={{
                    fontSize: "0.7rem",
                    color: "var(--v5-text-muted)",
                    fontFamily: "var(--v5-font-mono)",
                    marginTop: 2,
                    whiteSpace: "nowrap",
                    overflow: "hidden",
                    textOverflow: "ellipsis",
                  }}
                >
                  {r.email}
                </div>
              )}
              {!r.email && r.representative_phone && (
                <div
                  style={{
                    fontSize: "0.7rem",
                    color: "var(--v5-text-muted)",
                    fontFamily: "var(--v5-font-mono)",
                    marginTop: 2,
                  }}
                >
                  {r.representative_phone}
                </div>
              )}
            </>
          ) : (
            <div style={{ fontSize: "0.8rem", color: "var(--v5-text-muted)" }}>—</div>
          )}
        </div>

        {/* 플랜 */}
        <div>
          <PlanBadge plan={plan} />
        </div>

        {/* 생성일 */}
        <div>
          <div style={labelSm}>생성</div>
          <div
            style={{
              fontSize: "0.8rem",
              fontWeight: 600,
              fontFamily: "var(--v5-font-mono)",
              color: "var(--v5-text)",
              lineHeight: 1.15,
            }}
          >
            {formatRelative(r.created) || "—"}
          </div>
          <div
            style={{
              fontSize: "0.68rem",
              color: "var(--v5-text-muted)",
              fontFamily: "var(--v5-font-mono)",
              marginTop: 2,
            }}
          >
            {formatDate(r.created)}
          </div>
        </div>

        <div>
          <div style={labelSm}>사용자</div>
          <div
            style={{
              fontSize: "0.95rem",
              fontWeight: 700,
              fontFamily: "var(--v5-font-mono)",
              fontVariantNumeric: "tabular-nums",
              color: "var(--v5-text)",
              lineHeight: 1.15,
            }}
          >
            {users}
            <span style={{ fontSize: "0.7rem", color: "var(--v5-text-sec)", fontWeight: 500, marginLeft: 2 }}>명</span>
          </div>
          <div style={{ fontSize: "0.68rem", color: "var(--v5-text-sec)", fontFamily: "var(--v5-font-mono)", marginTop: 2 }}>
            30일 활성 {active30}
          </div>
        </div>

        <div>
          <div style={labelSm}>DB</div>
          <div style={{ fontSize: "0.75rem", fontFamily: "var(--v5-font-mono)", color: "var(--v5-text)", fontWeight: 600, marginBottom: 4 }}>
            {r.db_size || "—"}
          </div>
          <div style={{ height: 2, background: "var(--v5-border)", borderRadius: 1, overflow: "hidden" }}>
            <div
              style={{
                width: `${Math.min(dbPct, 100)}%`,
                height: "100%",
                background: dbPct > 70 ? "var(--v5-amber)" : "var(--v5-primary)",
              }}
            />
          </div>
        </div>

        <StatusDot status={r.db_status || r.status} />

        <MoreHorizontal size={14} color="var(--v5-text-muted)" strokeWidth={1.75} />
      </button>

      <div
        style={{
          display: "grid",
          gridTemplateRows: open ? "1fr" : "0fr",
          transition: "grid-template-rows 0.3s cubic-bezier(0.4,0,0.2,1)",
        }}
      >
        <div style={{ overflow: "hidden" }}>
        <div
          style={{
            padding: "0 2rem 0.9rem 3rem",
            opacity: open ? 1 : 0,
            transform: open ? "translateY(0)" : "translateY(-4px)",
            transition: "opacity 0.25s ease 0.05s, transform 0.25s ease 0.05s",
          }}
        >
          {/* tabs */}
          <div
            ref={tabsWrapRef}
            style={{
              display: "flex",
              gap: 0,
              borderBottom: "1px solid var(--v5-border)",
              marginBottom: "0.7rem",
              position: "relative",
            }}
          >
            {TABS.map(({ key: k, label: l, Icon: IconC, soon }) => (
              <button
                key={k}
                ref={(el) => { tabBtnRefs.current[k] = el; }}
                onClick={(e) => {
                  e.stopPropagation();
                  setTab(k);
                }}
                style={{
                  padding: "0.55rem 0.8rem 0.6rem",
                  background: "transparent",
                  border: 0,
                  cursor: "pointer",
                  fontSize: "0.8125rem",
                  fontWeight: 600,
                  color: tab === k ? "var(--v5-primary)" : "var(--v5-text-sec)",
                  display: "inline-flex",
                  alignItems: "center",
                  gap: 6,
                  fontFamily: "inherit",
                  transition: "color 0.2s ease",
                }}
              >
                <IconC size={13} strokeWidth={1.75} /> {l}
                {soon && (
                  <span
                    style={{
                      fontSize: "0.62rem",
                      fontWeight: 700,
                      padding: "2px 6px",
                      borderRadius: 3,
                      background: "rgba(var(--v5-amber-rgb), 0.18)",
                      color: "var(--v5-amber)",
                      letterSpacing: "0.03em",
                      marginLeft: 2,
                    }}
                  >
                    준비 중
                  </span>
                )}
              </button>
            ))}
            <div style={{ flex: 1 }} />
            <div
              style={{
                display: "flex",
                alignItems: "center",
                gap: 8,
                fontSize: "0.72rem",
                color: "var(--v5-text-muted)",
                padding: "0.45rem 0",
                fontFamily: "var(--v5-font-mono)",
              }}
            >
              {r.created && <>생성 {formatDate(r.created)}</>}
              {r.writer && <> · writer {r.writer}</>}
            </div>

            {/* sliding indicator */}
            <div
              style={{
                position: "absolute",
                bottom: -1,
                left: indicator.left,
                width: indicator.width,
                height: 2,
                background: "var(--v5-primary)",
                boxShadow: "0 0 5px rgba(var(--v5-primary-rgb), 0.25)",
                transition: "left 0.28s cubic-bezier(0.4,0,0.2,1), width 0.28s cubic-bezier(0.4,0,0.2,1)",
                pointerEvents: "none",
              }}
            />
          </div>

          {tab === "overview" && (
            <div style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: "1.3rem" }}>
              {/* 기본정보 */}
              <div>
                <div style={sectionTitle}>기본 정보</div>
                <div style={{ display: "grid", gridTemplateColumns: "130px 1fr", rowGap: "0.55rem", fontSize: "0.8125rem" }}>
                  {(
                    [
                      ["회사 코드", r.company_code, true],
                      ["회사명", name, false],
                      ["서브도메인", sub ? <SubdomainLine sub={sub} /> : "—", true],
                      ["DB명", dbName, true],
                      ["사업자번호", r.brn || "—", true],
                      ["플랜", plan, false],
                      ["업종", r.industry || "—", false],
                      ["대표자", r.owner || "—", false],
                    ] as const
                  ).map(([l, v, mono], i) => (
                    <div key={i} style={{ display: "contents" }}>
                      <span style={{ color: "var(--v5-text-sec)", fontSize: "0.75rem", fontWeight: 500 }}>{l}</span>
                      <span
                        style={{
                          color: "var(--v5-text)",
                          fontFamily: mono ? "var(--v5-font-mono)" : "inherit",
                          fontSize: mono ? "0.8rem" : "0.8125rem",
                          fontWeight: 500,
                        }}
                      >
                        {v as any}
                      </span>
                    </div>
                  ))}
                </div>
              </div>

              {/* 운영지표 + 액션 */}
              <div>
                <div style={sectionTitle}>운영 지표</div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.4rem" }}>
                  {(
                    [
                      ["총 사용자", users],
                      ["30일 활성", active30],
                      ["DB", r.db_size || "—"],
                      ["설치 템플릿", r.templates || 0],
                    ] as const
                  ).map(([l, v], i) => (
                    <div
                      key={i}
                      style={{
                        padding: "0.45rem 0.55rem",
                        background: "var(--v5-surface-solid)",
                        border: "1px solid var(--v5-border)",
                        borderRadius: 6,
                      }}
                    >
                      <div
                        style={{
                          fontSize: "0.72rem",
                          color: "var(--v5-text-sec)",
                          marginBottom: 4,
                          fontFamily: "var(--v5-font-mono)",
                          letterSpacing: "0.04em",
                          fontWeight: 600,
                        }}
                      >
                        {l}
                      </div>
                      <div
                        style={{
                          fontSize: "1rem",
                          fontWeight: 800,
                          color: "var(--v5-text)",
                          fontFamily: "var(--v5-font-mono)",
                          fontVariantNumeric: "tabular-nums",
                          letterSpacing: "-0.01em",
                        }}
                      >
                        {v}
                      </div>
                    </div>
                  ))}
                </div>

                <div style={{ display: "flex", gap: 5, marginTop: "0.55rem", flexWrap: "wrap" }}>
                  <ABtn
                    icon={<ArrowUpRight size={11} strokeWidth={1.75} />}
                    onClick={(e) => {
                      e.stopPropagation();
                      if (sub) window.open(`http://${sub}.invyone.com`, "_blank");
                    }}
                  >
                    회사 사이트 열기
                  </ABtn>
                  <ABtn
                    icon={<KeyRound size={11} strokeWidth={1.75} />}
                    onClick={(e) => {
                      e.stopPropagation();
                      setAdminModal("view");
                    }}
                  >
                    관리자 계정
                  </ABtn>
                  <ABtn
                    icon={<Copy size={11} strokeWidth={1.75} />}
                    onClick={(e) => {
                      e.stopPropagation();
                      setRecopyModal(true);
                    }}
                  >
                    템플릿 재복제
                  </ABtn>
                </div>
              </div>
            </div>
          )}

          {tab === "members" && (
            <MembersTab companyCode={r.company_code} open={open && tab === "members"} />
          )}

          {tab === "templates" && (
            <TemplatesTab
              companyCode={r.company_code}
              companyName={name}
              dbName={dbName}
              open={open && tab === "templates"}
            />
          )}

          {tab === "audit" && (
            <CompanyAuditMini companyCode={r.company_code} open={open && tab === "audit"} onOpenFull={() => setAuditDrawer(true)} />
          )}

          {tab === "danger" && (
            <div style={{ display: "flex", flexDirection: "column", gap: "0.4rem" }}>
              {(() => {
                const isSuspended = (r.db_status || r.status) === "suspended";
                const rows: Array<{ t: string; d: string; b: string; c: string; Icon: any; onClick: () => void }> = [
                  {
                    t: isSuspended ? "회사 재활성화" : "회사 비활성화",
                    d: isSuspended
                      ? "사용자 로그인 재개 · 기록은 감사 로그에 남음"
                      : "사용자 로그인 차단 · 데이터 보존 · 언제든 재활성 가능",
                    b: isSuspended ? "재활성화" : "비활성화",
                    c: isSuspended ? "rgb(var(--v5-green-rgb))" : "var(--v5-amber)",
                    Icon: isSuspended ? PlayCircle : PauseCircle,
                    onClick: () => setDeactivateModal(true),
                  },
                  {
                    t: "관리자 비밀번호 재설정",
                    d: "무작위 임시 비밀번호 발급 · 1회 표시 · 첫 로그인 시 변경 강제",
                    b: "재설정",
                    c: "var(--v5-primary)",
                    Icon: KeyRound,
                    onClick: () => setAdminModal("reset-warn"),
                  },
                  {
                    t: "회사 영구 삭제",
                    d: "회사 + 테넌트 DB 영구 삭제 · 복구 불가",
                    b: "삭제",
                    c: "var(--v5-red)",
                    Icon: Trash2,
                    onClick: () => setDeleteModal(true),
                  },
                ];
                return rows.map((row, i) => {
                  const IconC = row.Icon;
                  return (
                    <div
                      key={i}
                      style={{
                        display: "grid",
                        gridTemplateColumns: "22px 1fr 120px",
                        gap: 14,
                        alignItems: "center",
                        padding: "0.65rem 0.8rem",
                        background: "var(--v5-surface-solid)",
                        border: "1px solid var(--v5-border)",
                        borderRadius: 6,
                      }}
                    >
                      <div style={{ color: row.c }}>
                        <IconC size={16} strokeWidth={1.75} />
                      </div>
                      <div>
                        <div style={{ fontSize: "0.8125rem", fontWeight: 700, color: "var(--v5-text)" }}>{row.t}</div>
                        <div style={{ fontSize: "0.72rem", color: "var(--v5-text-muted)", marginTop: 3 }}>{row.d}</div>
                      </div>
                      <button
                        onClick={(e) => {
                          e.stopPropagation();
                          row.onClick();
                        }}
                        style={{
                          height: 30,
                          padding: "0 0.75rem",
                          borderRadius: 5,
                          border: `1px solid ${row.c}`,
                          background: "transparent",
                          color: row.c,
                          fontSize: "0.72rem",
                          fontWeight: 700,
                          cursor: "pointer",
                          fontFamily: "inherit",
                          transition: "all 0.15s ease",
                        }}
                        onMouseEnter={(e) => {
                          (e.currentTarget as HTMLButtonElement).style.background = row.c;
                          (e.currentTarget as HTMLButtonElement).style.color = "#fff";
                        }}
                        onMouseLeave={(e) => {
                          (e.currentTarget as HTMLButtonElement).style.background = "transparent";
                          (e.currentTarget as HTMLButtonElement).style.color = row.c;
                        }}
                      >
                        {row.b}
                      </button>
                    </div>
                  );
                });
              })()}
            </div>
          )}
        </div>
        </div>
      </div>

      {/* ───── 모달 / 드로어 ───── */}
      {adminModal && (
        <AdminInfoModal
          companyCode={r.company_code}
          companyName={name}
          initialStage={adminModal}
          onClose={() => setAdminModal(false)}
        />
      )}
      {recopyModal && (
        <RecopyTemplatesModalWrapper
          companyCode={r.company_code}
          companyName={name}
          dbName={dbName}
          onClose={() => setRecopyModal(false)}
        />
      )}
      {deactivateModal && (
        <DeactivateModal
          companyCode={r.company_code}
          companyName={name}
          currentStatus={r.db_status || r.status}
          onClose={() => setDeactivateModal(false)}
        />
      )}
      {deleteModal && (
        <DeleteCompanyModal
          companyCode={r.company_code}
          companyName={name}
          subdomain={sub}
          dbName={dbName}
          onClose={() => setDeleteModal(false)}
        />
      )}
      {auditDrawer && (
        <AuditLogDrawer
          companyCode={r.company_code}
          title={`감사 로그 · ${name}`}
          onClose={() => setAuditDrawer(false)}
        />
      )}
    </div>
  );
}

/** 재복제 모달은 installed groups 가 필요하므로 wrapper 에서 fetch */
function RecopyTemplatesModalWrapper({
  companyCode,
  companyName,
  dbName,
  onClose,
}: {
  companyCode: string;
  companyName?: string;
  dbName: string;
  onClose: () => void;
}) {
  const { data = [], isLoading } = useQuery({
    queryKey: ["installed-groups", companyCode],
    queryFn: () => getInstalledGroups(companyCode),
    staleTime: 30_000,
  });
  if (isLoading) return null;
  return (
    <RecopyTemplatesModal
      companyCode={companyCode}
      companyName={companyName}
      dbName={dbName}
      installedGroups={data}
      onClose={onClose}
    />
  );
}

const ACTION_META: Record<string, { label: string; color: string }> = {
  COMPANY_CREATE:        { label: "회사 생성",    color: "rgb(var(--v5-green-rgb))" },
  COMPANY_CREATE_FAILED: { label: "생성 실패",    color: "var(--v5-red)" },
  COMPANY_DEACTIVATE:    { label: "비활성화",     color: "var(--v5-amber)" },
  COMPANY_REACTIVATE:    { label: "재활성화",     color: "rgb(var(--v5-green-rgb))" },
  COMPANY_DELETE:        { label: "영구 삭제",    color: "var(--v5-red)" },
  ADMIN_PASSWORD_RESET:  { label: "비번 재설정",   color: "var(--v5-primary)" },
  TEMPLATES_RECOPY:      { label: "템플릿 재복제", color: "var(--v5-cyan)" },
};

/** 감사 탭 내 인라인 미니 리스트 (최근 10건) + 드로어 열기 링크 */
function CompanyAuditMini({
  companyCode,
  open,
  onOpenFull,
}: {
  companyCode: string;
  open: boolean;
  onOpenFull: () => void;
}) {
  const { data, isLoading } = useQuery({
    queryKey: ["company-audit-log", companyCode, "mini"],
    queryFn: () => getCompanyAuditLog(companyCode, 1, 10),
    enabled: open,
    staleTime: 5_000,
  });
  const rows: Record<string, any>[] = data?.data || [];
  return (
    <div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
        <div style={{ fontSize: "0.75rem", color: "var(--v5-text-sec)", fontWeight: 600 }}>
          최근 10건 · 전체 {data?.total ?? 0}
        </div>
        <button
          onClick={(e) => { e.stopPropagation(); onOpenFull(); }}
          style={{
            background: "transparent",
            border: "1px solid var(--v5-border)",
            color: "var(--v5-primary)",
            fontSize: "0.72rem",
            fontWeight: 600,
            padding: "4px 10px",
            borderRadius: 5,
            cursor: "pointer",
            fontFamily: "inherit",
          }}
        >
          전체 보기 →
        </button>
      </div>
      {isLoading && (
        <div style={{ padding: "1rem", textAlign: "center", color: "var(--v5-text-sec)", fontSize: "0.8rem" }}>조회 중...</div>
      )}
      {!isLoading && rows.length === 0 && (
        <div style={{ padding: "1rem", textAlign: "center", color: "var(--v5-text-muted)", fontSize: "0.8rem" }}>
          기록이 없습니다.
        </div>
      )}
      {!isLoading && rows.length > 0 && (
        <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
          {/* 컬럼 헤더 */}
          <div style={{
            display: "grid",
            gridTemplateColumns: "110px 130px minmax(0, 1fr) 150px",
            gap: 12,
            padding: "0.3rem 0.8rem",
            fontSize: "0.65rem",
            fontFamily: "var(--v5-font-mono)",
            color: "var(--v5-text-muted)",
            letterSpacing: "0.06em",
            textTransform: "uppercase",
            fontWeight: 700,
          }}>
            <span>액션</span>
            <span>수행자</span>
            <span>대상</span>
            <span style={{ textAlign: "right" }}>시각</span>
          </div>
          {rows.map((r) => {
            const meta = ACTION_META[r.action] || { label: r.action, color: "var(--v5-text-sec)" };
            const failed = r.success === false || r.success === "false";
            return (
              <div
                key={r.id}
                style={{
                  display: "grid",
                  gridTemplateColumns: "110px 130px minmax(0, 1fr) 150px",
                  gap: 12,
                  padding: "0.5rem 0.7rem",
                  fontSize: "0.78rem",
                  border: "1px solid var(--v5-border)",
                  borderLeft: `3px solid ${failed ? "var(--v5-red)" : meta.color}`,
                  borderRadius: 5,
                  background: "var(--v5-surface-solid)",
                  alignItems: "center",
                }}
              >
                <span style={{ fontWeight: 700, color: failed ? "var(--v5-red)" : meta.color, whiteSpace: "nowrap" }}>
                  {meta.label}
                </span>
                <span style={{
                  color: r.actor_user_id ? "var(--v5-text)" : "var(--v5-text-muted)",
                  fontFamily: "var(--v5-font-mono)",
                  overflow: "hidden",
                  textOverflow: "ellipsis",
                  whiteSpace: "nowrap",
                  fontSize: "0.72rem",
                  fontWeight: 600,
                }}>
                  {r.actor_user_id || "—"}
                </span>
                <span style={{
                  color: "var(--v5-text-sec)",
                  fontFamily: "var(--v5-font-mono)",
                  overflow: "hidden",
                  textOverflow: "ellipsis",
                  whiteSpace: "nowrap",
                  fontSize: "0.72rem",
                }}>
                  {r.target || "—"}
                </span>
                <span style={{ fontFamily: "var(--v5-font-mono)", color: "var(--v5-text-muted)", fontSize: "0.7rem", textAlign: "right" }}>
                  {formatDateTime(r.created_at)}
                </span>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

function formatDateTime(v: any): string {
  if (v == null) return "—";
  try {
    let d: Date;
    if (typeof v === "number") d = new Date(v);
    else {
      const s = String(v);
      d = /^\d{10,}$/.test(s) ? new Date(Number(s)) : new Date(s);
    }
    if (isNaN(d.getTime())) return String(v);
    return d.toISOString().replace("T", " ").slice(0, 19);
  } catch {
    return String(v);
  }
}

const labelSm: React.CSSProperties = {
  fontSize: "0.65rem",
  color: "var(--v5-text-sec)",
  letterSpacing: "0.06em",
  textTransform: "uppercase",
  fontWeight: 700,
  marginBottom: 3,
  fontFamily: "var(--v5-font-mono)",
};

const sectionTitle: React.CSSProperties = {
  fontSize: "0.72rem",
  color: "var(--v5-text-sec)",
  letterSpacing: "0.06em",
  textTransform: "uppercase",
  fontWeight: 700,
  marginBottom: "0.7rem",
  fontFamily: "var(--v5-font-mono)",
};

function SubdomainLine({ sub }: { sub: string }) {
  return (
    <span>
      <span style={{ color: "var(--v5-primary)" }}>{sub}</span>
      <span style={{ color: "var(--v5-text-muted)" }}>.invyone.com</span>
    </span>
  );
}

function ABtn({
  children,
  icon,
  onClick,
  soon,
}: {
  children: React.ReactNode;
  icon?: React.ReactNode;
  onClick?: (e: React.MouseEvent) => void;
  soon?: boolean;
}) {
  return (
    <button
      onClick={soon ? (e) => e.stopPropagation() : (e) => {
        e.stopPropagation();
        onClick?.(e);
      }}
      disabled={soon}
      title={soon ? "준비 중인 기능입니다" : undefined}
      className={soon ? undefined : "prov-hbtn prov-hbtn-secondary"}
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: "0.4rem",
        height: 30,
        padding: "0 0.7rem",
        borderRadius: 6,
        fontSize: "0.75rem",
        fontWeight: 600,
        border: "1px solid var(--v5-border)",
        background: "var(--v5-surface-solid)",
        color: "var(--v5-text)",
        cursor: soon ? "not-allowed" : "pointer",
        whiteSpace: "nowrap",
        fontFamily: "inherit",
        opacity: soon ? 0.55 : 1,
      }}
    >
      {icon}
      {children}
      {soon && (
        <span
          style={{
            fontSize: "0.62rem",
            fontWeight: 700,
            padding: "2px 5px",
            borderRadius: 3,
            background: "rgba(var(--v5-amber-rgb), 0.18)",
            color: "var(--v5-amber)",
            letterSpacing: "0.03em",
            marginLeft: 2,
          }}
        >
          준비 중
        </span>
      )}
    </button>
  );
}

function formatDate(v: any): string {
  if (!v) return "—";
  try {
    const d = typeof v === "number" ? new Date(v) : new Date(String(v));
    if (isNaN(d.getTime())) return String(v);
    return d.toISOString().slice(0, 10);
  } catch {
    return String(v);
  }
}

function formatRelative(v: any): string {
  if (!v) return "";
  try {
    const d = typeof v === "number" ? new Date(v) : new Date(String(v));
    if (isNaN(d.getTime())) return "";
    const diffMs = Date.now() - d.getTime();
    const sec = Math.round(diffMs / 1000);
    if (sec < 60) return "방금";
    const min = Math.round(sec / 60);
    if (min < 60) return `${min}분 전`;
    const hr = Math.round(min / 60);
    if (hr < 24) return `${hr}시간 전`;
    const day = Math.round(hr / 24);
    if (day < 7) return `${day}일 전`;
    const wk = Math.round(day / 7);
    if (wk < 5) return `${wk}주 전`;
    const mo = Math.round(day / 30);
    if (mo < 12) return `${mo}개월 전`;
    const yr = Math.round(day / 365);
    return `${yr}년 전`;
  } catch {
    return "";
  }
}

const PLAN_STYLE: Record<string, { bg: string; color: string; border: string }> = {
  ENTERPRISE: {
    bg: "rgba(var(--v5-primary-rgb), 0.12)",
    color: "var(--v5-primary)",
    border: "rgba(var(--v5-primary-rgb), 0.3)",
  },
  STANDARD: {
    bg: "rgba(var(--v5-cyan-rgb), 0.1)",
    color: "var(--v5-cyan)",
    border: "rgba(var(--v5-cyan-rgb), 0.3)",
  },
  STARTER: {
    bg: "var(--v5-bg-subtle)",
    color: "var(--v5-text-sec)",
    border: "var(--v5-border)",
  },
};

function PlanBadge({ plan }: { plan: string }) {
  const key = plan.toUpperCase();
  const s = PLAN_STYLE[key] || PLAN_STYLE.STARTER;
  return (
    <span
      style={{
        display: "inline-flex",
        alignItems: "center",
        fontSize: "0.7rem",
        fontWeight: 700,
        padding: "4px 9px",
        borderRadius: 4,
        background: s.bg,
        color: s.color,
        border: `1px solid ${s.border}`,
        letterSpacing: "0.06em",
        fontFamily: "var(--v5-font-mono)",
        whiteSpace: "nowrap",
      }}
    >
      {key}
    </span>
  );
}
