'use client';

import React from 'react';
import Link from 'next/link';
import { useParams } from 'next/navigation';

const QuestionDetailPage: React.FC = () => {
  const params = useParams();
  const questionId = params.id as string;

  // Mock data - in real app, fetch from API
  const question = {
    id: questionId,
    title: 'Apa yang dimaksud dengan algoritma dalam pemrograman?',
    type: 'multiple_choice',
    category: 'Pemrograman',
    difficulty: 'medium',
    points: 10,
    status: 'active',
    createdAt: '2024-01-15T10:30:00Z',
    updatedAt: '2024-01-16T14:20:00Z',
    createdBy: 'Admin User',
    options: [
      { id: '1', text: 'Sekumpulan instruksi yang terstruktur untuk menyelesaikan masalah', isCorrect: true },
      { id: '2', text: 'Bahasa pemrograman yang digunakan untuk membuat aplikasi', isCorrect: false },
      { id: '3', text: 'Software yang digunakan untuk menulis kode', isCorrect: false },
      { id: '4', text: 'Hardware yang digunakan untuk menjalankan program', isCorrect: false }
    ],
    explanation: 'Algoritma adalah sekumpulan instruksi atau langkah-langkah yang terstruktur dan logis untuk menyelesaikan suatu masalah atau mencapai tujuan tertentu dalam pemrograman.',
    usageStats: {
      timesUsed: 45,
      averageScore: 78,
      correctAnswers: 35,
      wrongAnswers: 10
    }
  };

  const getDifficultyColor = (difficulty: string) => {
    switch (difficulty) {
      case 'easy': return 'bg-green-100 text-green-800';
      case 'medium': return 'bg-yellow-100 text-yellow-800';
      case 'hard': return 'bg-red-100 text-red-800';
      default: return 'bg-gray-100 text-gray-800';
    }
  };

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'active': return 'bg-green-100 text-green-800';
      case 'draft': return 'bg-gray-100 text-gray-800';
      case 'archived': return 'bg-red-100 text-red-800';
      default: return 'bg-gray-100 text-gray-800';
    }
  };

  const getTypeLabel = (type: string) => {
    switch (type) {
      case 'multiple_choice': return 'Pilihan Ganda';
      case 'essay': return 'Essay';
      case 'true_false': return 'Benar/Salah';
      default: return type;
    }
  };

  const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString('id-ID', {
      year: 'numeric',
      month: 'long',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    });
  };

  return (
    <div className="max-w-4xl mx-auto space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">Detail Soal</h1>
          <p className="text-gray-600 mt-1">ID: {questionId}</p>
        </div>
        <div className="flex items-center space-x-3">
          <Link
            href={`/admin/questions/${questionId}/edit`}
            className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
          >
            Edit Soal
          </Link>
          <Link
            href="/admin/questions"
            className="text-gray-600 hover:text-gray-900"
          >
            ← Kembali
          </Link>
        </div>
      </div>

      {/* Question Information */}
      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
        <div className="flex items-start justify-between mb-4">
          <h2 className="text-lg font-semibold text-gray-900">Informasi Soal</h2>
          <div className="flex items-center space-x-2">
            <span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(question.status)}`}>
              {question.status === 'active' ? 'Aktif' : question.status === 'draft' ? 'Draft' : 'Arsip'}
            </span>
            <span className={`px-2 py-1 rounded-full text-xs font-medium ${getDifficultyColor(question.difficulty)}`}>
              {question.difficulty === 'easy' ? 'Mudah' : question.difficulty === 'medium' ? 'Sedang' : 'Sulit'}
            </span>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <h3 className="text-sm font-medium text-gray-700 mb-2">Pertanyaan</h3>
            <p className="text-gray-900 bg-gray-50 p-4 rounded-lg">{question.title}</p>
          </div>

          <div className="space-y-4">
            <div>
              <span className="text-sm font-medium text-gray-700">Tipe: </span>
              <span className="text-gray-900">{getTypeLabel(question.type)}</span>
            </div>
            <div>
              <span className="text-sm font-medium text-gray-700">Kategori: </span>
              <span className="text-gray-900">{question.category}</span>
            </div>
            <div>
              <span className="text-sm font-medium text-gray-700">Poin: </span>
              <span className="text-gray-900">{question.points}</span>
            </div>
            <div>
              <span className="text-sm font-medium text-gray-700">Dibuat oleh: </span>
              <span className="text-gray-900">{question.createdBy}</span>
            </div>
          </div>
        </div>
      </div>

      {/* Answer Options */}
      {question.type === 'multiple_choice' && (
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
          <h2 className="text-lg font-semibold text-gray-900 mb-4">Pilihan Jawaban</h2>
          <div className="space-y-3">
            {question.options.map((option, index) => (
              <div
                key={option.id}
                className={`p-4 rounded-lg border-2 ${
                  option.isCorrect
                    ? 'border-green-200 bg-green-50'
                    : 'border-gray-200 bg-gray-50'
                }`}
              >
                <div className="flex items-center justify-between">
                  <div className="flex items-center space-x-3">
                    <span className="font-medium text-gray-700">
                      {String.fromCharCode(65 + index)}.
                    </span>
                    <span className="text-gray-900">{option.text}</span>
                  </div>
                  {option.isCorrect && (
                    <span className="px-2 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full">
                      Jawaban Benar
                    </span>
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Explanation */}
      {question.explanation && (
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
          <h2 className="text-lg font-semibold text-gray-900 mb-4">Penjelasan</h2>
          <p className="text-gray-700 bg-blue-50 p-4 rounded-lg">{question.explanation}</p>
        </div>
      )}

      {/* Usage Statistics */}
      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
        <h2 className="text-lg font-semibold text-gray-900 mb-4">Statistik Penggunaan</h2>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          <div className="text-center p-4 bg-blue-50 rounded-lg">
            <div className="text-2xl font-bold text-blue-600">{question.usageStats.timesUsed}</div>
            <div className="text-sm text-gray-600">Kali Digunakan</div>
          </div>
          <div className="text-center p-4 bg-green-50 rounded-lg">
            <div className="text-2xl font-bold text-green-600">{question.usageStats.averageScore}%</div>
            <div className="text-sm text-gray-600">Rata-rata Skor</div>
          </div>
          <div className="text-center p-4 bg-emerald-50 rounded-lg">
            <div className="text-2xl font-bold text-emerald-600">{question.usageStats.correctAnswers}</div>
            <div className="text-sm text-gray-600">Jawaban Benar</div>
          </div>
          <div className="text-center p-4 bg-red-50 rounded-lg">
            <div className="text-2xl font-bold text-red-600">{question.usageStats.wrongAnswers}</div>
            <div className="text-sm text-gray-600">Jawaban Salah</div>
          </div>
        </div>
      </div>

      {/* Metadata */}
      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
        <h2 className="text-lg font-semibold text-gray-900 mb-4">Metadata</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
          <div>
            <span className="font-medium text-gray-700">Dibuat pada: </span>
            <span className="text-gray-900">{formatDate(question.createdAt)}</span>
          </div>
          <div>
            <span className="font-medium text-gray-700">Terakhir diubah: </span>
            <span className="text-gray-900">{formatDate(question.updatedAt)}</span>
          </div>
        </div>
      </div>

      {/* Actions */}
      <div className="flex justify-end space-x-4">
        <button className="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
          Arsipkan Soal
        </button>
        <button className="px-4 py-2 border border-red-300 rounded-lg text-red-700 hover:bg-red-50 transition-colors">
          Hapus Soal
        </button>
        <Link
          href={`/admin/questions/${questionId}/edit`}
          className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
        >
          Edit Soal
        </Link>
      </div>
    </div>
  );
};

export default QuestionDetailPage;