/**
 * filekorolheader: 部门管理说明组件 - 功能使用说明界面
 * 功能：功能说明、操作指引、注意事项
 * 路径：/central-config/user/department/components/DepartmentInstructions
 * 规范：遵循crop-x/docs/开发项目规范.md，使用shadcn/ui组件，TypeScript类型安全
 */

import { Card } from '@/components/ui/card';

export function DepartmentInstructions() {
  return (
    <Card className="p-4 bg-blue-50 dark:bg-blue-950/30 border-blue-200 dark:border-blue-900">
      <h4 className="text-blue-900 dark:text-blue-400 font-medium mb-3">部门管理说明</h4>

      <ul className="space-y-2 text-sm text-blue-800 dark:text-blue-300">
        <li className="flex items-start gap-2">
          <span className="text-blue-600 dark:text-blue-400 mt-0.5">•</span>
          <div>
            <strong className="text-blue-900 dark:text-blue-400">树形结构：</strong>
            支持二级部门管理（一级部门 → 二级部门）
          </div>
        </li>

        <li className="flex items-start gap-2">
          <span className="text-blue-600 dark:text-blue-400 mt-0.5">•</span>
          <div>
            <strong className="text-blue-900 dark:text-blue-400">拖动排序：</strong>
            按住部门左侧的 ⋮⋮ 图标拖动，可调整同级部门的顺序
          </div>
        </li>

        <li className="flex items-start gap-2">
          <span className="text-blue-600 dark:text-blue-400 mt-0.5">•</span>
          <div>
            <strong className="text-blue-900 dark:text-blue-400">部门编码：</strong>
            建议使用英文大写字母，如TECH、ADMIN等
          </div>
        </li>

        <li className="flex items-start gap-2">
          <span className="text-blue-600 dark:text-blue-400 mt-0.5">•</span>
          <div>
            <strong className="text-blue-900 dark:text-blue-400">员工关联：</strong>
            在员工管理中新增员工时，可选择此处维护的部门
          </div>
        </li>

        <li className="flex items-start gap-2">
          <span className="text-blue-600 dark:text-blue-400 mt-0.5">•</span>
          <div>
            <strong className="text-blue-900 dark:text-blue-400">删除限制：</strong>
            删除部门前请先删除其所有子部门
          </div>
        </li>

        <li className="flex items-start gap-2">
          <span className="text-blue-600 dark:text-blue-400 mt-0.5">•</span>
          <div>
            <strong className="text-blue-900 dark:text-blue-400">状态管理：</strong>
            部门状态为"停用"时，该部门仍可查看但不可用于新建员工
          </div>
        </li>
      </ul>
    </Card>
  );
}