import React, { useState, useEffect, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { api } from '@/api';
import AppNavigation from '@/components/layout/Sidebar';
import OnboardingWizard from '@/components/admin/OnboardingWizard';
import EmailNotifCard from '@/components/admin/EmailNotifCard';
import BankSyncAdminCard from '@/components/admin/BankSyncAdminCard';
import LoginModeCard from '@/components/admin/LoginModeCard';
import AuthMethodsCard from '@/components/admin/AuthMethodsCard';
import UsersTable from '@/components/admin/UsersTable';
import AddUserCard from '@/components/admin/AddUserCard';
import BackupManagementCard from '@/components/admin/BackupManagementCard';
import CleanupPanel from '@/components/admin/CleanupPanel';

export default function AdminPage() {
  const navigate = useNavigate();

  const [me, setMe]             = useState(null);
  const [hasUsers, setHasUsers] = useState(null);
  const [loadError, setLoadError] = useState('');
  const [users, setUsers]       = useState([]);

  const loadMe = useCallback(async () => {
    try {
      const d = await api.me();
      setMe(d.user);
    } catch {
      navigate('/login', { replace: true });
    }
  }, [navigate]);

  const loadUsers = useCallback(async () => {
    try {
      const d = await api.adminUsers();
      setUsers(d.users || d);
    } catch {}
  }, []);

  const loadHasUsers = useCallback(async () => {
    try {
      const d = await api.hasUsers();
      setHasUsers(d.has_users);
      if (d.has_users) loadUsers();
    } catch (err) {
      setLoadError(err.message || 'Failed to load admin page');
      setHasUsers(false);
    }
  }, [loadUsers]);

  useEffect(() => {
    loadMe();
    loadHasUsers();
  }, [loadMe, loadHasUsers]);

  const handleOnboardingComplete = () => {
    setHasUsers(true);
    loadUsers();
  };

  if (hasUsers === null && !loadError) {
    return (
      <div className="flex items-center justify-center min-h-screen text-muted-foreground text-sm">
        Loading…
      </div>
    );
  }

  if (loadError) {
    return (
      <div className="flex items-center justify-center min-h-screen text-destructive text-sm">
        {loadError}
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-[radial-gradient(circle_at_top_left,oklch(var(--primary)/0.06),transparent_34rem),linear-gradient(180deg,oklch(var(--background)),oklch(var(--muted)/0.18))] text-foreground">
      <AppNavigation adminMode />

      {!hasUsers ? (
        <OnboardingWizard onComplete={handleOnboardingComplete} />
      ) : (
        <main className="mx-auto max-w-5xl px-4 py-6 sm:px-6 lg:px-8 lg:py-8 space-y-6">
          <EmailNotifCard />
          <BankSyncAdminCard />
          <BackupManagementCard />
          <CleanupPanel />
          <LoginModeCard users={users} />
          <AuthMethodsCard />
          <AddUserCard onCreated={loadUsers} />
          <UsersTable users={users} onRefresh={loadUsers} currentUser={me} />
        </main>
      )}
    </div>
  );
}