import React from 'react';
import { Card, Typography, Button, Table, Tag, Space, Modal, Form, Input, Checkbox, message, Tree } from 'antd';
import { PlusOutlined, SafetyOutlined } from '@ant-design/icons';

const { Title, Paragraph } = Typography;

const RolesPage: React.FC = () => {
  const [loading] = React.useState(false);
  const [modalVisible, setModalVisible] = React.useState(false);
  const [form] = Form.useForm();

  const permissionTree = [
    {
      title: '项目管理',
      key: 'project',
      children: [
        { title: '查看项目', key: 'project:view' },
        { title: '创建项目', key: 'project:create' },
        { title: '编辑项目', key: 'project:edit' },
        { title: '删除项目', key: 'project:delete' },
      ],
    },
    {
      title: '财务管理',
      key: 'finance',
      children: [
        { title: '查看财务', key: 'finance:view' },
        { title: '预支审批', key: 'finance:advance' },
        { title: '报销审批', key: 'finance:reimburse' },
        { title: '付款审批', key: 'finance:payment' },
      ],
    },
    {
      title: '采购管理',
      key: 'procurement',
      children: [
        { title: '查看采购', key: 'procurement:view' },
        { title: '创建采购', key: 'procurement:create' },
        { title: '审批采购', key: 'procurement:approve' },
      ],
    },
    {
      title: '系统设置',
      key: 'system',
      children: [
        { title: '用户管理', key: 'system:users' },
        { title: '角色管理', key: 'system:roles' },
        { title: '系统配置', key: 'system:config' },
      ],
    },
  ];

  const columns = [
    { title: '角色ID', dataIndex: 'id', key: 'id', width: 100 },
    { title: '角色名称', dataIndex: 'name', key: 'name', width: 150 },
    { title: '角色描述', dataIndex: 'description', key: 'description' },
    { 
      title: '权限数量', 
      dataIndex: 'permissionCount', 
      key: 'permissionCount', 
      width: 100,
      render: (v: number) => <Tag color="blue">{v} 项</Tag>
    },
    { title: '创建时间', dataIndex: 'createdAt', key: 'createdAt', width: 150 },
    { title: '创建人', dataIndex: 'creator', key: 'creator', width: 120 },
    {
      title: '操作',
      key: 'action',
      width: 180,
      render: () => (
        <Space>
          <Button size="small" type="link">查看权限</Button>
          <Button size="small" type="link">编辑</Button>
          <Button size="small" type="link" danger>删除</Button>
        </Space>
      )
    }
  ];

  const data = [
    { key: '1', id: 'R001', name: '超级管理员', description: '拥有系统所有权限', permissionCount: 50, createdAt: '2026-01-01', creator: '系统' },
    { key: '2', id: 'R002', name: '项目经理', description: '项目管理、施工管理权限', permissionCount: 25, createdAt: '2026-01-15', creator: 'admin' },
    { key: '3', id: 'R003', name: '财务经理', description: '财务管理、审批权限', permissionCount: 18, createdAt: '2026-02-01', creator: 'admin' },
    { key: '4', id: 'R004', name: '普通员工', description: '查看和申请权限', permissionCount: 10, createdAt: '2026-02-15', creator: 'admin' },
  ];

  const handleSubmit = () => {
    message.success('角色已创建');
    setModalVisible(false);
  };

  return (
    <div style={{ padding: 24 }}>
      <div style={{ marginBottom: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <Title level={3} style={{ marginBottom: 0 }}>角色权限</Title>
          <Paragraph type="secondary">管理系统角色和权限分配</Paragraph>
        </div>
        <Space>
          <Input.Search placeholder="搜索角色" style={{ width: 200 }} />
          <Button type="primary" icon={<PlusOutlined />} onClick={() => setModalVisible(true)}>
            新增角色
          </Button>
        </Space>
      </div>

      <Card>
        <Table columns={columns} dataSource={data} loading={loading} pagination={{ pageSize: 10 }} />
      </Card>

      <Modal
        title="新增角色"
        open={modalVisible}
        onCancel={() => setModalVisible(false)}
        onOk={handleSubmit}
        width={600}
      >
        <Form form={form} layout="vertical">
          <Form.Item label="角色名称" name="name" rules={[{ required: true }]}>
            <Input placeholder="请输入角色名称" prefix={<SafetyOutlined />} />
          </Form.Item>
          <Form.Item label="角色描述" name="description">
            <Input placeholder="请输入角色描述" />
          </Form.Item>
          <Form.Item label="权限配置" name="permissions">
            <Tree
              checkable
              defaultExpandedKeys={['project', 'finance']}
              treeData={permissionTree}
            />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default RolesPage;