'use client';

import { useState, useEffect } from 'react';
import SummaryCards from './components/SummaryCards';
import WalletCard from './components/WalletCard';
import OrdersChart from './components/OrdersChart';
import LatestOrders, { OrderItem } from './components/LatestOrders';
import LatestRecharges, { RechargeItem } from './components/LatestRecharges';
import { useRouter } from 'next/navigation';
import { isLoggedIn as checkAuth, setUser } from '@/lib/auth';
import { api, apiPaths } from '@/lib/api';
import type { ApiUser } from '@/lib/auth';
import { useI18n } from '@/lib/i18n/context';

type DashboardData = {
  total_orders_count: number;
  total_orders_value: number;
  wallet_balance: number;
  latest_orders: OrderItem[];
  latest_recharges: RechargeItem[];
  chart_data: Record<string, { month: string; orders: number }[]>;
  chart_years: string[];
};

export default function HomeClient() {
  const router = useRouter();
  const { t, isRtl } = useI18n();
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [mounted, setMounted] = useState(false);
  const [dashboard, setDashboard] = useState<DashboardData | null>(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => { setMounted(true); }, []);

  useEffect(() => {
    if (!mounted) return;
    const loggedIn = checkAuth();
    setIsLoggedIn(loggedIn);
    if (!loggedIn) return;

    setLoading(true);
    api.get<ApiUser>(apiPaths.user.profile)
      .then((res) => {
        if (res.key === 'success' && res.data) {
          const u = res.data as ApiUser;
          setUser(u);
          if (u.is_approved === false) {
            router.replace('/account-pending');
            return null;
          }
        }
        return api.get<DashboardData>(apiPaths.user.dashboard);
      })
      .then((res) => {
        if (!res) return;
        if (res.key === 'success' && res.data) setDashboard(res.data);
      })
      .finally(() => setLoading(false));
  }, [mounted, router]);

  if (!mounted) return null;

  return (
    <div
      dir={isRtl ? 'rtl' : 'ltr'}
      className="flex flex-col flex-1 bg-[#f3f4f6]"
    >
      <main className="max-w-7xl mx-auto px-4 sm:px-6 py-6 md:py-8 flex-1 w-full">
        {isLoggedIn ? (
          <>
            <SummaryCards
              totalValue={dashboard?.total_orders_value ?? null}
              totalCount={dashboard?.total_orders_count ?? null}
              loading={loading}
            />
            <WalletCard
              balance={dashboard?.wallet_balance ?? null}
              loading={loading}
            />
            <OrdersChart
              chartData={dashboard?.chart_data ?? {}}
              years={dashboard?.chart_years ?? []}
              loading={loading}
            />
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              <LatestOrders orders={dashboard?.latest_orders ?? []} loading={loading} />
              <LatestRecharges recharges={dashboard?.latest_recharges ?? []} loading={loading} />
            </div>
          </>
        ) : (
          <>
            <h1 className="sr-only">{t('home.dashboardTitle')}</h1>
            <SummaryCards totalValue={0} totalCount={0} loading={false} guestMode />
            <WalletCard balance={0} loading={false} guestMode />
          </>
        )}
      </main>
    </div>
  );
}