"use client";

import { useEffect } from "react";
import { useRouter } from "next/navigation";
import type { Locale } from "@/config/i18n";
import type { Dictionary } from "@allai/i18n/server";
import { useMockAuth } from "@/providers/auth/MockAuthProvider";
import { AccountOverview } from "@/features/account/AccountOverview";
import { TopNav } from "@/components/layout/TopNav";

type AccountClientProps = {
  locale: Locale;
  dictionaryAccount: Dictionary["account"];
  fullDictionary: Dictionary;
};

export function AccountClient({ locale, dictionaryAccount, fullDictionary }: AccountClientProps) {
  const router = useRouter();
  const { user } = useMockAuth();

  useEffect(() => {
    if (!user) {
      router.replace(`/${locale}/login`);
    }
  }, [user, router, locale]);

  if (!user) {
    return null;
  }

  return (
    <div style={{ minHeight: "100vh", background: "var(--color-background)" }}>
      <TopNav dictionary={fullDictionary} locale={locale} />
      <main style={{ padding: "48px 24px" }}>
        <AccountOverview
          email={user.email}
          balance={user.balance}
          history={user.history}
          dictionary={dictionaryAccount}
          locale={locale}
        />
      </main>
    </div>
  );
}