import React, { useState } from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { Alert, AlertDescription } from '@/components/ui/alert';

const BrainFogRecoveryApp = () => {
  const [currentStep, setCurrentStep] = useState('welcome');
  const [userProfile, setUserProfile] = useState({
    symptoms: [],
    triggers: [],
    severity: '',
    duration: '',
  });
  const [recommendations, setRecommendations] = useState([]);
  const [activeProtocol, setActiveProtocol] = useState(null);

  // CLEAR Protocol Framework
  const clearProtocols = {
    calm: {
      name: "Calm Inflammation",
      icon: "🌊",
      color: "bg-blue-50 border-blue-200",
      description: "Reduce neuroinflammation and restore brain balance",
      approaches: [
        {
          name: "Omega-3 Fatty Acids",
          dosage: "2-4g EPA/DHA daily",
          timing: "With meals",
          benefits: "Reduces inflammatory cytokines, supports brain cell membranes",
          foods: ["Wild-caught salmon", "Sardines", "Mackerel", "Algae-based supplements"]
        },
        {
          name: "Curcumin",
          dosage: "500-1000mg with black pepper",
          timing: "Twice daily with food",
          benefits: "Crosses blood-brain barrier, potent anti-inflammatory",
          foods: ["Turmeric with black pepper", "Golden milk"]
        },
        {
          name: "Resveratrol",
          dosage: "200-500mg daily",
          timing: "Morning",
          benefits: "Activates anti-inflammatory pathways, neuroprotective",
          foods: ["Dark grapes", "Blueberries", "Dark chocolate"]
        }
      ]
    },
    lower: {
      name: "Lower Histamine",
      icon: "📉",
      color: "bg-green-50 border-green-200",
      description: "Reduce histamine burden and calm overactive immune response",
      approaches: [
        {
          name: "Quercetin",
          dosage: "500-1000mg daily",
          timing: "Between meals",
          benefits: "Natural antihistamine, mast cell stabilizer",
          foods: ["Onions", "Apples", "Capers", "Red grapes"]
        },
        {
          name: "DAO Support",
          dosage: "As directed (10,000-20,000 HDU)",
          timing: "15 minutes before meals",
          benefits: "Breaks down histamine in digestive tract",
          foods: ["Fresh herbs", "Avoid fermented foods initially"]
        },
        {
          name: "Low-Histamine Diet",
          dosage: "2-4 week trial",
          timing: "All meals",
          benefits: "Reduces total histamine load",
          foods: ["Fresh meat/fish", "Most vegetables", "Rice", "Avoid: aged, fermented, leftover foods"]
        }
      ]
    },
    energize: {
      name: "Energize Mitochondria",
      icon: "⚡",
      color: "bg-yellow-50 border-yellow-200",
      description: "Restore cellular energy production in brain cells",
      approaches: [
        {
          name: "CoQ10 (Ubiquinol)",
          dosage: "100-300mg daily",
          timing: "Morning with fat",
          benefits: "Essential for ATP production, antioxidant",
          foods: ["Organ meats", "Sardines", "Broccoli"]
        },
        {
          name: "PQQ",
          dosage: "20mg daily",
          timing: "Morning",
          benefits: "Stimulates new mitochondria growth",
          foods: ["Fermented soybeans (if tolerated)", "Green tea", "Parsley"]
        },
        {
          name: "B-Complex",
          dosage: "B-complex with methylated forms",
          timing: "Morning",
          benefits: "Critical cofactors for energy metabolism",
          foods: ["Leafy greens", "Eggs", "Grass-fed meat"]
        },
        {
          name: "Magnesium",
          dosage: "300-400mg (glycinate or threonate)",
          timing: "Evening",
          benefits: "Required for 300+ enzymatic reactions, ATP production",
          foods: ["Pumpkin seeds", "Dark chocolate", "Spinach"]
        }
      ]
    },
    address: {
      name: "Address Stress Biology",
      icon: "🧘",
      color: "bg-purple-50 border-purple-200",
      description: "Reset the stress response and vagus nerve function",
      approaches: [
        {
          name: "Vagus Nerve Stimulation",
          dosage: "5-10 minutes, 2-3x daily",
          timing: "Morning, midday, evening",
          benefits: "Activates parasympathetic nervous system, reduces inflammation",
          foods: ["Gargling with water", "Humming/singing", "Cold exposure"]
        },
        {
          name: "Adaptogenic Herbs",
          dosage: "Varies by herb",
          timing: "Morning and afternoon",
          benefits: "Modulates cortisol, supports HPA axis",
          foods: ["Ashwagandha", "Rhodiola", "Holy basil tea"]
        },
        {
          name: "Phosphatidylserine",
          dosage: "300mg daily",
          timing: "Evening",
          benefits: "Blunts cortisol response, supports brain cell membranes",
          foods: ["Sunflower lecithin", "Soybeans (if tolerated)"]
        },
        {
          name: "Box Breathing",
          dosage: "5 minutes, 3x daily",
          timing: "Upon waking, midday, before bed",
          benefits: "Activates vagus nerve, reduces sympathetic activation",
          foods: ["Practice: 4 count in, 4 hold, 4 out, 4 hold"]
        }
      ]
    },
    restore: {
      name: "Restore Gut-Brain Connection",
      icon: "🔄",
      color: "bg-pink-50 border-pink-200",
      description: "Heal the gut-brain axis and optimize neurotransmitter production",
      approaches: [
        {
          name: "Probiotics (Targeted Strains)",
          dosage: "10-50 billion CFU",
          timing: "With breakfast",
          benefits: "Produces GABA, supports serotonin synthesis, reduces inflammation",
          foods: ["Lactobacillus rhamnosus", "Bifidobacterium longum", "L. plantarum"]
        },
        {
          name: "L-Glutamine",
          dosage: "5g twice daily",
          timing: "Between meals",
          benefits: "Heals intestinal lining, reduces permeability",
          foods: ["Bone broth", "Cabbage juice", "Grass-fed beef"]
        },
        {
          name: "Prebiotic Fiber",
          dosage: "15-25g daily",
          timing: "Throughout day",
          benefits: "Feeds beneficial bacteria, produces short-chain fatty acids",
          foods: ["Jerusalem artichokes", "Garlic", "Onions", "Asparagus", "Green bananas"]
        },
        {
          name: "Zinc Carnosine",
          dosage: "75mg twice daily",
          timing: "Between meals",
          benefits: "Repairs gut lining, supports tight junctions",
          foods: ["Oysters", "Pumpkin seeds", "Grass-fed beef"]
        }
      ]
    }
  };

  // Symptom Assessment
  const symptoms = [
    { id: 'memory', label: 'Memory problems', protocols: ['energize', 'restore'] },
    { id: 'focus', label: 'Poor concentration', protocols: ['calm', 'energize'] },
    { id: 'fatigue', label: 'Mental fatigue', protocols: ['energize', 'address'] },
    { id: 'slowness', label: 'Slow thinking', protocols: ['energize', 'calm'] },
    { id: 'headaches', label: 'Headaches/pressure', protocols: ['calm', 'lower'] },
    { id: 'anxiety', label: 'Anxiety/overwhelm', protocols: ['address', 'restore'] },
    { id: 'mood', label: 'Mood changes', protocols: ['restore', 'address'] },
    { id: 'sleep', label: 'Sleep problems', protocols: ['address', 'restore'] },
    { id: 'sensory', label: 'Light/sound sensitivity', protocols: ['calm', 'lower'] },
    { id: 'words', label: 'Word-finding difficulty', protocols: ['calm', 'energize'] }
  ];

  const generateRecommendations = () => {
    const protocolScores = {
      calm: 0,
      lower: 0,
      energize: 0,
      address: 0,
      restore: 0
    };

    userProfile.symptoms.forEach(symptomId => {
      const symptom = symptoms.find(s => s.id === symptomId);
      symptom.protocols.forEach(protocol => {
        protocolScores[protocol]++;
      });
    });

    const sortedProtocols = Object.entries(protocolScores)
      .sort(([,a], [,b]) => b - a)
      .filter(([,score]) => score > 0)
      .map(([protocol]) => protocol);

    setRecommendations(sortedProtocols);
    setCurrentStep('results');
  };

  // Welcome Screen
  const WelcomeScreen = () => (
    <div className="max-w-2xl mx-auto p-6 space-y-6">
      <div className="text-center space-y-4">
        <h1 className="text-4xl font-bold text-gray-800">Brain Fog Recovery Guide</h1>
        <p className="text-xl text-gray-600">Your personalized path to mental clarity using the CLEAR Protocol™</p>
      </div>
      
      <Card className="bg-gradient-to-r from-blue-50 to-purple-50">
        <CardContent className="p-6 space-y-4">
          <h2 className="text-2xl font-semibold text-gray-800">What is the CLEAR Protocol?</h2>
          <p className="text-gray-700">
            A science-based framework targeting the five root causes of post-viral brain fog:
          </p>
          <div className="grid gap-3 mt-4">
            {Object.entries(clearProtocols).map(([key, protocol]) => (
              <div key={key} className="flex items-center gap-3 bg-white p-3 rounded-lg">
                <span className="text-2xl">{protocol.icon}</span>
                <div>
                  <div className="font-semibold text-gray-800">{protocol.name}</div>
                  <div className="text-sm text-gray-600">{protocol.description}</div>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      <Alert className="bg-blue-50 border-blue-200">
        <AlertDescription>
          <strong>Medical Disclaimer:</strong> This tool provides educational information only. 
          Always consult with your healthcare provider before starting any new supplement or treatment protocol, 
          especially if you're taking medications or have underlying health conditions.
        </AlertDescription>
      </Alert>

      <button
        onClick={() => setCurrentStep('assessment')}
        className="w-full bg-gradient-to-r from-blue-600 to-purple-600 text-white py-4 px-6 rounded-lg text-lg font-semibold hover:from-blue-700 hover:to-purple-700 transition-all"
      >
        Start Your Assessment →
      </button>
    </div>
  );

  // Assessment Screen
  const AssessmentScreen = () => (
    <div className="max-w-2xl mx-auto p-6 space-y-6">
      <div className="text-center space-y-2">
        <h2 className="text-3xl font-bold text-gray-800">Symptom Assessment</h2>
        <p className="text-gray-600">Select all symptoms you're currently experiencing</p>
      </div>

      <Card>
        <CardContent className="p-6 space-y-4">
          <div className="grid gap-3">
            {symptoms.map(symptom => (
              <label
                key={symptom.id}
                className={`flex items-center gap-3 p-4 rounded-lg border-2 cursor-pointer transition-all ${
                  userProfile.symptoms.includes(symptom.id)
                    ? 'border-blue-500 bg-blue-50'
                    : 'border-gray-200 hover:border-blue-300'
                }`}
              >
                <input
                  type="checkbox"
                  checked={userProfile.symptoms.includes(symptom.id)}
                  onChange={(e) => {
                    if (e.target.checked) {
                      setUserProfile({
                        ...userProfile,
                        symptoms: [...userProfile.symptoms, symptom.id]
                      });
                    } else {
                      setUserProfile({
                        ...userProfile,
                        symptoms: userProfile.symptoms.filter(s => s !== symptom.id)
                      });
                    }
                  }}
                  className="w-5 h-5"
                />
                <span className="text-gray-800 font-medium">{symptom.label}</span>
              </label>
            ))}
          </div>
        </CardContent>
      </Card>

      <div className="flex gap-4">
        <button
          onClick={() => setCurrentStep('welcome')}
          className="flex-1 bg-gray-200 text-gray-800 py-3 px-6 rounded-lg font-semibold hover:bg-gray-300 transition-all"
        >
          ← Back
        </button>
        <button
          onClick={generateRecommendations}
          disabled={userProfile.symptoms.length === 0}
          className="flex-1 bg-gradient-to-r from-blue-600 to-purple-600 text-white py-3 px-6 rounded-lg font-semibold hover:from-blue-700 hover:to-purple-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
        >
          Get My Protocol →
        </button>
      </div>
    </div>
  );

  // Results Screen
  const ResultsScreen = () => (
    <div className="max-w-4xl mx-auto p-6 space-y-6">
      <div className="text-center space-y-2">
        <h2 className="text-3xl font-bold text-gray-800">Your Personalized CLEAR Protocol</h2>
        <p className="text-gray-600">Based on your symptoms, here are your priority pathways</p>
      </div>

      <div className="grid gap-4">
        {recommendations.map((protocolKey, index) => {
          const protocol = clearProtocols[protocolKey];
          return (
            <Card key={protocolKey} className={`${protocol.color} border-2`}>
              <CardContent className="p-6">
                <div className="flex items-start justify-between mb-4">
                  <div className="flex items-center gap-3">
                    <span className="text-3xl">{protocol.icon}</span>
                    <div>
                      <div className="flex items-center gap-2">
                        <h3 className="text-xl font-bold text-gray-800">{protocol.name}</h3>
                        {index === 0 && (
                          <span className="bg-blue-600 text-white text-xs px-2 py-1 rounded-full">
                            TOP PRIORITY
                          </span>
                        )}
                      </div>
                      <p className="text-gray-600 text-sm">{protocol.description}</p>
                    </div>
                  </div>
                  <button
                    onClick={() => setActiveProtocol(activeProtocol === protocolKey ? null : protocolKey)}
                    className="text-blue-600 hover:text-blue-800 font-semibold"
                  >
                    {activeProtocol === protocolKey ? 'Hide Details' : 'View Details →'}
                  </button>
                </div>

                {activeProtocol === protocolKey && (
                  <div className="mt-4 space-y-4 border-t pt-4">
                    {protocol.approaches.map((approach, idx) => (
                      <div key={idx} className="bg-white p-4 rounded-lg space-y-2">
                        <h4 className="font-bold text-gray-800 text-lg">{approach.name}</h4>
                        <div className="grid md:grid-cols-2 gap-4 text-sm">
                          <div>
                            <span className="font-semibold text-gray-700">Dosage: </span>
                            <span className="text-gray-600">{approach.dosage}</span>
                          </div>
                          <div>
                            <span className="font-semibold text-gray-700">Timing: </span>
                            <span className="text-gray-600">{approach.timing}</span>
                          </div>
                        </div>
                        <div>
                          <span className="font-semibold text-gray-700">Benefits: </span>
                          <span className="text-gray-600">{approach.benefits}</span>
                        </div>
                        <div>
                          <span className="font-semibold text-gray-700">Food Sources: </span>
                          <span className="text-gray-600">{approach.foods.join(', ')}</span>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </CardContent>
            </Card>
          );
        })}
      </div>

      <Card className="bg-gradient-to-r from-green-50 to-blue-50 border-2 border-green-200">
        <CardContent className="p-6 space-y-4">
          <h3 className="text-xl font-bold text-gray-800">💡 Getting Started</h3>
          <ol className="space-y-3 text-gray-700">
            <li><strong>Week 1-2:</strong> Start with your top priority protocol. Choose 2-3 approaches and introduce them gradually.</li>
            <li><strong>Week 3-4:</strong> Add your second priority protocol once you're stable with the first.</li>
            <li><strong>Week 5+:</strong> Layer in additional protocols as tolerated. Track your symptoms weekly.</li>
          </ol>
          <Alert className="bg-yellow-50 border-yellow-200">
            <AlertDescription>
              <strong>Important:</strong> Start low and go slow. It's better to begin with one or two supplements 
              and gradually add more than to overwhelm your system. Keep a symptom journal to track what helps.
            </AlertDescription>
          </Alert>
        </CardContent>
      </Card>

      <div className="flex gap-4">
        <button
          onClick={() => {
            setCurrentStep('assessment');
            setActiveProtocol(null);
          }}
          className="flex-1 bg-gray-200 text-gray-800 py-3 px-6 rounded-lg font-semibold hover:bg-gray-300 transition-all"
        >
          ← Retake Assessment
        </button>
        <button
          onClick={() => window.print()}
          className="flex-1 bg-gradient-to-r from-blue-600 to-purple-600 text-white py-3 px-6 rounded-lg font-semibold hover:from-blue-700 hover:to-purple-700 transition-all"
        >
          📄 Print My Protocol
        </button>
      </div>
    </div>
  );

  return (
    <div className="min-h-screen bg-gradient-to-b from-blue-50 to-white py-8">
      {currentStep === 'welcome' && <WelcomeScreen />}
      {currentStep === 'assessment' && <AssessmentScreen />}
      {currentStep === 'results' && <ResultsScreen />}
      
      <div className="max-w-4xl mx-auto mt-8 px-6">
        <div className="text-center text-sm text-gray-500">
          <p>Created by Dr. Iris | Clear Mind Secrets</p>
          <p className="mt-1">For educational purposes only. Not a substitute for medical advice.</p>
        </div>
      </div>
    </div>
  );
};

export default BrainFogRecoveryApp;

import React, { useState, useEffect } from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { Alert, AlertDescription } from '@/components/ui/alert';

const BrainFogRecoveryApp = () => {
  const [currentStep, setCurrentStep] = useState('welcome');
  const [userProfile, setUserProfile] = useState({
    symptoms: [],
    triggers: [],
    severity: '',
    duration: '',
  });
  const [recommendations, setRecommendations] = useState([]);
  const [activeProtocol, setActiveProtocol] = useState(null);
  const [trackingData, setTrackingData] = useState({
    startDate: null,
    weeklyCheckins: [],
    journalEntries: [],
    activeSupplements: [],
  });
  const [showTracking, setShowTracking] = useState(false);
  const [showJournal, setShowJournal] = useState(false);
  const [journalEntry, setJournalEntry] = useState({
    date: new Date().toISOString().split('T')[0],
    symptoms: {},
    mood: 5,
    energy: 5,
    clarity: 5,
    sleep: 5,
    notes: '',
    supplements: [],
  });

  // Load saved data from localStorage on mount
  useEffect(() => {
    const saved = localStorage.getItem('brainFogTracking');
    if (saved) {
      setTrackingData(JSON.parse(saved));
    }
  }, []);

  // Save tracking data whenever it changes
  useEffect(() => {
    if (trackingData.startDate) {
      localStorage.setItem('brainFogTracking', JSON.stringify(trackingData));
    }
  }, [trackingData]);

  // CLEAR Protocol Framework
  const clearProtocols = {
    calm: {
      name: "Calm Inflammation",
      icon: "🌊",
      color: "bg-blue-50 border-blue-200",
      description: "Reduce neuroinflammation and restore brain balance",
      approaches: [
        {
          name: "Omega-3 Fatty Acids",
          dosage: "2-4g EPA/DHA daily",
          timing: "With meals",
          benefits: "Reduces inflammatory cytokines, supports brain cell membranes",
          foods: ["Wild-caught salmon", "Sardines", "Mackerel", "Algae-based supplements"]
        },
        {
          name: "Curcumin",
          dosage: "500-1000mg with black pepper",
          timing: "Twice daily with food",
          benefits: "Crosses blood-brain barrier, potent anti-inflammatory",
          foods: ["Turmeric with black pepper", "Golden milk"]
        },
        {
          name: "Resveratrol",
          dosage: "200-500mg daily",
          timing: "Morning",
          benefits: "Activates anti-inflammatory pathways, neuroprotective",
          foods: ["Dark grapes", "Blueberries", "Dark chocolate"]
        }
      ]
    },
    lower: {
      name: "Lower Histamine",
      icon: "📉",
      color: "bg-green-50 border-green-200",
      description: "Reduce histamine burden and calm overactive immune response",
      approaches: [
        {
          name: "Quercetin",
          dosage: "500-1000mg daily",
          timing: "Between meals",
          benefits: "Natural antihistamine, mast cell stabilizer",
          foods: ["Onions", "Apples", "Capers", "Red grapes"]
        },
        {
          name: "DAO Support",
          dosage: "As directed (10,000-20,000 HDU)",
          timing: "15 minutes before meals",
          benefits: "Breaks down histamine in digestive tract",
          foods: ["Fresh herbs", "Avoid fermented foods initially"]
        },
        {
          name: "Low-Histamine Diet",
          dosage: "2-4 week trial",
          timing: "All meals",
          benefits: "Reduces total histamine load",
          foods: ["Fresh meat/fish", "Most vegetables", "Rice", "Avoid: aged, fermented, leftover foods"]
        }
      ]
    },
    energize: {
      name: "Energize Mitochondria",
      icon: "⚡",
      color: "bg-yellow-50 border-yellow-200",
      description: "Restore cellular energy production in brain cells",
      approaches: [
        {
          name: "CoQ10 (Ubiquinol)",
          dosage: "100-300mg daily",
          timing: "Morning with fat",
          benefits: "Essential for ATP production, antioxidant",
          foods: ["Organ meats", "Sardines", "Broccoli"]
        },
        {
          name: "PQQ",
          dosage: "20mg daily",
          timing: "Morning",
          benefits: "Stimulates new mitochondria growth",
          foods: ["Fermented soybeans (if tolerated)", "Green tea", "Parsley"]
        },
        {
          name: "B-Complex",
          dosage: "B-complex with methylated forms",
          timing: "Morning",
          benefits: "Critical cofactors for energy metabolism",
          foods: ["Leafy greens", "Eggs", "Grass-fed meat"]
        },
        {
          name: "Magnesium",
          dosage: "300-400mg (glycinate or threonate)",
          timing: "Evening",
          benefits: "Required for 300+ enzymatic reactions, ATP production",
          foods: ["Pumpkin seeds", "Dark chocolate", "Spinach"]
        }
      ]
    },
    address: {
      name: "Address Stress Biology",
      icon: "🧘",
      color: "bg-purple-50 border-purple-200",
      description: "Reset the stress response and vagus nerve function",
      approaches: [
        {
          name: "Vagus Nerve Stimulation",
          dosage: "5-10 minutes, 2-3x daily",
          timing: "Morning, midday, evening",
          benefits: "Activates parasympathetic nervous system, reduces inflammation",
          foods: ["Gargling with water", "Humming/singing", "Cold exposure"]
        },
        {
          name: "Adaptogenic Herbs",
          dosage: "Varies by herb",
          timing: "Morning and afternoon",
          benefits: "Modulates cortisol, supports HPA axis",
          foods: ["Ashwagandha", "Rhodiola", "Holy basil tea"]
        },
        {
          name: "Phosphatidylserine",
          dosage: "300mg daily",
          timing: "Evening",
          benefits: "Blunts cortisol response, supports brain cell membranes",
          foods: ["Sunflower lecithin", "Soybeans (if tolerated)"]
        },
        {
          name: "Box Breathing",
          dosage: "5 minutes, 3x daily",
          timing: "Upon waking, midday, before bed",
          benefits: "Activates vagus nerve, reduces sympathetic activation",
          foods: ["Practice: 4 count in, 4 hold, 4 out, 4 hold"]
        }
      ]
    },
    restore: {
      name: "Restore Gut-Brain Connection",
      icon: "🔄",
      color: "bg-pink-50 border-pink-200",
      description: "Heal the gut-brain axis and optimize neurotransmitter production",
      approaches: [
        {
          name: "Probiotics (Targeted Strains)",
          dosage: "10-50 billion CFU",
          timing: "With breakfast",
          benefits: "Produces GABA, supports serotonin synthesis, reduces inflammation",
          foods: ["Lactobacillus rhamnosus", "Bifidobacterium longum", "L. plantarum"]
        },
        {
          name: "L-Glutamine",
          dosage: "5g twice daily",
          timing: "Between meals",
          benefits: "Heals intestinal lining, reduces permeability",
          foods: ["Bone broth", "Cabbage juice", "Grass-fed beef"]
        },
        {
          name: "Prebiotic Fiber",
          dosage: "15-25g daily",
          timing: "Throughout day",
          benefits: "Feeds beneficial bacteria, produces short-chain fatty acids",
          foods: ["Jerusalem artichokes", "Garlic", "Onions", "Asparagus", "Green bananas"]
        },
        {
          name: "Zinc Carnosine",
          dosage: "75mg twice daily",
          timing: "Between meals",
          benefits: "Repairs gut lining, supports tight junctions",
          foods: ["Oysters", "Pumpkin seeds", "Grass-fed beef"]
        }
      ]
    }
  };

  // Symptom Assessment
  const symptoms = [
    { id: 'memory', label: 'Memory problems', protocols: ['energize', 'restore'] },
    { id: 'focus', label: 'Poor concentration', protocols: ['calm', 'energize'] },
    { id: 'fatigue', label: 'Mental fatigue', protocols: ['energize', 'address'] },
    { id: 'slowness', label: 'Slow thinking', protocols: ['energize', 'calm'] },
    { id: 'headaches', label: 'Headaches/pressure', protocols: ['calm', 'lower'] },
    { id: 'anxiety', label: 'Anxiety/overwhelm', protocols: ['address', 'restore'] },
    { id: 'mood', label: 'Mood changes', protocols: ['restore', 'address'] },
    { id: 'sleep', label: 'Sleep problems', protocols: ['address', 'restore'] },
    { id: 'sensory', label: 'Light/sound sensitivity', protocols: ['calm', 'lower'] },
    { id: 'words', label: 'Word-finding difficulty', protocols: ['calm', 'energize'] }
  ];

  const generateRecommendations = () => {
    const protocolScores = {
      calm: 0,
      lower: 0,
      energize: 0,
      address: 0,
      restore: 0
    };

    userProfile.symptoms.forEach(symptomId => {
      const symptom = symptoms.find(s => s.id === symptomId);
      symptom.protocols.forEach(protocol => {
        protocolScores[protocol]++;
      });
    });

    const sortedProtocols = Object.entries(protocolScores)
      .sort(([,a], [,b]) => b - a)
      .filter(([,score]) => score > 0)
      .map(([protocol]) => protocol);

    setRecommendations(sortedProtocols);
    
    // Initialize tracking if not already started
    if (!trackingData.startDate) {
      setTrackingData({
        ...trackingData,
        startDate: new Date().toISOString(),
        weeklyCheckins: [{
          week: 1,
          date: new Date().toISOString(),
          symptoms: userProfile.symptoms,
          severity: {}
        }]
      });
    }
    
    setCurrentStep('results');
  };

  const saveJournalEntry = () => {
    const newEntry = {
      ...journalEntry,
      id: Date.now(),
      timestamp: new Date().toISOString()
    };
    
    setTrackingData({
      ...trackingData,
      journalEntries: [...trackingData.journalEntries, newEntry]
    });
    
    // Reset form
    setJournalEntry({
      date: new Date().toISOString().split('T')[0],
      symptoms: {},
      mood: 5,
      energy: 5,
      clarity: 5,
      sleep: 5,
      notes: '',
      supplements: [],
    });
    
    alert('Journal entry saved!');
  };

  const calculateProgress = () => {
    if (trackingData.journalEntries.length < 2) return null;
    
    const entries = trackingData.journalEntries.slice().sort((a, b) => 
      new Date(a.date) - new Date(b.date)
    );
    
    const first = entries[0];
    const latest = entries[entries.length - 1];
    
    const metrics = ['mood', 'energy', 'clarity', 'sleep'];
    const improvements = {};
    
    metrics.forEach(metric => {
      const change = latest[metric] - first[metric];
      const percentChange = ((change / first[metric]) * 100).toFixed(1);
      improvements[metric] = { change, percentChange };
    });
    
    return improvements;
  };

  // Welcome Screen
  const WelcomeScreen = () => (
    <div className="max-w-2xl mx-auto p-6 space-y-6">
      <div className="text-center space-y-4">
        <h1 className="text-4xl font-bold text-gray-800">Brain Fog Recovery Guide</h1>
        <p className="text-xl text-gray-600">Your personalized path to mental clarity using the CLEAR Protocol™</p>
      </div>
      
      <Card className="bg-gradient-to-r from-blue-50 to-purple-50">
        <CardContent className="p-6 space-y-4">
          <h2 className="text-2xl font-semibold text-gray-800">What is the CLEAR Protocol?</h2>
          <p className="text-gray-700">
            A science-based framework targeting the five root causes of post-viral brain fog:
          </p>
          <div className="grid gap-3 mt-4">
            {Object.entries(clearProtocols).map(([key, protocol]) => (
              <div key={key} className="flex items-center gap-3 bg-white p-3 rounded-lg">
                <span className="text-2xl">{protocol.icon}</span>
                <div>
                  <div className="font-semibold text-gray-800">{protocol.name}</div>
                  <div className="text-sm text-gray-600">{protocol.description}</div>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      <Alert className="bg-blue-50 border-blue-200">
        <AlertDescription>
          <strong>Medical Disclaimer:</strong> This tool provides educational information only. 
          Always consult with your healthcare provider before starting any new supplement or treatment protocol, 
          especially if you're taking medications or have underlying health conditions.
        </AlertDescription>
      </Alert>

      <button
        onClick={() => setCurrentStep('assessment')}
        className="w-full bg-gradient-to-r from-blue-600 to-purple-600 text-white py-4 px-6 rounded-lg text-lg font-semibold hover:from-blue-700 hover:to-purple-700 transition-all"
      >
        Start Your Assessment →
      </button>
    </div>
  );

  // Assessment Screen
  const AssessmentScreen = () => (
    <div className="max-w-2xl mx-auto p-6 space-y-6">
      <div className="text-center space-y-2">
        <h2 className="text-3xl font-bold text-gray-800">Symptom Assessment</h2>
        <p className="text-gray-600">Select all symptoms you're currently experiencing</p>
      </div>

      <Card>
        <CardContent className="p-6 space-y-4">
          <div className="grid gap-3">
            {symptoms.map(symptom => (
              <label
                key={symptom.id}
                className={`flex items-center gap-3 p-4 rounded-lg border-2 cursor-pointer transition-all ${
                  userProfile.symptoms.includes(symptom.id)
                    ? 'border-blue-500 bg-blue-50'
                    : 'border-gray-200 hover:border-blue-300'
                }`}
              >
                <input
                  type="checkbox"
                  checked={userProfile.symptoms.includes(symptom.id)}
                  onChange={(e) => {
                    if (e.target.checked) {
                      setUserProfile({
                        ...userProfile,
                        symptoms: [...userProfile.symptoms, symptom.id]
                      });
                    } else {
                      setUserProfile({
                        ...userProfile,
                        symptoms: userProfile.symptoms.filter(s => s !== symptom.id)
                      });
                    }
                  }}
                  className="w-5 h-5"
                />
                <span className="text-gray-800 font-medium">{symptom.label}</span>
              </label>
            ))}
          </div>
        </CardContent>
      </Card>

      <div className="flex gap-4">
        <button
          onClick={() => setCurrentStep('welcome')}
          className="flex-1 bg-gray-200 text-gray-800 py-3 px-6 rounded-lg font-semibold hover:bg-gray-300 transition-all"
        >
          ← Back
        </button>
        <button
          onClick={generateRecommendations}
          disabled={userProfile.symptoms.length === 0}
          className="flex-1 bg-gradient-to-r from-blue-600 to-purple-600 text-white py-3 px-6 rounded-lg font-semibold hover:from-blue-700 hover:to-purple-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
        >
          Get My Protocol →
        </button>
      </div>
    </div>
  );

  // Results Screen
  const ResultsScreen = () => (
    <div className="max-w-4xl mx-auto p-6 space-y-6">
      <div className="text-center space-y-2">
        <h2 className="text-3xl font-bold text-gray-800">Your Personalized CLEAR Protocol</h2>
        <p className="text-gray-600">Based on your symptoms, here are your priority pathways</p>
      </div>

      {/* Navigation Buttons */}
      <div className="flex gap-3 justify-center">
        <button
          onClick={() => setShowTracking(!showTracking)}
          className={`px-6 py-2 rounded-lg font-semibold transition-all ${
            showTracking 
              ? 'bg-blue-600 text-white' 
              : 'bg-gray-200 text-gray-800 hover:bg-gray-300'
          }`}
        >
          📊 Progress Tracker
        </button>
        <button
          onClick={() => setShowJournal(!showJournal)}
          className={`px-6 py-2 rounded-lg font-semibold transition-all ${
            showJournal 
              ? 'bg-purple-600 text-white' 
              : 'bg-gray-200 text-gray-800 hover:bg-gray-300'
          }`}
        >
          📝 Symptom Journal
        </button>
      </div>

      {/* Progress Tracker */}
      {showTracking && <ProgressTracker />}

      {/* Symptom Journal */}
      {showJournal && <SymptomJournal />}

      {/* Protocol Recommendations */}
      {!showTracking && !showJournal && (
        <>
          <div className="grid gap-4">
            {recommendations.map((protocolKey, index) => {
              const protocol = clearProtocols[protocolKey];
              return (
                <Card key={protocolKey} className={`${protocol.color} border-2`}>
                  <CardContent className="p-6">
                    <div className="flex items-start justify-between mb-4">
                      <div className="flex items-center gap-3">
                        <span className="text-3xl">{protocol.icon}</span>
                        <div>
                          <div className="flex items-center gap-2">
                            <h3 className="text-xl font-bold text-gray-800">{protocol.name}</h3>
                            {index === 0 && (
                              <span className="bg-blue-600 text-white text-xs px-2 py-1 rounded-full">
                                TOP PRIORITY
                              </span>
                            )}
                          </div>
                          <p className="text-gray-600 text-sm">{protocol.description}</p>
                        </div>
                      </div>
                      <button
                        onClick={() => setActiveProtocol(activeProtocol === protocolKey ? null : protocolKey)}
                        className="text-blue-600 hover:text-blue-800 font-semibold"
                      >
                        {activeProtocol === protocolKey ? 'Hide Details' : 'View Details →'}
                      </button>
                    </div>

                    {activeProtocol === protocolKey && (
                      <div className="mt-4 space-y-4 border-t pt-4">
                        {protocol.approaches.map((approach, idx) => (
                          <div key={idx} className="bg-white p-4 rounded-lg space-y-2">
                            <h4 className="font-bold text-gray-800 text-lg">{approach.name}</h4>
                            <div className="grid md:grid-cols-2 gap-4 text-sm">
                              <div>
                                <span className="font-semibold text-gray-700">Dosage: </span>
                                <span className="text-gray-600">{approach.dosage}</span>
                              </div>
                              <div>
                                <span className="font-semibold text-gray-700">Timing: </span>
                                <span className="text-gray-600">{approach.timing}</span>
                              </div>
                            </div>
                            <div>
                              <span className="font-semibold text-gray-700">Benefits: </span>
                              <span className="text-gray-600">{approach.benefits}</span>
                            </div>
                            <div>
                              <span className="font-semibold text-gray-700">Food Sources: </span>
                              <span className="text-gray-600">{approach.foods.join(', ')}</span>
                            </div>
                          </div>
                        ))}
                      </div>
                    )}
                  </CardContent>
                </Card>
              );
            })}
          </div>

          <Card className="bg-gradient-to-r from-green-50 to-blue-50 border-2 border-green-200">
            <CardContent className="p-6 space-y-4">
              <h3 className="text-xl font-bold text-gray-800">💡 Getting Started</h3>
              <ol className="space-y-3 text-gray-700">
                <li><strong>Week 1-2:</strong> Start with your top priority protocol. Choose 2-3 approaches and introduce them gradually.</li>
                <li><strong>Week 3-4:</strong> Add your second priority protocol once you're stable with the first.</li>
                <li><strong>Week 5+:</strong> Layer in additional protocols as tolerated. Track your symptoms weekly.</li>
              </ol>
              <Alert className="bg-yellow-50 border-yellow-200">
                <AlertDescription>
                  <strong>Important:</strong> Start low and go slow. It's better to begin with one or two supplements 
                  and gradually add more than to overwhelm your system. Keep a symptom journal to track what helps.
                </AlertDescription>
              </Alert>
            </CardContent>
          </Card>
        </>
      )}

      <div className="flex gap-4">
        <button
          onClick={() => {
            setCurrentStep('assessment');
            setActiveProtocol(null);
            setShowTracking(false);
            setShowJournal(false);
          }}
          className="flex-1 bg-gray-200 text-gray-800 py-3 px-6 rounded-lg font-semibold hover:bg-gray-300 transition-all"
        >
          ← Retake Assessment
        </button>
        <button
          onClick={() => window.print()}
          className="flex-1 bg-gradient-to-r from-blue-600 to-purple-600 text-white py-3 px-6 rounded-lg font-semibold hover:from-blue-700 hover:to-purple-700 transition-all"
        >
          📄 Print My Protocol
        </button>
      </div>
    </div>
  );

  // Progress Tracker Component
  const ProgressTracker = () => {
    const progress = calculateProgress();
    const daysSinceStart = trackingData.startDate 
      ? Math.floor((new Date() - new Date(trackingData.startDate)) / (1000 * 60 * 60 * 24))
      : 0;

    const recentEntries = trackingData.journalEntries
      .slice()
      .sort((a, b) => new Date(b.date) - new Date(a.date))
      .slice(0, 30);

    return (
      <Card className="bg-gradient-to-r from-blue-50 to-indigo-50 border-2 border-blue-200">
        <CardContent className="p-6 space-y-6">
          <div className="flex items-center justify-between">
            <h3 className="text-2xl font-bold text-gray-800">📊 Your Progress Dashboard</h3>
            {trackingData.startDate && (
              <div className="text-right">
                <div className="text-sm text-gray-600">Days on Protocol</div>
                <div className="text-3xl font-bold text-blue-600">{daysSinceStart}</div>
              </div>
            )}
          </div>

          {/* Overall Metrics */}
          {progress && (
            <div className="grid md:grid-cols-4 gap-4">
              {Object.entries(progress).map(([metric, data]) => (
                <div key={metric} className="bg-white p-4 rounded-lg border-2 border-gray-200">
                  <div className="text-sm text-gray-600 capitalize mb-1">{metric}</div>
                  <div className={`text-2xl font-bold ${
                    data.change > 0 ? 'text-green-600' : data.change < 0 ? 'text-red-600' : 'text-gray-600'
                  }`}>
                    {data.change > 0 ? '↑' : data.change < 0 ? '↓' : '→'} {Math.abs(data.change).toFixed(1)}
                  </div>
                  <div className="text-xs text-gray-500">{data.percentChange}% change</div>
                </div>
              ))}
            </div>
          )}

          {/* Trend Chart */}
          {recentEntries.length >= 2 && (
            <div className="bg-white p-4 rounded-lg">
              <h4 className="font-bold text-gray-800 mb-4">30-Day Trend</h4>
              <div className="space-y-3">
                {['clarity', 'energy', 'mood', 'sleep'].map(metric => {
                  const values = recentEntries.slice().reverse().map(e => e[metric]);
                  const max = 10;
                  const avg = values.reduce((a, b) => a + b, 0) / values.length;
                  
                  return (
                    <div key={metric}>
                      <div className="flex justify-between text-sm mb-1">
                        <span className="capitalize font-semibold text-gray-700">{metric}</span>
                        <span className="text-gray-600">Avg: {avg.toFixed(1)}/10</span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-3">
                        <div
                          className="bg-gradient-to-r from-blue-500 to-purple-500 h-3 rounded-full transition-all"
                          style={{ width: `${(avg / max) * 100}%` }}
                        />
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          )}

          {/* Recent Entries Summary */}
          {trackingData.journalEntries.length > 0 && (
            <div className="bg-white p-4 rounded-lg">
              <h4 className="font-bold text-gray-800 mb-3">Recent Entries ({trackingData.journalEntries.length} total)</h4>
              <div className="space-y-2 max-h-60 overflow-y-auto">
                {trackingData.journalEntries
                  .slice()
                  .sort((a, b) => new Date(b.date) - new Date(a.date))
                  .slice(0, 10)
                  .map((entry, idx) => (
                    <div key={idx} className="p-3 bg-gray-50 rounded border border-gray-200">
                      <div className="flex justify-between items-start mb-2">
                        <span className="font-semibold text-gray-800">
                          {new Date(entry.date).toLocaleDateString()}
                        </span>
                        <div className="flex gap-2 text-xs">
                          <span className="bg-blue-100 px-2 py-1 rounded">Clarity: {entry.clarity}/10</span>
                          <span className="bg-green-100 px-2 py-1 rounded">Energy: {entry.energy}/10</span>
                        </div>
                      </div>
                      {entry.notes && (
                        <p className="text-sm text-gray-600 line-clamp-2">{entry.notes}</p>
                      )}
                    </div>
                  ))}
              </div>
            </div>
          )}

          {trackingData.journalEntries.length === 0 && (
            <Alert className="bg-yellow-50 border-yellow-200">
              <AlertDescription>
                Start logging daily entries to track your progress over time. Consistent tracking helps identify what's working!
              </AlertDescription>
            </Alert>
          )}
        </CardContent>
      </Card>
    );
  };

  // Symptom Journal Component
  const SymptomJournal = () => {
    return (
      <Card className="bg-gradient-to-r from-purple-50 to-pink-50 border-2 border-purple-200">
        <CardContent className="p-6 space-y-6">
          <h3 className="text-2xl font-bold text-gray-800">📝 Daily Symptom Journal</h3>

          <div className="bg-white p-6 rounded-lg space-y-4">
            {/* Date */}
            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-2">Date</label>
              <input
                type="date"
                value={journalEntry.date}
                onChange={(e) => setJournalEntry({...journalEntry, date: e.target.value})}
                className="w-full p-3 border-2 border-gray-300 rounded-lg"
              />
            </div>

            {/* Rating Scales */}
            <div className="grid md:grid-cols-2 gap-4">
              {[
                { key: 'clarity', label: 'Mental Clarity', emoji: '🧠' },
                { key: 'energy', label: 'Energy Level', emoji: '⚡' },
                { key: 'mood', label: 'Mood', emoji: '😊' },
                { key: 'sleep', label: 'Sleep Quality', emoji: '😴' },
              ].map(metric => (
                <div key={metric.key}>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">
                    {metric.emoji} {metric.label}: {journalEntry[metric.key]}/10
                  </label>
                  <input
                    type="range"
                    min="0"
                    max="10"
                    value={journalEntry[metric.key]}
                    onChange={(e) => setJournalEntry({
                      ...journalEntry,
                      [metric.key]: parseInt(e.target.value)
                    })}
                    className="w-full"
                  />
                  <div className="flex justify-between text-xs text-gray-500 mt-1">
                    <span>Poor</span>
                    <span>Excellent</span>
                  </div>
                </div>
              ))}
            </div>

            {/* Symptom Checklist */}
            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-2">
                Symptoms Today
              </label>
              <div className="grid md:grid-cols-2 gap-2">
                {symptoms.map(symptom => (
                  <label
                    key={symptom.id}
                    className="flex items-center gap-2 p-2 rounded hover:bg-gray-50 cursor-pointer"
                  >
                    <input
                      type="checkbox"
                      checked={journalEntry.symptoms[symptom.id] || false}
                      onChange={(e) => setJournalEntry({
                        ...journalEntry,
                        symptoms: {
                          ...journalEntry.symptoms,
                          [symptom.id]: e.target.checked
                        }
                      })}
                      className="w-4 h-4"
                    />
                    <span className="text-sm text-gray-700">{symptom.label}</span>
                  </label>
                ))}
              </div>
            </div>

            {/* Supplements Taken */}
            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-2">
                Supplements/Interventions Today
              </label>
              <textarea
                value={journalEntry.supplements.join('\n')}
                onChange={(e) => setJournalEntry({
                  ...journalEntry,
                  supplements: e.target.value.split('\n').filter(s => s.trim())
                })}
                placeholder="Enter each supplement or intervention on a new line&#10;e.g., Omega-3 2g&#10;Curcumin 500mg&#10;Box breathing 5 min"
                className="w-full p-3 border-2 border-gray-300 rounded-lg h-24"
              />
            </div>

            {/* Notes */}
            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-2">
                Notes & Observations
              </label>
              <textarea
                value={journalEntry.notes}
                onChange={(e) => setJournalEntry({...journalEntry, notes: e.target.value})}
                placeholder="How are you feeling today? Any triggers noticed? What helped?"
                className="w-full p-3 border-2 border-gray-300 rounded-lg h-32"
              />
            </div>

            <button
              onClick={saveJournalEntry}
              className="w-full bg-gradient-to-r from-purple-600 to-pink-600 text-white py-3 px-6 rounded-lg font-semibold hover:from-purple-700 hover:to-pink-700 transition-all"
            >
              💾 Save Entry
            </button>
          </div>

          {/* Tips */}
          <Alert className="bg-indigo-50 border-indigo-200">
            <AlertDescription>
              <strong>Journaling Tips:</strong> Log entries at the same time each day (evening works well). 
              Note any patterns between what you do and how you feel. Even small improvements matter!
            </AlertDescription>
          </Alert>
        </CardContent>
      </Card>
    );
  };

  return (
    <div className="min-h-screen bg-gradient-to-b from-blue-50 to-white py-8">
      {currentStep === 'welcome' && <WelcomeScreen />}
      {currentStep === 'assessment' && <AssessmentScreen />}
      {currentStep === 'results' && <ResultsScreen />}
      
      <div className="max-w-4xl mx-auto mt-8 px-6">
        <div className="text-center text-sm text-gray-500">
          <p>Created by Dr. Iris | Clear Mind Secrets</p>
          <p className="mt-1">For educational purposes only. Not a substitute for medical advice.</p>
        </div>
      </div>
    </div>
  );
};

export default BrainFogRecoveryApp;