tfm_ainventory/frontend/app/admin/page.tsx

'use client';

import { useAdmin } from '@/hooks/useAdmin';
import PageShell from '@/components/PageShell';
import { Shield, LogOut } from 'lucide-react';

import IdentityManager from '@/components/admin/IdentityManager';
import LdapManager from '@/components/admin/LdapManager';
import AiManager from '@/components/admin/AiManager';
import DatabaseManager from '@/components/admin/DatabaseManager';
import CategoryManager from '@/components/admin/CategoryManager';

export default function AdminPage() {
  const admin = useAdmin();

  if (admin.loading) {
    return (
      <PageShell>
        <div className="flex items-center justify-center min-h-[60vh]">
          <div className="w-12 h-12 border-4 border-indigo-500/20 border-t-indigo-500 rounded-full animate-spin" />
        </div>
      </PageShell>
    );
  }

  return (
    <PageShell>
      <main data-testid="admin-page" className="p-3 md:p-8 max-w-7xl mx-auto space-y-6 md:space-y-10 mb-20">
        <header className="flex items-center gap-4 mb-8 md:mb-12">
          <div className="p-3 md:p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 bg-indigo-500/10 rounded-2xl text-indigo-400 border border-indigo-500/20 shadow-xl shadow-indigo-500/5">
            <Shield size={28} className="md:w-8 md:h-8" />
          </div>
          <div>
            <h1 className="text-2xl md:text-3xl lg:text-4xl xl:text-5xl font-black tracking-tight text-white leading-tight">Admin Control</h1>
            <p className="text-[10px] md:text-xs lg:text-sm xl:text-base lg:text-lg xl:text-xl lg:text-2xl xl:text-3xl lg:text-4xl xl:text-5xl text-muted font-bold tracking-tight mt-0.5">System Configuration & Security</p>
          </div>
          <button
             onClick={admin.handleLogout}
             className="ml-auto p-3 lg:p-4 xl:p-5 lg:p-6 xl:p-8 bg-surface border border-slate-800 text-muted hover:text-rose-500 rounded-2xl transition-all active:scale-95 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-rose-500 focus-visible:outline-none"
             title="Secure Logout"
             aria-label="Logout from admin panel"
          >
            <LogOut size={20} />
          </button>
        </header>

        <div className="grid lg:grid-cols-2 gap-6 md:gap-8 items-start">
          {/* Left Column: Identity & Integrity */}
          <section className="space-y-6 md:space-y-8">
            <DatabaseManager data-testid="admin-tab-database"
              dbStats={admin.dbStats}
              isBackingUp={admin.isBackingUp}
              onCreateBackup={admin.handleCreateBackup}
              dbSettings={admin.dbSettings}
              onUpdateDbSettings={admin.handleUpdateDbSettings}
              backups={admin.backups}
              onRestore={admin.handleRestore}
              onExport={admin.handleExportDb}
              onImport={admin.handleImportDb}
            />

            <IdentityManager data-testid="admin-tab-identity"
              users={admin.users}
              onAddUser={admin.handleAddUser}
              onDeleteUser={admin.handleDeleteUser}
              editingUser={admin.editingUser}
              setEditingUser={admin.setEditingUser}
              editUserForm={admin.editUserForm}
              setEditUserForm={admin.setEditUserForm}
              onUpdateUserSubmit={admin.handleUpdateUserSubmit}
            />
          </section>

          {/* Right Column: Infrastructure */}
          <section className="space-y-6 md:space-y-8">
            <LdapManager data-testid="admin-tab-ldap"
              ldapConfig={admin.ldapConfig}
              setLdapConfig={admin.setLdapConfig}
              testingLdap={admin.testingLdap}
              onTestLdap={admin.handleTestLdap}
              onUpdateLdap={admin.handleUpdateLdap}
            />
          </section>
        </div>

        {/* Full Width: Category Groups */}
        <CategoryManager data-testid="admin-tab-categories"
          categories={admin.categories}
          onAddCategory={admin.handleAddCategory}
          onDeleteCategory={admin.handleDeleteCategory}
          setEditingCategory={admin.setEditingCategory}
          setEditCatForm={admin.setEditCatForm}
          editCatForm={admin.editCatForm}
          editingCategory={admin.editingCategory}
          onUpdateCategorySubmit={admin.handleUpdateCategorySubmit}
        />

        {/* Full Width: AI Intelligence */}
        <AiManager data-testid="admin-tab-ai"
          aiConfig={admin.aiConfig}
          handleUpdateAiProvider={admin.handleUpdateAiProvider}
          aiKeys={admin.aiKeys}
          setAiKeys={admin.setAiKeys}
          isSavingKeys={admin.isSavingKeys}
          onSaveAiKeys={admin.handleSaveAiKeys}
          isTestingKeys={admin.isTestingKeys}
          onTestAiKey={admin.handleTestAiKey}
          aiPrompt={admin.aiPrompt}
          setAiPrompt={admin.setAiPrompt}
          isSavingPrompt={admin.isSavingPrompt}
          onUpdatePrompt={admin.handleUpdatePrompt}
        />
      </main>
    </PageShell>
  );
}