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';
import { ExportPanel } from '@/components/admin/ExportPanel';

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-primary/20 border-t-primary rounded-none animate-spin" />
        </div>
      </PageShell>
    );
  }

  return (
    <PageShell>
      <main data-testid="admin-page" className="p-4 md:p-8 max-w-7xl mx-auto space-y-3 md:space-y-6 mb-20 font-sans">
        <header className="flex items-center gap-4 mb-6 md:mb-8">
          <div className="p-4 bg-primary/10 text-primary border border-primary/20">
            <Shield size={28} className="md:w-8 md:h-8" />
          </div>
          <div>
            <h1 className="text-2xl md:text-3xl font-normal tracking-tight text-white leading-tight">Admin Control</h1>
            <p className="text-[10px] md:text-xs text-secondary font-normal tracking-tight mt-0.5">System Configuration & Security</p>
          </div>
          <button
             onClick={admin.handleLogout}
             className="ml-auto p-3 bg-surface border border-border text-secondary hover:text-error 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-3 md:gap-4 items-start">
          {/* Left Column: Identity & Integrity */}
          <section className="space-y-3 md:space-y-4">
            <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-3 md:space-y-4">
            <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}
        />

        {/* Full Width: Export & Reports */}
        <ExportPanel data-testid="admin-tab-exports" />
      </main>
    </PageShell>
  );
}