// /components/main/settingsPageComponents/DatabaseSettings.tsx
"use client";
import React from "react";
import handleClearDatabase from "./handlers/dbHandlers/handleClearDatabase";
import handleClearConfig from "./handlers/dbHandlers/handleClearConfig";
import handleClearMessages from "./handlers/dbHandlers/handleClearMessages";
import handleClearLogger from "./handlers/dbHandlers/handleClearLogger";
import { useAdminAuth } from "./hooks/useAdminAuth";

const DatabaseSettings: React.FC = () => {
  const { isAdminLoggedIn } = useAdminAuth(true);
  return (
  <div className="p-6 bg-[var(--color-surface-alt)] max-w-5xl mr-auto rounded shadow text-[var(--color-fg)]">
      <h2 className="text-lg font-bold mb-6">Datenbank Einstellungen</h2>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
        <button
          type="button"
          onClick={handleClearMessages}
          className="btn-accent px-4 py-2 rounded shadow"
        >
          Meldungen löschen
        </button>

        <button
          type="button"
          onClick={handleClearLogger}
          className="btn-accent px-4 py-2 rounded shadow"
        >
          Messwerte Logger löschen
        </button>
      </div>

      {isAdminLoggedIn && (
        <div className="mt-8 border-t pt-6">
          <h3 className="text-md font-semibold mb-4 text-red-700">
            Nur für Administratoren
          </h3>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <button
              type="button"
              onClick={handleClearDatabase}
              className="btn-accent px-4 py-2 rounded shadow"
            >
              Datenbank vollständig leeren
            </button>

            <button
              type="button"
              onClick={handleClearConfig}
              className="btn-accent px-4 py-2 rounded shadow"
            >
              Konfiguration löschen
            </button>
          </div>
        </div>
      )}
    </div>
  );
};

export default DatabaseSettings;