'use client';

import { UserNav } from '@/components/auth/UserNav';
import { useAuth } from '@/lib/contexts/AuthContext';
import Link from 'next/link';

export default function HomePage() {
  const { isAuthenticated, user, isLoading } = useAuth();

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
      {/* Header */}
      <header className="bg-white shadow-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <h1 className="text-2xl font-bold text-gray-900">ThrillWiki</h1>
            <span className="text-sm text-gray-500">Roller Coaster Database</span>
          </div>
          <UserNav />
        </div>
      </header>

      {/* Main Content */}
      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <div className="text-center">
          <h2 className="text-4xl font-bold text-gray-900 mb-4">
            Welcome to ThrillWiki
          </h2>
          <p className="text-xl text-gray-600 mb-8">
            The comprehensive database of theme parks, roller coasters, and attractions worldwide
          </p>

          {!isLoading && (
            <div className="mt-12">
              {isAuthenticated && user ? (
                <div className="bg-white rounded-lg shadow-lg p-8 max-w-2xl mx-auto">
                  <h3 className="text-2xl font-bold mb-4">
                    Welcome back, {user.username}!
                  </h3>
                  <p className="text-gray-600 mb-6">
                    You're successfully logged in. Explore the features below:
                  </p>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <Link
                      href="/dashboard"
                      className="p-6 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors"
                    >
                      <h4 className="font-semibold text-lg mb-2">Dashboard</h4>
                      <p className="text-sm text-gray-600">
                        View your profile and activity
                      </p>
                    </Link>
                    <div className="p-6 bg-gray-50 rounded-lg opacity-50 cursor-not-allowed">
                      <h4 className="font-semibold text-lg mb-2">Browse Parks</h4>
                      <p className="text-sm text-gray-600">
                        Coming soon...
                      </p>
                    </div>
                    <div className="p-6 bg-gray-50 rounded-lg opacity-50 cursor-not-allowed">
                      <h4 className="font-semibold text-lg mb-2">Browse Rides</h4>
                      <p className="text-sm text-gray-600">
                        Coming soon...
                      </p>
                    </div>
                    <div className="p-6 bg-gray-50 rounded-lg opacity-50 cursor-not-allowed">
                      <h4 className="font-semibold text-lg mb-2">My Reviews</h4>
                      <p className="text-sm text-gray-600">
                        Coming soon...
                      </p>
                    </div>
                  </div>
                </div>
              ) : (
                <div className="bg-white rounded-lg shadow-lg p-8 max-w-2xl mx-auto">
                  <h3 className="text-2xl font-bold mb-4">Get Started</h3>
                  <p className="text-gray-600 mb-6">
                    Sign up or log in to access all features of ThrillWiki
                  </p>
                  <div className="space-y-4">
                    <div className="p-4 bg-blue-50 rounded-lg text-left">
                      <h4 className="font-semibold mb-2">✨ Track Your Visits</h4>
                      <p className="text-sm text-gray-600">
                        Keep a record of all the theme parks you've visited
                      </p>
                    </div>
                    <div className="p-4 bg-blue-50 rounded-lg text-left">
                      <h4 className="font-semibold mb-2">🎢 Rate Roller Coasters</h4>
                      <p className="text-sm text-gray-600">
                        Share your experiences and read reviews from other enthusiasts
                      </p>
                    </div>
                    <div className="p-4 bg-blue-50 rounded-lg text-left">
                      <h4 className="font-semibold mb-2">🌍 Explore Worldwide</h4>
                      <p className="text-sm text-gray-600">
                        Browse parks and attractions from around the globe
                      </p>
                    </div>
                  </div>
                </div>
              )}
            </div>
          )}
        </div>
      </main>

      {/* Footer */}
      <footer className="bg-white border-t border-gray-200 mt-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 text-center text-gray-600">
          <p>© 2025 ThrillWiki. Authentication powered by Django + JWT.</p>
        </div>
      </footer>
    </div>
  );
}