// Shared UI — Modal / 表單列 / 確認刪除（沿用 DS 視覺）
(() => {
const { Panel, Button, SectionTitle } = window.WCATalentGameDesignSystem_377d00;

function Modal({ title, children, onClose, width = 520 }) {
  React.useEffect(() => {
    const onKey = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);
  return (
    <div onClick={onClose} style={{
      position: "fixed", inset: 0, zIndex: 100, background: "rgba(5,7,15,.72)",
      display: "flex", alignItems: "center", justifyContent: "center", padding: 20,
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{ width, maxWidth: "100%", maxHeight: "90vh", overflow: "auto" }}>
        <Panel header={title} glow>
          {children}
        </Panel>
      </div>
    </div>
  );
}

function FormRow({ children, cols }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: cols || `repeat(${React.Children.count(children)}, 1fr)`, gap: 12, marginBottom: 14 }}>
      {children}
    </div>
  );
}

function ModalActions({ onSave, onCancel, onDelete, saveLabel = "儲存" }) {
  return (
    <div style={{ display: "flex", gap: 10, marginTop: 6 }}>
      {onDelete && (
        <Button variant="ghost" size="sm" style={{ color: "var(--danger)" }} onClick={() => {
          if (confirm("確定要刪除嗎？此動作無法復原。")) onDelete();
        }}>刪除</Button>
      )}
      <div style={{ marginLeft: "auto", display: "flex", gap: 10 }}>
        <Button variant="ghost" size="sm" onClick={onCancel}>取消</Button>
        <Button size="sm" onClick={onSave}>{saveLabel}</Button>
      </div>
    </div>
  );
}

// 小型編輯鉛筆鈕（leader 以上才會被渲染，由呼叫端把關）
function EditPencil({ onClick, style }) {
  return (
    <button onClick={onClick} title="編輯" style={{
      background: "transparent", border: "1px solid transparent", cursor: "pointer",
      color: "var(--text-muted)", fontSize: 13, padding: "3px 6px", borderRadius: "var(--radius-xs)",
      transition: "all var(--dur-fast)", ...style,
    }}
      onMouseEnter={(e) => { e.currentTarget.style.color = "var(--gold-300)"; e.currentTarget.style.borderColor = "var(--border-default)"; }}
      onMouseLeave={(e) => { e.currentTarget.style.color = "var(--text-muted)"; e.currentTarget.style.borderColor = "transparent"; }}
    >✎</button>
  );
}

window.WCA_UI = { Modal, FormRow, ModalActions, EditPencil };
})();