"use client";
import React, { useRef, useState, useEffect } from "react";
import "react-datepicker/dist/react-datepicker.css";
import DatePicker from "react-datepicker";
import useApiPost from "../hooks/postData";
import { useGetUserProfileDetailsQuery } from "../store/api/GetUserProfileDetails";
import Cookies from "js-cookie";
import TextTranslate from "../utils/TextTranslate";
import { useTranslateText } from "../hooks/useTranslate";
import { IoChevronBackOutline, IoPersonOutline, IoCalendarOutline } from "react-icons/io5";

function Edit_Profile({ onClose }: { onClose: () => void }) {
  const fileInputRef = useRef(null);
  const [imageFile, setImageFile] = useState<File | null>(null);
  const [imagePreview, setImagePreview] = useState<string | null>(null);
  const { loading, postData } = useApiPost();
  const [startDate, setStartDate] = useState<Date | null>(null);
  const translate = useTranslateText();

  const token = Cookies.get("Snapta_auth_token");
  const { data: existingData, refetch } = useGetUserProfileDetailsQuery({
    token: token || "",
  });
  const user_profile = existingData?.user_data;

  const [formData, setFormData] = useState({
    bio: "",
    username: "",
    first_name: "",
    last_name: "",
    dob: "",
    profile_pic: null,
    gender: "",
  });

  const [fullName, setFullName] = useState("");

  useEffect(() => {
    if (user_profile) {
      setFormData({
        bio: user_profile.bio || "",
        username: user_profile.username || "",
        first_name: user_profile.first_name || "",
        last_name: user_profile.last_name || "",
        dob: user_profile.dob || "",
        profile_pic: user_profile.profile_pic || null,
        gender: user_profile.gender || "",
      });
      setFullName(`${user_profile.first_name || ""} ${user_profile.last_name || ""}`.trim());

      if (user_profile.dob) {
        const parsedDate = new Date(user_profile.dob);
        if (!isNaN(parsedDate.getTime())) {
          setStartDate(parsedDate);
        }
      }
    }
  }, [user_profile]);

  const handleFullNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setFullName(value);
    const names = value.trim().split(/\s+/);
    setFormData(prev => ({
      ...prev,
      first_name: names[0] || "",
      last_name: names.slice(1).join(" ") || "",
    }));
  };

  const handleImageClick = () => {
    if (fileInputRef.current) fileInputRef.current.click();
  };

  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files[0]) {
      const file = e.target.files[0];
      setImageFile(file);
      const reader = new FileReader();
      reader.onloadend = () => setImagePreview(reader.result as string);
      reader.readAsDataURL(file);
    }
  };

  const handleEditProfile = async () => {
    try {
      const formDataToSend = new FormData();
      formDataToSend.append("bio", formData.bio);
      formDataToSend.append("username", formData.username);
      formDataToSend.append("first_name", formData.first_name);
      formDataToSend.append("last_name", formData.last_name);
      formDataToSend.append("dob", formData.dob || "");
      formDataToSend.append("gender", formData.gender);
      if (imageFile instanceof File) formDataToSend.append("profile_pic", imageFile);
      
      await postData("/user_profile", formDataToSend, {
        headers: { "Content-Type": "multipart/form-data" },
      });
      window.dispatchEvent(new Event("profileUpdated"));
      refetch();
      onClose();
    } catch (error) {
      console.error("Error updating profile:", error);
    }
  };

  return (
    <div className="w-full min-h-screen bg-[var(--bg-primary)] animate-in slide-in-from-right duration-300">
      {/* Header */}
      <div className="sticky top-2 z-10 bg-[var(--bg-primary)] px-4 sm:px-6 sm:pt-6 pt-12 pb-6  max-w-[700px] mx-auto flex items-center gap-4">
       
        <h1 className="text-2xl font-gilroy_bold text-[var(--text-primary)]">
          <TextTranslate text="Edit profile" />
        </h1>
      </div>

      <div className="max-w-[700px] mx-auto p-4 sm:p-6 space-y-6 -mt-4">
        {/* Profile Identity Card */}
        <div className="bg-[var(--modal-color)] rounded-2xl p-4 flex items-center justify-between border border-[var(--border-colordark)] dark:border-[color-mix(in_srgb,var(--border-color),white_10%)]">
          <div className="flex items-center gap-4">
            <div className="w-14 h-14 rounded-full overflow-hidden border border-[#6C47B7]">
              <img
                src={imagePreview || user_profile?.profile_pic || "/assets/default-user.png"}
                alt="Profile"
                className="w-full h-full object-cover"
              />
            </div>
            <div>
              <p className="text-[var(--text-primary)] font-gilroy_bold text-[15px] font-medium">{user_profile?.username}</p>
              <p className="text-[var(--text-secondary)] text-[12px] -translate-x-0.5 -mt-0.5">{fullName}</p>
            </div>
          </div>
          <button 
            onClick={handleImageClick}
            className="bg-[#341F60] hover:bg-[#6C47B7] text-white px-5 py-2 rounded-xl text-sm font-gilroy_semibold transition-all"
          >
            <TextTranslate text="Change photo" />
          </button>
          <input type="file" accept="image/*" className="hidden" onChange={handleImageChange} ref={fileInputRef} />
        </div>

        {/* Form Fields */}
        <div className="space-y-6">
          {/* Full Name */}
          <div className="space-y-2">
            <label className="text-[var(--text-primary)] font-gilroy_bold text-[15px] ml-1">Full Name</label>
            <div className="relative flex items-center">
              {/* <IoPersonOutline className="absolute left-4 text-[var(--text-secondary)]" size={18} /> */}
              <input
                type="text"
                value={fullName}
                onChange={handleFullNameChange}
                className="w-full bg-transparent border border-[var(--border-colordark)] dark:border-[color-mix(in_srgb,var(--border-color),white_10%)] rounded-xl py-3.5 px-3 pr-4 text-[var(--text-primary)] font-gilroy_md text-sm focus:border-[#6C47B7] outline-none transition-all"
                placeholder="Full Name"
              />
            </div>
          </div>

          {/* User Name - Non Editable */}
          <div className="space-y-2">
            <label className="text-[var(--text-primary)] font-gilroy_bold text-[15px] ml-1">User Name</label>
            <div className="relative flex items-center">
              {/* <IoPersonOutline className="absolute left-4 text-[var(--text-secondary)] opacity-50" size={18} /> */}
              <input
                type="text"
                value={formData.username}
                readOnly
                className="w-full bg-[var(--modal-color)] border border-[var(--border-colordark)] dark:border-[color-mix(in_srgb,var(--border-color),white_10%)] rounded-xl py-3.5 px-3 pr-4 text-[var(--text-secondary)] font-gilroy_md text-sm opacity-90 cursor-not-allowed outline-none"
                placeholder="User Name"
              />
            </div>
          </div>

          {/* Bio */}
          <div className="space-y-2">
            <label className="text-[var(--text-primary)] font-gilroy_bold text-[15px] ml-1">Bio</label>
            <div className="relative">
              <textarea
                maxLength={150}
                className="w-full bg-transparent border border-[var(--border-colordark)] dark:border-[color-mix(in_srgb,var(--border-color),white_10%)] rounded-xl py-3 px-3 text-[var(--text-primary)] font-gilroy_md text-sm focus:border-[#6C47B7] outline-none h-24 resize-none transition-all"
                placeholder="Bio"
                value={formData.bio}
                onChange={(e) => setFormData({ ...formData, bio: e.target.value })}
              />
              <span className="absolute bottom-3 right-3 text-[var(--text-secondary)] text-[10px]">
                {formData.bio.length} / 150
              </span>
            </div>
          </div>

          {/* Date Of Birth with DatePicker */}
          <div className="space-y-2">
            <label className="text-[var(--text-primary)] font-gilroy_bold text-[15px] ml-1">Date Of Birth</label>
            <div className="relative flex items-center edit-profile-datepicker">
    <DatePicker
  selected={startDate}
  onChange={(date) => {
    if (date) {
      setStartDate(date);
      const formattedDate = date.toISOString().split("T")[0];
      setFormData(prev => ({ ...prev, dob: formattedDate }));
    }
  }}
  dateFormat="dd/MM/yyyy"
  placeholderText="Select Date"
  popperPlacement="top"
  fixedHeight // ✅ Add this prop to keep the height constant
  className="w-full bg-transparent border border-[var(--border-colordark)] dark:border-[color-mix(in_srgb,var(--border-color),white_10%)] rounded-xl py-3.5 pl-12 pr-4 text-[var(--text-primary)] font-gilroy_md text-sm focus:border-[#6C47B7] outline-none transition-all"
  calendarClassName="custom-datepicker"
  popperClassName="custom-datepicker-popper"
/>
            </div>
          </div>

          {/* Gender Select */}
          <div className="space-y-2">
            <label className="text-[var(--text-primary)] font-gilroy_bold text-[15px] ml-1">Gender</label>
            <div className="flex gap-6 pl-1">
              {["Male", "Female"].map((option) => (
                <label key={option} className="flex items-center gap-2 cursor-pointer group">
                  <input
                    type="radio"
                    name="gender"
                    value={option.toLowerCase()}
                    checked={formData.gender === option.toLowerCase()}
                    onChange={(e) => setFormData({ ...formData, gender: e.target.value })}
                    className="w-4 h-4 accent-[#6C47B7] cursor-pointer "
                  />
                  <span className="text-[var(--text-secondary)] font-gilroy_md text-sm group-hover:text-[var(--text-primary)] transition-colors bg-transparent">
                    {option}
                  </span>
                </label>
              ))}
            </div>
            <p className="text-[var(--text-secondary)] text-[12px] px-1 opacity-70 mt-2">This won't be part of your public profile.</p>
          </div>

       

          {/* Submit Button */}
          <div className=" pt-4 flex flex-col gap-3">
            <button
              onClick={handleEditProfile}
              disabled={loading}
              className="w-full py-3 bg-[#341F60] hover:bg-[#6C47B7] text-white font-gilroy_bold rounded-xl transition-all shadow-lg flex justify-center items-center disabled:opacity-50 active:scale-[0.98]"
            >
              {loading ? (
                <img src="/assets/Loader.gif" alt="..." className="w-6 h-6 invert" />
              ) : (
                <TextTranslate text="Save Changes" />
              )}
            </button>
            
            <button 
               onClick={onClose}
               className="text-[var(--text-primary)] text-sm font-gilroy_medium hover:underline transition-colors text-center"
            >
               Cancel and go back
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Edit_Profile;