import { useAuthStore } from '@/store'
import { Link } from 'react-router-dom'
import { RewardsLayout } from '@/components/layout/RewardsLayout'
import { Achievements, TierProgress } from '@/components/gamification'

export default function AchievementsPage() {
  const { isAuthenticated } = useAuthStore()

  return (
    <RewardsLayout
      title="Achievements"
      subtitle="Track your progress and unlock badges"
    >
      {isAuthenticated ? (
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          <div className="lg:col-span-2">
            <Achievements showStreaks />
          </div>
          <div>
            <TierProgress />
          </div>
        </div>
      ) : (
        <div className="bg-white rounded-xl shadow-sm p-8 text-center max-w-md mx-auto">
          <span className="text-6xl mb-4 block">🔒</span>
          <h3 className="text-xl font-bold text-gray-900 mb-2">Sign In Required</h3>
          <p className="text-gray-500 mb-6">
            Sign in to view your achievements, streaks, and progress.
          </p>
          <Link
            to="/login"
            className="bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-lg font-medium transition-colors inline-block"
          >
            Sign In
          </Link>
        </div>
      )}
    </RewardsLayout>
  )
}
