'use client'

import React, { useEffect, useState } from 'react'
import { areasOfExpertise } from '@/app/expertForm/utils/listOfExpertise'
import { listOfLanguages } from '@/app/expertForm/utils/listOfLanguages'
import 'react-phone-number-input/style.css'
import PhoneInput from 'react-phone-number-input'
import { updateUser } from './action'
import { useRouter } from 'next/navigation'
import { countries } from '@/app/expertForm/utils/listOfCountries'
import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/react/24/outline'

const ExpertProfileForm = ({ userInfo, profileImg }) => {
  const [biography, setBiography] = useState('')

  console.log({ userInfo })

  const [formData, setFormData] = useState({
    lastName: userInfo.lastName || '',
    firstName: userInfo.firstName || '',
    username: userInfo.userName || '', // Make sure to align the names (`username` in state vs `userName` in fetched userInfo)
    phone: userInfo.phone || '',
    state: userInfo.state || '',
    city: userInfo.city || '',
    role: userInfo.role,
    zipCode: userInfo.zipcode || '', // Ensure alignment of `zipCode` in state vs `zipcode` in fetched userInfo
    rate: userInfo.rate || '',
    countryOfResidence: userInfo.countryOfResidence,

    languagesSpoken: userInfo.languagesSpoken || [], // This needs to be an array. Adjust based on how languages are stored or fetched.
    occupation: userInfo.role || '', // Occupation isn't directly provided in fetched userInfo. Adjust accordingly.
    dateOfBirth: userInfo.dateOfBirth
      ? new Date(userInfo.dateOfBirth).toISOString().split('T')[0]
      : '', // Format date for input[type=date]
    photoUrl: null, // Photo handling depends on how you're managing images. Adjust accordingly.
    biography: userInfo.biography || biography,
    linkedInURL: userInfo.linkedInURL || '',
    instagramURL: userInfo.instagramURL || '',
    youtubeURL: userInfo.youtubeURL || '',
    spotifyURL: userInfo.spotifyURL || '',
    tiktokURL: userInfo.tiktokURL || '',
    twitterURL: userInfo.twitterURL || '',
    amazonURL: userInfo.amazonURL || '',
    websiteURL1: userInfo.websiteURL1 || '',
    websiteURL2: userInfo.websiteURL2 || '',
  })
  const router = useRouter()

  const [imagePreview, setImagePreview] = useState('')
  const [selectedLanguage, setSelectedLanguage] = useState([])
  const [validationErrors, setValidationErrors] = useState({})

  const [showExperienceSection, setShowExperienceSection] = useState(false) // State to track the visibility of the experience section
  const [showEducationSection, setShowEducationSection] = useState(false) // State to track the visibility of the experience section
  const [showExpertiseSection, setShowExpertiseSection] = useState(false) // State to track the visibility of the experience section

  const [educations, setEducations] = useState([])
  const [experiences, setExperiences] = useState([])
  const [expertises, setExpertises] = useState([])

  const maxCharCount = 380 // Example limit similar to a tweet  const [newExpertise, setNewExpertise] = useState('')

  const [stateCode, setStateCode] = useState('')
  const [showCityInput, setShowCityInput] = useState(true)
  const [videoURLs, setVideoURLs] = useState([])
  const [submited, setSubmited] = useState(false)
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    console.log({ userInfo })
    setBiography(userInfo.biography)
    setExperiences(userInfo.experiences)
    setEducations(userInfo.educations)
  }, [])

  useEffect(() => {
    console.log({ formData })
  }, [formData])

  const handleChange = (e) => {
    const { name, value } = e.target

    setFormData((prevFormData) => ({
      ...prevFormData,
      [name]: value,
    }))
  }

  const calculateDuration = (startDate, endDate, isCurrent) => {
    console.log({ startDate }, { endDate }, { isCurrent })

    if (!startDate) return ''

    const start = new Date(startDate)
    const end = isCurrent ? new Date() : new Date(endDate)

    if (isCurrent || end) {
      const diffInMonths =
        (end.getFullYear() - start.getFullYear()) * 12 +
        end.getMonth() -
        start.getMonth()
      const years = Math.floor(diffInMonths / 12)
      const months = diffInMonths % 12

      let duration = ''
      if (years > 0) duration += `${years} year${years > 1 ? 's' : ''}`
      if (months > 0)
        duration += `${duration ? ', ' : ''}${months} month${
          months > 1 ? 's' : ''
        }`
      return duration
    }

    return ''
  }

  const toggleExperienceSection = () => {
    setShowExperienceSection((prevShow) => !prevShow)
  }

  const toggleExpertiseSection = () => {
    setShowExpertiseSection((prevShow) => !prevShow)
  }

  const toggleEducationSection = () => {
    setShowEducationSection((prevShow) => !prevShow)
  }

  const handleExperienceChange = (index, event) => {
    const updatedExperiences = [...experiences]
    const { name, value, type, checked } = event.target

    // If "isCurrent" is checked, clear "endDate" for UI purposes
    if (name === 'isCurrent') {
      updatedExperiences[index] = {
        ...updatedExperiences[index],
        [name]: checked,
        endDate: checked ? 'Present' : updatedExperiences[index].endDate, // Keep this line if you wish to retain the previous endDate value in state
      }
    } else {
      updatedExperiences[index] = {
        ...updatedExperiences[index],
        [name]: value,
      }
    }

    // Recalculate duration anytime startDate, endDate, or isCurrent changes
    if (name === 'startDate' || name === 'endDate' || name === 'isCurrent') {
      const { startDate, endDate, isCurrent } = updatedExperiences[index]
      updatedExperiences[index].duration = calculateDuration(
        startDate,
        endDate,
        isCurrent
      )
    }

    setExperiences(updatedExperiences)
  }

  const addExperience = () => {
    setShowExperienceSection(true)

    setExperiences([
      ...experiences,
      {
        companyName: '',
        role: '',
        startDate: '',
        endDate: '',
        isCurrent: false,
        duration: '',
        description: '',
      },
    ])
  }

  const removeExperience = (index) => {
    const filteredExperiences = experiences.filter((_, i) => i !== index)
    setExperiences(filteredExperiences)
  }

  const handleAddLanguage = () => {
    if (
      selectedLanguage &&
      !formData.languagesSpoken.includes(selectedLanguage)
    ) {
      console.log('add a language', selectedLanguage)

      setFormData({
        ...formData,
        languagesSpoken: [...formData.languagesSpoken, selectedLanguage],
      })
      setSelectedLanguage('') // Reset the selected language
    }
  }

  const handleRemoveLanguage = (language) => {
    setFormData({
      ...formData,
      languagesSpoken: formData.languagesSpoken.filter(
        (lang) => lang !== language
      ),
    })
  }

  const handleKeyPress = (event) => {
    if (event.key === 'Enter') {
      event.preventDefault()
      handleAddLanguage()
    }
  }

  //  handle education change
  const handleEducationChange = (index, event) => {
    const updatedEducations = [...educations]
    const { name, value, type, checked } = event.target

    if (type === 'checkbox' && name === 'isCurrent') {
      updatedEducations[index] = {
        ...updatedEducations[index],
        [name]: checked,
        endDate: 'Present', // Clear endDate if "isCurrent" is checked
      }
    } else {
      updatedEducations[index] = {
        ...updatedEducations[index],
        [name]: value,
      }
    }

    // Recalculate duration anytime startDate, endDate, or isCurrent changes
    if (name === 'startDate' || name === 'endDate' || name === 'isCurrent') {
      const { startDate, endDate, isCurrent } = updatedEducations[index]
      updatedEducations[index].duration = calculateDuration(
        startDate,
        endDate,
        isCurrent
      )
    }

    setEducations(updatedEducations)
  }

  // Handle removing a specific skill

  const addEducation = () => {
    setShowEducationSection(true)
    setEducations([
      ...educations,
      {
        institutionName: '',
        diplomaTitle: '',
        fieldOfStudy: '',
        startDate: '',
        endDate: '',
        isCurrent: false,
        duration: '',
      },
    ])
  }

  const removeEducation = (index) => {
    const filteredEducations = educations.filter((_, i) => i !== index)
    setEducations(filteredEducations)
  }

  // Expertise

  //handle Add Expertise
  const addExpertise = (index) => {
    setShowExpertiseSection(true)
    setExpertises([
      ...expertises,
      {
        field: '',
        startDate: '',
        endDate: '',
        isCurrent: false,
        description: '',
        duration: '',
        duration: '',
      },
    ])
  }

  const handleExpertiseChange = (index, event) => {
    const updatedExpertises = [...expertises]
    const { name, value, type, checked } = event.target

    if (name === 'isCurrent') {
      updatedExpertises[index] = {
        ...updatedExpertises[index],
        [name]: checked,
        endDate: checked ? 'Present' : updatedExpertises[index].endDate, // Clear endDate if isCurrent is true
      }
    } else {
      updatedExpertises[index] = {
        ...updatedExpertises[index],
        [name]: value,
      }
    }

    // Update duration on date change or isCurrent toggle
    if (name === 'startDate' || name === 'endDate' || name === 'isCurrent') {
      const { startDate, endDate, isCurrent } = updatedExpertises[index]
      updatedExpertises[index].duration = calculateDuration(
        startDate,
        endDate,
        isCurrent
      )
    }

    setExpertises(updatedExpertises)
  }

  const handleCustomFieldChange = (index, event) => {
    const updatedExpertises = [...expertises]
    updatedExpertises[index] = {
      ...updatedExpertises[index],
      customField: event.target.value, // Assuming you store the custom input in a separate attribute
    }
    setExpertises(updatedExpertises)
  }

  const removeExpertise = (index) => {
    const filteredExpertises = expertises.filter((_, i) => i !== index)
    setExpertises(filteredExpertises)
  }

  const handlePhoneChange = (phone) => {
    setFormData((prevFormData) => ({
      ...prevFormData,
      phone: phone,
    }))
  }

  const validateForm = () => {
    const errors = {}

    // Validate photo
    if (!imagePreview) {
      // Assuming `imagePreview` is set when a photo is selected
      errors.photo = 'A profile photo is required.'
      console.log('photo')
    }

    if (!formData.firstName) {
      errors.firstName = 'First name is required'
    }

    if (!formData.lastName) {
      errors.lastName = 'Last name is required'
    }

    if (!formData.zipCode) {
      errors.zipCode = 'Zip name is required'
    }

    if (!formData.biography) {
      errors.bio = 'Biography is required'
    }

    if (formData.biography.length < 250) {
      errors.bioLength = 'Biography must be at least 250 charactére'
    }

    if (!formData.occupation) {
      errors.occupation = 'Occupation is required'
    }

    if (!formData.rate) {
      errors.rate = 'rate is required (you can change it later)'
    }

    // Validate experiences
    if (experiences.length === 0) {
      errors.experiences = 'At least one experience is required.'
      console.log('experience')
    }

    // Validate educations
    if (educations.length === 0) {
      errors.educations = 'At least one education is required.'
      console.log('education')
    }

    // Validate expertises
    if (expertises.length === 0) {
      errors.expertises = 'At least one expertise is required.'
      console.log('eexpertise')
    }

    // Validate languages
    if (formData.languagesSpoken.length < 1) {
      errors.languages = 'At least one language is required.'
      console.log('At least one language is required.')
    }

    setValidationErrors(errors)
    return Object.keys(errors).length === 0
  }

  const handleSubmit = (e) => {
    e.preventDefault() // Prevent default form submission behavior

    setLoading(true)

    // if (validateForm()) {
    console.log('Form is valid. Submitting...')
    // Prepare data for submission, including formData, experiences, educations, expertises, and photo
    const submissionData = {
      ...formData, // Contains languagesSpoken,and other details
      experiences,
      educations,
      expertises,
      photo: formData.photo, // Ensure this correctly references the selected file
    }
    console.log(submissionData)

    let fileToUpload = formData.photo

    const data = new FormData()

    data.set('file', fileToUpload)

    try {
      console.log(0)

      let fileUrl

      fetch('/api/upload', {
        method: 'POST',
        body: data, // This is your request payload, for example, a FormData object
      })
        .then((response) => {
          if (!response.ok) {
            throw new Error('Network response was not ok')
          }
          console.log({ response })
          setLoading(false)

          return response.json() // Parses the response body as JSON
        })
        .then((data) => {
          console.log(data)
          fileUrl = data.path // 'data' contains the parsed JSON object from the server response
          const fileName = data.fileName
          console.log(1)

          const expertData = {
            ...submissionData, // Include other form data here
            biography: biography,
            photoUrl: fileUrl,
            photoName: fileName,
          }
          console.log(2, { expertData })

          const dataa = JSON.parse(JSON.stringify(expertData))
          console.log(2, { dataa })

          updateUser(userInfo.id, dataa)
            .then((expert) => {
              setLoading(false)

              console.log('Expert profile created:', expert)

              setSubmited(true)

              // Further actions upon successful creation
            })
            .catch((error) => {
              setLoading(false)

              console.error('Error updating user profile:', error)
            })
        })
        .catch((error) => {
          setLoading(false)

          console.error('Error:', error)
        })

      console.log(6)
    } catch (error) {
      setLoading(false)

      console.error('Error uploading file:', error)
    }

    // Submit the data here (API call or other means)
    // } else {
    //     console.error("Form validation failed.");
    // }
  }

  console.log({ imagePreview })

  const handleFileChange = (e) => {
    const file = e.target.files[0]
    if (file) {
      setFormData({ ...formData, photo: file })
      setImagePreview(URL.createObjectURL(file))
    }
  }

  const handleBiographyChange = (e) => {
    const inputText = e.target.value
    if (inputText.length <= maxCharCount) {
      setBiography(inputText)
    }
  }

  const handleAddVideoURL = (newURL) => {
    if (newURL && !videoURLs.includes(newURL)) {
      setVideoURLs((prevURLs) => [...prevURLs, newURL])
    }
  }

  const handleRemoveVideoURL = (index) => {
    setVideoURLs((prevURLs) => prevURLs.filter((_, i) => i !== index))
  }

  return (
    <form
      onSubmit={(e) => handleSubmit(e)}
      className="space-y-6 p-8 bg-white shadow rounded-lg max-w-4xl mx-auto"
    >
      {/* profile pic */}

      <div>
        <label
          htmlFor="profilePicture"
          className="block text-lg font-medium text-gray-700"
        >
          Profile Picture *
        </label>
        {validationErrors.photo && (
          <p className="text-red-500 text-xs italic">
            {validationErrors.photo}
          </p>
        )}
        <div className="mt-4 flex items-center justify-center">
          <span className="inline-block h-24 w-24 rounded-full overflow-hidden bg-gray-100">
            {console.log({ profileImg })}
            {imagePreview || profileImg ? (
              <img
                src={`${
                  process.env.NEXT_PUBLIC_WEBSITE_URL
                }/api/serveFiles?filename=${encodeURIComponent(
                  userInfo.imageName
                )}`}
                alt="Profile Preview"
                className="h-full w-full text-gray-300"
                fill="currentColor"
              />
            ) : (
              <svg
                className="h-full w-full text-gray-300"
                fill="currentColor"
                viewBox="0 0 24 24"
              >
                <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" />
              </svg>
            )}
          </span>
          <input
            id="profilePicture"
            name="profilePicture"
            type="file"
            className="hidden"
            onChange={handleFileChange}
          />
          <button
            type="button"
            className="ml-5 bg-blue-500 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded"
            onClick={() => document.getElementById('profilePicture').click()}
          >
            {imagePreview ? 'Change' : 'Upload'}
          </button>
        </div>
      </div>

      {/* Name Field */}
      {/* <div className="grid grid-cols-1 gap-6 md:grid-cols-2"> */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 px-2 py-2 bg-blue-50 rounded-md">
        <div className="">
          <label
            htmlFor="firstName"
            className="block text-lg font-semibold text-gray-700  "
          >
            First Name *
          </label>
          <input
            type="text"
            name="firstName"
            id="firstName"
            required
            value={formData.firstName}
            onChange={handleChange}
            className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"
          />
        </div>
        <div>
          <label
            htmlFor="lastName"
            className="block text-lg font-semibold text-gray-700"
          >
            Last Name *
          </label>
          <input
            type="text"
            name="lastName"
            id="lastName"
            required
            value={formData.lastName}
            onChange={handleChange}
            className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"
          />
        </div>
      </div>

      {/* Additional Fields */}
      {/* Username Field */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6  px-2 py-2 bg-blue-50 rounded-md">
        <div>
          <label
            htmlFor="username"
            className="block text-lg font-semibold text-gray-700"
          >
            Username
          </label>
          <input
            type="text"
            name="username"
            id="username"
            value={formData.username}
            onChange={handleChange}
            className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"
            placeholder="Your Username"
          />
        </div>
        <div>
          <label
            htmlFor="phone"
            className="block text-lg font-semibold text-gray-700"
          >
            Phone *
          </label>
          <div className="mt-1 relative rounded-md shadow-sm">
            <PhoneInput
              placeholder="Enter phone number"
              className="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"
              value={formData.phone}
              onChange={handlePhoneChange}
            />
          </div>
        </div>
      </div>

      {/* Date of Birth Field */}
      <div className="space-y-6   px-2 py-4 bg-blue-50 rounded-md ">
        {/* Date of Birth Field */}
        <div>
          <label
            htmlFor="dateOfBirth"
            className="block text-lg font-semibold text-gray-700"
          >
            Date of Birth
          </label>
          <input
            type="date"
            name="dateOfBirth"
            id="dateOfBirth"
            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50"
            value={formData.dateOfBirth}
            onChange={handleChange}
          />
        </div>

        {/* Country of Residence Field */}
        <div>
          <label
            htmlFor="countryOfResidence"
            className="block text-lg font-semibold text-gray-700"
          >
            Country of Residence *
          </label>

          <select
            name="countryOfResidence"
            id="countryOfResidence"
            value={formData.countryOfResidence}
            onChange={handleChange}
            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50"
            required
          >
            <option value="">Select a country</option>
            {countries.map((country, index) => {
              return <option value={country.name}>{country.name}</option>
            })}
          </select>
        </div>

        {/* State Input */}
        <div>
          <label
            htmlFor="state"
            className="block text-lg font-semibold text-gray-700"
          >
            State
          </label>
          <input
            type="text"
            name="state"
            id="state"
            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50"
            value={formData.state}
            onChange={handleChange}
            placeholder="Enter state"
          />
        </div>

        {/* City Input */}
        <div>
          <label
            htmlFor="city"
            className="block text-lg font-semibold text-gray-700"
          >
            City *
          </label>
          <input
            type="text"
            name="city"
            id="city"
            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50"
            value={formData.city}
            onChange={handleChange}
            placeholder="Enter city"
            required
          />
        </div>

        {/* Zip Code Input */}
        <div>
          <label
            htmlFor="zipCode"
            className="block text-lg font-semibold text-gray-700"
          >
            Zip Code *
          </label>
          <input
            type="text"
            name="zipCode"
            id="zipCode"
            value={formData.zipCode}
            onChange={handleChange}
            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50"
          />
        </div>
      </div>
      {/* </div> */}

      {/* Languages Spoken Field */}
      <div className="space-y-6 px-2 py-4 bg-blue-50 rounded-md">
        {/* Languages Spoken Field */}
        <div className="md:col-span-2">
          {validationErrors.languages && (
            <p className="text-red-500 text-sm font-semibold italic">
              {validationErrors.languages}
            </p>
          )}

          <label
            htmlFor="languagesSpoken"
            className="block text-lg font-semibold text-gray-700"
          >
            Languages Spoken *
          </label>
          <div className="mt-1 flex flex-wrap items-center border border-gray-300 rounded-md p-2">
            {formData.languagesSpoken?.map((language, index) => (
              <div
                key={index}
                className="flex items-center m-1 bg-blue-100 rounded px-2 py-1 text-sm"
              >
                {language.name}
                <button
                  type="button"
                  onClick={() => handleRemoveLanguage(language)}
                  className="ml-2 text-blue-500 hover:text-blue-700"
                >
                  &times;
                </button>
              </div>
            ))}
            <select
              value={selectedLanguage ? selectedLanguage.name : ''}
              onChange={(e) => setSelectedLanguage({ name: e.target.value })}
              className="flex-1 px-2 py-1 text-sm border-0 focus:ring-0 focus:outline-none rounded-md"
            >
              <option value="">Select a language...</option>
              {listOfLanguages.map((language, index) => (
                <option key={index} value={language.name}>
                  {language.name}
                </option>
              ))}
            </select>
          </div>
          <button
            type="button"
            onClick={handleAddLanguage}
            className="ml-2 text-sm text-white bg-blue-500 hover:bg-blue-700 rounded px-2"
            disabled={!selectedLanguage}
          >
            Add
          </button>
        </div>

        {/* Occupation Field */}
        <div>
          <label
            htmlFor="occupation"
            className="block text-lg font-semibold text-gray-700"
          >
            Occupation (Your Job Title) *
          </label>
          <input
            type="text"
            name="occupation"
            id="occupation"
            required
            className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring focus:ring-blue-500 focus:ring-opacity-50"
            value={formData.occupation}
            onChange={handleChange}
          />
        </div>

        {/* Rate Field (Conditional Rendering for Experts) */}
        {userInfo.isExpert && (
          <div>
            <label
              htmlFor="rate"
              className="block text-lg font-semibold text-gray-700"
            >
              Rate * (how much would you charge in euro / 45 minutes)
            </label>
            <input
              type="text"
              name="rate"
              id="rate"
              required
              className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring focus:ring-blue-500 focus:ring-opacity-50"
              value={formData.rate}
              onChange={handleChange}
              placeholder="$ / 45 min"
            />
          </div>
        )}
      </div>
      {/* Biography Field */}
      <div className="md:col-span-2 px-2 py-4 bg-blue-50 rounded-md">
        <div className="bg-white shadow rounded-lg p-2 ">
          <label
            htmlFor="biography"
            className="block text-lg font-semibold text-gray-700"
          >
            Biography *
            <span className="block text-right text-xs font-semibold text-black">
              {biography.length}/{maxCharCount} characters
            </span>
          </label>
          <textarea
            name="biography"
            id="biography"
            required
            rows={4}
            className="mt-2 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring focus:ring-blue-500 focus:ring-opacity-50"
            value={biography}
            onChange={handleBiographyChange}
            placeholder="Tell us more about yourself..."
          ></textarea>
        </div>
      </div>

      {/*  Experiences */}
      <div className="md:col-span-2 bg-blue-50 shadow rounded-lg  py-3 px-2 mb-6 ">
        <div className="flex justify-between items-center">
          <h3 className="text-lg font-semibold text-blue-600 mb-4">
            Experiences
          </h3>
          <button
            type="button"
            onClick={toggleExperienceSection}
            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
          >
            {showExperienceSection ? (
              <ChevronUpIcon className="w-4 h-4" />
            ) : (
              <ChevronDownIcon className="w-4 h-4" />
            )}{' '}
          </button>
        </div>
        {showExperienceSection && (
          <>
            {validationErrors.experiences && (
              <p className="text-red-500 text-sm mb-4 italic">
                {validationErrors.experiences}
              </p>
            )}

            {experiences.map((experience, index) => (
              <div
                key={index}
                className="mb-5 p-4 border border-blue-200 rounded-lg"
              >
                <div className="grid grid-cols-1 gap-4 mb-4">
                  <input
                    type="text"
                    name="companyName"
                    placeholder="Company Name"
                    value={experience.companyName}
                    onChange={(e) => handleExperienceChange(index, e)}
                    className="p-2 border rounded-md w-full"
                  />
                  <input
                    type="text"
                    name="role"
                    placeholder="Role"
                    value={experience.role}
                    onChange={(e) => handleExperienceChange(index, e)}
                    className="p-2 border rounded-md w-full"
                  />
                  <div className="flex gap-4">
                    <div className="flex flex-col">
                      <label htmlFor="startDate">Starte Date</label>
                      <input
                        type="date"
                        name="startDate"
                        value={experience.startDate}
                        onChange={(e) => handleExperienceChange(index, e)}
                        className="p-2 border rounded-md w-full"
                      />
                    </div>

                    <div className="flex flex-col">
                      <label htmlFor="startDate">Starte Date</label>
                      <input
                        type="date"
                        name="endDate"
                        value={experience.endDate}
                        onChange={(e) => handleExperienceChange(index, e)}
                        className="p-2 border rounded-md w-full"
                        disabled={experience.isCurrent}
                      />
                    </div>
                  </div>
                </div>

                <label className="flex items-center mb-4">
                  <input
                    type="checkbox"
                    name="isCurrent"
                    checked={experience.isCurrent}
                    onChange={(e) => handleExperienceChange(index, e)}
                    className="mr-2"
                  />
                  I am currently working in this role
                </label>
                <input
                  type="text"
                  readOnly
                  value={experience.duration || 'Duration'}
                  className="p-2 border rounded-md w-full bg-gray-100"
                />

                <textarea
                  name="description"
                  placeholder="Description"
                  value={experience.description}
                  onChange={(e) => handleExperienceChange(index, e)}
                  className="p-2 border rounded-md w-full mt-4"
                  rows="3"
                ></textarea>

                <button
                  onClick={() => removeExperience(index)}
                  className="mt-4 text-red-500 hover:text-red-700 text-sm"
                >
                  Remove
                </button>
              </div>
            ))}
          </>
        )}
        <button
          onClick={addExperience}
          className="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
        >
          Add Experience
        </button>
      </div>

      {/* Education Section */}
      <div className="md:col-span-2 bg-blue-50 shadow rounded-lg  py-3 px-2 mb-6 mt-8">
        <div className="flex justify-between items-center">
          <h3 className="text-lg font-semibold text-blue-600 mb-4">
            Education
          </h3>
          <button
            type="button"
            onClick={toggleEducationSection}
            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
          >
            {showEducationSection ? (
              <ChevronUpIcon className="w-4 h-4" />
            ) : (
              <ChevronDownIcon className="w-4 h-4" />
            )}
          </button>
        </div>

        {showEducationSection && (
          <>
            {validationErrors.educations && (
              <p className="text-red-500 text-sm mb-4 italic">
                {validationErrors.educations}
              </p>
            )}

            {/* Map over educations to display them */}
            {educations.map((education, index) => (
              <div
                key={index}
                className="mb-5 p-4 border border-blue-200 rounded-lg"
              >
                <div className="grid grid-cols-1 gap-4 mb-4">
                  <input
                    type="text"
                    name="institutionName"
                    placeholder="Institution Name"
                    value={education.institutionName}
                    onChange={(e) => handleEducationChange(index, e)}
                    className="p-2 border rounded-md w-full"
                  />
                  <input
                    type="text"
                    name="diplomaTitle"
                    placeholder="Diploma Title"
                    value={education.diplomaTitle}
                    onChange={(e) => handleEducationChange(index, e)}
                    className="p-2 border rounded-md w-full"
                  />
                  <input
                    type="text"
                    name="fieldOfStudy"
                    placeholder="Field of Study"
                    value={education.fieldOfStudy}
                    onChange={(e) => handleEducationChange(index, e)}
                    className="p-2 border rounded-md w-full"
                  />
                  <div className="flex gap-4">
                    <input
                      type="date"
                      name="startDate"
                      value={education.startDate}
                      onChange={(e) => handleEducationChange(index, e)}
                      className="p-2 border rounded-md w-full"
                    />
                    <input
                      type="date"
                      name="endDate"
                      value={education.endDate}
                      onChange={(e) => handleEducationChange(index, e)}
                      className="p-2 border rounded-md w-full"
                      disabled={education.isCurrent}
                    />
                  </div>
                </div>

                <label className="flex items-center mb-4">
                  <input
                    type="checkbox"
                    name="isCurrent"
                    checked={education.isCurrent}
                    onChange={(e) => handleEducationChange(index, e)}
                    className="mr-2"
                  />
                  Currently enrolled
                </label>

                <input
                  type="text"
                  readOnly
                  value={education.duration || 'Duration'}
                  className="p-2 border rounded-md w-full bg-gray-100"
                />

                <button
                  onClick={() => removeEducation(index)}
                  className="mt-4 text-red-500 hover:text-red-700 text-sm"
                >
                  Remove
                </button>
              </div>
            ))}
          </>
        )}
        <button
          onClick={addEducation}
          className="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
        >
          Add Education
        </button>
      </div>

      {/*  Expertise */}

      {/* Expertise Section */}
      {userInfo.isExpert && (
        <div className="md:col-span-2 bg-blue-50 shadow rounded-lg py-3 px-2 mb-6">
          <div className="flex justify-between items-center">
            <h3 className="text-lg font-semibold text-blue-600 mb-4">
              Expertise
            </h3>
            <button
              type="button"
              onClick={toggleExpertiseSection} // Ensure you have a function to toggle the visibility of the expertise section
              className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
            >
              {showExpertiseSection ? (
                <ChevronUpIcon className="w-4 h-4" />
              ) : (
                <ChevronDownIcon className="w-4 h-4" />
              )}{' '}
            </button>
          </div>

          {showExpertiseSection && (
            <>
              {validationErrors.expertises && (
                <p className="text-red-500 text-sm mb-4 italic">
                  {validationErrors.expertises}
                </p>
              )}

              {expertises.map((expertise, index) => (
                <div
                  key={index}
                  className="mb-5 p-4 border border-blue-200 rounded-lg"
                >
                  <select
                    name="field"
                    value={expertise.field}
                    onChange={(e) => handleExpertiseChange(index, e)}
                    className="p-2 border rounded-md w-full mb-4"
                  >
                    {areasOfExpertise.map((area) => (
                      <option key={area} value={area}>
                        {area}
                      </option>
                    ))}
                    <option value="Other">Other</option>
                  </select>

                  {expertise.field === 'Other' && (
                    <input
                      type="text"
                      placeholder="Please specify"
                      value={expertise.customField || ''}
                      onChange={(e) => handleCustomFieldChange(index, e)}
                      className="p-2 border rounded-md w-full mb-4"
                    />
                  )}

                  <div className="flex gap-4">
                    <input
                      type="date"
                      name="startDate"
                      value={expertise.startDate}
                      onChange={(e) => handleExpertiseChange(index, e)}
                      className="p-2 border rounded-md w-full"
                    />
                    <input
                      type="date"
                      name="endDate"
                      value={expertise.endDate}
                      disabled={expertise.isCurrent}
                      onChange={(e) => handleExpertiseChange(index, e)}
                      className="p-2 border rounded-md w-full"
                    />
                  </div>

                  <label className="flex items-center mb-4">
                    <input
                      type="checkbox"
                      name="isCurrent"
                      checked={expertise.isCurrent}
                      onChange={(e) => handleExpertiseChange(index, e)}
                      className="mr-2"
                    />
                    Currently here
                  </label>

                  <input
                    type="text"
                    readOnly
                    value={expertise.duration || 'Duration'}
                    className="p-2 border rounded-md w-full bg-gray-100 mb-4"
                  />

                  <textarea
                    name="description"
                    placeholder="Description"
                    value={expertise.description}
                    onChange={(e) => handleExpertiseChange(index, e)}
                    className="p-2 border rounded-md w-full"
                    rows="3"
                  ></textarea>

                  <button
                    onClick={() => removeExpertise(index)}
                    className="mt-4 text-red-500 hover:text-red-700 text-sm"
                  >
                    Remove
                  </button>
                </div>
              ))}
            </>
          )}
          <button
            onClick={addExpertise} // Ensure you have a function to add a new expertise entry
            className="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
          >
            Add Expertise
          </button>
        </div>
      )}

      {/* Social Media URL Fields */}
      {/* Include fields for Instagram, YouTube, Spotify, TikTok, Twitter, Amazon, Website URLs in a similar format */}

      {/* <div className="grid grid-cols-1 gap-6 md:grid-cols-2"> */}
      {/* Social Media URLs */}
      <div className="md:col-span-2 bg-blue-50 shadow rounded-lg px-2 py-3 mb-6 !mt-14 ">
        <h3 className="text-xl font-semibold text-gray-900 mb-4">
          Social Links
        </h3>
        <div className="grid grid-cols-2 gap-4">
          <div>
            <label
              htmlFor="linkedInURL"
              className="block text-md font-semibold text-gray-700 mb-1"
            >
              LinkedIn Page URL *
            </label>
            <input
              type="url"
              name="linkedInURL"
              id="linkedInURL"
              required
              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500"
              value={formData.linkedInURL}
              onChange={handleChange}
            />
          </div>
          <div>
            <label
              htmlFor="youtubeURL"
              className="block text-md font-semibold text-gray-700 mb-1"
            >
              Youtube Page URL
            </label>
            <input
              type="url"
              name="youtubeURL"
              id="youtubeURL"
              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500"
              value={formData.youtubeURL}
              onChange={handleChange}
            />
          </div>
          <div>
            <label
              htmlFor="instagramURL"
              className="block text-md font-semibold text-gray-700 mb-1"
            >
              Instagram Page URL
            </label>
            <input
              type="url"
              name="instagramURL"
              id="instagramURL"
              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500"
              value={formData.instagramURL}
              onChange={handleChange}
            />
          </div>
          <div>
            <label
              htmlFor="spotifyURL"
              className="block text-md font-semibold text-gray-700 mb-1"
            >
              Spotify Page URL
            </label>
            <input
              type="url"
              name="spotifyURL"
              id="spotifyURL"
              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500"
              value={formData.spotifyURL}
              onChange={handleChange}
            />
          </div>

          <div>
            <label
              htmlFor="tiktokURL"
              className="block text-md font-semibold text-gray-700 mb-1"
            >
              TikTok Page URL
            </label>
            <input
              type="url"
              name="tiktokURL"
              id="tiktokURL"
              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500"
              value={formData.tiktokURL}
              onChange={handleChange}
            />
          </div>
          <div>
            <label
              htmlFor="twitterURL"
              className="block text-md font-semibold text-gray-700 mb-1"
            >
              Twitter Page URL
            </label>
            <input
              type="url"
              name="twitterURL"
              id="twitterURL"
              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500"
              value={formData.twitterURL}
              onChange={handleChange}
            />
          </div>
          <div>
            <label
              htmlFor="amazonURL"
              className="block text-md font-semibold text-gray-700 mb-1"
            >
              Amazon Page URL
            </label>
            <input
              type="url"
              name="amazonURL"
              id="amazonURL"
              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500"
              value={formData.amazonURL}
              onChange={handleChange}
            />
          </div>
          <div>
            <label
              htmlFor="websiteURL1"
              className="block text-md font-semibold text-gray-700 mb-1"
            >
              Website URL
            </label>
            <input
              type="url"
              name="websiteURL1"
              id="websiteURL1"
              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500"
              value={formData.websiteURL1}
              onChange={handleChange}
            />
          </div>
          <div>
            <label
              htmlFor="websiteURL2"
              className="block text-md font-semibold text-gray-700 mb-1"
            >
              Additional Website URL
            </label>
            <input
              type="url"
              name="websiteURL2"
              id="websiteURL2"
              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500"
              value={formData.websiteURL2}
              onChange={handleChange}
            />
          </div>
        </div>
      </div>

      {/* </div> */}

      <div>
        <label
          htmlFor="videoURL"
          className="block text-sm font-medium text-gray-700"
        >
          Add Video URL
        </label>
        <input
          type="url"
          id="videoURLInput"
          placeholder="https://"
          className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-t-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
          onKeyDown={(e) => e.key === 'Enter' && e.preventDefault()} // Prevent form submission on Enter
        />
        <button
          type="button"
          onClick={() => {
            const videoInput = document.getElementById('videoURLInput')
            handleAddVideoURL(videoInput.value)
            videoInput.value = '' // Clear input after adding
          }}
          className="mt-2 w-full inline-flex justify-center bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-b-md"
        >
          Add
        </button>
        {/* Displayed Video URLs with Remove Option */}
        <div className="mt-4">
          {videoURLs.map((url, index) => (
            <div
              key={index}
              className="bg-white shadow overflow-hidden rounded-md mt-2"
            >
              <div className="px-4 py-4 flex items-center justify-between sm:px-6">
                <div className="min-w-0 flex-1 sm:flex sm:items-center sm:justify-between">
                  <a
                    href={url}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="truncate hover:text-blue-600"
                  >
                    <span className="text-sm font-medium text-gray-500 truncate">
                      {url}
                    </span>
                  </a>
                </div>
                <div className="ml-4 flex-shrink-0">
                  <button
                    type="button"
                    onClick={() => handleRemoveVideoURL(index)}
                    className="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-2 rounded"
                  >
                    Remove
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Submit Button */}
      <div className="md:col-span-2 flex flex-col  items-end">
        {submited && (
          <div className="text-green-500 text-base font-semibold">
            Updated Successfuly !!
          </div>
        )}

        <button
          type="submit"
          disabled={loading}
          style={{ backgroundColor: 'blue' }}
          className="  w-36 inline-flex bg-blue-700 justify-center mt-4 py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white  hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
        >
          {loading ? (
            <i className="icon-[tabler--loader-2] w-4 h-4 animate-spin duration-300 text-primary"></i>
          ) : (
            'Submit Profile'
          )}
        </button>
      </div>
    </form>
  )
}

export default ExpertProfileForm