
import React, { useState } from 'react';
import { Card, CardHeader, CardContent, CardFooter } from '@/components/ui/card';
import { Checkbox } from '@/components/ui/checkbox';
import { Button } from '@/components/ui/button';
import { Progress } from '@/components/ui/progress';
import { AlertCircle, ThermometerSnowflake, Activity, Brain, Info } from 'lucide-react';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { Label } from '@/components/ui/label';
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';

const symptoms = [
  {
    category: "Sensory Symptoms",
    icon: <AlertCircle className="w-6 h-6 text-red-500" />,
    items: [
      { name: "Numbness or reduced sensation", score: 2 },
      { name: "Tingling or pins-and-needles sensations", score: 2 },
      { name: "Burning pain", score: 3 },
      { name: "Sharp, jabbing, or electric-like pain", score: 3 },
      { name: "Extreme sensitivity to touch", score: 2 },
      { name: "Decreased ability to feel temperature changes", score: 1 },
      { name: "Loss of proprioception", score: 2, info: "Proprioception is your body's ability to sense its position and movement in space. It's how you know where your limbs are without looking at them." },
    ]
  },
  {
    category: "Motor Symptoms",
    icon: <Activity className="w-6 h-6 text-blue-500" />,
    items: [
      { name: "Muscle weakness", score: 3 },
      { name: "Muscle cramping", score: 1 },
      { name: "Muscle twitching or fasciculations", score: 1 },
      { name: "Loss of muscle tone", score: 2 },
      { name: "Difficulty with fine motor tasks", score: 2 },
      { name: "Foot deformities", score: 2 },
    ]
  },
  {
    category: "Autonomic Symptoms",
    icon: <ThermometerSnowflake className="w-6 h-6 text-green-500" />,
    items: [
      { name: "Changes in blood pressure", score: 2 },
      { name: "Abnormal heart rate or rhythm", score: 2 },
      { name: "Digestive problems", score: 1 },
      { name: "Bladder dysfunction", score: 2 },
      { name: "Sexual dysfunction", score: 2 },
      { name: "Excessive or decreased sweating", score: 1 },
      { name: "Heat intolerance", score: 1 },
    ]
  },
  {
    category: "Other Associated Symptoms",
    icon: <Brain className="w-6 h-6 text-purple-500" />,
    items: [
      { name: "Balance problems and increased risk of falls", score: 3 },
      { name: "Changes in gait or walking pattern", score: 2 },
      { name: "Decreased reflexes", score: 1 },
      { name: "Restless leg syndrome", score: 1 },
      { name: "Sleep disturbances", score: 1 },
      { name: "Emotional changes due to chronic pain", score: 2 },
    ]
  }
];

const NeuropathySurvey = () => {
  const [checkedSymptoms, setCheckedSymptoms] = useState({});
  const [demographics, setDemographics] = useState({
    age: "",
    sex: "",
    duration: "",
    activityLevel: "",
    chronicDiseases: "",
    smoking: "",
    alcohol: "",
    diet: ""
  });
  const [showResults, setShowResults] = useState(false);

  const handleSymptomToggle = (symptom) => {
    setCheckedSymptoms(prev => ({
      ...prev,
      [symptom]: !prev[symptom]
    }));
  };

  const handleDemographicChange = (field, value) => {
    setDemographics(prev => ({
      ...prev,
      [field]: value
    }));
  };

  const calculateScore = () => {
    return symptoms.flatMap(category => category.items)
      .reduce((total, symptom) => 
        checkedSymptoms[symptom.name] ? total + symptom.score : total, 0);
  };

  const getResult = (score) => {
    if (score < 4) return { level: "No significant neuropathy detected", color: "text-green-600" };
    if (score < 13) return { level: "Mild neuropathy", color: "text-yellow-600" };
    if (score < 26) return { level: "Moderate neuropathy", color: "text-orange-600" };
    return { level: "Severe neuropathy", color: "text-red-600" };
  };

  const getResultDescription = (result) => {
    switch(result.level) {
      case "Mild neuropathy":
        return "You are at the beginning stages. This is the best time to turn the tide on neuropathy. While symptoms are mild, significant changes can typically be expected with little intervention before the nerves deteriorate any further. Your clinician can review your complete health history and conduct an in-person assessment to determine if you are a good candidate for our unique approach and the results you should expect.";
      case "Moderate neuropathy":
        return "This is a critical time to intervene before symptoms become severe. Once the nerves deteriorate further, you would require a significantly longer course of treatment and may not achieve ideal results, as there comes a point where some permanent nerve damage will remain. An in-person consultation is highly recommended to determine if our unique approach can turn the tide and help you return to a normal life filled with enjoyment.";
      case "Severe neuropathy":
        return "It is strongly recommended that you schedule a consultation as soon as possible. While our unique treatment approach can yield results where other methods fail, there is a point where nerve damage has become so severe that nothing can be done. We can perform a physical exam to assess the extent of sensory loss and better determine if our treatments can be effective and how much relief you can expect. Although we utilize a combination of ancient, time-tested acupuncture and modern therapies to enhance results, severe neuropathy typically requires a longer course of treatment.";
      default:
        return "Based on your responses, you may not be experiencing significant neuropathy symptoms at this time. However, if you have concerns about your nerve health, we recommend scheduling a consultation for a thorough evaluation.";
    }
  };

  const handleSubmit = () => {
    setShowResults(true);
  };

  return (
    <Card className="w-full max-w-4xl mx-auto my-8 p-6 bg-white shadow-lg rounded-lg">
      <CardHeader>
        <h2 className="text-2xl font-bold text-center text-gray-800 mb-4">
          Do You Have Peripheral Neuropathy?
        </h2>
        <p className="text-center text-gray-600 mb-6">
          Take this interactive survey to assess your symptoms and find out if you might be experiencing peripheral neuropathy.
        </p>
      </CardHeader>
      <CardContent>
        {!showResults ? (
          <>
            <div className="space-y-6 mb-6">
              <div>
                <Label htmlFor="age">Your Age:</Label>
                <input
                  id="age"
                  type="number"
                  value={demographics.age}
                  onChange={(e) => handleDemographicChange('age', e.target.value)}
                  className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
                  placeholder="Enter your age"
                />
              </div>
              <div>
                <Label>Sex:</Label>
                <RadioGroup onValueChange={(value) => handleDemographicChange('sex', value)}>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="male" id="male" />
                    <Label htmlFor="male">Male</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="female" id="female" />
                    <Label htmlFor="female">Female</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="other" id="other" />
                    <Label htmlFor="other">Other</Label>
                  </div>
                </RadioGroup>
              </div>
              <div>
                <Label htmlFor="duration">How long have you been experiencing symptoms?</Label>
                <input
                  id="duration"
                  type="text"
                  value={demographics.duration}
                  onChange={(e) => handleDemographicChange('duration', e.target.value)}
                  className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
                  placeholder="e.g., 6 months, 2 years"
                />
              </div>
              <div>
                <Label htmlFor="activityLevel">Activity Level:</Label>
                <Select onValueChange={(value) => handleDemographicChange('activityLevel', value)}>
                  <SelectTrigger>
                    <SelectValue placeholder="Select your activity level" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="sedentary">Sedentary</SelectItem>
                    <SelectItem value="light">Light Activity</SelectItem>
                    <SelectItem value="moderate">Moderate Activity</SelectItem>
                    <SelectItem value="high">High Activity</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label htmlFor="chronicDiseases">Do you have any chronic diseases? (e.g., diabetes)</Label>
                <input
                  id="chronicDiseases"
                  type="text"
                  value={demographics.chronicDiseases}
                  onChange={(e) => handleDemographicChange('chronicDiseases', e.target.value)}
                  className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
                  placeholder="List any chronic diseases"
                />
              </div>
              <div>
                <Label>Smoking Habits:</Label>
                <RadioGroup onValueChange={(value) => handleDemographicChange('smoking', value)}>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="non-smoker" id="non-smoker" />
                    <Label htmlFor="non-smoker">Non-smoker</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="former-smoker" id="former-smoker" />
                    <Label htmlFor="former-smoker">Former smoker</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="current-smoker" id="current-smoker" />
                    <Label htmlFor="current-smoker">Current smoker</Label>
                  </div>
                </RadioGroup>
              </div>
              <div>
                <Label>Alcohol Consumption:</Label>
                <RadioGroup onValueChange={(value) => handleDemographicChange('alcohol', value)}>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="none" id="none" />
                    <Label htmlFor="none">None</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="occasional" id="occasional" />
                    <Label htmlFor="occasional">Occasional</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="regular" id="regular" />
                    <Label htmlFor="regular">Regular</Label>
                  </div>
                </RadioGroup>
              </div>
              <div>
                <Label htmlFor="diet">How would you describe your diet?</Label>
                <p className="text-sm text-gray-500 mb-2">We all have different eating habits. Your honest answer helps us understand your overall health better.</p>
                <Select onValueChange={(value) => handleDemographicChange('diet', value)}>
                  <SelectTrigger>
                    <SelectValue placeholder="Select your typical diet" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="balanced">Balanced and Clean: I focus on whole, nutritious foods most of the time.</SelectItem>
                    <SelectItem value="pretty-good">Pretty Good: I maintain a healthy balanced diet with occasional treats.</SelectItem>
                    <SelectItem value="ok">OK: I include some healthy foods, but also eat processed foods and takeout regularly.</SelectItem>
                    <SelectItem value="poor">Could Use Improvement: I often choose convenience foods over healthier options.</SelectItem>
                    <SelectItem value="very-poor">Needs Work: I'm aware my diet isn't ideal, but change can be challenging.</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
            {symptoms.map((category, index) => (
              <div key={index} className="mb-6">
                <h3 className="text-lg font-semibold mb-3 flex items-center">
                  {category.icon}
                  <span className="ml-2">{category.category}</span>
                </h3>
                {category.items.map((symptom, symptomIndex) => (
                  <div key={symptomIndex} className="flex items-center mb-2">
                    <Checkbox
                      id={`symptom-${index}-${symptomIndex}`}
                      checked={checkedSymptoms[symptom.name] || false}
                      onCheckedChange={() => handleSymptomToggle(symptom.name)}
                    />
                    <label
                      htmlFor={`symptom-${index}-${symptomIndex}`}
                      className="ml-2 text-sm text-gray-700 flex items-center"
                    >
                      {symptom.name}
                      {symptom.info && (
                        <TooltipProvider>
                          <Tooltip>
                            <TooltipTrigger asChild>
                              <Info className="w-4 h-4 ml-1 text-gray-400 cursor-help" />
                            </TooltipTrigger>
                            <TooltipContent>
                              <p>{symptom.info}</p>
                            </TooltipContent>
                          </Tooltip>
                        </TooltipProvider>
                      )}
                    </label>
                  </div>
                ))}
              </div>
            ))}
            <Button onClick={handleSubmit} className="w-full mt-4">
              Submit Survey
            </Button>
          </>
        ) : (
          <div className="text-center">
            <h3 className="text-xl font-bold mb-4">Your Results</h3>
            <p className="text-lg mb-4">
              Based on your responses, you may have:
            </p>
            {(() => {
              const result = getResult(calculateScore());
              return (
                <p className={`text-2xl font-bold ${result.color} mb-6`}>
                  {result.level}
                </p>
              );
            })()}
            <Progress value={(calculateScore() / 50) * 100} className="mb-6" />
            <p className="text-gray-700 mb-6">
              {getResultDescription(getResult(calculateScore()))}
            </p>
            <p className="text-gray-700 mb-6">
              At our clinic, we understand how challenging living with peripheral neuropathy can be. Our team is dedicated to providing comprehensive, non-pharmaceutical approaches to manage these symptoms and get you back to living life. We're here to listen to your concerns and work with you to develop a personalized treatment plan that addresses your specific needs.
            </p>
            <p className="text-lg font-semibold mb-4">
              Take the first step and set up your consultation today.
            </p>
            <p className="text-xl">
              Our care coordinators are waiting to help you at{" "}
              <a href="tel:7166322207" className="text-indigo-600 font-bold">
                (716) 632-2207
              </a>
            </p>
          </div>
        )}
      </CardContent>
    </Card>
  );
};

export default NeuropathySurvey;


Enhanced Interactive Neuropathy Survey with Info Button and Color-Coded Results