"use client";
import React, { useState, useEffect } from "react";
import axios from "axios";
import authAxios from "@/utils/axios";
import { useRouter } from "next/navigation";
import Image from "next/image";

export default function ProfilePage() {
  const [profileData, setProfileData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [isError, setIsError] = useState(false);
  const router = useRouter();
  useEffect(() => {
    const fetchProfileData = async () => {
      try {
        const response = await authAxios.get("/account/profile/");
        setProfileData(response.data);
        setIsLoading(false);
      } catch (error) {
        console.error("Error fetching profile data", error);
        setIsError(true);
        setIsLoading(false);
      }
    };

    fetchProfileData();
  }, []);

  const getDisplayValue = (value) => {
    return value ? value : "Not set up";
  };

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (isError) {
    return <div>Error loading profile data. Please try again later.</div>;
  }

  return (
    <div className="max-h-[70vh] hide-navbar overflow-y-scroll">
      <div className="flex gap-3">
        <div className="p-6 sm:text-xl border">
          All Orders{" "}
          <h2 className="text-lg sm:text-2xl font-semibold">
            {profileData.orders || 0}
          </h2>
        </div>
        <div className="p-6 border rounded-md sm:text-xl ">
          Addresses{" "}
          <h2 className="text-lg sm:text-2xl font-semibold">
            {profileData.addresses || 0}
          </h2>
        </div>
      </div>
      <h1 className="text-2xl font-bold mb-4 mt-4">Profile information</h1>
      <div className="bg-white shadow-md rounded p-6">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label className="block text-gray-700 text-sm font-bold mb-2">
              First name
            </label>
            <p className="text-gray-900">
              {getDisplayValue(profileData.first_name)}
            </p>
          </div>
          <div>
            <label className="block text-gray-700 text-sm font-bold mb-2">
              Last name
            </label>
            <p className="text-gray-900">
              {getDisplayValue(profileData.last_name)}
            </p>
          </div>
          <div>
            <label className="block text-gray-700 text-sm font-bold mb-2">
              Date of birth
            </label>
            <p className="text-gray-900">
              {getDisplayValue(profileData.birth_day)}
            </p>
          </div>
          <div>
            <label className="block text-gray-700 text-sm font-bold mb-2">
              Gender
            </label>
            <p className="text-gray-900">
              {getDisplayValue(profileData.gender)}
            </p>
          </div>
        </div>

        <h2 className="text-xl font-bold mt-6 mb-4">Contact methods</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label className="block text-gray-700 text-sm font-bold mb-2">
              Email
            </label>
            <p className="text-gray-900">
              {getDisplayValue(profileData.email)}
            </p>
          </div>
          <div>
            <label className="block text-gray-700 text-sm font-bold mb-2">
              Phone
            </label>
            <p className="text-gray-900">
              {getDisplayValue(profileData.phone)}
            </p>
          </div>
        </div>

        <h2 className="text-xl font-bold mt-6 mb-4">Other Info</h2>
        <div>
          <label className="block text-gray-700 text-sm font-bold mb-2">
            Profile Picture
          </label>
          {profileData.profile_pic ? (
      <Image
      src={profileData.profile_pic}
      alt="Profile Picture"
      width={64}
      height={64}
      className="rounded-full object-cover"
    />
          ) : (
            <p className="text-gray-900">Not set up</p>
          )}
        </div>

        <h2 className="text-xl font-bold mt-6 mb-4">Other Info</h2>
        <div>
          <label className="block text-gray-700 text-sm font-bold mb-2">
            Accepts Marketing from Gupta Rudraksha
          </label>
          <p className="text-gray-900">
            {getDisplayValue(profileData.accepts_marketing)}
          </p>
        </div>

        <button
          onClick={() => router.push("/accounts/profile/edit-profile")}
          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-6"
        >
          Edit
        </button>
      </div>
    </div>
  );
}