"use client";

import BackgroundWrapper from "@/components/BackgroundWrapper";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { API_URL, getToken } from "@/lib/auth";
import { MoveLeft, UserCircle2 } from "lucide-react";
import Image from "next/image";
import { useRouter } from "next/navigation";
import React, { useEffect, useState } from "react";

const SettingsPage = () => {
  const router = useRouter();
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    async function fetchUser() {
      try {
        const token = await getToken();
        if (!token) return;

        const response = await fetch(`${API_URL}/me`, {
          method: "GET",
          headers: {
            Authorization: `Bearer ${token}`,
          },
        });

        if (response.ok) {
          const fetchedUserData = await response.json();
          setUserData(fetchedUserData);
          console.log(fetchedUserData);
        }
      } catch (error) {
        console.error("Error fetching user data: ", error);
      }
    }

    fetchUser();
  }, []);

  return (
    <BackgroundWrapper>
      <section className="min-h-screen flex flex-col justify-between">
        <div className="flex-1 mb-20">
          <div className="mx-8 mt-10 pb-6 space-y-6">
            <section className="flex justify-between">
              <button onClick={() => router.push("/home")}>
                <MoveLeft size={30} color="#113768" />
              </button>
              <h3 className="text-2xl font-semibold text-[#113768]">
                Settings
              </h3>
              <button onClick={() => router.push("/profile")}>
                <UserCircle2 size={30} color="#113768" />
              </button>
            </section>
            <section className="flex flex-col gap-4">
              <div className="flex gap-4 items-center">
                <Avatar className="bg-[#113768] w-20 h-20">
                  <AvatarFallback className="text-3xl text-white">
                    {userData?.name
                      ? userData.name.charAt(0).toUpperCase()
                      : ""}
                  </AvatarFallback>
                </Avatar>
                <div className="flex flex-col ">
                  <h1 className="font-semibold text-2xl">{userData?.name}</h1>
                  <h3 className=" text-md">{userData?.email}</h3>
                </div>
              </div>
            </section>
          </div>
        </div>
      </section>
    </BackgroundWrapper>
  );
};

export default SettingsPage;