"use client";

import BackgroundWrapper from "@/components/BackgroundWrapper";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { useAuth } from "@/context/AuthContext";
import { clearAuthToken } 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 from "react";

const SettingsPage = () => {
  const router = useRouter();
  const { user, isLoading } = useAuth();

  function handleLogout() {
    clearAuthToken();
    router.replace("/");
  }

  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">
                    {user?.username
                      ? user.username.charAt(0).toUpperCase()
                      : ""}
                  </AvatarFallback>
                </Avatar>
                <div className="flex flex-col items-start">
                  <h1 className="font-semibold text-2xl">{user?.full_name}</h1>
                  <h3 className=" text-md">{user?.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>
              <button onClick={handleLogout} 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" />
              </button>
              <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;