import { useFieldArray, useFormContext } from "react-hook-form";
import { jobRoles } from "../../../../data/jobRoles";
import { GoogleGenAI } from "@google/genai";
import { useEffect, useState } from "react";
import { useCheckSubscriptionStatus } from "../../../../utils/hooks/useCheckSubscriptionStatus";
import { AxiosResponse } from "axios";
import Swal from "sweetalert2";
import { useRouter } from "next/router";
import useGenerateAIResponse from "../../../../utils/hooks/useGenerateAIResponse";

const Experience = () => {
  const [isSubscribed, setIsSubscribed] = useState(false);
  const [isGeneratingExperience, setIsGeneratingExperience] =
    useState<boolean>(false);
  const router = useRouter();

  const {
    control,
    register,
    watch,
    setValue,
    getValues,
    formState: { errors },
  } = useFormContext();
  const { fields, append, remove } = useFieldArray({
    control,
    name: "experence",
  });

  const watchExperience = watch("experence");

  const handleCurrentlyWorkingToggle = (index: number) => {
    const isCurrentlyWorking = !watchExperience[index]?.currentlyWorking;
    setValue(`experence.${index}.currentlyWorking`, isCurrentlyWorking);

    if (isCurrentlyWorking) {
      setValue(`experence.${index}.endDate`, null);
      fields.forEach((_, i) => {
        if (i !== index) {
          setValue(`experence.${i}.currentlyWorking`, false);
        }
      });
    }
  };

  useEffect(() => {
    checkSubscriptionStatus();
  }, []);

  const checkSubscriptionStatus = async () => {
    const response = await useCheckSubscriptionStatus();
    const { data } = response as AxiosResponse<SubscriptionResponse>;
    const hasActiveSubscription = data.has_active_subscription;
    if (hasActiveSubscription) {
      setIsSubscribed(true);
    }
  };

  const handleGenerateViaAI = async (index: number) => {
    if (!isSubscribed) {
      const { value: exp } = await Swal.fire({
        title: "Subscription Required",
        text: "You need to subscribe to get access to this feature",
        icon: "warning",
        showCancelButton: true,
        confirmButtonText: "Subscribe",
        cancelButtonText: "Cancel",
      });

      if (exp) {
        router.push("/subscription");
        return;
      } else {
        return;
      }
    }

    const { value: exp } = await Swal.fire({
      title: "Provide brief points about your experience",
      text: "This is optional",
      input: "textarea",
      inputPlaceholder: "e.g. used MERN stack, fixed bugs, worked in a team...",
      showCancelButton: true,
      confirmButtonText: "Generate",
      cancelButtonText: "Cancel",
    });

    try {
      setIsGeneratingExperience(true);
      const prompt = `You are a job seeker creating a resume. Generate a list of experiences in a professional manner. Keep the format nice and compact.

      Experiences: ${exp}

      IMPORTANT:
      Strictly follow the format of a projects details section from a professional job description.
      No extra text should be added.
      `;

      const text = await useGenerateAIResponse(prompt);
      setValue(`experence.${index}.description`, text, {
        shouldValidate: true,
      });
    } catch (error) {
      console.error(error);
      Swal.fire({
        title: "Error",
        text: "Error writing via AI",
        icon: "error",
      });
    } finally {
      setIsGeneratingExperience(false);
    }
  };

  return (
    <div
      style={{
        backgroundColor: "#b9f2ed",
        padding: "40px",
        marginBottom: "20px",
      }}
    >
      {fields.map((section, index) => (
        <div key={section.id} className="ls-widget">
          <div className="tabs-box">
            <div className="widget-title">
              <h4>Experience {index + 1}</h4>
              {index !== 0 && (
                <button
                  className="hc_button_when_bg_white"
                  onClick={() => remove(index)}
                >
                  ×
                </button>
              )}
            </div>
            <div className="widget-content">
              <div className="row">
                <div className="form-group col-lg-6 col-md-12">
                  <label>Role</label>
                  <select
                    {...register(`experence.${index}.role`, {
                      required: "Role is required",
                    })}
                    defaultValue=""
                  >
                    <option value="" disabled hidden>
                      Select Roll
                    </option>
                    {jobRoles.map((role) => (
                      <option key={role} value={role}>
                        {role}
                      </option>
                    ))}
                  </select>
                  {errors.experence &&
                    Array.isArray(errors.experence) &&
                    errors.experence[index]?.experienceTitle && (
                      <p className="text-danger">
                        {errors.experence[index].experienceTitle.message}
                      </p>
                    )}
                </div>
                <div className="form-group col-lg-6 col-md-12">
                  <label>Company Name</label>
                  <input
                    type="text"
                    {...register(`experence.${index}.company`, {
                      required: "Company is required",
                    })}
                  />
                  {errors.experence &&
                    Array.isArray(errors.experence) &&
                    errors.experence[index]?.company && (
                      <p className="text-danger">
                        {errors.experence[index].company.message}
                      </p>
                    )}
                </div>
                <div className="form-group col-lg-5 col-md-12">
                  <label>Start Date</label>
                  <input
                    type="date"
                    {...register(`experence.${index}.startDate`, {
                      required: "Start Date is required",
                    })}
                  />
                  {errors.experence &&
                    Array.isArray(errors.experence) &&
                    errors.experence[index]?.startDate && (
                      <p className="text-danger">
                        {errors.experence[index].startDate.message}
                      </p>
                    )}
                </div>
                <div className="form-group col-lg-5 col-md-12">
                  {!watchExperience[index]?.currentlyWorking && (
                    <>
                      <label>End Date</label>
                      <input
                        type="date"
                        min={watchExperience[index]?.startDate}
                        {...register(`experence.${index}.endDate`, {
                          required:
                            !watchExperience[index]?.currentlyWorking &&
                            "End Date is required",
                          validate: (value) =>
                            value >= watchExperience[index]?.startDate ||
                            "End Date cannot be earlier than Start Date",
                        })}
                      />
                      {errors.experence &&
                        Array.isArray(errors.experence) &&
                        errors.experence[index]?.endDate && (
                          <p className="text-danger">
                            {errors.experence[index].endDate.message}
                          </p>
                        )}
                    </>
                  )}
                </div>
                <div className="form-group col-lg-2 col-md-12">
                  <label>Currently Working</label>
                  <label className="switch">
                    <input
                      type="checkbox"
                      {...register(`experence.${index}.currentlyWorking`)}
                      onChange={() => handleCurrentlyWorkingToggle(index)}
                    />
                    <span className="slider"></span>
                  </label>
                </div>
                <div className="form-group col-lg-12 col-md-12">
                  <label>Summarize what you did</label>
                  <textarea
                    {...register(`experence.${index}.description`, {
                      required: "Description is required",
                    })}
                    placeholder="Managed procurement contracts across 3 departments and reduced stock delays by 25% in under 6 months"
                  />
                  {errors.experence &&
                    Array.isArray(errors.experence) &&
                    errors.experence[index]?.description && (
                      <p className="text-danger">
                        {errors.experence[index].description.message}
                      </p>
                    )}
                  <div className="d-flex justify-content-end mt-3">
                    {!isGeneratingExperience ? (
                      <button
                        type="button"
                        onClick={() => handleGenerateViaAI(index)}
                        className="theme-btn btn-style-one"
                      >
                        Generate via AI
                      </button>
                    ) : (
                      <button className="theme-btn btn-style-one" disabled>
                        Generating...
                      </button>
                    )}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      ))}
      <div className="pb-3">
        <button
          type="button"
          className="theme-btn btn-style-one"
          onClick={() => append({})}
        >
          Add New Experience
        </button>
      </div>
    </div>
  );
};

export default Experience;