import { Database } from 'lucide-react'
import { useEffect, useState } from 'react'

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { useApp } from '@/hooks/use-app'
import { bytesToHuman } from '@/lib/bytes-to-human'
import { DashboardDefaultData } from '@/types'

const DatabaseStats = () => {
  const { request } = useApp()
  const [isRefreshing, setIsRefreshing] = useState(false)
  const [data, setData] = useState<DashboardDefaultData>({
    os: {
      name: '',
      platform: '',
      version: '',
      architecture: '',
      uptime: 0,
      cpu: {
        model: '',
        speed: 0,
        physicalCores: 0,
        virtualCores: 0,
      },
      memory: {
        total: 0,
        free: 0,
      },
      disk: [],
    },
    modules: [],
    users: {
      total: 0,
      admin: 0,
      active: 0,
      activities: [],
    },
    database: {
      connections: 0,
      size: 0,
      queriesPerSecond: 0,
    },
  } as DashboardDefaultData)

  const load = async () => {
    setIsRefreshing(true)
    const { data } = await request<DashboardDefaultData>({
      url: '/core',
    })

    setData(data)

    setIsRefreshing(false)
  }

  useEffect(() => {
    load()
  }, [])

  return (
    <Card className='flex h-full flex-col'>
      <CardHeader>
        <CardTitle className='flex items-center'>
          <Database className='mr-2 h-5 w-5 text-primary' />
          Estatísticas do Banco de Dados
        </CardTitle>
        <CardDescription>
          Informações sobre o banco de dados do sistema
        </CardDescription>
      </CardHeader>
      <CardContent className='flex flex-1 flex-col overflow-auto'>
        {isRefreshing ? (
          <div className='grid grid-cols-1 gap-4 md:grid-cols-3'>
            <div className='animate-pulse rounded-lg border p-4'>
              <div className='h-4 w-1/3 rounded bg-muted-foreground/20'></div>
              <div className='mt-2 h-6 w-2/3 rounded bg-muted-foreground/20'></div>
            </div>
            <div className='animate-pulse rounded-lg border p-4'>
              <div className='h-4 w-1/3 rounded bg-muted-foreground/20'></div>
              <div className='mt-2 h-6 w-2/3 rounded bg-muted-foreground/20'></div>
            </div>
            <div className='animate-pulse rounded-lg border p-4'>
              <div className='h-4 w-1/3 rounded bg-muted-foreground/20'></div>
              <div className='mt-2 h-6 w-2/3 rounded bg-muted-foreground/20'></div>
            </div>
          </div>
        ) : (
          <div className='grid grid-cols-1 gap-4 md:grid-cols-3'>
            <div className='rounded-lg border p-4'>
              <div className='text-sm font-medium text-muted-foreground'>
                Conexões
              </div>
              <div className='mt-1 text-2xl font-bold'>
                {data.database.connections}
              </div>
            </div>
            <div className='rounded-lg border p-4'>
              <div className='text-sm font-medium text-muted-foreground'>
                Tamanho
              </div>
              <div className='mt-1 text-2xl font-bold'>
                {bytesToHuman(data.database.size)}
              </div>
            </div>
            <div className='rounded-lg border p-4'>
              <div className='text-sm font-medium text-muted-foreground'>
                Consultas/min
              </div>
              <div className='mt-1 text-2xl font-bold'>
                {data.database.queriesPerSecond}
              </div>
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  )
}

export default DatabaseStats