hms/apps/web/src/pages/Roles.tsx

import { useEffect, useState, useCallback } from 'react';
import {
  Table,
  Button,
  Space,
  Modal,
  Form,
  Input,
  Tag,
  Popconfirm,
  Checkbox,
  message,
} from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined, SafetyCertificateOutlined } from '@ant-design/icons';
import {
  listRoles,
  createRole,
  updateRole,
  deleteRole,
  assignPermissions,
  getRolePermissions,
  listPermissions,
  type RoleInfo,
  type PermissionInfo,
} from '../api/roles';
import { useThemeMode } from '../hooks/useThemeMode';

export default function Roles() {
  const [roles, setRoles] = useState<RoleInfo[]>([]);
  const [permissions, setPermissions] = useState<PermissionInfo[]>([]);
  const [loading, setLoading] = useState(false);
  const [createModalOpen, setCreateModalOpen] = useState(false);
  const [editRole, setEditRole] = useState<RoleInfo | null>(null);
  const [permModalOpen, setPermModalOpen] = useState(false);
  const [selectedRole, setSelectedRole] = useState<RoleInfo | null>(null);
  const [selectedPermIds, setSelectedPermIds] = useState<string[]>([]);
  const [form] = Form.useForm();
  const isDark = useThemeMode();

  const fetchRoles = useCallback(async () => {
    setLoading(true);
    try {
      const result = await listRoles();
      setRoles(result.data);
    } catch {
      message.error('加载角色失败');
    }
    setLoading(false);
  }, []);

  const fetchPermissions = useCallback(async () => {
    try {
      setPermissions(await listPermissions());
    } catch {
      // 静默处理
    }
  }, []);

  useEffect(() => {
    fetchRoles();
    fetchPermissions();
  }, [fetchRoles, fetchPermissions]);

  const handleCreate = async (values: {
    name: string;
    code: string;
    description?: string;
  }) => {
    try {
      if (editRole) {
        await updateRole(editRole.id, { ...values, version: editRole.version });
        message.success('角色更新成功');
      } else {
        await createRole(values);
        message.success('角色创建成功');
      }
      setCreateModalOpen(false);
      setEditRole(null);
      form.resetFields();
      fetchRoles();
    } catch (err: unknown) {
      const errorMsg =
        (err as { response?: { data?: { message?: string } } })?.response?.data?.message || '操作失败';
      message.error(errorMsg);
    }
  };

  const handleDelete = async (id: string) => {
    try {
      await deleteRole(id);
      message.success('角色已删除');
      fetchRoles();
    } catch {
      message.error('删除失败');
    }
  };

  const openPermModal = async (role: RoleInfo) => {
    setSelectedRole(role);
    try {
      const rolePerms = await getRolePermissions(role.id);
      setSelectedPermIds(rolePerms.map((p) => p.id));
    } catch {
      setSelectedPermIds([]);
    }
    setPermModalOpen(true);
  };

  const savePermissions = async () => {
    if (!selectedRole) return;
    try {
      await assignPermissions(selectedRole.id, selectedPermIds);
      message.success('权限分配成功');
      setPermModalOpen(false);
    } catch {
      message.error('权限分配失败');
    }
  };

  const openEditModal = (role: RoleInfo) => {
    setEditRole(role);
    form.setFieldsValue({
      name: role.name,
      code: role.code,
      description: role.description,
    });
    setCreateModalOpen(true);
  };

  const openCreateModal = () => {
    setEditRole(null);
    form.resetFields();
    setCreateModalOpen(true);
  };

  const closeCreateModal = () => {
    setCreateModalOpen(false);
    setEditRole(null);
    form.resetFields();
  };

  const columns = [
    {
      title: '角色名称',
      dataIndex: 'name',
      key: 'name',
      render: (v: string, record: RoleInfo) => (
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div
            style={{
              width: 32,
              height: 32,
              borderRadius: 8,
              background: record.is_system
                ? 'linear-gradient(135deg, #2563eb, #60a5fa)'
                : isDark ? '#0f172a' : '#f8fafc',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              color: record.is_system ? '#fff' : isDark ? '#94a3b8' : '#475569',
              fontSize: 14,
            }}
          >
            <SafetyCertificateOutlined />
          </div>
          <span style={{ fontWeight: 500 }}>{v}</span>
        </div>
      ),
    },
    {
      title: '编码',
      dataIndex: 'code',
      key: 'code',
      render: (v: string) => (
        <Tag style={{
          background: isDark ? '#0f172a' : '#f8fafc',
          border: 'none',
          color: isDark ? '#94a3b8' : '#475569',
          fontFamily: 'monospace',
          fontSize: 12,
        }}>
          {v}
        </Tag>
      ),
    },
    {
      title: '描述',
      dataIndex: 'description',
      key: 'description',
      ellipsis: true,
      render: (v: string | undefined) => (
        <span style={{ color: isDark ? '#475569' : '#94a3b8' }}>{v || '-'}</span>
      ),
    },
    {
      title: '类型',
      dataIndex: 'is_system',
      key: 'is_system',
      width: 100,
      render: (v: boolean) => (
        <Tag
          style={{
            color: v ? '#2563eb' : (isDark ? '#94a3b8' : '#475569'),
            background: v ? '#eff6ff' : (isDark ? '#0f172a' : '#f8fafc'),
            border: 'none',
            fontWeight: 500,
          }}
        >
          {v ? '系统' : '自定义'}
        </Tag>
      ),
    },
    {
      title: '操作',
      key: 'actions',
      width: 180,
      render: (_: unknown, record: RoleInfo) => (
        <Space size={4}>
          <Button
            size="small"
            type="text"
            icon={<SafetyCertificateOutlined />}
            onClick={() => openPermModal(record)}
            style={{ color: '#2563eb' }}
          >
            权限
          </Button>
          {!record.is_system && (
            <>
              <Button
                size="small"
                type="text"
                icon={<EditOutlined />}
                onClick={() => openEditModal(record)}
                style={{ color: isDark ? '#94a3b8' : '#475569' }}
              />
              <Popconfirm
                title="确定删除此角色？"
                onConfirm={() => handleDelete(record.id)}
              >
                <Button
                  size="small"
                  type="text"
                  icon={<DeleteOutlined />}
                  danger
                />
              </Popconfirm>
            </>
          )}
        </Space>
      ),
    },
  ];

  const groupedPermissions = permissions.reduce<Record<string, PermissionInfo[]>>(
    (acc, p) => {
      if (!acc[p.resource]) acc[p.resource] = [];
      acc[p.resource].push(p);
      return acc;
    },
    {},
  );

  return (
    <div>
      {/* 页面标题和工具栏 */}
      <div className="erp-page-header">
        <div>
          <h4>角色管理</h4>
          <div className="erp-page-subtitle">管理系统角色和权限分配</div>
        </div>
        <Button type="primary" icon={<PlusOutlined />} onClick={openCreateModal}>
          新建角色
        </Button>
      </div>

      {/* 表格容器 */}
      <div style={{
        background: isDark ? '#111827' : '#FFFFFF',
        borderRadius: 12,
        border: `1px solid ${isDark ? '#0f172a' : '#f8fafc'}`,
        overflow: 'hidden',
      }}>
        <Table
          columns={columns}
          dataSource={roles}
          rowKey="id"
          loading={loading}
          pagination={{ pageSize: 20, showTotal: (t) => `共 ${t} 条记录` }}
        />
      </div>

      {/* 新建/编辑角色弹窗 */}
      <Modal
        title={editRole ? '编辑角色' : '新建角色'}
        open={createModalOpen}
        onCancel={closeCreateModal}
        onOk={() => form.submit()}
        width={480}
      >
        <Form form={form} onFinish={handleCreate} layout="vertical" style={{ marginTop: 16 }}>
          <Form.Item
            name="name"
            label="名称"
            rules={[{ required: true, message: '请输入角色名称' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="code"
            label="编码"
            rules={[{ required: true, message: '请输入角色编码' }]}
          >
            <Input disabled={!!editRole} />
          </Form.Item>
          <Form.Item name="description" label="描述">
            <Input.TextArea rows={3} />
          </Form.Item>
        </Form>
      </Modal>

      {/* 权限分配弹窗 */}
      <Modal
        title={`权限分配 - ${selectedRole?.name || ''}`}
        open={permModalOpen}
        onCancel={() => setPermModalOpen(false)}
        onOk={savePermissions}
        width={600}
      >
        <div style={{ marginTop: 8 }}>
          {Object.entries(groupedPermissions).map(([resource, perms]) => (
            <div
              key={resource}
              style={{
                marginBottom: 16,
                padding: 16,
                borderRadius: 10,
                border: `1px solid ${isDark ? '#0f172a' : '#E2E8F0'}`,
                background: isDark ? '#0B0F1A' : '#f1f5f9',
              }}
            >
              <div style={{
                fontWeight: 600,
                marginBottom: 12,
                textTransform: 'capitalize',
                color: isDark ? '#E2E8F0' : '#334155',
                fontSize: 14,
              }}>
                {resource}
              </div>
              <Checkbox.Group
                value={selectedPermIds}
                onChange={(values) => setSelectedPermIds(values as string[])}
                style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}
              >
                {perms.map((p) => (
                  <Checkbox
                    key={p.id}
                    value={p.id}
                    style={{ marginRight: 0 }}
                  >
                    {p.name}
                  </Checkbox>
                ))}
              </Checkbox.Group>
            </div>
          ))}
        </div>
      </Modal>
    </div>
  );
}