import { useState } from "react";
import { useAuth } from "./lib/useAuth";
import { Loader2 } from "lucide-react";
import Layout, { type Page } from "./components/Layout";
import Dashboard from "./pages/Dashboard";
import Settings from "./pages/Settings";
import Users from "./pages/Users";
import Items from "./pages/Items";
import PlaceholderPage from "./pages/PlaceholderPage";

const placeholders: Record<string, { title: string; description: string }> = {
  users: {
    title: "Users",
    description: "Search, view, and manage user accounts, balances, XP, levels, and inventories.",
  },
  items: {
    title: "Items",
    description: "Create, edit, and manage game items with icons, rarities, and pricing.",
  },
  classes: {
    title: "Classes",
    description: "Manage academy classes, assign Discord roles, and track class balances.",
  },
  quests: {
    title: "Quests",
    description: "Configure quests with trigger events, targets, and XP/balance rewards.",
  },
  lootdrops: {
    title: "Lootdrops",
    description: "View active lootdrops, spawn new drops, and manage lootdrop history.",
  },
  moderation: {
    title: "Moderation",
    description: "Review moderation cases — warnings, timeouts, kicks, bans — and manage appeals.",
  },
  transactions: {
    title: "Transactions",
    description: "Browse the economy transaction log with filtering by user, type, and date.",
  },
  settings: {
    title: "Settings",
    description: "Configure bot settings for economy, leveling, commands, and guild preferences.",
  },
};

export default function App() {
  const { loading, user, logout } = useAuth();
  const [page, setPage] = useState<Page>("dashboard");

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
      </div>
    );
  }

  if (!user) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center max-w-xs">
          <div className="font-display font-bold text-3xl tracking-tight mb-1">Aurora</div>
          <p className="text-sm text-muted-foreground mb-8">Admin Panel</p>
          <a
            href={`/auth/discord?return_to=${encodeURIComponent(window.location.origin + '/')}`}
            className="inline-flex items-center justify-center w-full rounded-md bg-primary text-primary-foreground px-4 py-2 text-sm font-medium hover:bg-primary/90 transition-colors"
          >
            Sign in with Discord
          </a>
          <p className="text-xs text-muted-foreground/40 mt-6">Authorized administrators only</p>
        </div>
      </div>
    );
  }

  return (
    <Layout user={user} logout={logout} currentPage={page} onNavigate={setPage}>
      {page === "dashboard" ? (
        <Dashboard />
      ) : page === "users" ? (
        <Users />
      ) : page === "items" ? (
        <Items />
      ) : page === "settings" ? (
        <Settings />
      ) : (
        <PlaceholderPage {...placeholders[page]!} />
      )}
    </Layout>
  );
}
