import React, { useState, useEffect } from 'react';
import { Calendar, Plus, Download, ChevronDown, ChevronUp, Heart, Moon, Utensils, Brain, AlertTriangle } from 'lucide-react';

const VyvanseMedicationLog = () => {
  const [entries, setEntries] = useState([]);
  const [medicationTakenTime, setMedicationTakenTime] = useState(null);
  const [nextReminder, setNextReminder] = useState(null);
  const [currentEntry, setCurrentEntry] = useState({
    date: new Date().toISOString().split('T')[0],
    time: new Date().toTimeString().slice(0, 5),
    medicationTaken: false,
    dosage: '10',
    // Physical measurements
    heartRate: '',
    bloodPressure: '',
    weight: '',
    // ADHD symptoms (1-10 scale, 10 being excellent)
    focus: 5,
    attention: 5,
    hyperactivity: 5, // 1 = very hyperactive, 10 = calm
    impulsivity: 5, // 1 = very impulsive, 10 = good control
    // Side effects (0-4 scale)
    appetite: 2, // 0 = no appetite, 4 = normal appetite
    sleepQuality: 2, // 0 = very poor, 4 = excellent
    mood: 2, // 0 = very irritable/sad, 4 = great mood
    anxiety: 0, // 0 = none, 4 = severe
    headache: 0,
    nausea: 0,
    dryMouth: 0,
    jitteriness: 0,
    // Effectiveness timeline
    effectiveness: {
      '2hrs': 0, // 0 = no effect, 4 = very effective
      '4hrs': 0,
      '6hrs': 0,
      '8hrs': 0,
      '10hrs': 0,
      '12hrs': 0
    },
    notes: ''
  });
  const [expandedSections, setExpandedSections] = useState({
    physical: true,
    symptoms: true,
    sideEffects: true,
    effectiveness: true
  });

  // Timing and reminder logic
  useEffect(() => {
    let interval;
    if (medicationTakenTime) {
      interval = setInterval(() => {
        const now = new Date();
        const medTime = new Date(medicationTakenTime);
        const hoursSince = (now - medTime) / (1000 * 60 * 60);

        // Determine next reminder
        const reminderTimes = [2, 4, 6, 8, 10, 12];
        const nextReminderTime = reminderTimes.find(time => time > hoursSince);
        
        if (nextReminderTime) {
          const nextReminderDate = new Date(medTime.getTime() + nextReminderTime * 60 * 60 * 1000);
          setNextReminder({
            time: nextReminderTime,
            date: nextReminderDate,
            hoursSince: hoursSince
          });
        } else {
          setNextReminder(null);
        }
      }, 30000); // Update every 30 seconds
    }
    return () => clearInterval(interval);
  }, [medicationTakenTime]);

  const startMedicationTimer = () => {
    const now = new Date();
    setMedicationTakenTime(now.toISOString());
    updateEntry('medicationTaken', true);
    updateEntry('time', now.toTimeString().slice(0, 5));
  };

  const getTimingStatus = () => {
    if (!medicationTakenTime) return null;
    
    const now = new Date();
    const medTime = new Date(medicationTakenTime);
    const hoursSince = (now - medTime) / (1000 * 60 * 60);
    
    if (hoursSince < 2) return { phase: 'waiting', message: 'Medication onset period', color: 'blue' };
    if (hoursSince < 4) return { phase: 'peak', message: 'Peak effectiveness period', color: 'green' };
    if (hoursSince < 8) return { phase: 'active', message: 'Active medication period', color: 'green' };
    if (hoursSince < 12) return { phase: 'waning', message: 'Medication wearing off', color: 'yellow' };
    return { phase: 'ended', message: 'Medication effects ended', color: 'red' };
  };

  const shouldShowEffectivenessRating = (timePoint) => {
    if (!medicationTakenTime) return false;
    
    const now = new Date();
    const medTime = new Date(medicationTakenTime);
    const hoursSince = (now - medTime) / (1000 * 60 * 60);
    const targetHours = parseInt(timePoint.replace('hrs', ''));
    
    return hoursSince >= targetHours - 0.25 && hoursSince <= targetHours + 1;
  };

  const toggleSection = (section) => {
    setExpandedSections(prev => ({ ...prev, [section]: !prev[section] }));
  };

  const updateEntry = (field, value) => {
    if (field.includes('.')) {
      const [parent, child] = field.split('.');
      setCurrentEntry(prev => ({
        ...prev,
        [parent]: { ...prev[parent], [child]: value }
      }));
    } else {
      setCurrentEntry(prev => ({ ...prev, [field]: value }));
    }
  };

  const saveEntry = () => {
    const newEntry = { 
      ...currentEntry, 
      id: Date.now(),
      medicationTakenTime: medicationTakenTime
    };
    setEntries(prev => [newEntry, ...prev]);
    
    // Reset for next entry
    setMedicationTakenTime(null);
    setNextReminder(null);
    
    const nextDate = new Date();
    nextDate.setDate(nextDate.getDate() + 1);
    
    setCurrentEntry({
      ...currentEntry,
      date: nextDate.toISOString().split('T')[0],
      time: '07:00', // Default morning time
      medicationTaken: false,
      heartRate: '',
      bloodPressure: '',
      weight: '',
      effectiveness: {
        '2hrs': 0,
        '4hrs': 0,
        '6hrs': 0,
        '8hrs': 0,
        '10hrs': 0,
        '12hrs': 0
      },
      notes: ''
    });
  };

  const exportData = () => {
    const data = entries.map(entry => ({
      ...entry,
      effectiveness: Object.entries(entry.effectiveness)
        .map(([time, rating]) => `${time}: ${rating}`)
        .join(', ')
    }));
    
    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `vyvanse-log-${new Date().toISOString().split('T')[0]}.json`;
    a.click();
  };

  const ScaleButton = ({ value, currentValue, onChange, label, color = "blue" }) => (
    <button
      onClick={() => onChange(value)}
      className={`w-8 h-8 rounded-full text-xs font-medium transition-all ${
        currentValue === value
          ? `bg-${color}-500 text-white shadow-lg`
          : `bg-gray-100 hover:bg-${color}-100 text-gray-700`
      }`}
    >
      {value}
    </button>
  );

  const EffectivenessTracker = () => (
    <div className="space-y-3">
      {Object.entries(currentEntry.effectiveness).map(([timePoint, rating]) => {
        const isActiveTime = shouldShowEffectivenessRating(timePoint);
        const targetHours = parseInt(timePoint.replace('hrs', ''));
        
        return (
          <div key={timePoint} className={`flex items-center justify-between p-2 rounded ${
            isActiveTime ? 'bg-green-50 border-2 border-green-200' : 'bg-gray-50'
          }`}>
            <div className="flex items-center space-x-2">
              <span className="text-sm font-medium text-gray-700 w-16">{timePoint}:</span>
              {isActiveTime && (
                <span className="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs font-medium">
                  Rate Now!
                </span>
              )}
            </div>
            <div className="flex space-x-1">
              {[0, 1, 2, 3, 4].map(value => (
                <ScaleButton
                  key={value}
                  value={value}
                  currentValue={rating}
                  onChange={(val) => updateEntry(`effectiveness.${timePoint}`, val)}
                  label={value === 0 ? 'None' : value === 4 ? 'Excellent' : ''}
                  color="green"
                />
              ))}
            </div>
            <span className="text-xs text-gray-500 w-16 text-right">
              {rating === 0 ? 'None' : rating === 4 ? 'Excellent' : `${rating}/4`}
            </span>
          </div>
        );
      })}
    </div>
  );

  const TimingDashboard = () => {
    if (!medicationTakenTime) return null;
    
    const status = getTimingStatus();
    const now = new Date();
    const medTime = new Date(medicationTakenTime);
    const hoursSince = (now - medTime) / (1000 * 60 * 60);
    const minutesSince = Math.floor((hoursSince % 1) * 60);
    const hoursFloor = Math.floor(hoursSince);

    return (
      <div className={`border-2 rounded-lg p-4 mb-6 ${
        status.color === 'green' ? 'border-green-200 bg-green-50' :
        status.color === 'blue' ? 'border-blue-200 bg-blue-50' :
        status.color === 'yellow' ? 'border-yellow-200 bg-yellow-50' :
        'border-red-200 bg-red-50'
      }`}>
        <div className="flex items-center justify-between">
          <div>
            <h3 className="text-lg font-semibold text-gray-900">Medication Timer</h3>
            <p className={`text-sm font-medium ${
              status.color === 'green' ? 'text-green-800' :
              status.color === 'blue' ? 'text-blue-800' :
              status.color === 'yellow' ? 'text-yellow-800' :
              'text-red-800'
            }`}>
              {status.message}
            </p>
          </div>
          <div className="text-right">
            <div className="text-2xl font-bold text-gray-900">
              {hoursFloor}h {minutesSince}m
            </div>
            <div className="text-sm text-gray-600">since medication</div>
          </div>
        </div>
        
        {nextReminder && (
          <div className="mt-3 p-3 bg-white rounded border">
            <div className="flex items-center justify-between">
              <span className="text-sm font-medium text-gray-700">
                Next effectiveness rating: {nextReminder.time} hours
              </span>
              <span className="text-sm text-gray-500">
                {nextReminder.date.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}
              </span>
            </div>
            <div className="mt-1 bg-gray-200 rounded-full h-2">
              <div 
                className="bg-blue-500 h-2 rounded-full transition-all duration-1000"
                style={{
                  width: `${Math.min(100, ((nextReminder.hoursSince % 2) / 2) * 100)}%`
                }}
              ></div>
            </div>
          </div>
        )}
      </div>
    );
  };

  return (
    <div className="max-w-4xl mx-auto p-6 bg-gray-50 min-h-screen">
      <div className="bg-white rounded-lg shadow-lg p-6 mb-6">
        <div className="flex items-center justify-between mb-6">
          <div className="flex items-center space-x-3">
            <Brain className="w-8 h-8 text-blue-600" />
            <div>
              <h1 className="text-2xl font-bold text-gray-900">Vyvanse Medication Log</h1>
              <p className="text-sm text-gray-600">Track your ADHD medication journey</p>
            </div>
          </div>
          <div className="flex space-x-2">
            <button
              onClick={exportData}
              className="flex items-center space-x-2 bg-gray-600 text-white px-4 py-2 rounded-lg hover:bg-gray-700 transition-colors"
            >
              <Download className="w-4 h-4" />
              <span>Export</span>
            </button>
          </div>
        </div>

        {/* Timing Dashboard */}
        <TimingDashboard />

        {/* Quick Stats */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
          <div className="bg-blue-50 p-4 rounded-lg">
            <div className="flex items-center space-x-2">
              <Calendar className="w-5 h-5 text-blue-600" />
              <span className="text-sm font-medium text-blue-800">Days Tracked</span>
            </div>
            <p className="text-2xl font-bold text-blue-900">{new Set(entries.map(e => e.date)).size}</p>
          </div>
          <div className="bg-green-50 p-4 rounded-lg">
            <div className="flex items-center space-x-2">
              <Plus className="w-5 h-5 text-green-600" />
              <span className="text-sm font-medium text-green-800">Total Entries</span>
            </div>
            <p className="text-2xl font-bold text-green-900">{entries.length}</p>
          </div>
          <div className="bg-purple-50 p-4 rounded-lg">
            <div className="flex items-center space-x-2">
              <Brain className="w-5 h-5 text-purple-600" />
              <span className="text-sm font-medium text-purple-800">Avg Focus</span>
            </div>
            <p className="text-2xl font-bold text-purple-900">
              {entries.length ? (entries.reduce((sum, e) => sum + e.focus, 0) / entries.length).toFixed(1) : '-'}
            </p>
          </div>
          <div className="bg-orange-50 p-4 rounded-lg">
            <div className="flex items-center space-x-2">
              <AlertTriangle className="w-5 h-5 text-orange-600" />
              <span className="text-sm font-medium text-orange-800">Side Effects</span>
            </div>
            <p className="text-2xl font-bold text-orange-900">
              {entries.length ? Math.round(entries.slice(0, 7).reduce((sum, e) => 
                sum + (e.headache + e.nausea + e.anxiety + e.jitteriness), 0) / Math.min(7, entries.length)) : '-'}
            </p>
          </div>
        </div>

        {/* Current Entry Form */}
        <div className="space-y-6">
          {/* Basic Info */}
          <div className="bg-gray-50 p-4 rounded-lg">
            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Date</label>
                <input
                  type="date"
                  value={currentEntry.date}
                  onChange={(e) => updateEntry('date', e.target.value)}
                  className="w-full p-2 border border-gray-300 rounded-md"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Time</label>
                <input
                  type="time"
                  value={currentEntry.time}
                  onChange={(e) => updateEntry('time', e.target.value)}
                  className="w-full p-2 border border-gray-300 rounded-md"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Medication Taken</label>
                {!currentEntry.medicationTaken ? (
                  <button
                    onClick={startMedicationTimer}
                    className="w-full p-2 rounded-md font-medium transition-colors bg-green-500 hover:bg-green-600 text-white"
                  >
                    ✓ Take Medication Now
                  </button>
                ) : (
                  <div className="w-full p-2 rounded-md font-medium bg-green-100 text-green-800 text-center">
                    ✓ Medication Taken
                    {medicationTakenTime && (
                      <div className="text-xs text-green-600">
                        {new Date(medicationTakenTime).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}
                      </div>
                    )}
                  </div>
                )}
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Dosage (mg)</label>
                <select
                  value={currentEntry.dosage}
                  onChange={(e) => updateEntry('dosage', e.target.value)}
                  className="w-full p-2 border border-gray-300 rounded-md"
                >
                  <option value="10">10 mg</option>
                  <option value="20">20 mg</option>
                  <option value="30">30 mg</option>
                  <option value="40">40 mg</option>
                  <option value="50">50 mg</option>
                  <option value="60">60 mg</option>
                  <option value="70">70 mg</option>
                </select>
              </div>
            </div>
          </div>

          {/* Physical Measurements */}
          <div className="border border-gray-200 rounded-lg">
            <button
              onClick={() => toggleSection('physical')}
              className="w-full flex items-center justify-between p-4 hover:bg-gray-50"
            >
              <div className="flex items-center space-x-2">
                <Heart className="w-5 h-5 text-red-500" />
                <h3 className="text-lg font-semibold text-gray-900">Physical Measurements</h3>
              </div>
              {expandedSections.physical ? <ChevronUp className="w-5 h-5" /> : <ChevronDown className="w-5 h-5" />}
            </button>
            {expandedSections.physical && (
              <div className="p-4 border-t border-gray-200">
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Heart Rate (bpm)</label>
                    <input
                      type="number"
                      value={currentEntry.heartRate}
                      onChange={(e) => updateEntry('heartRate', e.target.value)}
                      placeholder="e.g., 72"
                      className="w-full p-2 border border-gray-300 rounded-md"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Blood Pressure</label>
                    <input
                      type="text"
                      value={currentEntry.bloodPressure}
                      onChange={(e) => updateEntry('bloodPressure', e.target.value)}
                      placeholder="e.g., 120/80"
                      className="w-full p-2 border border-gray-300 rounded-md"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Weight (lbs)</label>
                    <input
                      type="number"
                      step="0.1"
                      value={currentEntry.weight}
                      onChange={(e) => updateEntry('weight', e.target.value)}
                      placeholder="e.g., 150.5"
                      className="w-full p-2 border border-gray-300 rounded-md"
                    />
                  </div>
                </div>
              </div>
            )}
          </div>

          {/* ADHD Symptoms */}
          <div className="border border-gray-200 rounded-lg">
            <button
              onClick={() => toggleSection('symptoms')}
              className="w-full flex items-center justify-between p-4 hover:bg-gray-50"
            >
              <div className="flex items-center space-x-2">
                <Brain className="w-5 h-5 text-blue-500" />
                <h3 className="text-lg font-semibold text-gray-900">ADHD Symptoms</h3>
              </div>
              {expandedSections.symptoms ? <ChevronUp className="w-5 h-5" /> : <ChevronDown className="w-5 h-5" />}
            </button>
            {expandedSections.symptoms && (
              <div className="p-4 border-t border-gray-200 space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <div className="flex justify-between items-center mb-2">
                      <span className="font-medium text-gray-700">Focus & Concentration</span>
                      <span className="text-sm text-gray-500">{currentEntry.focus}/10</span>
                    </div>
                    <div className="flex space-x-1">
                      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(value => (
                        <ScaleButton
                          key={value}
                          value={value}
                          currentValue={currentEntry.focus}
                          onChange={(val) => updateEntry('focus', val)}
                          color="blue"
                        />
                      ))}
                    </div>
                    <p className="text-xs text-gray-500 mt-1">1 = Very poor focus, 10 = Excellent focus</p>
                  </div>

                  <div>
                    <div className="flex justify-between items-center mb-2">
                      <span className="font-medium text-gray-700">Sustained Attention</span>
                      <span className="text-sm text-gray-500">{currentEntry.attention}/10</span>
                    </div>
                    <div className="flex space-x-1">
                      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(value => (
                        <ScaleButton
                          key={value}
                          value={value}
                          currentValue={currentEntry.attention}
                          onChange={(val) => updateEntry('attention', val)}
                          color="blue"
                        />
                      ))}
                    </div>
                    <p className="text-xs text-gray-500 mt-1">1 = Can't stay focused, 10 = Great attention span</p>
                  </div>

                  <div>
                    <div className="flex justify-between items-center mb-2">
                      <span className="font-medium text-gray-700">Hyperactivity Control</span>
                      <span className="text-sm text-gray-500">{currentEntry.hyperactivity}/10</span>
                    </div>
                    <div className="flex space-x-1">
                      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(value => (
                        <ScaleButton
                          key={value}
                          value={value}
                          currentValue={currentEntry.hyperactivity}
                          onChange={(val) => updateEntry('hyperactivity', val)}
                          color="green"
                        />
                      ))}
                    </div>
                    <p className="text-xs text-gray-500 mt-1">1 = Very restless/hyperactive, 10 = Calm and settled</p>
                  </div>

                  <div>
                    <div className="flex justify-between items-center mb-2">
                      <span className="font-medium text-gray-700">Impulse Control</span>
                      <span className="text-sm text-gray-500">{currentEntry.impulsivity}/10</span>
                    </div>
                    <div className="flex space-x-1">
                      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(value => (
                        <ScaleButton
                          key={value}
                          value={value}
                          currentValue={currentEntry.impulsivity}
                          onChange={(val) => updateEntry('impulsivity', val)}
                          color="green"
                        />
                      ))}
                    </div>
                    <p className="text-xs text-gray-500 mt-1">1 = Very impulsive, 10 = Excellent self-control</p>
                  </div>
                </div>
              </div>
            )}
          </div>

          {/* Side Effects */}
          <div className="border border-gray-200 rounded-lg">
            <button
              onClick={() => toggleSection('sideEffects')}
              className="w-full flex items-center justify-between p-4 hover:bg-gray-50"
            >
              <div className="flex items-center space-x-2">
                <AlertTriangle className="w-5 h-5 text-orange-500" />
                <h3 className="text-lg font-semibold text-gray-900">Side Effects & Well-being</h3>
              </div>
              {expandedSections.sideEffects ? <ChevronUp className="w-5 h-5" /> : <ChevronDown className="w-5 h-5" />}
            </button>
            {expandedSections.sideEffects && (
              <div className="p-4 border-t border-gray-200 space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <div className="flex justify-between items-center mb-2">
                      <span className="font-medium text-gray-700">Appetite</span>
                      <span className="text-sm text-gray-500">{currentEntry.appetite}/4</span>
                    </div>
                    <div className="flex space-x-1">
                      {[0, 1, 2, 3, 4].map(value => (
                        <ScaleButton
                          key={value}
                          value={value}
                          currentValue={currentEntry.appetite}
                          onChange={(val) => updateEntry('appetite', val)}
                          color="green"
                        />
                      ))}
                    </div>
                    <p className="text-xs text-gray-500 mt-1">0 = No appetite, 4 = Normal appetite</p>
                  </div>

                  <div>
                    <div className="flex justify-between items-center mb-2">
                      <span className="font-medium text-gray-700">Sleep Quality</span>
                      <span className="text-sm text-gray-500">{currentEntry.sleepQuality}/4</span>
                    </div>
                    <div className="flex space-x-1">
                      {[0, 1, 2, 3, 4].map(value => (
                        <ScaleButton
                          key={value}
                          value={value}
                          currentValue={currentEntry.sleepQuality}
                          onChange={(val) => updateEntry('sleepQuality', val)}
                          color="blue"
                        />
                      ))}
                    </div>
                    <p className="text-xs text-gray-500 mt-1">0 = Very poor sleep, 4 = Excellent sleep</p>
                  </div>

                  <div>
                    <div className="flex justify-between items-center mb-2">
                      <span className="font-medium text-gray-700">Mood</span>
                      <span className="text-sm text-gray-500">{currentEntry.mood}/4</span>
                    </div>
                    <div className="flex space-x-1">
                      {[0, 1, 2, 3, 4].map(value => (
                        <ScaleButton
                          key={value}
                          value={value}
                          currentValue={currentEntry.mood}
                          onChange={(val) => updateEntry('mood', val)}
                          color="purple"
                        />
                      ))}
                    </div>
                    <p className="text-xs text-gray-500 mt-1">0 = Very irritable/sad, 4 = Great mood</p>
                  </div>

                  <div>
                    <div className="flex justify-between items-center mb-2">
                      <span className="font-medium text-gray-700">Anxiety/Nervousness</span>
                      <span className="text-sm text-gray-500">{currentEntry.anxiety}/4</span>
                    </div>
                    <div className="flex space-x-1">
                      {[0, 1, 2, 3, 4].map(value => (
                        <ScaleButton
                          key={value}
                          value={value}
                          currentValue={currentEntry.anxiety}
                          onChange={(val) => updateEntry('anxiety', val)}
                          color="red"
                        />
                      ))}
                    </div>
                    <p className="text-xs text-gray-500 mt-1">0 = None, 4 = Severe anxiety</p>
                  </div>

                  <div>
                    <div className="flex justify-between items-center mb-2">
                      <span className="font-medium text-gray-700">Headache</span>
                      <span className="text-sm text-gray-500">{currentEntry.headache}/4</span>
                    </div>
                    <div className="flex space-x-1">
                      {[0, 1, 2, 3, 4].map(value => (
                        <ScaleButton
                          key={value}
                          value={value}
                          currentValue={currentEntry.headache}
                          onChange={(val) => updateEntry('headache', val)}
                          color="red"
                        />
                      ))}
                    </div>
                    <p className="text-xs text-gray-500 mt-1">0 = None, 4 = Severe headache</p>
                  </div>

                  <div>
                    <div className="flex justify-between items-center mb-2">
                      <span className="font-medium text-gray-700">Nausea/Stomach Issues</span>
                      <span className="text-sm text-gray-500">{currentEntry.nausea}/4</span>
                    </div>
                    <div className="flex space-x-1">
                      {[0, 1, 2, 3, 4].map(value => (
                        <ScaleButton
                          key={value}
                          value={value}
                          currentValue={currentEntry.nausea}
                          onChange={(val) => updateEntry('nausea', val)}
                          color="red"
                        />
                      ))}
                    </div>
                    <p className="text-xs text-gray-500 mt-1">0 = None, 4 = Severe nausea</p>
                  </div>

                  <div>
                    <div className="flex justify-between items-center mb-2">
                      <span className="font-medium text-gray-700">Dry Mouth</span>
                      <span className="text-sm text-gray-500">{currentEntry.dryMouth}/4</span>
                    </div>
                    <div className="flex space-x-1">
                      {[0, 1, 2, 3, 4].map(value => (
                        <ScaleButton
                          key={value}
                          value={value}
                          currentValue={currentEntry.dryMouth}
                          onChange={(val) => updateEntry('dryMouth', val)}
                          color="red"
                        />
                      ))}
                    </div>
                    <p className="text-xs text-gray-500 mt-1">0 = None, 4 = Very dry mouth</p>
                  </div>

                  <div>
                    <div className="flex justify-between items-center mb-2">
                      <span className="font-medium text-gray-700">Jitteriness/Restlessness</span>
                      <span className="text-sm text-gray-500">{currentEntry.jitteriness}/4</span>
                    </div>
                    <div className="flex space-x-1">
                      {[0, 1, 2, 3, 4].map(value => (
                        <ScaleButton
                          key={value}
                          value={value}
                          currentValue={currentEntry.jitteriness}
                          onChange={(val) => updateEntry('jitteriness', val)}
                          color="red"
                        />
                      ))}
                    </div>
                    <p className="text-xs text-gray-500 mt-1">0 = None, 4 = Very jittery</p>
                  </div>
                </div>
              </div>
            )}
          </div>

          {/* Effectiveness Timeline */}
          <div className="border border-gray-200 rounded-lg">
            <button
              onClick={() => toggleSection('effectiveness')}
              className="w-full flex items-center justify-between p-4 hover:bg-gray-50"
            >
              <div className="flex items-center space-x-2">
                <Moon className="w-5 h-5 text-indigo-500" />
                <h3 className="text-lg font-semibold text-gray-900">Medication Effectiveness Timeline</h3>
              </div>
              {expandedSections.effectiveness ? <ChevronUp className="w-5 h-5" /> : <ChevronDown className="w-5 h-5" />}
            </button>
            {expandedSections.effectiveness && (
              <div className="p-4 border-t border-gray-200">
                <p className="text-sm text-gray-600 mb-4">
                  Vyvanse typically starts working within 1.5-2 hours and can last up to 13-14 hours. Rate how well the medication is working at different times:
                </p>
                <EffectivenessTracker />
              </div>
            )}
          </div>

          {/* Notes */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Additional Notes</label>
            <textarea
              value={currentEntry.notes}
              onChange={(e) => updateEntry('notes', e.target.value)}
              placeholder="Any other observations, events, or important details..."
              className="w-full p-3 border border-gray-300 rounded-md h-24 resize-none"
            />
          </div>

          <button
            onClick={saveEntry}
            className="w-full bg-blue-600 text-white py-3 px-6 rounded-lg font-semibold hover:bg-blue-700 transition-colors flex items-center justify-center space-x-2"
          >
            <Plus className="w-5 h-5" />
            <span>Save Entry</span>
          </button>
        </div>

        {/* Recent Entries */}
        {entries.length > 0 && (
          <div className="mt-8">
            <h3 className="text-lg font-semibold text-gray-900 mb-4">Recent Entries</h3>
            <div className="space-y-3 max-h-64 overflow-y-auto">
              {entries.slice(0, 10).map(entry => (
                <div key={entry.id} className="bg-gray-50 p-3 rounded-lg">
                  <div className="flex justify-between items-start">
                    <div>
                      <div className="flex items-center space-x-2 text-sm text-gray-600">
                        <span>{entry.date}</span>
                        <span>{entry.time}</span>
                        {entry.medicationTaken && (
                          <span className="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs">
                            {entry.dosage}mg taken
                          </span>
                        )}
                        {entry.medicationTakenTime && (
                          <span className="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs">
                            Timer: {new Date(entry.medicationTakenTime).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}
                          </span>
                        )}
                      </div>
                      <div className="mt-1 text-sm">
                        <span className="text-gray-700">
                          Focus: {entry.focus}/10, Mood: {entry.mood}/4, Sleep: {entry.sleepQuality}/4
                        </span>
                      </div>
                      {entry.notes && (
                        <div className="mt-1 text-xs text-gray-600 italic">
                          "{entry.notes.substring(0, 60)}{entry.notes.length > 60 ? '...' : ''}"
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>

      {/* Educational Information */}
      <div className="bg-blue-50 border border-blue-200 rounded-lg p-6 mb-4">
        <h3 className="text-lg font-semibold text-blue-900 mb-3">Important Information About Vyvanse</h3>
        <div className="space-y-2 text-sm text-blue-800">
          <p><strong>Expected Benefits:</strong> Improved focus, attention span, reduced hyperactivity and impulsivity</p>
          <p><strong>Timeline:</strong> Effects typically begin within 1.5-2 hours and last 13-14 hours</p>
          <p><strong>Common Side Effects:</strong> Decreased appetite, trouble sleeping, dry mouth, mood changes</p>
          <p><strong>Important:</strong> Your doctor will monitor your blood pressure and heart rate regularly</p>
          <p className="font-medium">Always contact your healthcare provider with concerns or significant side effects.</p>
        </div>
      </div>

      {/* Timing Guide */}
      <div className="bg-green-50 border border-green-200 rounded-lg p-6">
        <h3 className="text-lg font-semibold text-green-900 mb-3">📅 When to Complete Each Section</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-green-800">
          <div>
            <h4 className="font-semibold mb-2">🌅 Morning (Before Medication)</h4>
            <ul className="space-y-1 text-xs">
              <li>• Physical measurements (heart rate, BP)</li>
              <li>• Baseline ADHD symptoms rating</li>
              <li>• Click "Take Medication Now" when you take your pill</li>
            </ul>
          </div>
          <div>
            <h4 className="font-semibold mb-2">⏰ Throughout Day (Timer Will Remind You)</h4>
            <ul className="space-y-1 text-xs">
              <li>• Rate effectiveness at 2, 4, 6, 8, 10, 12 hours</li>
              <li>• The app will highlight when it's time</li>
              <li>• Green alerts show when to rate</li>
            </ul>
          </div>
          <div>
            <h4 className="font-semibold mb-2">🌙 Evening (Before Bed)</h4>
            <ul className="space-y-1 text-xs">
              <li>• Rate side effects (appetite, mood, etc.)</li>
              <li>• Re-rate ADHD symptoms for daily summary</li>
              <li>• Add notes about your day</li>
            </ul>
          </div>
          <div>
            <h4 className="font-semibold mb-2">💡 Pro Tips</h4>
            <ul className="space-y-1 text-xs">
              <li>• Set phone alarms as backup reminders</li>
              <li>• Don't skip days - consistency matters</li>
              <li>• Rate honestly - help your doctor help you</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
};

export default VyvanseMedicationLog;