import AccountCreation from '@/components/admin/site-settings/account-creation';
import TransactionSettings from '@/components/admin/site-settings/transaction-settions';
import PageHeading from '@/components/common/page-heading';
import LoaderIcon from '@/components/icons/loader-icon';
import { useApiSWR } from '@/hooks/useSWR';
import { FormFieldType } from '@/types/form-field-type';
import { useTranslation } from 'react-i18next';

const SystemConfiguration = () => {
  const { t } = useTranslation();
  const { data, isLoading } = useApiSWR<FormFieldType[]>('/admin/settings');

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const defaultValues = data?.reduce((acc: any, cur: FormFieldType) => {
    if (cur.type === 'boolean') acc[cur.key] = cur.value === '1';
    else acc[cur.key] = cur.value;
    return acc;
  }, {});

  if (isLoading)
    return (
      <div className="flex h-96 w-full items-center justify-center gap-2">
        <LoaderIcon />
        {t('Loading...')}
      </div>
    );

  return (
    <>
      <PageHeading
        title={t('System Configuration')}
        description={t(
          'Configure account creation rules and transaction settings.',
        )}
      />

      <AccountCreation site={data ?? []} defaultValues={defaultValues} />
      <TransactionSettings site={data ?? []} defaultValues={defaultValues} />
    </>
  );
};

SystemConfiguration.title = 'System Configuration';

export default SystemConfiguration;