'use client';

import React, { useState } from 'react';
import { QuizConfigurationPanel } from '../../../components/quiz/QuizConfigurationPanel';
import { AdminQuizConfig } from '../../../types';

const defaultConfig: AdminQuizConfig = {
  language: 'id',
  allowHints: true,
  showExplanations: true,
  enableBehaviorTracking: true,
  confidenceRatingRequired: true,
  timeLimit: 3600,
  shuffleQuestions: false,
  shuffleOptions: false,
  allowReview: true,
  showProgressBar: true,
  customInstructions: 'Silakan baca setiap pertanyaan dengan teliti dan pilih jawaban yang paling tepat.',
  behaviorAnalysis: {
    trackMouseMovements: true,
    trackKeystrokes: true,
    trackScrolling: true,
    trackFocusEvents: true,
    analysisDepth: 'detailed',
  },
  privacySettings: {
    anonymizeData: false,
    dataRetentionDays: 30,
    allowDataExport: true,
  },
};

export default function QuizConfigPage() {
  const [config, setConfig] = useState<AdminQuizConfig>(defaultConfig);
  const [isLoading, setIsLoading] = useState(false);
  const [saveStatus, setSaveStatus] = useState<'idle' | 'success' | 'error'>('idle');

  const handleSave = async () => {
    setIsLoading(true);
    setSaveStatus('idle');
    
    try {
      // Simulate API call
      await new Promise(resolve => setTimeout(resolve, 1500));
      
      // In real implementation, this would save to backend
      console.log('Saving configuration:', config);
      localStorage.setItem('quizConfig', JSON.stringify(config));
      
      setSaveStatus('success');
      setTimeout(() => setSaveStatus('idle'), 3000);
    } catch (error) {
      console.error('Failed to save configuration:', error);
      setSaveStatus('error');
      setTimeout(() => setSaveStatus('idle'), 3000);
    } finally {
      setIsLoading(false);
    }
  };

  const handleReset = () => {
    setConfig(defaultConfig);
    setSaveStatus('idle');
  };

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <div className="bg-white shadow-sm border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="py-6">
            <div className="flex items-center justify-between">
              <div>
                <h1 className="text-2xl font-bold text-gray-900">Quiz Configuration</h1>
                <p className="text-gray-600 mt-1">
                  Configure interactive quiz settings and behavior tracking for your LMS
                </p>
              </div>
              <div className="flex items-center gap-4">
                {saveStatus === 'success' && (
                  <div className="flex items-center gap-2 text-green-600 bg-green-50 px-3 py-2 rounded-lg">
                    <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                    </svg>
                    Configuration saved successfully
                  </div>
                )}
                {saveStatus === 'error' && (
                  <div className="flex items-center gap-2 text-red-600 bg-red-50 px-3 py-2 rounded-lg">
                    <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
                    </svg>
                    Failed to save configuration
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Main Content */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
          {/* Configuration Panel */}
          <div className="lg:col-span-3">
            <QuizConfigurationPanel
              config={config}
              onConfigChange={setConfig}
              onSave={handleSave}
              onReset={handleReset}
              isLoading={isLoading}
            />
          </div>

          {/* Sidebar */}
          <div className="lg:col-span-1 space-y-6">
            {/* Quick Stats */}
            <div className="bg-white rounded-lg shadow-sm border p-6">
              <h3 className="text-lg font-medium text-gray-900 mb-4">Configuration Summary</h3>
              <div className="space-y-3">
                <div className="flex justify-between text-sm">
                  <span className="text-gray-600">Language:</span>
                  <span className="font-medium">{config.language === 'id' ? 'Indonesian' : 'English'}</span>
                </div>
                <div className="flex justify-between text-sm">
                  <span className="text-gray-600">Time Limit:</span>
                  <span className="font-medium">{Math.floor(config.timeLimit / 60)} minutes</span>
                </div>
                <div className="flex justify-between text-sm">
                  <span className="text-gray-600">Behavior Tracking:</span>
                  <span className={`font-medium ${config.enableBehaviorTracking ? 'text-green-600' : 'text-red-600'}`}>
                    {config.enableBehaviorTracking ? 'Enabled' : 'Disabled'}
                  </span>
                </div>
                <div className="flex justify-between text-sm">
                  <span className="text-gray-600">Data Retention:</span>
                  <span className="font-medium">{config.privacySettings.dataRetentionDays} days</span>
                </div>
              </div>
            </div>

            {/* Help & Documentation */}
            <div className="bg-white rounded-lg shadow-sm border p-6">
              <h3 className="text-lg font-medium text-gray-900 mb-4">Help & Resources</h3>
              <div className="space-y-3">
                <a
                  href="#"
                  className="flex items-center gap-2 text-sm text-blue-600 hover:text-blue-800"
                >
                  <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
                  </svg>
                  Configuration Guide
                </a>
                <a
                  href="#"
                  className="flex items-center gap-2 text-sm text-blue-600 hover:text-blue-800"
                >
                  <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clipRule="evenodd" />
                  </svg>
                  Behavior Tracking Documentation
                </a>
                <a
                  href="#"
                  className="flex items-center gap-2 text-sm text-blue-600 hover:text-blue-800"
                >
                  <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" clipRule="evenodd" />
                  </svg>
                  Privacy & Compliance
                </a>
              </div>
            </div>

            {/* Recent Activity */}
            <div className="bg-white rounded-lg shadow-sm border p-6">
              <h3 className="text-lg font-medium text-gray-900 mb-4">Recent Changes</h3>
              <div className="space-y-3 text-sm">
                <div className="flex items-start gap-2">
                  <div className="w-2 h-2 bg-blue-500 rounded-full mt-2"></div>
                  <div>
                    <p className="text-gray-900">Behavior tracking enabled</p>
                    <p className="text-gray-500 text-xs">2 hours ago</p>
                  </div>
                </div>
                <div className="flex items-start gap-2">
                  <div className="w-2 h-2 bg-green-500 rounded-full mt-2"></div>
                  <div>
                    <p className="text-gray-900">Time limit updated to 60 minutes</p>
                    <p className="text-gray-500 text-xs">1 day ago</p>
                  </div>
                </div>
                <div className="flex items-start gap-2">
                  <div className="w-2 h-2 bg-yellow-500 rounded-full mt-2"></div>
                  <div>
                    <p className="text-gray-900">Custom instructions added</p>
                    <p className="text-gray-500 text-xs">3 days ago</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Debug Panel (Development Only) */}
      {process.env.NODE_ENV === 'development' && (
        <div className="fixed bottom-4 right-4 bg-gray-900 text-white p-4 rounded-lg shadow-lg max-w-md">
          <h4 className="font-medium mb-2">Debug: Current Configuration</h4>
          <pre className="text-xs overflow-auto max-h-40">
            {JSON.stringify(config, null, 2)}
          </pre>
        </div>
      )}
    </div>
  );
}