import React, { useState } from "react";
import { Form, Field } from "react-final-form";
import Slider from "@mui/material/Slider";
import { useLazySendTestVersionQuery } from "../store/api/chatApi";
import { LuLoader2 } from "react-icons/lu";
import { Link } from "react-router-dom";
interface FormValues {
  age?: number;
  height?: number;
  weight?: number;
  healthGoal?: string;
  dietType?: string;
  exerciseLevel?: string;
  hydrationGoal?: string;
  userInput?: string;
}


const MultiStepForm: React.FC = () => {
  const [formValues, setFormValues] = useState<FormValues>({});
  const [stage, setStage] = useState<number>(1);
  const [data, setData] = useState<string | null>(null)

  const [sendTestMessage, { isLoading, isFetching }] = useLazySendTestVersionQuery()

  const nextStage = () => setStage((prev) => prev + 1);
  const previousStage = () => setStage((prev) => prev - 1);

  const saveFormData = (values: FormValues) => {
    setFormValues((prev) => ({
      ...prev,
      ...values,
    }));
  };

  const onSubmit = (values: FormValues) => {
    saveFormData(values);
    nextStage();
  };
  console.log(isLoading)

  const finalSubmit = async () => {
    const res = await sendTestMessage(formValues).unwrap()
    setData(res)
  };

  const selectEmoji = (
    value: number | undefined,
    thresholds: number[],
    emojis: string[]
  ) => {
    if (value === undefined) return null;
    if (value <= thresholds[0]) return emojis[0];
    if (value <= thresholds[1]) return emojis[1];
    return emojis[2];
  };

  return !data ? (
    <div className="w-full max-w-md bg-white rounded-lg shadow-lg p-8 text-center">

      <h1 className="text-2xl font-bold text-gray-700 mb-6">
        Fill in your profile and get some advices
      </h1>

      <Form<FormValues>
        onSubmit={onSubmit}
        initialValues={formValues}
        render={({ handleSubmit, values }) => (
          <form onSubmit={handleSubmit}>
            {stage === 1 && (<> <div>
              <h2 className="text-xl font-semibold text-gray-600 mb-4">
                Stage 1: Base information
              </h2>
              <div className="text-3xl mb-4">
                {selectEmoji(values.age, [17, 50], ["👶", "🧑", "👴"])}
              </div>
              <Field
                name="age"
                parse={(value) => (value === "" ? 0 : Number(value))}
              >
                {({ input }) => (
                  <input
                    {...input}
                    type="number"
                    placeholder="Enter age"
                    min={0}
                    max={100}
                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-indigo-500"
                  />
                )}
              </Field>

            </div>



              <div>

                <div className="text-3xl mb-4">
                  {selectEmoji(values.height, [150, 175], ["🌱", "🌳", "🌲"])}
                </div>
                <Field
                  name="height"
                  parse={(value) => (value === "" ? 0 : Number(value))}
                >
                  {({ input }) => (
                    <input
                      {...input}
                      type="number"
                      placeholder="Enter height"
                      min={0}
                      max={250}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-indigo-500"
                    />
                  )}
                </Field>

              </div>
              <div >
                <h2 className="text-xl font-semibold text-gray-600 mb-4">
                </h2>
                <Field<string> name="dietType" component="select" className="w-full p-3 border border-gray-300 rounded-lg text-gray-800 focus:outline-none focus:border-blue-500">
                  <option value="">Select your goal</option>
                  <option value="weight_loss">Weight Loss</option>
                  <option value="muscle_gain">Muscle Gain</option>
                  <option value="improve_energy">Improve Energy</option>
                  <option value="enhance_focus">Enhance Focus</option>
                  <option value="general_health">General Health</option>
                </Field>

              </div>


              <div>
                <div className="text-3xl mb-4">
                  {selectEmoji(values.weight, [70, 99], ["🐭", "🐱", "🐘"])}
                </div>
                <Field
                  name="weight"
                  parse={(value) => (value === "" ? 0 : Number(value))}
                >
                  {({ input }) => (
                    <div>
                      <Slider
                        value={input.value || 0}
                        onChange={(_, value) =>
                          input.onChange(
                            Array.isArray(value) ? value[0] : value
                          )
                        }
                        min={0}
                        max={200}
                        className="text-indigo-500"
                      />
                      <div className="text-gray-600 mt-2">
                        Current Weight: {input.value || 0} kg
                      </div>
                    </div>
                  )}
                </Field>
                <div className="flex justify-end">

                  <button
                    type="button"
                    onClick={nextStage}
                    className="px-4 py-2 bg-bright-blue text-white rounded-md hover:bg-indigo-500"
                  >
                    Next
                  </button>
                </div>
              </div>
            </>)}


            {stage === 2 && (
              <>
                <div>
                  <h2 className="text-xl font-semibold text-gray-600 mb-4">
                    Stage 2: Details
                  </h2>


                </div>


                <div className="text-start">
                  <div className="mb-4">
                    <label className="text-gray-700 mb-2 block">Diet Type</label>
                    <Field<string> name="dietType" component="select" className="w-full p-3 border border-gray-300 rounded-lg text-gray-800 focus:outline-none focus:border-blue-500">
                      <option value="">Select diet type</option>
                      <option value="keto">Keto</option>
                      <option value="low_carb">Low Carb</option>
                      <option value="intermittent_fasting">Intermittent Fasting</option>
                      <option value="mediterranean">Mediterranean</option>
                    </Field>
                  </div>
                  <div className="mb-4">
                    <label className="text-gray-700 mb-2 block">Exercise Level</label>
                    <Field<string> name="exerciseLevel" component="select" className="w-full p-3 border border-gray-300 rounded-lg text-gray-800 focus:outline-none focus:border-blue-500">
                      <option value="">Select exercise level</option>
                      <option value="beginner">Beginner</option>
                      <option value="intermediate">Intermediate</option>
                      <option value="advanced">Advanced</option>
                    </Field>
                  </div>
                  <div className="mb-4">
                    <label className="text-gray-700 mb-2 block">Hydration Goal</label>
                    <Field<string> name="hydrationGoal" component="select" className="w-full p-3 border border-gray-300 rounded-lg text-gray-800 focus:outline-none focus:border-blue-500">
                      <option value="">Select hydration goal</option>
                      <option value="2_liters">2 Liters</option>
                      <option value="3_liters">3 Liters</option>
                      <option value="4_liters">4 Liters</option>
                    </Field>
                  </div>
                  <div className="mb-4">
                    <label className="text-gray-700 mb-2 block">Your Preferences</label>
                    <Field<string> name="userInput" component="input" type="text" placeholder="Enter your preferences or comments" className="w-full p-3 border border-gray-300 rounded-lg text-gray-800 focus:outline-none focus:border-blue-500" />
                  </div>
                  <div className="flex justify-between">
                    <button type="button" onClick={previousStage} className="px-4 py-2 bg-gray-400 text-white rounded-md hover:bg-gray-500">
                      Previous
                    </button>
                    <button type="submit" className="px-4 py-2 bg-bright-blue text-white rounded-md hover:bg-indigo-500">
                      Next
                    </button>
                  </div>
                </div>
              </>
            )}
            {stage === 3 && (
              <div className="text-start">
                <h2 className="text-xl font-semibold text-gray-600 mb-4 text-center">Summary</h2>
                <p><strong>Age:</strong> {formValues.age}</p>
                <p><strong>Height:</strong> {formValues.height} cm</p>
                <p><strong>Weight:</strong> {formValues.weight} kg</p>
                <p><strong>Health Goal:</strong> {formValues.healthGoal}</p>
                <p><strong>Diet Type:</strong> {formValues.dietType || "Not specified"}</p>
                <p><strong>Exercise Level:</strong> {formValues.exerciseLevel || "Not specified"}</p>
                <p><strong>Hydration Goal:</strong> {formValues.hydrationGoal || "Not specified"}</p>
                <p><strong>User Input:</strong> {formValues.userInput || "Not specified"}</p>
                <div className="flex justify-between mt-4">
                  <button type="button" disabled={isLoading} onClick={previousStage} className="px-4 py-2 bg-gray-400 text-white rounded-md hover:bg-gray-500">
                    Previous
                  </button>
                  <button type="button" disabled={isLoading} onClick={finalSubmit} className="px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600">
                    {isLoading || isFetching ? <LuLoader2 className="animate-spin" /> : 'Confirm'}
                  </button>
                </div>
              </div>
            )}
          </form>
        )}
      />
    </div>
  ) : (<div className="w-full flex flex-col items-center gap-6">
    <h1 className="text-4xl flex items-center sm:text-5xl md:text-6xl font-semibold mb-4 text-center text-dark-blue">
      Advices for your health
    </h1>
    <p className="w-1/2">{data}</p>
    <div className="flex gap-2 items-center">
      <Link to='/dashboard'>
        <button className="bg-bright-blue text-white font-medium py-2 px-5 rounded hover:bg-deep-blue transition duration-300 shadow-md">
          Get started with full version
        </button>
      </Link>
      <button onClick={() => { setData(null), setStage(1) }} className="px-4 py-2 bg-gray-400 text-white rounded-md hover:bg-gray-500">
        Try again
      </button>

    </div>
  </div>
  )
};

export default MultiStepForm;