import { createI18nServerInstance } from '@/lib/i18n/i18n.server';
import { withI18n } from '@/lib/i18n/with-i18n';

import { Trans } from '@kit/ui/makerkit/trans';
import { PageBody } from '@kit/ui/page';
import { Button } from '@kit/ui/shadcn/button';

import { loadUserAnalysis } from '../../_lib/server/load-user-analysis';
import Analysis, { AnalysisStatus } from './_components/analysis';

export const generateMetadata = async () => {
  const i18n = await createI18nServerInstance();
  const title = i18n.t('account:analysisResults.pageTitle');

  return {
    title,
  };
};

async function AnalysisResultsPage() {
  const analysisList = await loadUserAnalysis();

  return (
    <PageBody>
      <div className="mt-8 flex items-center justify-between">
        <div>
          <h4>
            <Trans i18nKey="account:analysisResults.pageTitle" />
          </h4>
          <p className="text-muted-foreground text-sm">
            <Trans i18nKey="account:analysisResults.description" />
          </p>
        </div>
        <Button>
          <Trans i18nKey="account:analysisResults.orderNewAnalysis" />
        </Button>
      </div>
      <div className="flex flex-col gap-2">
        {analysisList?.map((analysis, index) => (
          <Analysis
            key={index}
            analysis={{
              name: analysis.element.analysis_name || '',
              status: analysis.element.norm_status as AnalysisStatus,
              unit: analysis.element.unit || '',
              value: analysis.element.response_value,
              normLowerIncluded: !!analysis.element.norm_lower_included,
              normUpperIncluded: !!analysis.element.norm_upper_included,
              normLower: analysis.element.norm_lower || 0,
              normUpper: analysis.element.norm_upper || 0,
            }}
          />
        ))}
      </div>
    </PageBody>
  );
}

export default withI18n(AnalysisResultsPage);
