"use client";
import React, { useState } from 'react';
import Link from 'next/link';

export default function QuizPage() {
  const [limit, setLimit] = useState<string>('10');
  const [type, setType] = useState<string>('multiple_choice'); // multiple_choice, fill_blank
  const [direction, setDirection] = useState<string>('en_id'); // en_id, id_en, audio

  const limits = [
    { value: '10', label: '10 Soal' },
    { value: '20', label: '20 Soal' },
    { value: '50', label: '50 Soal' },
    { value: 'all', label: 'Semua' },
  ];

  const types = [
    { value: 'multiple_choice', label: 'Pilihan Ganda', icon: '📝' },
    { value: 'fill_blank', label: 'Isian Teks', icon: '⌨️' },
  ];

  const directions = [
    { value: 'en_id', label: 'Inggris ➔ Indo' },
    { value: 'id_en', label: 'Indo ➔ Inggris' },
    { value: 'audio', label: 'Audio / Listening 🎧' },
  ];

  return (
    <main className="min-h-[calc(100vh-73px)] bg-gray-50 flex flex-col items-center justify-center p-6 py-12">
      <div className="w-full max-w-xl bg-white rounded-3xl shadow-xl border border-gray-100 p-8 md:p-10 text-center relative overflow-hidden">
        {/* Decorative BG */}
        <div className="absolute top-0 left-0 w-full h-32 bg-gradient-to-b from-purple-50 to-transparent"></div>
        
        <div className="relative z-10">
          <div className="text-6xl mb-6">🎮</div>
          <h1 className="text-3xl font-black text-gray-900 mb-3 tracking-tight">Kuis Interaktif</h1>
          <p className="text-gray-500 mb-8">
            Uji kemampuan hafalan Anda dengan berbagai mode kuis.
          </p>

          <div className="space-y-6 text-left">
            {/* Tipe Kuis */}
            <div className="bg-gray-50 p-5 rounded-2xl border border-gray-100">
              <h4 className="text-sm font-bold text-gray-700 mb-3 uppercase tracking-wider">1. Tipe Kuis</h4>
              <div className="grid grid-cols-2 gap-3">
                {types.map(t => (
                  <button
                    key={t.value}
                    onClick={() => setType(t.value)}
                    className={`p-3 text-sm font-bold rounded-xl transition-colors flex items-center justify-center gap-2 ${
                      type === t.value 
                      ? 'bg-purple-600 text-white shadow-md border-purple-600' 
                      : 'bg-white text-gray-600 hover:bg-gray-100 border border-gray-200'
                    }`}
                  >
                    <span>{t.icon}</span> {t.label}
                  </button>
                ))}
              </div>
            </div>

            {/* Arah Ujian */}
            <div className="bg-gray-50 p-5 rounded-2xl border border-gray-100">
              <h4 className="text-sm font-bold text-gray-700 mb-3 uppercase tracking-wider">2. Mode / Arah</h4>
              <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
                {directions.map(d => (
                  <button
                    key={d.value}
                    onClick={() => setDirection(d.value)}
                    className={`p-3 text-xs md:text-sm font-bold rounded-xl transition-colors ${
                      direction === d.value 
                      ? 'bg-blue-600 text-white shadow-md border-blue-600' 
                      : 'bg-white text-gray-600 hover:bg-gray-100 border border-gray-200'
                    }`}
                  >
                    {d.label}
                  </button>
                ))}
              </div>
            </div>

            {/* Jumlah Soal */}
            <div className="bg-gray-50 p-5 rounded-2xl border border-gray-100">
              <h4 className="text-sm font-bold text-gray-700 mb-3 uppercase tracking-wider">3. Jumlah Soal</h4>
              <div className="flex gap-2">
                {limits.map(l => (
                  <button
                    key={l.value}
                    onClick={() => setLimit(l.value)}
                    className={`flex-1 py-2 text-xs md:text-sm font-bold rounded-xl transition-colors ${
                      limit === l.value 
                      ? 'bg-green-600 text-white shadow-md border-green-600' 
                      : 'bg-white text-gray-600 hover:bg-gray-100 border border-gray-200'
                    }`}
                  >
                    {l.label}
                  </button>
                ))}
              </div>
            </div>

            {/* Pilih Sumber & Mulai */}
            <div className="pt-4 border-t border-gray-100 mt-8">
              <h4 className="text-sm font-bold text-gray-400 uppercase tracking-wider mb-4 text-center">4. Pilih Sumber Kata & Mulai</h4>
              
              <div className="space-y-3 mb-6">
                <Link 
                  href={`/quiz/session?source=unlearned&limit=${limit}&type=${type}&direction=${direction}`} 
                  className="block w-full text-center bg-purple-100 hover:bg-purple-200 border border-purple-200 p-4 rounded-xl font-bold text-purple-900 transition-colors"
                >
                  🎯 Campuran: Belum Hafal
                </Link>
                <Link 
                  href={`/quiz/session?source=bookmark&limit=${limit}&type=${type}&direction=${direction}`} 
                  className="block w-full text-center bg-yellow-50 hover:bg-yellow-100 border border-yellow-200 p-4 rounded-xl font-bold text-yellow-900 transition-colors"
                >
                  ⭐ Koleksi Bookmark
                </Link>
              </div>

              <div className="grid grid-cols-3 gap-3">
                {['A1', 'A2', 'B1', 'B2', 'C1', 'C2'].map(lvl => (
                  <Link 
                    key={lvl} 
                    href={`/quiz/session?source=level:${lvl}&limit=${limit}&type=${type}&direction=${direction}`} 
                    className="bg-white border border-gray-200 hover:border-gray-400 hover:bg-gray-50 py-3 rounded-xl font-bold text-gray-700 transition-colors text-center"
                  >
                    Level {lvl}
                  </Link>
                ))}
              </div>
            </div>

          </div>
        </div>
      </div>
    </main>
  );
}