"use client";

import { useEffect } from "react";
import { useRouter } from "next/navigation";
import { useAuth } from "@/components/auth/AuthContext";
import { AccountTabs } from "@/components/account/AccountTabs";
import { IconButton } from "@/components/IconButton";
import { IoLogInOutline } from "react-icons/io5";

export default function AccountPage() {
  const { customer, isAuthenticated, isLoading, logout } = useAuth();
  const router = useRouter();

  useEffect(() => {
    if (!isLoading && !isAuthenticated) {
      router.replace("/account/login");
    }
  }, [isLoading, isAuthenticated, router]);

  if (isLoading || !customer) {
    return (
      <main className="flex min-h-[60vh] items-center justify-center">
        <p className="text-lightsec dark:text-darksec">Loading…</p>
      </main>
    );
  }

  return (
    <main className="mx-auto max-w-250 px-6 py-12 md:px-8 md:py-16">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="font-argesta text-3xl">My Account</h1>
          <p className="mt-2 text-sm text-lightsec dark:text-darksec">{customer.email}</p>
        </div>
        <IconButton
          onClick={async () => {
            await logout();
            router.push("/");
          }}
        >
          <IoLogInOutline />
        </IconButton>
      </div>

      <AccountTabs />
    </main>
  );
}