import React from 'react';
import { View, Text } from '@tarojs/components';
import { Button } from '@nutui/nutui-react-taro';
import { Scan, Setting, User, Shop } from '@nutui/icons-react-taro';
import navTo from '@/utils/common';

export interface AdminPanelProps {
  /** 是否显示面板 */
  visible: boolean;
  /** 关闭面板回调 */
  onClose?: () => void;
  /** 自定义样式类名 */
  className?: string;
}

/**
 * 管理员功能面板组件
 */
const AdminPanel: React.FC<AdminPanelProps> = ({
  visible,
  onClose,
  className = ''
}) => {
  if (!visible) return null;

  // 管理员功能列表
  const adminFeatures = [
    {
      id: 'unified-qr',
      title: '统一扫码',
      description: '扫码登录和核销一体化功能',
      icon: <Scan className="text-blue-500" size="24" />,
      color: 'bg-blue-50 border-blue-200',
      onClick: () => {
        navTo('/passport/unified-qr/index', true);
        onClose?.();
      }
    },
    {
      id: 'user-management',
      title: '用户管理',
      description: '管理系统用户信息',
      icon: <User className="text-purple-500" size="24" />,
      color: 'bg-purple-50 border-purple-200',
      onClick: () => {
        // TODO: 跳转到用户管理页面
        console.log('跳转到用户管理');
        onClose?.();
      }
    },
    {
      id: 'store-management',
      title: '门店管理',
      description: '管理门店信息和设置',
      icon: <Shop className="text-orange-500" size="24" />,
      color: 'bg-orange-50 border-orange-200',
      onClick: () => {
        // TODO: 跳转到门店管理页面
        console.log('跳转到门店管理');
        onClose?.();
      }
    },
    {
      id: 'system-settings',
      title: '系统设置',
      description: '系统配置和参数管理',
      icon: <Setting className="text-gray-500" size="24" />,
      color: 'bg-gray-50 border-gray-200',
      onClick: () => {
        // TODO: 跳转到系统设置页面
        console.log('跳转到系统设置');
        onClose?.();
      }
    }
  ];

  return (
    <View className={`admin-panel ${className}`}>
      {/* 遮罩层 */}
      <View
        className="fixed inset-0 bg-black bg-opacity-50 z-40"
        onClick={onClose}
      />

      {/* 面板内容 */}
      <View className="fixed bottom-0 left-0 right-0 bg-white rounded-t-3xl z-50 overflow-hidden">
        {/* 面板头部 */}
        <View className="flex items-center justify-between p-4 border-b border-gray-100">
          <View className="flex items-center">
            <Setting className="text-blue-500 mr-2" size="20" />
            <Text className="text-lg font-bold text-gray-800">管理员面板</Text>
          </View>
          <Button
            size="small"
            type="default"
            onClick={onClose}
            className="text-gray-500"
          >
            关闭
          </Button>
        </View>

        {/* 功能网格 */}
        <View className="p-4 pb-8">
          <View className="grid grid-cols-2 gap-3">
            {adminFeatures.map((feature) => (
              <View
                key={feature.id}
                className={`${feature.color} border rounded-xl p-4 admin-feature-item`}
                onClick={feature.onClick}
              >
                <View className="flex items-center mb-2">
                  {feature.icon}
                  <Text className="ml-2 font-medium text-gray-800">
                    {feature.title}
                  </Text>
                </View>
                <Text className="text-xs text-gray-600 leading-relaxed">
                  {feature.description}
                </Text>
              </View>
            ))}
          </View>
        </View>

        {/* 底部提示 */}
        <View className="px-4 pb-4">
          <View className="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
            <Text className="text-xs text-yellow-700 text-center">
              💡 管理员功能仅对具有管理权限的用户开放
            </Text>
          </View>
        </View>
      </View>
    </View>
  );
};

export default AdminPanel;