import { ReactNode } from "react";
import { useAuth } from "@/hooks/useAuth";
import { useQuery } from "@tanstack/react-query";
import { CompanyCreditTab } from "@/components/admin/company-detail/CompanyCreditTab";
import { FinanceOverview } from "@/components/admin/finance/FinanceOverview";
import AdminLayout from "@/layouts/AdminLayout";

const FinancePage = () => {
  const { companyId, isSysLevel } = useAuth();

  const { data: company } = useQuery({
    queryKey: ["finance-company", companyId],
    enabled: !!companyId,
    queryFn: async (): Promise<any> => {
      const res = await fetch(`/api/admin/training-companies/${companyId}`);
      if (!res.ok) return null;
      return res.json();
    },
  });

  return (
    <div>
      <h1 className="text-2xl font-bold text-foreground mb-6">Finance</h1>
      {companyId ? (
        company && (
          <CompanyCreditTab
            companyId={companyId}
            creditLimitCents={company.credit_limit_cents}
            creditAvailableCents={company.credit_available_cents}
            paymentTermsDays={company.payment_terms_days}
          />
        )
      ) : isSysLevel() ? (
        <FinanceOverview />
      ) : (
        <p className="text-muted-foreground">No company associated with your account.</p>
      )}
    </div>
  );
};

FinancePage.layout = (page: ReactNode) => <AdminLayout>{page}</AdminLayout>;

export default FinancePage;