'use client';

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

interface Question {
  id: string;
  title: string;
  type: 'multiple_choice' | 'essay' | 'true_false';
  category: string;
  difficulty: 'easy' | 'medium' | 'hard';
  points: number;
  createdAt: string;
  updatedAt: string;
  status: 'active' | 'draft' | 'archived';
}

const QuestionBankPage: React.FC = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [filterCategory, setFilterCategory] = useState('all');
  const [filterType, setFilterType] = useState('all');
  const [filterDifficulty, setFilterDifficulty] = useState('all');

  // Mock data
  const [questions] = useState<Question[]>([
    {
      id: '1',
      title: 'Apa yang dimaksud dengan mise en place dalam dunia kuliner?',
      type: 'multiple_choice',
      category: 'Dasar Kuliner',
      difficulty: 'easy',
      points: 10,
      createdAt: '2024-01-15',
      updatedAt: '2024-01-15',
      status: 'active'
    },
    {
      id: '2',
      title: 'Jelaskan teknik-teknik dasar dalam memotong sayuran dan fungsinya',
      type: 'essay',
      category: 'Teknik Memasak',
      difficulty: 'medium',
      points: 20,
      createdAt: '2024-01-14',
      updatedAt: '2024-01-16',
      status: 'active'
    },
    {
      id: '3',
      title: 'Suhu ideal untuk menyimpan daging segar adalah 4°C atau lebih rendah',
      type: 'true_false',
      category: 'Food Safety',
      difficulty: 'easy',
      points: 5,
      createdAt: '2024-01-13',
      updatedAt: '2024-01-13',
      status: 'draft'
    },
    {
      id: '4',
      title: 'Sebutkan 5 mother sauce dalam masakan Prancis dan karakteristiknya',
      type: 'essay',
      category: 'Kuliner Internasional',
      difficulty: 'hard',
      points: 25,
      createdAt: '2024-01-12',
      updatedAt: '2024-01-12',
      status: 'active'
    },
    {
      id: '5',
      title: 'Manakah yang merupakan teknik memasak dengan panas kering?',
      type: 'multiple_choice',
      category: 'Teknik Memasak',
      difficulty: 'medium',
      points: 15,
      createdAt: '2024-01-11',
      updatedAt: '2024-01-11',
      status: 'active'
    }
  ]);

  const categories = ['Dasar Kuliner', 'Teknik Memasak', 'Food Safety', 'Kuliner Internasional', 'Pastry & Bakery'];
  
  const getTypeLabel = (type: string) => {
    const labels = {
      multiple_choice: 'Pilihan Ganda',
      essay: 'Essay',
      true_false: 'Benar/Salah'
    };
    return labels[type as keyof typeof labels] || type;
  };

  const getDifficultyColor = (difficulty: string) => {
    const colors = {
      easy: 'bg-green-100 text-green-800',
      medium: 'bg-yellow-100 text-yellow-800',
      hard: 'bg-red-100 text-red-800'
    };
    return colors[difficulty as keyof typeof colors] || 'bg-gray-100 text-gray-800';
  };

  const getStatusColor = (status: string) => {
    const colors = {
      active: 'bg-green-100 text-green-800',
      draft: 'bg-yellow-100 text-yellow-800',
      archived: 'bg-gray-100 text-gray-800'
    };
    return colors[status as keyof typeof colors] || 'bg-gray-100 text-gray-800';
  };

  const filteredQuestions = questions.filter(question => {
    const matchesSearch = question.title.toLowerCase().includes(searchTerm.toLowerCase());
    const matchesCategory = filterCategory === 'all' || question.category === filterCategory;
    const matchesType = filterType === 'all' || question.type === filterType;
    const matchesDifficulty = filterDifficulty === 'all' || question.difficulty === filterDifficulty;
    
    return matchesSearch && matchesCategory && matchesType && matchesDifficulty;
  });

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">Bank Soal</h1>
          <p className="text-gray-600 mt-1">Kelola koleksi soal untuk ujian</p>
        </div>
        <div className="mt-4 sm:mt-0 flex items-center space-x-3">
          <Link
            href="/admin/questions/categories"
            className="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors"
          >
            Kelola Kategori
          </Link>
          <Link
            href="/admin/questions/create"
            className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors inline-flex items-center"
          >
            <span className="mr-2">+</span>
            Tambah Soal
          </Link>
        </div>
      </div>

      {/* Filters */}
      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
          {/* Search */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Cari Soal
            </label>
            <input
              type="text"
              placeholder="Masukkan kata kunci..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
            />
          </div>

          {/* Category Filter */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Kategori
            </label>
            <select
              value={filterCategory}
              onChange={(e) => setFilterCategory(e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
            >
              <option value="all">Semua Kategori</option>
              {categories.map(category => (
                <option key={category} value={category}>{category}</option>
              ))}
            </select>
          </div>

          {/* Type Filter */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Tipe Soal
            </label>
            <select
              value={filterType}
              onChange={(e) => setFilterType(e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
            >
              <option value="all">Semua Tipe</option>
              <option value="multiple_choice">Pilihan Ganda</option>
              <option value="essay">Essay</option>
              <option value="true_false">Benar/Salah</option>
            </select>
          </div>

          {/* Difficulty Filter */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Tingkat Kesulitan
            </label>
            <select
              value={filterDifficulty}
              onChange={(e) => setFilterDifficulty(e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
            >
              <option value="all">Semua Tingkat</option>
              <option value="easy">Mudah</option>
              <option value="medium">Sedang</option>
              <option value="hard">Sulit</option>
            </select>
          </div>
        </div>
      </div>

      {/* Questions List */}
      <div className="bg-white rounded-lg shadow-sm border border-gray-200">
        <div className="p-6 border-b border-gray-200">
          <h2 className="text-lg font-semibold text-gray-900">
            Daftar Soal ({filteredQuestions.length})
          </h2>
        </div>
        
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead className="bg-gray-50">
              <tr>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Soal
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Tipe
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Kategori
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Kesulitan
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Poin
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Status
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Aksi
                </th>
              </tr>
            </thead>
            <tbody className="bg-white divide-y divide-gray-200">
              {filteredQuestions.map((question) => (
                <tr key={question.id} className="hover:bg-gray-50">
                  <td className="px-6 py-4">
                    <div className="text-sm font-medium text-gray-900 max-w-xs truncate">
                      {question.title}
                    </div>
                    <div className="text-xs text-gray-500 mt-1">
                      Dibuat: {question.createdAt}
                    </div>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <span className="text-sm text-gray-900">
                      {getTypeLabel(question.type)}
                    </span>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <span className="text-sm text-gray-900">{question.category}</span>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <span className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getDifficultyColor(question.difficulty)}`}>
                      {question.difficulty === 'easy' ? 'Mudah' : 
                       question.difficulty === 'medium' ? 'Sedang' : 'Sulit'}
                    </span>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <span className="text-sm text-gray-900">{question.points}</span>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <span className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getStatusColor(question.status)}`}>
                      {question.status === 'active' ? 'Aktif' : 
                       question.status === 'draft' ? 'Draft' : 'Arsip'}
                    </span>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                    <div className="flex space-x-2">
                      <Link
                        href={`/admin/questions/${question.id}`}
                        className="text-blue-600 hover:text-blue-900"
                      >
                        Lihat
                      </Link>
                      <Link
                        href={`/admin/questions/${question.id}/edit`}
                        className="text-green-600 hover:text-green-900"
                      >
                        Edit
                      </Link>
                      <button className="text-red-600 hover:text-red-900">
                        Hapus
                      </button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {filteredQuestions.length === 0 && (
          <div className="text-center py-12">
            <div className="text-gray-400 text-4xl mb-4">📝</div>
            <h3 className="text-lg font-medium text-gray-900 mb-2">Tidak ada soal ditemukan</h3>
            <p className="text-gray-600 mb-4">
              Coba ubah filter pencarian atau buat soal baru.
            </p>
            <Link
              href="/admin/questions/create"
              className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors inline-flex items-center"
            >
              <span className="mr-2">+</span>
              Tambah Soal Pertama
            </Link>
          </div>
        )}
      </div>
    </div>
  );
};

export default QuestionBankPage;