eventspace/frontend/src/app/(main)/dashboard/page.tsx

// src/app/(main)/dashboard/page.tsx
"use client";

import { useAuth } from "@/context/auth-context";
import { useRouter } from "next/navigation";
import { useEffect } from "react";

export default function DashboardPage() {
  const { user, isLoading, isAuthenticated } = useAuth();
  const router = useRouter();

  // Redirect to login if not authenticated
  useEffect(() => {
    if (!isLoading && !isAuthenticated) {
      router.push("/login");
    }
  }, [isLoading, isAuthenticated, router]);

  // Show loading state
  if (isLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <div className="h-8 w-8 mx-auto border-4 border-t-blue-500 border-blue-200 rounded-full animate-spin"></div>
          <p className="mt-2">Loading...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="container mx-auto px-4 py-12">
      <div className="max-w-7xl mx-auto">
        <h1 className="text-3xl font-bold mb-8">Dashboard</h1>

        <div className="bg-white dark:bg-slate-800 rounded-lg shadow p-6">
          <h2 className="text-xl font-semibold mb-4">
            Welcome, {user?.first_name || "User"}!
          </h2>
          <p className="text-gray-600 dark:text-gray-300 mb-4">
            You are now logged in to EventSpace.
          </p>

          <div className="mt-8">
            <h3 className="text-lg font-medium mb-4">Your Events</h3>
            <div className="bg-gray-100 dark:bg-slate-700 rounded p-8 text-center">
              <p className="text-gray-500 dark:text-gray-400">No events yet</p>
              <button
                className="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
                onClick={() => alert("Create event functionality coming soon!")}
              >
                Create Your First Event
              </button>
            </div>
          </div>

          <div className="mt-8">
            <button
              className="px-4 py-2 bg-red-100 text-red-600 rounded hover:bg-red-200 transition-colors"
              onClick={() => {
                const auth = useAuth();
                auth.logout();
              }}
            >
              Sign Out
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}