'use client'

import { WxUserWithProgress } from '@/types'
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from '@/components/ui/dialog'

interface WxUserDetailDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  user: WxUserWithProgress | null | undefined
}

export function WxUserDetailDialog({
  open,
  onOpenChange,
  user,
}: WxUserDetailDialogProps) {
  if (!user) return null

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>用户详情</DialogTitle>
          <DialogDescription>
            完整信息及关卡进度
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-4">
          <div className="flex items-center gap-4">
            <div className="w-16 h-16 flex-shrink-0">
              {user.avatarUrl ? (
                <img
                  src={user.avatarUrl}
                  alt={user.nickname || 'User'}
                  className="w-16 h-16 rounded-full object-cover"
                />
              ) : (
                <div className="w-16 h-16 rounded-full bg-gray-200 flex items-center justify-center text-xl font-medium text-gray-600">
                  {user.nickname?.[0]?.toUpperCase() || 'U'}
                </div>
              )}
            </div>
            <div>
              <h2 className="text-xl font-semibold text-gray-900">
                {user.nickname || '匿名用户'}
              </h2>
              <p className="text-sm text-gray-500 mt-1">
                注册时间：{new Date(user.createdAt).toLocaleDateString('zh-CN')}
              </p>
            </div>
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div className="bg-gray-50 rounded-lg p-4">
              <p className="text-xs text-gray-500 uppercase tracking-wider mb-1">积分</p>
              <p className="text-2xl font-bold text-orange-600">{user.points}</p>
            </div>
            <div className="bg-gray-50 rounded-lg p-4">
              <p className="text-xs text-gray-500 uppercase tracking-wider mb-1">已通关关卡</p>
              <p className="text-2xl font-bold text-green-600">{user.levelProgress.length}</p>
            </div>
          </div>

          <div>
            <p className="text-xs text-gray-500 uppercase tracking-wider mb-2">OpenID</p>
            <code className="block bg-gray-100 text-gray-800 text-xs p-3 rounded-lg break-all">
              {user.openid}
            </code>
          </div>

          {user.levelProgress.length > 0 && (
            <div>
              <p className="text-xs text-gray-500 uppercase tracking-wider mb-2">关卡进度</p>
              <div className="space-y-2">
                {user.levelProgress.map((progress) => (
                  <div
                    key={progress.id}
                    className="flex items-center justify-between bg-gray-50 rounded-lg px-3 py-2"
                  >
                    <div className="flex flex-col">
                      <span className="text-xs text-gray-400 font-mono">
                        {progress.levelId}
                      </span>
                      {progress.level && (
                        <span className="text-sm font-medium text-gray-900">
                          {progress.level.answer}
                        </span>
                      )}
                    </div>
                    <span className="text-xs text-gray-400">
                      {new Date(progress.completedAt).toLocaleDateString('zh-CN')}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      </DialogContent>
    </Dialog>
  )
}