"use client";

import BackgroundWrapper from "@/components/BackgroundWrapper";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { API_URL, getToken } from "@/lib/auth";
import {
  Bookmark,
  ChartColumn,
  ChevronRight,
  Clock4,
  CreditCard,
  Crown,
  Globe,
  LogOut,
  MapPin,
  MoveLeft,
  Trash2,
  UserCircle2,
} from "lucide-react";
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);
        }
      } 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-lg 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 items-start">
                  <h1 className="font-semibold text-2xl">{userData?.name}</h1>
                  <h3 className=" text-md">{userData?.email}</h3>
                </div>
              </div>
            </section>
            <section className="flex flex-col gap-8">
              <button
                onClick={() => router.push("/profile")}
                className="flex justify-between"
              >
                <div className="flex items-center gap-4">
                  <UserCircle2 size={30} color="#113768" />
                  <h3 className="text-md font-medium text-[#113768]">
                    Your profile
                  </h3>
                </div>
                <ChevronRight size={30} color="#113768" />
              </button>
              <div className="flex justify-between">
                <div className="flex items-center gap-4">
                  <Bookmark size={30} color="#113768" />
                  <h3 className="text-md font-medium text-[#113768]">
                    Bookmarks
                  </h3>
                </div>
                <ChevronRight size={30} color="#113768" />
              </div>
              <div className="flex justify-between">
                <div className="flex items-center gap-4">
                  <CreditCard size={30} color="#113768" />
                  <h3 className="text-md font-medium text-[#113768]">
                    Payments
                  </h3>
                </div>
                <ChevronRight size={30} color="#113768" />
              </div>
              <div className="h-[0.5px] border-[0.1px] w-full border-[#113768]/20"></div>
              <div className="flex justify-between">
                <div className="flex items-center gap-4">
                  <Globe size={30} color="#113768" />
                  <h3 className="text-md font-medium text-[#113768]">
                    Languages
                  </h3>
                </div>
                <ChevronRight size={30} color="#113768" />
              </div>
              <div className="flex justify-between">
                <div className="flex items-center gap-4">
                  <MapPin size={30} color="#113768" />
                  <h3 className="text-md font-medium text-[#113768]">
                    Location
                  </h3>
                </div>
                <ChevronRight size={30} color="#113768" />
              </div>
              <div className="flex justify-between">
                <div className="flex items-center gap-4">
                  <Crown size={30} color="#113768" />
                  <h3 className="text-md font-medium text-[#113768]">
                    Subscription
                  </h3>
                </div>
                <ChevronRight size={30} color="#113768" />
              </div>
              <div className="flex justify-between">
                <div className="flex items-center gap-4">
                  <ChartColumn size={30} color="#113768" />
                  <h3 className="text-md font-medium text-[#113768]">
                    Performance
                  </h3>
                </div>
                <ChevronRight size={30} color="#113768" />
              </div>
              <div className="h-[0.5px] border-[0.1px] w-full border-[#113768]/20"></div>
              <div className="flex justify-between">
                <div className="flex items-center gap-4">
                  <Trash2 size={30} color="#113768" />
                  <h3 className="text-md font-medium text-[#113768]">
                    Clear Cache
                  </h3>
                </div>
                <ChevronRight size={30} color="#113768" />
              </div>
              <div className="flex justify-between">
                <div className="flex items-center gap-4">
                  <Clock4 size={30} color="#113768" />
                  <h3 className="text-md font-medium text-[#113768]">
                    Clear History
                  </h3>
                </div>
                <ChevronRight size={30} color="#113768" />
              </div>
              <div className="flex justify-between">
                <div className="flex items-center gap-4">
                  <LogOut size={30} color="#113768" />
                  <h3 className="text-md font-medium text-[#113768]">
                    Log out
                  </h3>
                </div>
                <ChevronRight size={30} color="#113768" />
              </div>
              <div className="h-[0.5px] border-[0.1px] w-full border-[#113768]/20"></div>
              <p className="text-center text-[#113768]/50 font-medium">
                ExamJam | Version 1.0
              </p>
            </section>
          </div>
        </div>
      </section>
    </BackgroundWrapper>
  );
};

export default SettingsPage;