import { useState, useEffect } from "react"
import type { NextPage } from "next"
import Head from "next/head"
import AdminLayout from '../../components/AdminLayout'
import { KeyIcon, PlusIcon } from '@heroicons/react/24/outline'

const ApiKeys: NextPage = () => {
  const [keys, setKeys] = useState([])
  useEffect(() => {
    fetch("/api/admin/api-keys").then(res => res.json()).then(setKeys)
  }, [])
  
  return (
    <>
      <Head>
        <title>API kľúče - Hliadka.sk Admin</title>
      </Head>
      <AdminLayout title="API kľúče">
        <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">
                Správa API kľúčov pre prístup k systému
              </p>
            </div>
            <div className="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
              <button
                type="button"
                className="btn-primary"
              >
                <PlusIcon className="h-4 w-4 mr-2" />
                Vytvoriť kľúč
              </button>
            </div>
          </div>

          <div className="mt-8">
            <div className="card p-6">
              <div className="flex items-center mb-4">
                <KeyIcon className="h-6 w-6 text-gray-400 mr-3" />
                <h2 className="text-lg font-medium text-gray-900">Aktívne API kľúče</h2>
              </div>
              <div className="text-sm text-gray-600">
                Celkom aktívnych kľúčov: <span className="font-medium text-gray-900">{keys.length}</span>
              </div>
              {keys.length === 0 && (
                <p className="text-gray-500 mt-4">
                  Zatiaľ neboli vytvorené žiadne API kľúče. Kliknite na "Vytvoriť kľúč" pre vytvorenie nového.
                </p>
              )}
            </div>
          </div>
        </div>
      </AdminLayout>
    </>
  )
}

export default ApiKeys
