import Link from 'next/link';
import { redirect } from 'next/navigation';

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 redirect("/");
  }

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

  if (!analysisResponse) {
    return (
      <>
        <PageHeader
          title={<Trans i18nKey="analysis-results:pageTitle" />}
          description={<Trans i18nKey="analysis-results:descriptionEmpty" />}
        />
        <PageBody className="gap-4">
        </PageBody>
      </>
    );
  }

  const orderedAnalysisElements = analysisResponse.orderedAnalysisElements;

  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.medusaOrderId }}
            />
          </h4>
          <h5>
            <Trans
              i18nKey={`orders:status.${analysisResponse.order.status}`}
            />
            <ButtonTooltip
              content={`${analysisResponse.order.createdAt ? new Date(analysisResponse?.order?.createdAt).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">
          {orderedAnalysisElements ? (
            orderedAnalysisElements.map((element, index) => (
              <Analysis key={index} element={element} />
            ))
          ) : (
            <div className="text-muted-foreground text-sm">
              <Trans i18nKey="analysis-results:noAnalysisElements" />
            </div>
          )}
        </div>
      </PageBody>
    </>
  );
}