'use client';

import { useSession } from 'next-auth/react';
import { signIn } from 'next-auth/react';

import Dashboard from '@/components/Dashboard';

export default function Home() {
  const { status } = useSession();

  if (status === 'loading') {
    return (
      <div className="flex min-h-screen items-center justify-center bg-gray-950 px-4">
        <div className="text-center">
          <div className="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-4 border-gray-600 border-t-orange-500" />
          <p className="text-gray-400">Loading...</p>
        </div>
      </div>
    );
  }

  if (status === 'unauthenticated') {
    return (
      <div className="flex min-h-screen flex-col items-center justify-center bg-gray-950 px-4 py-12">
        <div className="w-full max-w-md rounded-2xl border border-gray-800 bg-gray-900/80 p-8 shadow-xl shadow-black/40 backdrop-blur-sm">
          <p className="mb-1 text-center text-sm font-medium uppercase tracking-wide text-orange-400">
            Sankofa Phoenix
          </p>
          <h1 className="mb-2 text-center text-2xl font-bold text-white">Welcome to Portal</h1>
          <p className="mb-8 text-center text-gray-400">Sign in to open Nexus Console.</p>
          <button
            type="button"
            onClick={() => signIn(undefined, { callbackUrl: '/' })}
            className="w-full rounded-lg bg-gradient-to-r from-orange-500 to-amber-500 px-6 py-3 font-semibold text-gray-950 shadow-lg transition hover:from-orange-400 hover:to-amber-400 focus:outline-none focus:ring-2 focus:ring-orange-400 focus:ring-offset-2 focus:ring-offset-gray-900"
          >
            Sign In
          </button>
          {process.env.NODE_ENV === 'development' && (
            <p className="mt-6 text-center text-xs text-gray-500">
              Development: use any email/password with your dev IdP configuration.
            </p>
          )}
        </div>
      </div>
    );
  }

  return <Dashboard />;
}

