'use client';

import React from 'react';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import { Badge } from '@/components/ui/badge';
import { User, UserStatus, UserType } from '../types';

interface UserDetailDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  selectedUser: User | null;
}

export function UserDetailDialog({
  open,
  onOpenChange,
  selectedUser
}: UserDetailDialogProps) {
  const getStatusBadge = (status: UserStatus) => {
    switch (status) {
      case 'active':
        return <Badge className="bg-green-100 text-green-700">正常</Badge>;
      case 'frozen':
        return <Badge className="bg-gray-100 text-gray-700">已冻结</Badge>;
      case 'inactive':
        return <Badge className="bg-red-100 text-red-700">停用</Badge>;
      default:
        return <Badge>{status}</Badge>;
    }
  };

  const getUserTypeBadge = (type: UserType) => {
    switch (type) {
      case 'super_admin':
        return <Badge className="bg-purple-100 text-purple-700">超级管理员</Badge>;
      case 'enterprise_admin':
        return <Badge className="bg-blue-100 text-blue-700">企业管理员</Badge>;
      case 'employee':
        return <Badge className="bg-green-100 text-green-700">员工</Badge>;
      default:
        return <Badge>{type}</Badge>;
    }
  };

  if (!selectedUser) return null;

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-2xl">
        <DialogHeader>
          <DialogTitle>用户详情</DialogTitle>
          <DialogDescription className="sr-only">
            查看用户的详细信息
          </DialogDescription>
        </DialogHeader>
        <div className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <div>
              <Label>用户名</Label>
              <div className="mt-1">{selectedUser.username}</div>
            </div>
            <div>
              <Label>姓名</Label>
              <div className="mt-1">{selectedUser.name}</div>
            </div>
            <div>
              <Label>电话</Label>
              <div className="mt-1">{selectedUser.phone}</div>
            </div>
            <div>
              <Label>邮箱</Label>
              <div className="mt-1">{selectedUser.email || '-'}</div>
            </div>
            <div>
              <Label>用户类型</Label>
              <div className="mt-1">{getUserTypeBadge(selectedUser.userType)}</div>
            </div>
            <div>
              <Label>所属企业</Label>
              <div className="mt-1">{selectedUser.enterpriseName || '-'}</div>
            </div>
            <div>
              <Label>状态</Label>
              <div className="mt-1">{getStatusBadge(selectedUser.status)}</div>
            </div>
            {selectedUser.lastLoginTime && (
              <div>
                <Label>最后登录</Label>
                <div className="mt-1">
                  {new Date(selectedUser.lastLoginTime).toLocaleString('zh-CN')}
                </div>
              </div>
            )}
            <div>
              <Label>创建时间</Label>
              <div className="mt-1">
                {new Date(selectedUser.createdAt).toLocaleString('zh-CN')}
              </div>
            </div>
            <div>
              <Label>更新时间</Label>
              <div className="mt-1">
                {new Date(selectedUser.updatedAt).toLocaleString('zh-CN')}
              </div>
            </div>
          </div>
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            关闭
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}