import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import { OperationLog } from '@/types/monitor'
import { FileText } from 'lucide-react'

interface OperationLogDetailDialogProps {
  log: OperationLog | null
  isOpen: boolean
  onClose: () => void
  isLoading?: boolean
}

export function OperationLogDetailDialog({
  log,
  isOpen,
  onClose,
  isLoading = false
}: OperationLogDetailDialogProps) {
  const getModuleLabel = (module: string) => {
    const labels: Record<string, string> = {
      user: '用户管理',
      role: '角色管理',
      permission: '权限管理',
      machinery: '农机管理',
      driver: '驾驶员管理',
      task: '任务管理',
      system: '系统配置',
      other: '其他',
    }
    return labels[module] || module
  }

  const getActionLabel = (action: string) => {
    const labels: Record<string, string> = {
      create: '新增',
      update: '修改',
      delete: '删除',
      view: '查看',
      export: '导出',
      import: '导入',
      login: '登录',
      logout: '登出',
    }
    return labels[action] || action
  }

  const getActionBadge = (action: string) => {
    const colors: Record<string, string> = {
      create: 'bg-green-100 text-green-700',
      update: 'bg-blue-100 text-blue-700',
      delete: 'bg-red-100 text-red-700',
      view: 'bg-gray-100 text-gray-700',
      export: 'bg-purple-100 text-purple-700',
      import: 'bg-yellow-100 text-yellow-700',
    }
    return colors[action] || 'bg-gray-100 text-gray-700'
  }

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>
            <div className="flex items-center gap-2">
              <FileText className="w-5 h-5 text-green-600" />
              操作日志详情
            </div>
          </DialogTitle>
        </DialogHeader>

        {isLoading ? (
          <div className="space-y-4">
            {Array.from({ length: 6 }).map((_, index) => (
              <div key={index} className="animate-pulse">
                <div className="bg-gray-200 h-4 w-24 rounded mb-2"></div>
                <div className="bg-gray-200 h-6 w-40 rounded"></div>
              </div>
            ))}
          </div>
        ) : log ? (
          <div className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div>
                <p className="text-sm text-muted-foreground">操作人</p>
                <p className="mt-1 font-medium">{log.username}</p>
              </div>
              <div>
                <p className="text-sm text-muted-foreground">操作时间</p>
                <p className="mt-1">{new Date(log.operationTime).toLocaleString('zh-CN')}</p>
              </div>
              <div>
                <p className="text-sm text-muted-foreground">操作模块</p>
                <p className="mt-1">
                  <Badge variant="outline">{getModuleLabel(log.module)}</Badge>
                </p>
              </div>
              <div>
                <p className="text-sm text-muted-foreground">操作类型</p>
                <p className="mt-1">
                  <Badge className={getActionBadge(log.action)}>
                    {getActionLabel(log.action)}
                  </Badge>
                </p>
              </div>
              <div>
                <p className="text-sm text-muted-foreground">IP地址</p>
                <p className="mt-1">
                  <code className="text-xs bg-gray-100 px-2 py-1 rounded">
                    {log.ipAddress}
                  </code>
                </p>
              </div>
              <div>
                <p className="text-sm text-muted-foreground">耗时</p>
                <p className="mt-1">{log.duration ? `${log.duration}ms` : '-'}</p>
              </div>
            </div>

            <div>
              <p className="text-sm text-muted-foreground">操作描述</p>
              <p className="mt-1">{log.description}</p>
            </div>

            {log.requestUrl && (
              <div>
                <p className="text-sm text-muted-foreground">请求URL</p>
                <p className="mt-1">
                  <code className="text-xs bg-gray-100 px-2 py-1 rounded">
                    {log.requestMethod} {log.requestUrl}
                  </code>
                </p>
              </div>
            )}

            {log.requestParams && (
              <div>
                <p className="text-sm text-muted-foreground">请求参数</p>
                <pre className="mt-1 p-3 bg-gray-50 rounded text-xs overflow-x-auto">
                  {(() => {
                    try {
                      return JSON.stringify(JSON.parse(log.requestParams), null, 2)
                    } catch {
                      return log.requestParams
                    }
                  })()}
                </pre>
              </div>
            )}

            {log.responseData && (
              <div>
                <p className="text-sm text-muted-foreground">响应数据</p>
                <pre className="mt-1 p-3 bg-gray-50 rounded text-xs overflow-x-auto">
                  {(() => {
                    try {
                      return JSON.stringify(JSON.parse(log.responseData), null, 2)
                    } catch {
                      return log.responseData
                    }
                  })()}
                </pre>
              </div>
            )}

            {log.errorMessage && (
              <div>
                <p className="text-sm text-muted-foreground">错误信息</p>
                <p className="mt-1 text-red-600 bg-red-50 p-3 rounded">{log.errorMessage}</p>
              </div>
            )}
          </div>
        ) : null}

        <DialogFooter>
          <Button variant="outline" onClick={onClose}>
            关闭
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}