import {
  CheckCircleOutlined,
  CloseCircleOutlined,
  InfoCircleOutlined,
  PlusOutlined,
  SafetyCertificateOutlined,
} from '@ant-design/icons';
import {
  Alert,
  App as AntdApp,
  Avatar,
  Card,
  Col,
  Descriptions,
  Divider,
  Row,
  Space,
  Table,
  Tag,
} from 'antd';
import type { TableProps } from 'antd';
import AuthButton from '@/components/AuthButton';
import { PERMISSION, PERMISSION_LABELS } from '@/constants/permissions';
import { usePermission } from '@/hooks/usePermission';
import './ButtonPermission.scss';

interface PermissionRow {
  key: string;
  code: string;
  label: string;
  granted: boolean;
}

export default function ButtonPermission() {
  const { user, permissions, isSuperAdmin } = usePermission();
  const { message } = AntdApp.useApp();

  const permissionRows: PermissionRow[] = Object.entries(PERMISSION_LABELS).map(
    ([code, label]) => ({
      key: code,
      code,
      label,
      granted: isSuperAdmin || permissions.includes(code),
    }),
  );

  const notify = (name: string) => {
    message.success(`${name}按钮已点击，当前账号拥有该权限`);
  };

  const columns: TableProps<PermissionRow>['columns'] = [
    {
      title: '权限码',
      dataIndex: 'code',
      width: 260,
      render: (value: string) => <code className="permission-code">{value}</code>,
    },
    { title: '权限说明', dataIndex: 'label' },
    {
      title: '当前账号',
      dataIndex: 'granted',
      width: 130,
      render: (granted: boolean) =>
        granted ? (
          <Tag icon={<CheckCircleOutlined />} color="success" bordered={false}>
            已授权
          </Tag>
        ) : (
          <Tag icon={<CloseCircleOutlined />} bordered={false}>
            未授权
          </Tag>
        ),
    },
  ];

  return (
    <div className="button-permission-page">
      <div className="page-header">
        <div>
          <h1 className="page-header__title">按钮权限</h1>
          <p className="page-header__desc">
            按钮通过权限码决定显示、隐藏或禁用，与路由守卫使用同一套权限数据。
          </p>
        </div>
        <div className="page-header__actions">
          <Tag color="purple" bordered={false}>
            当前账号：{user?.nickname}
          </Tag>
        </div>
      </div>

      <Alert
        className="button-permission-alert"
        type="warning"
        showIcon
        message="用不同账号登录体验权限差异"
        description="admin / admin123 拥有全部权限（*）；user / user123 仅拥有查看类权限。切换账号后，侧边栏菜单和按钮会同步变化。"
      />

      <Row gutter={[16, 16]}>
        <Col xs={24} xl={16}>
          <Card className="permission-demo-card" variant="borderless" title="按钮权限演示">
            <p className="permission-demo-card__hint">
              下面这些按钮都绑定了 <code>permission</code> 属性，没有对应权限时默认直接隐藏。
            </p>

            <Space wrap size={[10, 10]}>
              <AuthButton
                type="primary"
                icon={<PlusOutlined />}
                permission={PERMISSION.USER_ADD}
                onClick={() => notify('新增用户')}
              >
                新增用户
              </AuthButton>
              <AuthButton
                permission={PERMISSION.USER_EDIT}
                onClick={() => notify('编辑用户')}
              >
                编辑用户
              </AuthButton>
              <AuthButton
                danger
                permission={PERMISSION.USER_DELETE}
                onClick={() => notify('删除用户')}
              >
                删除用户
              </AuthButton>
              <AuthButton
                permission={PERMISSION.ORDER_EXPORT}
                onClick={() => notify('导出订单')}
              >
                导出订单
              </AuthButton>
              <AuthButton
                permission={PERMISSION.CUSTOMER_ADD}
                onClick={() => notify('新增客户')}
              >
                新增客户
              </AuthButton>
              <AuthButton
                permission={PERMISSION.USER_VIEW}
                onClick={() => notify('查看用户')}
              >
                查看用户（两个账号均可见）
              </AuthButton>
            </Space>

            <Divider />

            <p className="permission-demo-card__hint">
              也可以使用 <code>fallback=&quot;disabled&quot;</code> 保留按钮但置灰：
            </p>
            <Space wrap size={[10, 10]}>
              <AuthButton
                permission={PERMISSION.PERMISSION_EDIT}
                fallback="disabled"
                onClick={() => notify('编辑权限配置')}
              >
                编辑权限配置（禁用态）
              </AuthButton>
            </Space>
          </Card>
        </Col>

        <Col xs={24} xl={8}>
          <Card className="permission-account-card" variant="borderless" title="当前账号">
            <div className="permission-account">
              <Avatar size={56} className="permission-account__avatar">
                {user?.nickname?.charAt(0) ?? 'U'}
              </Avatar>
              <div className="permission-account__meta">
                <strong>{user?.nickname}</strong>
                <span>@{user?.username}</span>
              </div>
            </div>

            <Descriptions
              className="permission-account__desc"
              column={1}
              size="small"
              items={[
                {
                  key: 'role',
                  label: '角色',
                  children: (
                    <Tag color={isSuperAdmin ? 'purple' : 'blue'} bordered={false}>
                      {isSuperAdmin ? '超级管理员' : '普通用户'}
                    </Tag>
                  ),
                },
                {
                  key: 'scope',
                  label: '权限范围',
                  children: isSuperAdmin ? '全部权限（*）' : `${permissions.length} 项权限`,
                },
              ]}
            />

            <div className="permission-tags">
              <div className="permission-tags__title">
                <SafetyCertificateOutlined /> 已授予的权限码
              </div>
              <Space wrap size={[6, 6]}>
                {isSuperAdmin ? (
                  <Tag color="purple" bordered={false}>
                    * 全部权限
                  </Tag>
                ) : (
                  permissions.map((permission) => (
                    <Tag key={permission} bordered={false}>
                      {permission}
                    </Tag>
                  ))
                )}
              </Space>
            </div>

            <div className="permission-note">
              <InfoCircleOutlined />
              <span>前端权限只负责界面展示，真实项目仍需后端对接口做二次鉴权。</span>
            </div>
          </Card>
        </Col>
      </Row>

      <Card className="table-card permission-list-card" variant="borderless" title="权限码清单">
        <Table<PermissionRow>
          rowKey="key"
          columns={columns}
          dataSource={permissionRows}
          pagination={false}
          scroll={{ x: 640 }}
        />
      </Card>
    </div>
  );
}