import React, { useMemo } from 'react';
import { Descriptions, Drawer, Table } from 'antd';
import type { Role } from '@/types/role';

type PageInfo = {
  id: number;
  name: string;
  menuPath: string;
};

interface RoleDetailDrawerProps {
  role: Role;
  pages: PageInfo[];
  open: boolean;
  onClose: () => void;
}

export const RoleDetailDrawer: React.FC<RoleDetailDrawerProps> = ({
  role,
  pages,
  open,
  onClose,
}) => {
  const dataSource = useMemo(
    () =>
      pages.map((page) => ({
        key: page.id,
        pageName: page.name,
        menuPath: page.menuPath,
      })),
    [pages],
  );

  return (
    <Drawer
      title={`Role: ${role.name}`}
      open={open}
      onClose={onClose}
      width={480}
      destroyOnClose
    >
      <Descriptions
        column={1}
        size="small"
        bordered
        style={{ marginBottom: 16 }}
      >
        <Descriptions.Item label="Name">{role.name}</Descriptions.Item>
        {role.description && (
          <Descriptions.Item label="Description">
            {role.description}
          </Descriptions.Item>
        )}
      </Descriptions>

      <Table
        dataSource={dataSource}
        rowKey="key"
        size="small"
        pagination={false}
        columns={[{ title: 'Page Name', dataIndex: 'menuPath' }]}
        title={() => `Visible Pages (${dataSource.length})`}
      />
    </Drawer>
  );
};
