'use client';

import { Card, CardBody, CardHeader } from '@/components/common/Card';
import { Badge } from '@/components/common/Badge';
import Button from '@/components/common/Button';
import { useAuth } from '@/lib/hooks/useAuth';
import { PAGE_ROUTES } from '@/lib/utils/constants';

export default function QuizPage() {
  const { user } = useAuth();

  const handleQuizStart = (quizNumber: number) => {
    if (!user) {
      alert('⚠️ Nilai quiz Anda tidak akan tersimpan karena Anda belum login.\n\nSilakan login untuk menyimpan nilai.');
    }
    console.log(`Starting Quiz ${quizNumber}`);
  };

  return (
    <div className="max-w-6xl mx-auto p-4 md:p-8">
      {/* Login Status Warning */}
      {!user && (
        <div className="mb-6 bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded">
          <div className="flex items-start gap-3">
            <span className="text-2xl">⚠️</span>
            <div className="flex-1">
              <h3 className="font-bold text-yellow-800">Mengerjakan Quiz Tanpa Login</h3>
              <p className="text-sm text-yellow-700 mt-1">
                Anda dapat mengerjakan quiz ini, tetapi nilai hanya akan tersimpan jika Anda login. Nilai Anda
                sekarang hanya disimpan sementara di perangkat ini.
              </p>
              <div className="flex gap-2 mt-3">
                <Button
                  variant="primary"
                  onClick={() => (window.location.href = PAGE_ROUTES.LOGIN)}
                  className="text-sm"
                >
                  Login Sekarang
                </Button>
                <Button
                  variant="secondary"
                  onClick={() => (window.location.href = PAGE_ROUTES.SIGNUP)}
                  className="text-sm"
                >
                  Daftar Gratis
                </Button>
              </div>
            </div>
          </div>
        </div>
      )}

      <div className="mb-8">
        <h1 className="text-3xl font-bold text-eco-dark mb-2">📝 Quiz & Assessment</h1>
        <p className="text-gray-600">Uji pemahaman Anda tentang pemilahan sampah</p>
        {!user && <p className="text-yellow-600 text-sm mt-2">ℹ️ Nilai akan disimpan sementara (tidak permanen)</p>}
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {[1, 2, 3, 4].map((i) => (
          <Card key={i}>
            <CardHeader>
              <div className="flex justify-between items-start">
                <div>
                  <h3 className="font-bold text-lg text-eco-dark">Quiz {i}</h3>
                  <p className="text-gray-600 text-sm mt-1">Post-Video Module {i}</p>
                </div>
                <div className="flex gap-2">
                  <Badge>10 soal</Badge>
                  {!user && <Badge className="bg-yellow-200 text-yellow-800">Belum Tersimpan</Badge>}
                </div>
              </div>
            </CardHeader>
            <CardBody>
              <div className="space-y-3">
                <div className="flex justify-between text-sm">
                  <span className="text-gray-600">⏱️ Waktu: 5-10 menit</span>
                </div>
                <div className="flex justify-between text-sm">
                  <span className="text-gray-600">📊 Passing Score: 70%</span>
                </div>
                <Button
                  variant="primary"
                  className="w-full mt-4"
                  onClick={() => handleQuizStart(i)}
                >
                  Mulai Quiz →
                </Button>
                {!user && (
                  <p className="text-xs text-yellow-600 text-center mt-2">
                    Nilai tidak akan tersimpan. Login untuk menyimpan nilai Anda.
                  </p>
                )}
              </div>
            </CardBody>
          </Card>
        ))}
      </div>
    </div>
  );
}