"use client";

import React from "react";

// NOTE: 실제 audit/activity API가 생기면 여기서 호출. 현재는 mock.
const MOCK = [
  { kind: "edit", who: "gbpark", msg: "메뉴명 수정", target: "메뉴 관리", meta: "mnu_00231 · 메뉴관리 → 메뉴 관리", time: "2일 전" },
  { kind: "add", who: "gbpark", msg: "하위 메뉴 추가", target: "공통 코드 / 다국어", meta: "mnu_00248 · /admin/i18n", time: "4일 전" },
  { kind: "edit", who: "park", msg: "URL 변경", target: "화면 관리", meta: "/admin/screen → /admin/screenMng", time: "6일 전" },
  { kind: "del", who: "gbpark", msg: "메뉴 비활성화", target: "테스트", meta: "mnu_00197 · status: inactive", time: "1주 전" },
];

const iconFor = (kind: string) => {
  if (kind === "add")
    return (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2">
        <path d="M12 5v14M5 12h14" />
      </svg>
    );
  if (kind === "del")
    return (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2">
        <path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
      </svg>
    );
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2">
      <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
      <path d="m18.5 2.5 3 3L12 15l-4 1 1-4z" />
    </svg>
  );
};

export function MenuActivityPanel() {
  return (
    <div className="v5-mm-pane on v5-mm-pane-wrap">
      <div style={{ marginBottom: "1rem" }}>
        <div className="v5-mm-step" style={{ marginBottom: ".4rem" }}>
          <span className="num">03</span>Activity
        </div>
        <h2 style={{ margin: 0, fontSize: "1.35rem", fontWeight: 700, letterSpacing: "-.025em" }}>
          활동 로그 <span style={{ fontSize: ".72rem", color: "var(--v5-text-muted)", fontWeight: 500 }}>· 최근 {MOCK.length}건</span>
        </h2>
        <p style={{ margin: ".35rem 0 1rem", fontSize: ".7rem", color: "var(--v5-text-muted)" }}>
          * 현재는 샘플 데이터입니다. audit 로그 API 연동 예정.
        </p>
      </div>

      <div className="v5-mm-act-list">
        {MOCK.map((a, i) => (
          <div className="v5-mm-act" key={i}>
            <div className={`v5-mm-act-ico ${a.kind}`}>{iconFor(a.kind)}</div>
            <div className="v5-mm-act-body">
              <div className="v5-mm-act-title">
                <b>{a.who}</b> {a.msg} · <b>{a.target}</b>
              </div>
              <div className="v5-mm-act-meta">{a.meta}</div>
            </div>
            <span className="v5-mm-act-time">{a.time}</span>
          </div>
        ))}
      </div>
    </div>
  );
}
