'use client';

import { useQueryClient } from '@tanstack/react-query';
import { capitalize } from 'lodash';

import {
  getDOBWithAgeStringFromPersonalCode,
  getResultSetName,
} from '@kit/doctor/lib/helpers';
import {
  AnalysisResponse,
  DoctorFeedback,
  Order,
  Patient,
} from '@kit/doctor/schema/doctor-analysis-detail-view.schema';
import { useCurrentLocaleLanguageNames } from '@kit/shared/hooks';
import { getFullName } from '@kit/shared/utils';
import { useUser } from '@kit/supabase/hooks/use-user';
import { Trans } from '@kit/ui/trans';

import { bmiFromMetric } from '~/lib/utils';

import AnalysisFeedback from './analysis-feedback';
import DoctorAnalysisWrapper from './doctor-analysis-wrapper';
import DoctorJobSelect from './doctor-job-select';

export default function AnalysisView({
  patient,
  order,
  analyses,
  feedback,
}: {
  patient: Patient;
  order: Order;
  analyses: AnalysisResponse[];
  feedback?: DoctorFeedback;
}) {
  const { data: user } = useUser();
  const queryClient = useQueryClient();

  const languageNames = useCurrentLocaleLanguageNames();

  const isInProgress = !!(
    !!feedback?.status &&
    feedback?.doctor_user_id &&
    feedback?.status !== 'COMPLETED'
  );
  const isCurrentDoctorJob =
    !!feedback?.doctor_user_id && feedback?.doctor_user_id === user?.id;

  if (!patient || !order || !analyses) {
    return null;
  }

  return (
    <>
      <div className="xs:flex xs:justify-between">
        <h3>
          <Trans
            i18nKey={getResultSetName(
              order.title,
              order.isPackage,
              Object.keys(analyses)?.length,
            )}
          />
        </h3>
        <div className="xs:flex hidden">
          <DoctorJobSelect
            analysisOrderId={order.analysisOrderId}
            userId={patient.userId}
            doctorUserId={feedback?.doctor_user_id}
            isRemovable={isCurrentDoctorJob && isInProgress}
            onJobUpdate={() =>
              queryClient.invalidateQueries({
                predicate: (query) => query.queryKey.includes('doctor-jobs'),
              })
            }
          />
        </div>
      </div>
      <div className="xs:grid-cols-2 grid">
        <div className="font-bold">
          <Trans i18nKey="doctor:name" />
        </div>
        <div>{getFullName(patient.firstName, patient.lastName)}</div>
        <div className="font-bold">
          <Trans i18nKey="doctor:personalCode" />
        </div>
        <div>{patient.personalCode ?? ''}</div>
        <div className="font-bold">
          <Trans i18nKey="doctor:dobAndAge" />
        </div>
        <div>{getDOBWithAgeStringFromPersonalCode(patient.personalCode)}</div>
        <div className="font-bold">
          <Trans i18nKey="doctor:height" />
        </div>
        <div>{patient.height}</div>
        <div className="font-bold">
          <Trans i18nKey="doctor:weight" />
        </div>
        <div>{patient.weight}</div>
        <div className="font-bold">
          <Trans i18nKey="doctor:bmi" />
        </div>
        <div>
          {patient?.weight && patient?.height
            ? bmiFromMetric(patient.weight, patient.height)
            : '-'}
        </div>
        <div className="font-bold">
          <Trans i18nKey="doctor:smoking" />
        </div>
        <div>-</div>
        <div className="font-bold">
          <Trans i18nKey="doctor:phone" />
        </div>
        <div>{patient.phone}</div>
        <div className="font-bold">
          <Trans i18nKey="doctor:email" />
        </div>
        <div>{patient.email}</div>
        <div className="font-bold">
          <Trans i18nKey="common:language" />
        </div>
        <div>
          {capitalize(languageNames.of(patient.preferred_locale ?? 'et'))}
        </div>
      </div>
      <div className="xs:hidden block">
        <DoctorJobSelect
          className="w-full"
          analysisOrderId={order.analysisOrderId}
          userId={patient.userId}
          doctorUserId={feedback?.doctor_user_id}
          isRemovable={isCurrentDoctorJob && isInProgress}
          onJobUpdate={() =>
            queryClient.invalidateQueries({
              predicate: (query) => query.queryKey.includes('doctor-jobs'),
            })
          }
        />
      </div>
      <h3>
        <Trans i18nKey="doctor:results" />
      </h3>
      <div className="flex flex-col gap-2">
        {analyses.map((analysisData) => {
          return (
            <DoctorAnalysisWrapper
              key={analysisData.id}
              analysisData={analysisData}
            />
          );
        })}
      </div>
      {order.isPackage && (
        <AnalysisFeedback order={order} patient={patient} feedback={feedback} />
      )}
    </>
  );
}