/**
 * Home page for authenticated users
 * Shows overview of available content
 */

import { useNavigate } from 'react-router-dom';
import { useAuth, useIsAdmin } from '@/stores/authStore';

export function HomePage() {
  const { user, logout } = useAuth();
  const isAdmin = useIsAdmin();
  const navigate = useNavigate();

  return (
    <div className="home-page">
      <header className="home-header">
        <h1>Welcome to DeutschLernen</h1>
        <p className="welcome-message">
          Hello, {user?.username}! You're currently at level {user?.currentLevel}.
        </p>
        <p className="user-stats">
          Points: {user?.totalPoints} | Streak: {user?.streak} days
        </p>
      </header>

      <div className="home-content">
        <section className="content-section">
          <h2>Continue Learning</h2>
          <div className="quick-access">
            <button
              onClick={() => navigate('/lessons')}
              className="quick-access-card"
            >
              <span className="card-icon">📚</span>
              <span className="card-title">Lessons</span>
              <span className="card-description">Practice vocabulary and grammar</span>
            </button>

            <button
              onClick={() => navigate('/story/1')}
              className="quick-access-card"
            >
              <span className="card-icon">📖</span>
              <span className="card-title">Stories</span>
              <span className="card-description">Read engaging German stories</span>
            </button>

            <button
              onClick={() => navigate('/quizzes')}
              className="quick-access-card"
            >
              <span className="card-icon">🎯</span>
              <span className="card-title">Quizzes</span>
              <span className="card-description">Test your knowledge</span>
            </button>
          </div>
        </section>

        <section className="content-section">
          <h2>Your Progress</h2>
          <div className="progress-overview">
            <div className="progress-card">
              <h3>Level {user?.currentLevel}</h3>
              <p>Current CEFR level</p>
            </div>
            <div className="progress-card">
              <h3>{user?.totalPoints} pts</h3>
              <p>Total points earned</p>
            </div>
            <div className="progress-card">
              <h3>{user?.streak} days</h3>
              <p>Current learning streak</p>
            </div>
          </div>
        </section>

        {isAdmin && (
          <section className="content-section admin-section">
            <h2>Admin Dashboard</h2>
            <p>You have administrator access to manage users and content.</p>
            <div className="admin-actions">
              <button
                onClick={() => navigate('/admin')}
                className="btn btn-admin"
              >
                Go to Admin Panel
              </button>
            </div>
          </section>
        )}

        <section className="content-section">
          <div className="user-actions">
            <button
              onClick={() => logout()}
              className="btn btn-secondary"
            >
              Sign Out
            </button>
          </div>
        </section>
      </div>
    </div>
  );
}