"use client";
import { useRouter } from "next/navigation";
import { getUser } from "./../../server/utils/auth";
import { useState, useEffect, useCallback } from "react";
import { Breadcrumbs, BreadcrumbItem, Divider } from "@nextui-org/react";
import { useLogStore } from "@/server/utils/store";
import { SpinnerLoading } from "@/components/spinner";

export default function AccountPage() {
  const router = useRouter();

  const fadeInAnimation = {
    animation: "fadeIn 0.25s forwards",
    opacity: 0,
  };

  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const isLoggedIn = useLogStore((state) => state.isLoggedIn);

  const fetchUser = useCallback(async () => {
    try {
      if (isLoggedIn) {
        const userData = await getUser();
        setUser(userData);
      } else {
        setUser(null);
      }
    } catch (error) {
      console.error("Failed to fetch user:", error);
    } finally {
      setLoading(false);
    }
  }, [isLoggedIn]);

  useEffect(() => {
    fetchUser();
  }, [fetchUser]);

  useEffect(() => {
    if (!loading && !user) {
      router.push("/login");
    }
  }, [loading, user, router]);

  if (loading) {
    return <SpinnerLoading />;
  }

  if (!user) {
    return null;
  }

  return (
    <div className="flex">
      <div className="grid w-[330px] 2xl:-[729px] xl:w-[729px] lg:w-[729px] md:w-[729px] sm:w-[520px]">
        <Breadcrumbs
          style={{
            ...fadeInAnimation,
            animationDelay: `${1 * 0.25}s`,
          }}
          className="mt-3 bg-zinc-800 rounded-md p-3 border-1.5 border-neutral-700"
        >
          <BreadcrumbItem href="/">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              className="mb-0.5"
              viewBox="0 0 576 512"
              width={16}
              height={16}
            >
              <path
                fill="currentColor"
                d="M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"
              />
            </svg>
          </BreadcrumbItem>{" "}
          <BreadcrumbItem href="/account">Account</BreadcrumbItem>
        </Breadcrumbs>
        <div className="mt-3 p-3">
          <Divider
            className="mb-3"
            style={{
              ...fadeInAnimation,
              animationDelay: `${1 * 0.35}s`,
            }}
          ></Divider>
          <div className="grid grid-cols-1 gap-2 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-4 sm:grid-cols-2">
            <div
              className="rounded-md bg-zinc-800 border-1.5 border-neutral-700 mt-3 flex hover:bg-neutral-800 duration-300 hover:cursor-pointer"
              key={"reset1"}
              style={{
                ...fadeInAnimation,
                animationDelay: `${1 * 0.45}s`,
              }}
            >
              <div className="ml-2 mr-2 grid mb-auto mt-auto">
                <div className="flex">
                  <a
                    href="/account/details"
                    className="text-s text-sky-300 font-clean p-1"
                  >
                    {"Account Details"}
                  </a>
                </div>
              </div>
            </div>
            <div
              className="rounded-md bg-zinc-800 border-1.5 border-neutral-700 mt-3 flex hover:bg-neutral-800 duration-300 hover:cursor-pointer"
              key={"reset2"}
              style={{
                ...fadeInAnimation,
                animationDelay: `${1 * 0.55}s`,
              }}
            >
              <div className="ml-2 mr-2 grid mb-auto mt-auto">
                <div className="flex">
                  <a
                    href="/account/payment"
                    className="text-s text-sky-300 font-clean p-1"
                  >
                    {"Payment Methods"}
                  </a>
                </div>
              </div>
            </div>
            <div
              className="rounded-md bg-zinc-800 border-1.5 border-neutral-700 mt-3 flex hover:bg-neutral-800 duration-300 hover:cursor-pointer"
              key={"reset3"}
              style={{
                ...fadeInAnimation,
                animationDelay: `${1 * 0.65}s`,
              }}
            >
              <div className="ml-2 mr-2 grid mb-auto mt-auto">
                <div className="flex">
                  <a
                    href="/account/security"
                    className="text-s text-sky-300 font-clean p-1"
                  >
                    {"Password & Security"}
                  </a>
                </div>
              </div>
            </div>
            <div
              className="rounded-md bg-zinc-800 border-1.5 border-neutral-700 mt-3 flex hover:bg-neutral-800 duration-300 hover:cursor-pointer"
              key={"reset4"}
              style={{
                ...fadeInAnimation,
                animationDelay: `${1 * 0.75}s`,
              }}
            >
              <div className="ml-2 mr-2 grid mb-auto mt-auto">
                <div className="flex">
                  <a
                    href="/account/creator"
                    className="text-s text-sky-300 font-clean p-1"
                  >
                    {"Creator Program"}
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <style jsx>{`
        @keyframes fadeIn {
          from {
            opacity: 0;
          }
          to {
            opacity: 1;
          }
        }
      `}</style>
    </div>
  );
}