import LoadingSpinner from '../components/LoadingSpinner'
import ErrorState from '../components/ErrorState'
import { useHealth } from '../hooks/useHealth'

export default function HomePage() {
  const { data, isLoading, isError, refetch } = useHealth()

  return (
    <div className="flex min-h-screen flex-col items-center justify-center gap-6 p-6">
      <h1 className="text-3xl font-bold tracking-tight text-sky-400">Extrudex</h1>
      <p className="text-slate-400">Filament inventory &amp; print tracking</p>

      <div className="w-full max-w-md rounded-xl border border-slate-700 bg-slate-800/60 p-6 shadow-lg backdrop-blur-sm">
        <h2 className="mb-3 text-sm font-semibold uppercase tracking-wider text-slate-400">
          Backend Health
        </h2>

        {isLoading && <LoadingSpinner />}

        {isError && (
          <ErrorState
            message="Backend is unreachable."
            onRetry={() => refetch()}
          />
        )}

        {data && (
          <div className="flex items-center gap-2 text-emerald-400">
            <span className="h-2 w-2 rounded-full bg-emerald-400" />
            <span className="text-sm font-medium">{data.status || 'ok'}</span>
          </div>
        )}
      </div>
    </div>
  )
}