"use client";

import BackgroundWrapper from "@/components/BackgroundWrapper";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { useAuthStore } from "@/stores/authStore";
import {
  BadgeCheck,
  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, logout } = useAuthStore();

  function handleLogout() {
    logout();
    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 items-center gap-4 bg-blue-100 border-1 border-blue-300/40 rounded-2xl py-5 px-4">
              <Avatar className="bg-[#113768] w-20 h-20">
                <AvatarFallback className="text-3xl text-white">
                  {user?.username
                    ? user.username.charAt(0).toUpperCase()
                    : "User"}
                </AvatarFallback>
              </Avatar>
              <div className="flex flex-col items-start">
                <h1 className="font-semibold text-2xl flex gap-1 items-center">
                  {user?.full_name}
                </h1>
                <h3 className=" text-md">{user?.email}</h3>
              </div>
            </section>
            <section className="flex flex-col gap-8">
              {!user?.is_verified && (
                <>
                  <button
                    onClick={() => router.push("/settings/verify")}
                    className="flex justify-between"
                  >
                    <div className="flex items-center gap-4">
                      <BadgeCheck size={30} color="#113768" />
                      <h3 className="text-md font-medium text-[#113768]">
                        Verify your account
                      </h3>
                    </div>
                    <ChevronRight size={30} color="#113768" />
                  </button>
                  <div className="h-[0.5px] border-[0.1px] w-full border-[#113768]/20"></div>
                </>
              )}
              <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;