import React from 'react';
import { Box, Card, CardContent, Typography, Button, Chip, Divider } from '@mui/material';
import { useUserData } from '@/hooks/useUserData';

/**
 * 用户数据调试组件
 * 用于测试和查看全局用户状态
 */
const UserDataDebug: React.FC = () => {
  const {
    userInfo,
    tenantInfo,
    tenantList,
    isLoading,
    error,
    initializeUserData,
    refreshUserData,
    logout,
  } = useUserData();

  return (
    <Box sx={{ p: 2, maxWidth: 800, mx: 'auto' }}>
      <Typography variant="h5" gutterBottom>
        用户数据状态调试
      </Typography>

      {/* 控制按钮 */}
      <Box sx={{ mb: 2, display: 'flex', gap: 1, flexWrap: 'wrap' }}>
        <Button 
          variant="contained" 
          onClick={initializeUserData}
          disabled={isLoading}
        >
          初始化数据
        </Button>
        <Button 
          variant="outlined" 
          onClick={refreshUserData}
          disabled={isLoading}
        >
          刷新数据
        </Button>
        <Button 
          variant="outlined" 
          color="error"
          onClick={logout}
        >
          清除数据
        </Button>
      </Box>

      {/* 状态指示器 */}
      <Box sx={{ mb: 2, display: 'flex', gap: 1, alignItems: 'center' }}>
        <Chip 
          label={isLoading ? '加载中' : '空闲'} 
          color={isLoading ? 'warning' : 'success'}
          size="small"
        />
        {error && (
          <Chip 
            label={`错误: ${error}`} 
            color="error" 
            size="small"
          />
        )}
      </Box>

      {/* 用户信息 */}
      <Card sx={{ mb: 2 }}>
        <CardContent>
          <Typography variant="h6" gutterBottom>
            用户信息 (UserInfo)
          </Typography>
          {userInfo ? (
            <Box>
              <Typography variant="body2"><strong>ID:</strong> {userInfo.id}</Typography>
              <Typography variant="body2"><strong>邮箱:</strong> {userInfo.email}</Typography>
              <Typography variant="body2"><strong>昵称:</strong> {userInfo.nickname}</Typography>
              <Typography variant="body2"><strong>语言:</strong> {userInfo.language}</Typography>
              <Typography variant="body2"><strong>时区:</strong> {userInfo.timezone}</Typography>
              <Typography variant="body2"><strong>是否超级用户:</strong> {userInfo.is_superuser ? '是' : '否'}</Typography>
              <Typography variant="body2"><strong>最后登录:</strong> {userInfo.last_login_time}</Typography>
            </Box>
          ) : (
            <Typography variant="body2" color="text.secondary">
              暂无用户信息
            </Typography>
          )}
        </CardContent>
      </Card>

      {/* 租户信息 */}
      <Card sx={{ mb: 2 }}>
        <CardContent>
          <Typography variant="h6" gutterBottom>
            租户信息 (TenantInfo)
          </Typography>
          {tenantInfo ? (
            <Box>
              <Typography variant="body2"><strong>租户ID:</strong> {tenantInfo.tenant_id}</Typography>
              <Typography variant="body2"><strong>名称:</strong> {tenantInfo.name}</Typography>
              <Typography variant="body2"><strong>角色:</strong> {tenantInfo.role}</Typography>
              <Typography variant="body2"><strong>ASR ID:</strong> {tenantInfo.asr_id}</Typography>
              <Typography variant="body2"><strong>嵌入模型ID:</strong> {tenantInfo.embd_id}</Typography>
              <Typography variant="body2"><strong>LLM ID:</strong> {tenantInfo.llm_id}</Typography>
            </Box>
          ) : (
            <Typography variant="body2" color="text.secondary">
              暂无租户信息
            </Typography>
          )}
        </CardContent>
      </Card>

      {/* 租户列表 */}
      <Card>
        <CardContent>
          <Typography variant="h6" gutterBottom>
            租户列表 (TenantList) - 共 {tenantList.length} 个
          </Typography>
          {tenantList.length > 0 ? (
            <Box>
              {tenantList.map((tenant, index) => (
                <Box key={tenant.tenant_id} sx={{ mb: 1 }}>
                  {index > 0 && <Divider sx={{ my: 1 }} />}
                  <Typography variant="body2"><strong>租户ID:</strong> {tenant.tenant_id}</Typography>
                  <Typography variant="body2"><strong>邮箱:</strong> {tenant.email}</Typography>
                  <Typography variant="body2"><strong>昵称:</strong> {tenant.nickname}</Typography>
                  <Typography variant="body2"><strong>角色:</strong> {tenant.role}</Typography>
                  <Typography variant="body2"><strong>更新时间:</strong> {tenant.update_date}</Typography>
                </Box>
              ))}
            </Box>
          ) : (
            <Typography variant="body2" color="text.secondary">
              暂无租户列表
            </Typography>
          )}
        </CardContent>
      </Card>
    </Box>
  );
};

export default UserDataDebug;