// REQ-USR-003: 左侧角色/流程树（按角色/按流程分组 + 计数；点击高亮，不取数，BR11）。
import { useState } from 'react';
import type { GroupItem } from './dashboardData';
import styles from './HomePage.module.css';

interface RoleProcessTreeProps {
  roleGroups: GroupItem[];
  processGroups: GroupItem[];
  onSelect?: (label: string) => void;
}

export default function RoleProcessTree({
  roleGroups,
  processGroups,
  onSelect,
}: RoleProcessTreeProps) {
  // 本地高亮态：默认高亮「所有部门」（复刻原型首项 active）
  const [activeLabel, setActiveLabel] = useState<string>('所有部门');

  const handleClick = (label: string) => {
    setActiveLabel(label);
    onSelect?.(label);
  };

  const renderItem = (g: GroupItem, keyPrefix: string) => (
    <button
      type="button"
      key={`${keyPrefix}-${g.label}`}
      className={`${styles.treeItem} ${activeLabel === g.label ? styles.treeItemActive : ''}`}
      aria-pressed={activeLabel === g.label}
      onClick={() => handleClick(g.label)}
    >
      {g.label} ({g.count})
    </button>
  );

  return (
    <div className={`${styles.leftNav} ${styles.tree}`} data-testid="role-tree">
      <div className={styles.treeGroup}>按角色</div>
      {roleGroups.map((g) => renderItem(g, 'role'))}
      <div className={styles.treeGroup}>按流程</div>
      {processGroups.map((g) => renderItem(g, 'proc'))}
    </div>
  );
}