'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import authAxios from '@/utils/axios';

const EditProfile = () => {
  const [profile, setProfile] = useState({
    email: '',
    first_name: '',
    last_name: '',
    phone: '',
    accepts_marketing: '',
    birth_day: '',
    gender: '',
    profile_pic: null,
  });

  const router = useRouter();

  useEffect(() => {
    
    const fetchProfileData = async () => {
      const response = await authAxios.get('/account/profile');  
      console.log(response)
      setProfile(response.data);
    };

    fetchProfileData();
  }, []);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setProfile((prevProfile) => ({
      ...prevProfile,
      [name]: value,
    }));
  };

  const handleCheckboxChange = (e) => {
    setProfile((prevProfile) => ({
      ...prevProfile,
      accepts_marketing: e.target.checked ? 'Yes' : 'No',
    }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    console.log(profile);
  
    
    const formData = new FormData();
    formData.append('email', profile.email);
    formData.append('first_name', profile.first_name);
    formData.append('last_name', profile.last_name);
    formData.append('phone', profile.phone);
    formData.append('accepts_marketing', profile.accepts_marketing);
    formData.append('birth_day', profile.birth_day);
    formData.append('gender', profile.gender);
    
    
    if (profile.profile_pic && profile.profile_pic instanceof File) {
        console.log('hello')
      formData.append('profile_pic', profile.profile_pic);
    }
    try {
      
      const response = await authAxios.patch('/account/profile-update/', formData, {
        headers: {
          'Content-Type': 'multipart/form-data', 
        },
      });
      console.log(response)
      if (response.status === 200) {
        
        router.push('/accounts/profile');
      } else {
        alert('Failed to update profile');
      }
    } catch (error) {
      console.error('Error updating profile:', error);
      alert('An error occurred while updating the profile.');
    }
  };
  

  return (
    <div className="bg-white p-6 rounded-lg shadow-md">
      <h2 className="text-2xl font-semibold mb-6">Edit Profile</h2>
      <form onSubmit={handleSubmit}>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label htmlFor="firstName" className="block text-sm font-medium text-gray-700 mb-1">First name</label>
            <input
              type="text"
              id="firstName"
              name="first_name"
              className="w-full p-2 border border-gray-300 rounded"
              value={profile.first_name || ''}
              onChange={handleChange}
            />
          </div>
          <div>
            <label htmlFor="lastName" className="block text-sm font-medium text-gray-700 mb-1">Last name</label>
            <input
              type="text"
              id="lastName"
              name="last_name"
              className="w-full p-2 border border-gray-300 rounded"
              value={profile.last_name || ''}
              onChange={handleChange}
            />
          </div>
        </div>
        <div className="mt-4">
          <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">Email</label>
          <input
            type="email"
            id="email"
            name="email"
            className="w-full p-2 border border-gray-300 rounded"
            value={profile.email || ''}
            onChange={handleChange}
          />
        </div>
        <div className="mt-4">
          <label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-1">Phone</label>
          <div className="flex">
            <select className="p-2 border border-gray-300 rounded-l" style={{ width: '80px' }}>
              <option value="IN" className='w-10 '>+91</option>
            </select>
            <input
              type="tel"
              id="phone"
              name="phone"
              className="flex-grow p-2 border border-gray-300 rounded-r"
              value={profile.phone || ''}
              onChange={handleChange}
            />
          </div>
        </div>
        <div className="mt-4">
          <label htmlFor="birthDay" className="block text-sm font-medium text-gray-700 mb-1">Birth Date</label>
          <input
            type="date"
            id="birthDay"
            name="birth_day"
            className="w-full p-2 border border-gray-300 rounded"
            value={profile.birth_day || ''}
            onChange={handleChange}
          />
        </div>
        <div className="mt-4">
          <label htmlFor="gender" className="block text-sm font-medium text-gray-700 mb-1">Gender</label>
          <select
            id="gender"
            name="gender"
            className="w-full p-2 border border-gray-300 rounded"
            value={profile.gender || ''}
            onChange={handleChange}
          >
            <option value="">Select Gender</option>
            <option value="Male">Male</option>
            <option value="Female">Female</option>
            <option value="Other">Other</option>
          </select>
        </div>
        <div className="mt-4">
          <label htmlFor="profilePic" className="block text-sm font-medium text-gray-700 mb-1">Profile Picture</label>
          <input
            type="file"
            id="profilePic"
            name="profile_pic"
            className="w-full p-2 border border-gray-300 rounded"
            onChange={(e) => setProfile({ ...profile, profile_pic: e.target.files[0] })}
          />
        </div>
        <div className="mt-4">
          <label className="inline-flex items-center">
            <input
              type="checkbox"
              className="form-checkbox"
              checked={profile.accepts_marketing === 'Yes'}
              onChange={handleCheckboxChange}
            />
            <span className="ml-2">Accepts Marketing</span>
          </label>
        </div>
        <div className="mt-6 flex justify-end space-x-4">
          <button
            type="button"
            onClick={() => router.push('/account/profile')}
            className="px-4 py-2 border border-gray-300 rounded text-gray-700 hover:bg-gray-50"
          >
            Cancel
          </button>
          <button
            type="submit"
            className="px-4 py-2 bg-[#96724f] text-white rounded hover:bg-[#AC8C6B]"
          >
            Save Changes
          </button>
        </div>
      </form>
    </div>
  );
};

export default EditProfile;