import type { NextPage } from 'next'
import Head from 'next/head'
import AdminLayout from '../../../components/AdminLayout'
import { CheckCircleIcon, ServerStackIcon } from '@heroicons/react/24/outline'

const SystemStatus: NextPage = () => {
  return (
    <>
      <Head>
        <title>Stav systému - Hliadka.sk Admin</title>
      </Head>
      <AdminLayout title="Stav systému">
        <div className="px-4 py-6 sm:px-6 lg:px-8">
          <div className="sm:flex sm:items-center">
            <div className="sm:flex-auto">
              <p className="text-sm text-gray-700">
                Aktuálny stav všetkých komponentov systému
              </p>
            </div>
          </div>
          
          <div className="mt-8">
            <div className="card p-6">
              <div className="flex items-center justify-between mb-6">
                <div className="flex items-center">
                  <CheckCircleIcon className="h-8 w-8 text-green-500 mr-3" />
                  <div>
                    <h2 className="text-xl font-semibold text-gray-900">Všetko funguje správne</h2>
                    <p className="text-sm text-gray-600">Všetky služby sú dostupné</p>
                  </div>
                </div>
                <div className="text-right">
                  <div className="text-lg font-medium text-gray-900">Uptime: 15 dní, 8 hodín</div>
                  <div className="text-sm text-gray-600">99.9% dostupnosť</div>
                </div>
              </div>
              
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <div className="border rounded-lg p-4">
                  <div className="flex items-center justify-between">
                    <span className="font-medium">Databáza</span>
                    <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                      Online
                    </span>
                  </div>
                </div>
                
                <div className="border rounded-lg p-4">
                  <div className="flex items-center justify-between">
                    <span className="font-medium">API Server</span>
                    <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                      Online
                    </span>
                  </div>
                </div>
                
                <div className="border rounded-lg p-4">
                  <div className="flex items-center justify-between">
                    <span className="font-medium">Web Scraper</span>
                    <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                      Online
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </AdminLayout>
    </>
  )
}

export default SystemStatus