import Link from 'next/link';

import { ButtonTooltip } from '@kit/shared/components/ui/button-tooltip';
import { pathsConfig } from '@kit/shared/config';
import { Button } from '@kit/ui/button';
import { PageBody, PageHeader } from '@kit/ui/page';
import { Trans } from '@kit/ui/trans';

import { loadCurrentUserAccount } from '~/home/(user)/_lib/server/load-user-account';
import { loadUserAnalysis } from '~/home/(user)/_lib/server/load-user-analysis';
import {
  PageViewAction,
  createPageViewLog,
} from '~/lib/services/audit/pageView.service';

import Analysis from '../_components/analysis';

export default async function AnalysisResultsPage({
  params,
}: {
  params: Promise<{
    id: string;
  }>;
}) {
  const { id: analysisOrderId } = await params;

  const [{ account }, analysisResponse] = await Promise.all([
    loadCurrentUserAccount(),
    loadUserAnalysis(Number(analysisOrderId)),
  ]);

  if (!account?.id) {
    return null;
  }

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

  if (!analysisResponse) {
    return null;
  }

  return (
    <>
      <PageHeader />
      <PageBody className="gap-4">
        <div className="mt-8 flex flex-col justify-between gap-4 sm:flex-row sm:items-center sm:gap-0">
          <div>
            <h4>
              <Trans i18nKey="analysis-results:pageTitle" />
            </h4>
            <p className="text-muted-foreground text-sm">
              {analysisResponse?.elements &&
              analysisResponse.elements?.length > 0 ? (
                <Trans i18nKey="analysis-results:description" />
              ) : (
                <Trans i18nKey="analysis-results:descriptionEmpty" />
              )}
            </p>
          </div>
          <Button asChild>
            <Link href={pathsConfig.app.orderAnalysisPackage}>
              <Trans i18nKey="analysis-results:orderNewAnalysis" />
            </Link>
          </Button>
        </div>
        <div className="flex flex-col gap-4">
          <h4>
            <Trans
              i18nKey="analysis-results:orderTitle"
              values={{ orderNumber: analysisResponse.order.medusa_order_id }}
            />
          </h4>
          <h5>
            <Trans
              i18nKey={`orders:status.${analysisResponse.order.status}`}
            />
            <ButtonTooltip
              content={`${analysisResponse.order.created_at ? new Date(analysisResponse?.order?.created_at).toLocaleString() : ''}`}
              className="ml-6"
            />
          </h5>
        </div>
        {analysisResponse?.summary?.value && (
          <div>
            <strong>
              <Trans i18nKey="account:doctorAnalysisSummary" />
            </strong>
            <p>{analysisResponse.summary.value}</p>
          </div>
        )}
        <div className="flex flex-col gap-2">
          {analysisResponse.elements ? (
            analysisResponse.elements.map((element, index) => (
              <Analysis
                key={index}
                analysisElement={{ analysis_name_lab: element.analysis_name }}
                results={element}
              />
            ))
          ) : (
            <div className="text-muted-foreground text-sm">
              <Trans i18nKey="analysis-results:noAnalysisElements" />
            </div>
          )}
        </div>
      </PageBody>
    </>
  );
}