import React from 'react';

import { Circle } from 'lucide-react';

import { cn } from '@kit/ui/lib/utils';
import { PageBody } from '@kit/ui/makerkit/page';
import { Trans } from '@kit/ui/makerkit/trans';
import { Skeleton } from '@kit/ui/shadcn/skeleton';

import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
import { withI18n } from '~/lib/i18n/with-i18n';
import {
  PageViewAction,
  createPageViewLog,
} from '~/lib/services/audit/pageView.service';

import { HomeLayoutPageHeader } from '../../_components/home-page-header';
import { loadLifeStyle } from '../../_lib/server/load-life-style';
import { loadCurrentUserAccount } from '../../_lib/server/load-user-account';

export async function generateMetadata() {
  const { t } = await createI18nServerInstance();

  return {
    title: t('common:lifeStyle.title'),
  };
}

async function LifeStylePage() {
  const { account } = await loadCurrentUserAccount();
  if (!account) {
    return null;
  }
  const data = await loadLifeStyle(account);

  await createPageViewLog({
    accountId: account.id,
    action: PageViewAction.VIEW_LIFE_STYLE,
  });

  if (!data.lifestyle) {
    return <Skeleton className="mt-10 h-10 w-full" />;
  }

  return (
    <>
      <HomeLayoutPageHeader
        title={<Trans i18nKey={'common:lifeStyle.title'} />}
        description=""
      />

      <PageBody>
        <div className="mt-8">
          {data.lifestyle.map(({ title, description, score }, index) => (
            <React.Fragment key={`${index}-${title}`}>
              <div className="flex items-center gap-2">
                <h3>{title}</h3>
                <Circle
                  className={cn('text-success fill-success size-6', {
                    'text-warning fill-warning': score === 1,
                    'text-destructive fill-destructive': score === 2,
                  })}
                />
              </div>
              <p className="font-regular py-4">{description}</p>
            </React.Fragment>
          ))}
        </div>
      </PageBody>
    </>
  );
}

export default withI18n(LifeStylePage);