import React, { useState, useEffect } from 'react';
import { Card, App, Table, Button, Modal, Form, Select, message, Input, Divider, Popconfirm } from 'antd';
import { PlusOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons';
import { supabase } from '@/config/supabase';

const RoleHeader = ({ onAdd, onSearch }) => (
  <div className="flex justify-end mb-4">
   
    <Button 
      type="primary" 
      icon={<PlusOutlined />} 
      onClick={onAdd}
    >
      添加权限
    </Button>
  </div>
);

export default function PermissionManagement() {
  const [loading, setLoading] = useState(false);
  const [permissions, setPermissions] = useState([]);
  const [roles, setRoles] = useState([]);
  const [resources, setResources] = useState([]);
  const [modalVisible, setModalVisible] = useState(false);
  const [modalType, setModalType] = useState('add');
  const [form] = Form.useForm();
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
    total: 0,
  });
  
  const [sorter, setSorter] = useState({
    field: 'created_at',
    order: 'descend',
  });

  const [roleModalVisible, setRoleModalVisible] = useState(false);
  const [resourceModalVisible, setResourceModalVisible] = useState(false);
  const [roleForm] = Form.useForm();
  const [resourceForm] = Form.useForm();
  const [editingResource, setEditingResource] = useState(null);

  const fetchPermissions = async (params = {}) => {
    try {
      setLoading(true);
      let query = supabase
        .from('permissions')
        .select(`
          *,
          roles:role_id(*),
          resources:resource_id(*)
        `, { count: 'exact' });

      // 添加排序
      if (params.field && params.order) {
        const ascending = params.order === 'ascend';
        query = query.order(params.field, { ascending });
      } else {
        // 默认排序
        query = query.order('created_at', { ascending: false });
      }

      // 添加分页
      const from = (params.current - 1) * params.pageSize || 0;
      const to = from + (params.pageSize || 10) - 1;
      query = query.range(from, to);

      const { data, count, error } = await query;

      if (error) throw error;

      setPermissions(data || []);
      setPagination(prev => ({ 
        ...prev, 
        total: count || 0,
        current: params.current || prev.current,
        pageSize: params.pageSize || prev.pageSize,
      }));
    } catch (error) {
      message.error('获取权限数据失败');
      console.error(error);
    } finally {
      setLoading(false);
    }
  };

  // 获取所有角色
  const fetchRoles = async () => {
    try {
      const { data, error } = await supabase
        .from('roles')
        .select('*')
        .order('name');

      if (error) throw error;
      setRoles(data || []);
    } catch (error) {
      message.error('获取角色数据失败');
      console.error(error);
    }
  };

  // 获取所有资源
  const fetchResources = async () => {
    try {
      const { data, error } = await supabase
        .from('permission_resources')
        .select('*')
        .order('resource_name');

      if (error) throw error;
      setResources(data || []);
    } catch (error) {
      message.error('获取资源数据失败');
      console.error(error);
    }
  };

  // 添加权限
  const handleAdd = async (values) => {
    try {
      const { error } = await supabase
        .from('permissions')
        .insert([{
          role_id: values.role_id,
          resource_id: values.resource_id,
          action: values.action
        }]);

      if (error) throw error;
      message.success('添加成功');
      fetchPermissions(pagination);
    } catch (error) {
      message.error('添加失败');
      throw error;
    }
  };

  // 更新权限
  const handleUpdate = async (values) => {
    try {
      const { error } = await supabase
        .from('permissions')
        .update({
          role_id: values.role_id,
          resource_id: values.resource_id,
          action: values.action
        })
        .eq('id', values.id);

      if (error) throw error;
      message.success('更新成功');
      fetchPermissions(pagination);
    } catch (error) {
      message.error('更新失败');
      throw error;
    }
  };

  // 删除权限
  const handleDelete = async (id) => {
    try {
      const { error } = await supabase
        .from('permissions')
        .delete()
        .eq('id', id);

      if (error) throw error;
      message.success('删除成功');
      fetchPermissions(pagination);
    } catch (error) {
      message.error('删除失败');
      throw error;
    }
  };

  // 添加新角色
  const handleAddRole = async (values) => {
    try {
      const { data, error } = await supabase
        .from('roles')
        .insert([{
          name: values.name,
          description: values.description
        }])
        .select()
        .single();

      if (error) throw error;
      
      message.success('添加角色成功');
      setRoles([...roles, data]);
      setRoleModalVisible(false);
      roleForm.resetFields();
      return data;
    } catch (error) {
      message.error('添加角色失败');
      throw error;
    }
  };

  // 添加新资源
  const handleAddResource = async (values) => {
    try {
      const { data, error } = await supabase
        .from('permission_resources')
        .insert([{
          resource_name: values.resource_name,
          resource_type: values.resource_type,
          attributes_type: values.attributes_type,
          description: values.description
        }])
        .select()
        .single();

      if (error) throw error;

      message.success('添加资源成功');
      setResources([...resources, data]);
      setResourceModalVisible(false);
      resourceForm.resetFields();
      return data;
    } catch (error) {
      message.error('添加资源失败');
      throw error;
    }
  };

  // 添加删除资源的函数
  const handleDeleteResource = async (resourceId) => {
    try {
      const { error } = await supabase
        .from('permission_resources')
        .delete()
        .eq('id', resourceId);

      if (error) throw error;
      message.success('删除资源成功');
      fetchResources();
    } catch (error) {
      message.error('删除资源失败');
      console.error(error);
    }
  };

  // 添加更新资源的函数
  const handleUpdateResource = async (values) => {
    try {
      const { error } = await supabase
        .from('permission_resources')
        .update({
          resource_name: values.resource_name,
          resource_type: values.resource_type,
          attributes_type: values.attributes_type,
          description: values.description
        })
        .eq('id', editingResource.id);

      if (error) throw error;
      message.success('更新资源成功');
      setResourceModalVisible(false);
      resourceForm.resetFields();
      fetchResources();
    } catch (error) {
      message.error('更新资源失败');
      console.error(error);
    }
  };

  // 初始化加载
  useEffect(() => {
    fetchPermissions();
    fetchRoles();
    fetchResources();
  }, []);

  const handleTableChange = (newPagination, filters, newSorter) => {
    const params = {
      current: newPagination?.current,
      pageSize: newPagination?.pageSize,
      field: newSorter?.field,
      order: newSorter?.order,
    };

    setPagination(prev => ({
      ...prev,
      current: params.current,
      pageSize: params.pageSize,
    }));

    setSorter({
      field: params.field || sorter.field,
      order: params.order || sorter.order,
    });

    fetchPermissions(params);
  };

  const columns = [
    {
      title: '角色',
      dataIndex: ['roles', 'name'],
      key: 'role_name',
      render: (name) => (
        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
          {name}
        </span>
      )
    },
    {
      title: '资源',
      dataIndex: ['resources', 'resource_name'],
      key: 'resource_name',
    },
    {
      title: '控制颗粒度',
      dataIndex: ['resources', 'resource_type'],
      key: 'resource_type',
      render: (type) => (
        <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-sm font-medium
          ${type === 'table' 
            ? 'bg-green-100 text-green-800'
            : 'bg-purple-100 text-purple-800'}`}>
          {type === 'table' ? '数据表' : '字段值'}
        </span>
      )
    },
    {
      title: '属性类型',
      dataIndex: ['resources', 'attributes_type'],
      key: 'attributes_type',
      render: (attributes_type) => (
       <span>
          {!attributes_type ? '-' : attributes_type}
       </span>
      )
    },
    {
      title: '操作类型',
      dataIndex: 'action',
      key: 'action',
      render: (action) => {
        const actionMap = {
          create: { text: '创建', color: 'bg-green-100 text-green-800' },
          read: { text: '读取', color: 'bg-blue-100 text-blue-800' },
          update: { text: '更新', color: 'bg-yellow-100 text-yellow-800' },
          delete: { text: '删除', color: 'bg-red-100 text-red-800' }
        };

        const { text, color } = actionMap[action] || { text: action, color: 'bg-gray-100 text-gray-800' };

        return (
          <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-sm font-medium ${color}`}>
            {text}
          </span>
        );
      }
    },
    // {
    //   title: '描述',
    //   dataIndex: ['resources', 'description'],
    //   key: 'description',
    //   ellipsis: true,
    // },
    {
      title: '操作',
      key: 'operation',
      render: (_, record) => (
        <div className="space-x-2">
          <Button
            type="text"
            icon={<EditOutlined />}
            onClick={() => {
              setModalType('edit');
              form.setFieldsValue(record);
              setModalVisible(true);
            }}
          />
          <Popconfirm
            title="确认删除"
            description="确定要删除这条权限记录吗？"
            okText="确认"
            cancelText="取消"
            onConfirm={() => handleDelete(record.id)}
          >
            <Button
              type="text"
              danger
              icon={<DeleteOutlined />}
            />
          </Popconfirm>
        </div>
      ),
    },
  ];

  // Modal 表单内容
  const renderFormItems = () => {
    const [roleSelectOpen, setRoleSelectOpen] = useState(false);
    const [resourceSelectOpen, setResourceSelectOpen] = useState(false);

    return (
      <>
        <Form.Item
          name="role_id"
          label="角色"
          rules={[{ required: true, message: '请选择角色' }]}
        >
          <Select
          allowClear
            placeholder="请选择角色"
            open={roleSelectOpen}
            onDropdownVisibleChange={setRoleSelectOpen}
            dropdownRender={(menu) => (
              <>
                {menu}
                <Divider style={{ margin: '8px 0' }} />
                <Button
                  type="text"
                  icon={<PlusOutlined />}
                  onClick={() => {
                    setRoleSelectOpen(false);  // 关闭下拉框
                    setRoleModalVisible(true);
                  }}
                  style={{ paddingLeft: 8 }}
                >
                  添加角色
                </Button>
              </>
            )}
          >
            {roles.map(role => (
              <Select.Option key={role.id} value={role.id}>
                {role.name}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>

        <Form.Item
          name="resource_id"
          label="资源"
          rules={[{ required: true, message: '请选择资源' }]}
        >
          <Select
            placeholder="请选择资源"
            open={resourceSelectOpen}
            onDropdownVisibleChange={setResourceSelectOpen}
            dropdownRender={(menu) => (
              <>
                {menu}
                <Divider style={{ margin: '8px 0' }} />
                <div style={{ padding: '8px', display: 'flex', justifyContent: 'space-between' }}>
                  <Button
                    type="text"
                    icon={<PlusOutlined />}
                    onClick={() => {
                      setResourceSelectOpen(false);
                      setEditingResource(null); // 清空编辑状态
                      resourceForm.resetFields(); // 清空表单
                      setResourceModalVisible(true);
                    }}
                  >
                    添加资源
                  </Button>
                </div>
              </>
            )}
          >
            {resources.map(resource => (
              <Select.Option key={resource.id} value={resource.id}>
                <div className="flex justify-between items-center">
                  <span>{`${resource.resource_name} ${resource.attributes_type?`(${resource.attributes_type})`:''}`}</span>
                  <div className="flex space-x-2" onClick={e => e.stopPropagation()}>
                    <Button
                      type="text"
                      size="small"
                      icon={<EditOutlined />}
                      onClick={() => {
                        setResourceSelectOpen(false);
                        setEditingResource(resource);
                        resourceForm.setFieldsValue(resource);
                        setResourceModalVisible(true);
                      }}
                    />
                    <Button
                      type="text"
                      size="small"
                      danger
                      icon={<DeleteOutlined />}
                      onClick={() => {
                        Modal.confirm({
                          title: '确认删除',
                          content: '确定要删除这个资源吗？',
                          onOk: () => handleDeleteResource(resource.id),
                        });
                      }}
                    />
                  </div>
                </div>
              </Select.Option>
            ))}
          </Select>
        </Form.Item>

        <Form.Item
          name="action"
          label="操作类型"
          rules={[{ required: true, message: '请选择操作类型' }]}
        >
          <Select placeholder="请选择操作类型" allowClear>
            <Select.Option value="create">创建</Select.Option>
            <Select.Option value="read">读取</Select.Option>
            <Select.Option value="update">更新</Select.Option>
            <Select.Option value="delete">删除</Select.Option>
          </Select>
        </Form.Item>
      </>
    );
  };

  return (
    <App>
      <Card title="权限管理" bordered={false}>
        <RoleHeader 
          onAdd={() => {
            setModalType('add');
            setModalVisible(true);
          }}
          onSearch={(value) => {
            fetchPermissions({ 
              ...pagination, 
              current: 1,
              search: value 
            });
          }}
        />
        
        <Table
          columns={columns}
          dataSource={permissions}
          rowKey="id"
          loading={loading}
          pagination={pagination}
          onChange={handleTableChange}
        />

        <Modal
          title={`${modalType === 'add' ? '添加' : '编辑'}权限`}
          open={modalVisible}
          onCancel={() => {
            setModalVisible(false);
            form.resetFields();
          }}
          onOk={() => form.submit()}
          confirmLoading={loading}
        >
          <Form
            form={form}
            layout="vertical"
            onFinish={async (values) => {
              try {
                setLoading(true);
                if (modalType === 'add') {
                  await handleAdd(values);
                } else {
                  await handleUpdate(values);
                }
                setModalVisible(false);
                form.resetFields();
              } catch (error) {
                console.error(error);
              } finally {
                setLoading(false);
              }
            }}
          >
            {renderFormItems()}
          </Form>
        </Modal>

        {/* 添加角色 Modal */}
        <Modal
          title="添加角色"
          open={roleModalVisible}
          onCancel={() => {
            setRoleModalVisible(false);
            roleForm.resetFields();
          }}
          onOk={() => roleForm.submit()}
        >
          <Form
            form={roleForm}
            layout="vertical"
            onFinish={handleAddRole}
          >
            <Form.Item
              name="name"
              label="角色名称"
              rules={[{ required: true, message: '请输入角色名称' }]}
            >
              <Input placeholder="请输入角色名称" />
            </Form.Item>
            <Form.Item
              name="description"
              label="角色描述"
            >
              <Input.TextArea placeholder="请输入角色描述" />
            </Form.Item>
          </Form>
        </Modal>

        {/* 添加资源 Modal */}
        <Modal
          title={editingResource ? "编辑资源" : "添加资源"}
          open={resourceModalVisible}
          onCancel={() => {
            setResourceModalVisible(false);
            setEditingResource(null);
            resourceForm.resetFields();
          }}
          onOk={() => resourceForm.submit()}
          zIndex={1100}
        >
          <Form
            form={resourceForm}
            layout="vertical"
            onFinish={(values) => {
              if (editingResource) {
                handleUpdateResource(values);
              } else {
                handleAddResource(values);
              }
            }}
          >
            <Form.Item
              name="resource_name"
              label="资源名称"
              rules={[{ required: true, message: '请输入资源名称' }]}
            >
              <Input placeholder="请输入资源名称" />
            </Form.Item>
            <Form.Item
              name="resource_type"
              label="资源类型"
              rules={[{ required: true, message: '请选择资源类型' }]}
            >
              <Select placeholder="请选择资源类型">
                <Select.Option value="table">数据表</Select.Option>
                <Select.Option value="field_value">字段值</Select.Option>
              </Select>
            </Form.Item>
            <Form.Item
              name="attributes_type"
              label="属性类型"
            >
              <Input placeholder="请输入属性类型" />
            </Form.Item>
            <Form.Item
              name="description"
              label="资源描述"
            >
              <Input.TextArea placeholder="请输入资源描述" />
            </Form.Item>
          </Form>
        </Modal>
      </Card>
    </App>
  );
}