import React, { useState } from 'react';
import { FileText, Edit2, X, ChevronLeft, ChevronRight, Calendar, Clock } from 'lucide-react';

function StudyPlanner() {
  const defaultClasses = [
    { id: 1, name: "Digital Forensics in Cybersecurity – D431", credits: 3, priority: true, estimatedWeeks: 2, estimatedDays: 3, completed: false, startDate: "2024-01-15", notes: "", studyNotes: "", completionNotes: "" },
    { id: 2, name: "Data Management - Foundations – D426", credits: 3, priority: false, estimatedWeeks: 3, estimatedDays: 0, completed: false, startDate: "2024-02-01", notes: "", studyNotes: "", completionNotes: "" },
    { id: 3, name: "Data Management - Applications – D427", credits: 3, priority: false, estimatedWeeks: 0, estimatedDays: 0, completed: false, startDate: "", notes: "", studyNotes: "", completionNotes: "" },
    { id: 4, name: "Information Systems Security – C845", credits: 4, priority: false, estimatedWeeks: 0, estimatedDays: 0, completed: false, startDate: "", notes: "", studyNotes: "", completionNotes: "" },
    { id: 5, name: "Introduction to Cryptography – D334", credits: 3, priority: true, estimatedWeeks: 0, estimatedDays: 0, completed: false, startDate: "", notes: "", studyNotes: "", completionNotes: "" }
  ];

  const [darkMode, setDarkMode] = useState(false);
  const [classes, setClasses] = useState(defaultClasses);
  const [editingClass, setEditingClass] = useState(null);
  const [editForm, setEditForm] = useState({ name: '', credits: 3, priority: false, startDate: '' });
  const [showNotesModal, setShowNotesModal] = useState(false);
  const [notesModalClass, setNotesModalClass] = useState(null);
  const [showCompletionModal, setShowCompletionModal] = useState(false);
  const [completionModalClass, setCompletionModalClass] = useState(null);
  const [tempNotes, setTempNotes] = useState("");
  const [currentCalendarDate, setCurrentCalendarDate] = useState(new Date());
  const [globalStartDate, setGlobalStartDate] = useState(new Date().toISOString().split('T')[0]);
  const [autoSchedule, setAutoSchedule] = useState(true);
  const [showReflections, setShowReflections] = useState(false);

  const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

  const getClassColor = (classId) => {
    const colors = ['bg-blue-500', 'bg-emerald-500', 'bg-purple-500', 'bg-rose-500', 'bg-amber-500'];
    return colors[classId % colors.length];
  };

  const calculateTimeline = () => {
    // If auto-schedule is enabled, calculate dates sequentially
    if (autoSchedule && globalStartDate) {
      // Parse date properly to avoid timezone issues
      let currentDate = new Date(globalStartDate + 'T00:00:00');
      const scheduledClasses = [];
      
      // First, schedule priority classes
      const priorityClasses = classes.filter(cls => !cls.completed && cls.priority && (cls.estimatedWeeks > 0 || cls.estimatedDays > 0));
      const regularClasses = classes.filter(cls => !cls.completed && !cls.priority && (cls.estimatedWeeks > 0 || cls.estimatedDays > 0));
      const allToSchedule = [...priorityClasses, ...regularClasses];
      
      allToSchedule.forEach(cls => {
        const startDate = new Date(currentDate);
        const totalDays = (cls.estimatedWeeks * 7) + cls.estimatedDays;
        const endDate = new Date(startDate);
        endDate.setDate(endDate.getDate() + totalDays - 1); // End date is inclusive
        
        scheduledClasses.push({
          ...cls,
          startDate: startDate,
          endDate: endDate,
          totalDays,
          autoScheduled: true
        });
        
        // Move to next start date (day after this course ends)
        currentDate = new Date(endDate);
        currentDate.setDate(currentDate.getDate() + 1);
      });
      
      return scheduledClasses;
    }
    
    // Original timeline calculation for manual dates
    return classes
      .filter(cls => !cls.completed && cls.startDate && (cls.estimatedWeeks > 0 || cls.estimatedDays > 0))
      .map(cls => {
        const start = new Date(cls.startDate + 'T00:00:00');
        const totalDays = (cls.estimatedWeeks * 7) + cls.estimatedDays;
        const end = new Date(start);
        end.setDate(end.getDate() + totalDays - 1); // End date is inclusive
        return { ...cls, startDate: start, endDate: end, totalDays };
      })
      .sort((a, b) => a.startDate - b.startDate);
  };

  const generateCalendar = () => {
    const timeline = calculateTimeline();
    const year = currentCalendarDate.getFullYear();
    const month = currentCalendarDate.getMonth();
    const firstDay = new Date(year, month, 1);
    const lastDay = new Date(year, month + 1, 0);
    const daysInMonth = lastDay.getDate();
    const startingDayOfWeek = firstDay.getDay();
    
    const calendar = [];
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    
    for (let i = 0; i < startingDayOfWeek; i++) {
      calendar.push(null);
    }
    
    for (let day = 1; day <= daysInMonth; day++) {
      const currentDate = new Date(year, month, day);
      currentDate.setHours(0, 0, 0, 0);
      const isToday = currentDate.toDateString() === today.toDateString();
      
      const activeClasses = timeline.filter(cls => {
        const start = new Date(cls.startDate);
        const end = new Date(cls.endDate);
        start.setHours(0, 0, 0, 0);
        end.setHours(0, 0, 0, 0);
        
        return currentDate >= start && currentDate <= end;
      });
      
      calendar.push({ day, isToday, activeClasses });
    }
    
    return calendar;
  };

  const toggleCompleted = (id) => {
    const cls = classes.find(c => c.id === id);
    if (cls && !cls.completed) {
      setCompletionModalClass(cls);
      setTempNotes("");
      setShowCompletionModal(true);
    } else {
      setClasses(prev => prev.map(c => c.id === id ? { ...c, completed: false } : c));
    }
  };

  const completeClass = () => {
    setClasses(prev => prev.map(c => 
      c.id === completionModalClass.id ? { 
        ...c, 
        completed: true, 
        completionNotes: tempNotes,
        completedDate: new Date().toISOString()
      } : c
    ));
    setShowCompletionModal(false);
    setTempNotes("");
  };

  const formatText = (tag) => {
    const textarea = document.getElementById('reflectionTextarea');
    const start = textarea.selectionStart;
    const end = textarea.selectionEnd;
    const text = textarea.value;
    const selectedText = text.substring(start, end);
    
    let formattedText = '';
    switch(tag) {
      case 'bold':
        formattedText = `**${selectedText}**`;
        break;
      case 'italic':
        formattedText = `*${selectedText}*`;
        break;
      case 'highlight':
        formattedText = `==${selectedText}==`;
        break;
      case 'underline':
        formattedText = `__${selectedText}__`;
        break;
    }
    
    const newText = text.substring(0, start) + formattedText + text.substring(end);
    setTempNotes(newText);
  };

  const renderFormattedText = (text) => {
    if (!text) return null;
    
    // Simple markdown-like formatting
    let formatted = text
      .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
      .replace(/\*(.*?)\*/g, '<em>$1</em>')
      .replace(/__(.*?)__/g, '<u>$1</u>')
      .replace(/==(.*?)==/g, '<mark>$1</mark>');
    
    return <div dangerouslySetInnerHTML={{ __html: formatted }} />;
  };

  const openNotes = (cls) => {
    setNotesModalClass(cls);
    setTempNotes(cls.studyNotes || "");
    setShowNotesModal(true);
  };

  const saveNotes = () => {
    setClasses(prev => prev.map(c => 
      c.id === notesModalClass.id ? { ...c, studyNotes: tempNotes } : c
    ));
    setShowNotesModal(false);
  };

  const startEdit = (cls) => {
    setEditingClass(cls.id);
    setEditForm({ name: cls.name, credits: cls.credits, priority: cls.priority, startDate: cls.startDate });
  };

  const saveEdit = () => {
    setClasses(prev => prev.map(c => 
      c.id === editingClass ? { ...c, ...editForm, credits: parseInt(editForm.credits) } : c
    ));
    setEditingClass(null);
  };

  const deleteClass = (id) => {
    setClasses(prev => prev.filter(c => c.id !== id));
  };

  const updateTime = (id, field, value) => {
    setClasses(prev => prev.map(c => 
      c.id === id ? { ...c, [field]: parseInt(value) || 0 } : c
    ));
  };

  const timeline = calculateTimeline();
  const completedCount = classes.filter(c => c.completed).length;
  const totalCredits = classes.reduce((sum, c) => sum + c.credits, 0);
  const completedCredits = classes.filter(c => c.completed).reduce((sum, c) => sum + c.credits, 0);
  const calendarDays = generateCalendar();

  return (
    <div className={`min-h-screen ${darkMode ? 'bg-slate-900 text-white' : 'bg-gray-50'}`}>
      <div className="max-w-7xl mx-auto p-6">
        {/* Header */}
        <div className="flex justify-between items-center mb-6">
          <div>
            <h1 className="text-3xl font-bold">Academic Study Planner</h1>
            <p className="text-sm text-gray-500 mt-1">Track courses and plan your schedule</p>
          </div>
          <button onClick={() => setDarkMode(!darkMode)} className={`p-2 rounded ${darkMode ? 'bg-slate-700' : 'bg-gray-200'}`}>
            {darkMode ? '☀️' : '🌙'}
          </button>
        </div>

        {/* Stats */}
        <div className={`p-6 rounded-lg mb-6 ${darkMode ? 'bg-slate-800' : 'bg-white shadow'}`}>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {/* Progress Ring */}
            <div className="flex items-center justify-center">
              <div className="relative">
                <svg className="w-32 h-32 transform -rotate-90">
                  <circle cx="64" cy="64" r="56" stroke={darkMode ? '#475569' : '#e5e7eb'} strokeWidth="12" fill="none" />
                  <circle cx="64" cy="64" r="56" stroke="#10b981" strokeWidth="12" fill="none"
                    strokeDasharray={`${(completedCount / classes.length) * 351.86} 351.86`}
                    strokeLinecap="round" />
                </svg>
                <div className="absolute inset-0 flex flex-col items-center justify-center">
                  <div className="text-3xl font-bold">{Math.round((completedCount / classes.length) * 100)}%</div>
                  <div className="text-sm text-gray-500">Complete</div>
                </div>
              </div>
            </div>
            
            {/* Course Stats */}
            <div className="flex flex-col justify-center space-y-3">
              <div className="flex justify-between items-center">
                <span className="text-gray-500">Courses</span>
                <span className="font-semibold text-lg">{completedCount} / {classes.length}</span>
              </div>
              <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                <div className="bg-blue-500 h-2 rounded-full transition-all duration-300" 
                  style={{width: `${(completedCount / classes.length) * 100}%`}} />
              </div>
              <div className="flex justify-between items-center">
                <span className="text-gray-500">Credits</span>
                <span className="font-semibold text-lg">{completedCredits} / {totalCredits}</span>
              </div>
              <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                <div className="bg-purple-500 h-2 rounded-full transition-all duration-300" 
                  style={{width: `${(completedCredits / totalCredits) * 100}%`}} />
              </div>
            </div>
            
            {/* Time Stats */}
            <div className="flex flex-col justify-center">
              <div className={`p-4 rounded-lg ${darkMode ? 'bg-slate-700' : 'bg-gray-50'}`}>
                <div className="text-sm text-gray-500 mb-1">Estimated Time Remaining</div>
                <div className="text-2xl font-bold">
                  {(() => {
                    const totalDays = classes.filter(c => !c.completed)
                      .reduce((sum, c) => sum + (c.estimatedWeeks * 7) + c.estimatedDays, 0);
                    const weeks = Math.floor(totalDays / 7);
                    const days = totalDays % 7;
                    return `${weeks}w ${days}d`;
                  })()}
                </div>
                {timeline.length > 0 && (
                  <div className="text-xs text-gray-500 mt-2">
                    Target: {timeline[timeline.length - 1]?.endDate.toLocaleDateString()}
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>

        {/* Auto-Schedule Settings */}
        <div className={`p-4 rounded-lg mb-6 ${darkMode ? 'bg-slate-800' : 'bg-white shadow'}`}>
          <div className="flex items-center justify-between flex-wrap gap-4">
            <div className="flex items-center gap-4">
              <label className="flex items-center gap-2">
                <input
                  type="checkbox"
                  checked={autoSchedule}
                  onChange={(e) => setAutoSchedule(e.target.checked)}
                  className="w-4 h-4 rounded"
                />
                <span className="font-medium">Auto-Schedule Courses</span>
              </label>
              {autoSchedule && (
                <>
                  <div className="flex items-center gap-2">
                    <label className="text-sm text-gray-600">Start Date:</label>
                    <input
                      type="date"
                      value={globalStartDate}
                      onChange={(e) => setGlobalStartDate(e.target.value)}
                      className={`px-3 py-1 rounded border ${darkMode ? 'bg-slate-700 border-slate-600' : 'bg-white border-gray-300'}`}
                    />
                  </div>
                  <div className="text-sm text-gray-500">
                    (Priority courses will be scheduled first)
                  </div>
                </>
              )}
            </div>
            {!autoSchedule && (
              <div className="text-sm text-gray-500">
                Set individual start dates for each course
              </div>
            )}
          </div>
          {autoSchedule && timeline.length > 0 && (
            <div className="mt-3 p-3 bg-blue-50 dark:bg-blue-900/20 rounded text-sm">
              <strong>Projected completion:</strong> {timeline[timeline.length - 1]?.endDate.toLocaleDateString()}
            </div>
          )}
        </div>

        {/* Calendar */}
        <div className={`p-6 rounded-lg mb-6 ${darkMode ? 'bg-slate-800' : 'bg-white shadow'}`}>
          <div className="flex justify-between items-center mb-4">
            <h2 className="text-xl font-semibold flex items-center gap-2">
              <Calendar size={20} /> Study Calendar
            </h2>
            <div className="flex items-center gap-2">
              <button onClick={() => setCurrentCalendarDate(new Date(currentCalendarDate.getFullYear(), currentCalendarDate.getMonth() - 1))}
                className="p-1 hover:bg-gray-100 rounded">
                <ChevronLeft size={20} />
              </button>
              <span className="font-medium px-3">
                {monthNames[currentCalendarDate.getMonth()]} {currentCalendarDate.getFullYear()}
              </span>
              <button onClick={() => setCurrentCalendarDate(new Date(currentCalendarDate.getFullYear(), currentCalendarDate.getMonth() + 1))}
                className="p-1 hover:bg-gray-100 rounded">
                <ChevronRight size={20} />
              </button>
            </div>
          </div>

          <div className="grid grid-cols-7 gap-1">
            {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(day => (
              <div key={day} className="text-xs font-semibold text-center py-2 text-gray-500">{day}</div>
            ))}
            {calendarDays.map((day, i) => (
              <div key={i} className={`min-h-[60px] p-1 border rounded text-xs ${
                !day ? 'invisible' : 
                day.isToday ? 'bg-blue-100 border-blue-400' : 
                darkMode ? 'border-slate-600' : 'border-gray-200'
              }`}>
                {day && (
                  <>
                    <div className="font-semibold">{day.day}</div>
                    {day.activeClasses.map(cls => (
                      <div key={cls.id} className={`${getClassColor(cls.id)} text-white px-1 rounded mt-1 truncate`} title={cls.name}>
                        {cls.name.split(' – ')[0]}
                      </div>
                    ))}
                  </>
                )}
              </div>
            ))}
          </div>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {/* Course List */}
          <div className={`p-6 rounded-lg ${darkMode ? 'bg-slate-800' : 'bg-white shadow'}`}>
            <div className="flex justify-between items-center mb-4">
              <h2 className="text-xl font-semibold">Courses</h2>
              <button 
                onClick={() => setShowReflections(!showReflections)}
                className={`px-3 py-1 text-sm rounded-lg ${
                  showReflections 
                    ? 'bg-purple-500 text-white' 
                    : 'bg-purple-100 text-purple-700 hover:bg-purple-200'
                }`}
              >
                {showReflections ? 'Show Courses' : 'View Reflections'}
              </button>
            </div>
            
            {!showReflections ? (
              <div className="space-y-3 max-h-96 overflow-y-auto">
                {classes.map(cls => (
                <div key={cls.id} className={`relative p-3 rounded border ${
                  cls.completed ? 'opacity-60' : ''
                } ${darkMode ? 'border-slate-600' : 'border-gray-200'}`}>
                  <button onClick={() => deleteClass(cls.id)}
                    className="absolute top-2 right-2 p-1 hover:bg-red-100 rounded text-red-500">
                    <X size={16} />
                  </button>

                  <div className="flex gap-3 pr-8">
                    <input type="checkbox" checked={cls.completed} onChange={() => toggleCompleted(cls.id)} className="mt-1" />
                    
                    <div className="flex-1">
                      {editingClass === cls.id ? (
                        <div className="space-y-2">
                          <input value={editForm.name} onChange={(e) => setEditForm({...editForm, name: e.target.value})}
                            className={`w-full p-1 rounded border ${darkMode ? 'bg-slate-700 border-slate-600' : ''}`} />
                          <div className="flex gap-2">
                            <input type="number" value={editForm.credits} onChange={(e) => setEditForm({...editForm, credits: e.target.value})}
                              className={`w-16 p-1 rounded border ${darkMode ? 'bg-slate-700 border-slate-600' : ''}`} />
                            {!autoSchedule && (
                              <input type="date" value={editForm.startDate} onChange={(e) => setEditForm({...editForm, startDate: e.target.value})}
                                className={`p-1 rounded border ${darkMode ? 'bg-slate-700 border-slate-600' : ''}`} />
                            )}
                            <button onClick={saveEdit} className="px-2 py-1 bg-green-500 text-white rounded text-sm">Save</button>
                            <button onClick={() => setEditingClass(null)} className="px-2 py-1 bg-gray-500 text-white rounded text-sm">Cancel</button>
                          </div>
                        </div>
                      ) : (
                        <>
                          <div className="flex justify-between">
                            <div>
                              <h3 className={`font-semibold ${cls.completed ? 'line-through' : ''}`}>{cls.name}</h3>
                              <div className="flex gap-2 mt-1">
                                <span className="text-xs px-2 py-1 bg-gray-100 rounded">{cls.credits} credits</span>
                                {cls.priority && <span className="text-xs px-2 py-1 bg-blue-500 text-white rounded">Priority</span>}
                                {autoSchedule && timeline.find(t => t.id === cls.id) && (
                                  <span className="text-xs px-2 py-1 bg-green-100 text-green-700 rounded">
                                    Starts: {timeline.find(t => t.id === cls.id)?.startDate.toLocaleDateString()}
                                  </span>
                                )}
                              </div>
                            </div>
                            <div className="flex gap-1">
                              <button onClick={() => openNotes(cls)} className="p-1 hover:bg-gray-100 rounded" title="Notes">
                                <FileText size={18} />
                              </button>
                              <button onClick={() => startEdit(cls)} className="p-1 hover:bg-gray-100 rounded" title="Edit">
                                <Edit2 size={18} />
                              </button>
                            </div>
                          </div>
                          <div className="flex gap-2 mt-2 text-sm">
                            <input type="number" value={cls.estimatedWeeks} onChange={(e) => updateTime(cls.id, 'estimatedWeeks', e.target.value)}
                              className="w-12 p-1 border rounded" placeholder="0" />
                            <span>weeks</span>
                            <input type="number" value={cls.estimatedDays} onChange={(e) => updateTime(cls.id, 'estimatedDays', e.target.value)}
                              className="w-12 p-1 border rounded" placeholder="0" />
                            <span>days</span>
                          </div>
                        </>
                      )}
                    </div>
                  </div>
                </div>
              ))}
              </div>
            ) : (
              <div className="space-y-4 max-h-96 overflow-y-auto">
                <h3 className="font-semibold text-lg text-purple-600 dark:text-purple-400">Course Reflections Journal</h3>
                {classes.filter(c => c.completed && c.completionNotes).length === 0 ? (
                  <p className="text-gray-500 text-center py-8">No reflections yet. Complete a course to add your first reflection!</p>
                ) : (
                  classes.filter(c => c.completed && c.completionNotes).map(cls => (
                    <div key={cls.id} className={`p-4 rounded-lg border ${darkMode ? 'bg-slate-700 border-slate-600' : 'bg-gray-50 border-gray-200'}`}>
                      <div className="flex justify-between items-start mb-2">
                        <h4 className="font-semibold text-md">{cls.name}</h4>
                        <span className="text-xs text-gray-500">
                          {cls.completedDate && new Date(cls.completedDate).toLocaleDateString()}
                        </span>
                      </div>
                      <div className="prose prose-sm max-w-none">
                        {renderFormattedText(cls.completionNotes)}
                      </div>
                      <div className="mt-2 flex gap-2">
                        <span className="text-xs px-2 py-1 bg-green-100 text-green-700 rounded">Completed</span>
                        <span className="text-xs px-2 py-1 bg-blue-100 text-blue-700 rounded">{cls.credits} credits</span>
                      </div>
                    </div>
                  ))
                )}
              </div>
            )}
          </div>

          {/* Timeline */}
          <div className={`p-6 rounded-lg ${darkMode ? 'bg-slate-800' : 'bg-white shadow'}`}>
            <h2 className="text-xl font-semibold mb-4 flex items-center gap-2">
              <Clock size={20} /> Timeline
            </h2>
            {timeline.length === 0 ? (
              <p className="text-gray-500">Add dates and time estimates to see timeline</p>
            ) : (
              <div className="space-y-3 max-h-96 overflow-y-auto">
                {timeline.map(item => (
                  <div key={item.id} className="border-l-4 border-blue-400 pl-3 py-2">
                    <h4 className="font-semibold">{item.name}</h4>
                    <p className="text-sm text-gray-500">
                      {item.startDate.toLocaleDateString()} → {item.endDate.toLocaleDateString()}
                    </p>
                    <p className="text-sm text-gray-500">
                      Duration: {item.estimatedWeeks}w {item.estimatedDays}d
                    </p>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>

        {/* Notes Modal */}
        {showNotesModal && (
          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
            <div className={`w-full max-w-2xl p-6 rounded-lg ${darkMode ? 'bg-slate-800' : 'bg-white'}`}>
              <h2 className="text-xl font-bold mb-4">Study Notes - {notesModalClass?.name}</h2>
              <textarea value={tempNotes} onChange={(e) => setTempNotes(e.target.value)}
                className={`w-full h-64 p-3 rounded border ${darkMode ? 'bg-slate-700 border-slate-600' : ''}`}
                placeholder="Add your study notes here..." />
              <div className="flex justify-end gap-3 mt-4">
                <button onClick={saveNotes} className="px-4 py-2 bg-blue-500 text-white rounded">Save</button>
                <button onClick={() => setShowNotesModal(false)} className="px-4 py-2 bg-gray-500 text-white rounded">Close</button>
              </div>
            </div>
          </div>
        )}

        {/* Completion Modal */}
        {showCompletionModal && (
          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
            <div className={`w-full max-w-2xl p-6 rounded-lg ${darkMode ? 'bg-slate-800' : 'bg-white'}`}>
              <div className="text-center mb-4">
                <div className="text-4xl mb-2">🎉</div>
                <h2 className="text-2xl font-bold">Congratulations!</h2>
                <p className="text-gray-600 mt-2">You've completed {completionModalClass?.name}</p>
              </div>
              
              <div className="mb-3">
                <div className="flex gap-2 mb-2 p-2 bg-gray-100 dark:bg-slate-700 rounded">
                  <button 
                    onClick={() => formatText('bold')}
                    className="px-3 py-1 text-sm font-bold bg-white dark:bg-slate-600 rounded hover:bg-gray-200"
                    title="Bold"
                  >
                    B
                  </button>
                  <button 
                    onClick={() => formatText('italic')}
                    className="px-3 py-1 text-sm italic bg-white dark:bg-slate-600 rounded hover:bg-gray-200"
                    title="Italic"
                  >
                    I
                  </button>
                  <button 
                    onClick={() => formatText('underline')}
                    className="px-3 py-1 text-sm underline bg-white dark:bg-slate-600 rounded hover:bg-gray-200"
                    title="Underline"
                  >
                    U
                  </button>
                  <button 
                    onClick={() => formatText('highlight')}
                    className="px-3 py-1 text-sm bg-yellow-200 text-black rounded hover:bg-yellow-300"
                    title="Highlight"
                  >
                    H
                  </button>
                  <span className="text-xs text-gray-500 ml-2 py-2">Select text and click to format</span>
                </div>
                
                <textarea 
                  id="reflectionTextarea"
                  value={tempNotes} 
                  onChange={(e) => setTempNotes(e.target.value)}
                  className={`w-full h-40 p-3 rounded border ${darkMode ? 'bg-slate-700 border-slate-600' : ''}`}
                  placeholder="Reflect on your learning journey...&#10;&#10;• What were the key concepts you learned?&#10;• What challenges did you face?&#10;• How will you apply this knowledge?&#10;• What would you do differently?"
                />
                
                <div className="text-xs text-gray-500 mt-1">
                  Formatting: **bold**, *italic*, __underline__, ==highlight==
                </div>
              </div>
              
              <div className="flex justify-center gap-3">
                <button onClick={completeClass} className="px-6 py-2 bg-green-500 text-white rounded hover:bg-green-600">
                  Complete & Save Reflection
                </button>
                <button onClick={() => { completeClass(); setTempNotes(""); }} className="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600">
                  Skip Reflection
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

export default StudyPlanner;