'use client';

import { useAuth } from '@/lib/hooks/useAuth';
import { useProfile } from '@/lib/hooks/useProfile';
import { StreakIndicator } from '@/components/common/StreakIndicator';
import { Card, CardBody, CardHeader } from '@/components/common/Card';
import { Badge } from '@/components/common/Badge';
import Button from '@/components/common/Button';
import { PAGE_ROUTES } from '@/lib/utils/constants';
import { streakUtils } from '@/lib/utils/streakUtils';
import Link from 'next/link';

export default function DashboardPage() {
  const { user } = useAuth();
  const { profile, loading } = useProfile(user?.id);

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <div className="w-12 h-12 border-4 border-eco-primary border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
          <p className="text-gray-600">Memuat dashboard...</p>
        </div>
      </div>
    );
  }

  // Not logged in - show guest dashboard
  if (!user) {
    return (
      <div className="min-h-screen bg-eco-light p-4 md:p-8">
        <div className="max-w-6xl mx-auto">
          {/* Guest Header */}
          <div className="mb-8">
            <h1 className="text-3xl md:text-4xl font-bold text-eco-dark mb-2">
              Selamat datang, Pengunjung! 👋
            </h1>
            <p className="text-gray-600">Login untuk mulai tracking progress Anda</p>
          </div>

          {/* Login Prompt Card */}
          <Card className="mb-8 border-2 border-yellow-300">
            <CardBody className="text-center py-8">
              <div className="text-5xl mb-4">🔐</div>
              <h2 className="text-2xl font-bold text-eco-dark mb-2">Login untuk Akses Penuh</h2>
              <p className="text-gray-600 mb-6 max-w-md mx-auto">
                Anda dapat menjelajahi aplikasi, tetapi progress hanya akan tersimpan setelah login. Buat akun
                sekarang untuk mulai tracking pembelajaran Anda!
              </p>
              <div className="flex gap-4 justify-center">
                <Button
                  variant="primary"
                  onClick={() => (window.location.href = PAGE_ROUTES.LOGIN)}
                  className="px-8"
                >
                  Login Sekarang
                </Button>
                <Button
                  variant="secondary"
                  onClick={() => (window.location.href = PAGE_ROUTES.SIGNUP)}
                  className="px-8"
                >
                  Daftar Gratis
                </Button>
              </div>
            </CardBody>
          </Card>

          {/* Info Card */}
          <Card>
            <CardHeader>
              <h3 className="text-xl font-bold text-eco-dark">Akses Tanpa Login</h3>
            </CardHeader>
            <CardBody>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <p className="font-semibold text-eco-primary mb-2">✅ Anda Bisa:</p>
                  <ul className="text-sm text-gray-700 space-y-1">
                    <li>• Menonton video pembelajaran</li>
                    <li>• Mengerjakan quiz</li>
                    <li>• Bermain mini-game</li>
                    <li>• Melihat leaderboard</li>
                  </ul>
                </div>
                <div>
                  <p className="font-semibold text-yellow-600 mb-2">❌ Tidak Tersimpan (Tanpa Login):</p>
                  <ul className="text-sm text-gray-700 space-y-1">
                    <li>• Poin game</li>
                    <li>• Nilai quiz</li>
                    <li>• Progres video</li>
                    <li>• Profil dan achievement</li>
                  </ul>
                </div>
              </div>
            </CardBody>
          </Card>
        </div>
      </div>
    );
  }

  // Logged in - show normal dashboard
  if (!profile) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <p className="text-gray-600">Profil tidak ditemukan</p>
        </div>
      </div>
    );
  }

  const { days: daysUntilNext, milestone: nextMilestone } = streakUtils.getDaysUntilNextMilestone(
    profile.current_streak
  );

  return (
    <div className="min-h-screen bg-eco-light p-4 md:p-8">
      <div className="max-w-6xl mx-auto">
        {/* Header */}
        <div className="mb-8">
          <h1 className="text-3xl md:text-4xl font-bold text-eco-dark mb-2">
            Selamat datang, {profile.username}! 👋
          </h1>
          <p className="text-gray-600">✅ Login berhasil - Progress Anda akan tersimpan</p>
        </div>

        {/* Streak Card */}
        <div className="mb-8">
          <StreakIndicator
            streak={profile.current_streak}
            multiplier={profile.streak_multiplier}
            nextMilestone={nextMilestone}
          />
        </div>

        {/* Stats Grid */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
          <Card>
            <CardBody className="text-center">
              <div className="text-4xl font-bold text-eco-primary mb-2">
                {profile.total_points}
              </div>
              <p className="text-gray-600 font-semibold">Total Poin</p>
            </CardBody>
          </Card>

          <Card>
            <CardBody className="text-center">
              <div className="text-4xl font-bold text-eco-accent mb-2">
                {profile.games_played}
              </div>
              <p className="text-gray-600 font-semibold">Game Dimainkan</p>
            </CardBody>
          </Card>

          <Card>
            <CardBody className="text-center">
              <div className="text-4xl font-bold text-eco-secondary mb-2">
                {profile.modules_completed}
              </div>
              <p className="text-gray-600 font-semibold">Modul Selesai</p>
            </CardBody>
          </Card>
        </div>

        {/* Quick Actions */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
          <Link href={PAGE_ROUTES.VIDEOS}>
            <Card className="cursor-pointer hover:shadow-lg transition-shadow h-full">
              <CardBody className="text-center py-8">
                <div className="text-4xl mb-3">🎬</div>
                <h3 className="font-semibold text-eco-dark">Video Pembelajaran</h3>
                <p className="text-sm text-gray-600 mt-1">Pelajari tentang pemilahan sampah</p>
              </CardBody>
            </Card>
          </Link>

          <Link href={PAGE_ROUTES.QUIZ}>
            <Card className="cursor-pointer hover:shadow-lg transition-shadow h-full">
              <CardBody className="text-center py-8">
                <div className="text-4xl mb-3">📝</div>
                <h3 className="font-semibold text-eco-dark">Quiz</h3>
                <p className="text-sm text-gray-600 mt-1">Uji pemahaman Anda</p>
              </CardBody>
            </Card>
          </Link>

          <Link href={PAGE_ROUTES.GAME}>
            <Card className="cursor-pointer hover:shadow-lg transition-shadow h-full">
              <CardBody className="text-center py-8">
                <div className="text-4xl mb-3">🎮</div>
                <h3 className="font-semibold text-eco-dark">Mini-Game</h3>
                <p className="text-sm text-gray-600 mt-1">Bermain & dapatkan poin</p>
              </CardBody>
            </Card>
          </Link>

          <Link href={PAGE_ROUTES.LEADERBOARD}>
            <Card className="cursor-pointer hover:shadow-lg transition-shadow h-full">
              <CardBody className="text-center py-8">
                <div className="text-4xl mb-3">🏆</div>
                <h3 className="font-semibold text-eco-dark">Leaderboard</h3>
                <p className="text-sm text-gray-600 mt-1">Lihat rangking global</p>
              </CardBody>
            </Card>
          </Link>
        </div>

        {/* Profile Card */}
        <Card>
          <CardHeader>
            <h2 className="text-xl font-bold text-eco-dark">Profil Anda</h2>
          </CardHeader>
          <CardBody>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <p className="text-sm text-gray-600 mb-1">Email</p>
                <p className="font-semibold text-eco-dark">{profile.email}</p>
              </div>
              <div>
                <p className="text-sm text-gray-600 mb-1">Username</p>
                <p className="font-semibold text-eco-dark">@{profile.username}</p>
              </div>
              <div>
                <p className="text-sm text-gray-600 mb-1">Max Streak</p>
                <p className="font-semibold text-eco-primary">{profile.max_streak} hari 🔥</p>
              </div>
              <div>
                <p className="text-sm text-gray-600 mb-1">Member Sejak</p>
                <p className="font-semibold text-eco-dark">
                  {new Date(profile.created_at).toLocaleDateString('id-ID')}
                </p>
              </div>
            </div>

            <div className="mt-6 flex gap-4">
              <Button
                variant="secondary"
                size="md"
                onClick={() => (window.location.href = PAGE_ROUTES.PROFILE)}
              >
                Edit Profil
              </Button>
              <Button
                variant="ghost"
                size="md"
                onClick={async () => {
                  await fetch('/api/auth/logout', { method: 'POST' });
                  window.location.href = PAGE_ROUTES.LOGIN;
                }}
              >
                Logout
              </Button>
            </div>
          </CardBody>
        </Card>
      </div>
    </div>
  );
}