'use client';

import React, { ReactElement, ReactNode, useMemo, useState } from 'react';

import { UserAnalysisElement } from '@/packages/features/accounts/src/types/accounts';
import { format } from 'date-fns';
import { Info } from 'lucide-react';

import { Trans } from '@kit/ui/trans';
import { cn } from '@kit/ui/utils';

import { AnalysisElement } from '~/lib/services/analysis-element.service';

import AnalysisLevelBar, {
  AnalysisLevelBarSkeleton,
  AnalysisResultLevel,
} from './analysis-level-bar';

export type AnalysisResultForDisplay = Pick<
  UserAnalysisElement,
  | 'norm_status'
  | 'response_value'
  | 'unit'
  | 'norm_lower_included'
  | 'norm_upper_included'
  | 'norm_lower'
  | 'norm_upper'
  | 'response_time'
>;

const AnalysisDoctor = ({
  analysisElement,
  results,
  startIcon,
  endIcon,
  isCancelled,
}: {
  analysisElement: Pick<AnalysisElement, 'analysis_name_lab'>;
  results?: AnalysisResultForDisplay;
  isCancelled?: boolean;
  startIcon?: ReactElement | null;
  endIcon?: ReactNode | null;
}) => {
  const name = analysisElement.analysis_name_lab || '';
  const status = results?.norm_status;
  const value = results?.response_value || 0;
  const unit = results?.unit || '';
  const normLower = results?.norm_lower ?? null;
  const normUpper = results?.norm_upper ?? null;

  const [showTooltip, setShowTooltip] = useState(false);
  const analysisResultLevel = useMemo(() => {
    if (!results || status === null || status === undefined) {
      return null;
    }

    switch (status) {
      case 1:
        return AnalysisResultLevel.WARNING;
      case 2:
        return AnalysisResultLevel.CRITICAL;
      case 0:
      default:
        return AnalysisResultLevel.NORMAL;
    }
  }, [results, status]);

  const normRangeText = useMemo(() => {
    if (normLower === null && normUpper === null) {
      return null;
    }
    return `${normLower ?? '...'} - ${normUpper ?? '...'}`;
  }, [normLower, normUpper]);

  return (
    <div className="border-border rounded-lg border px-5">
      <div className="flex flex-col items-center justify-between gap-2 py-3 sm:h-[65px] sm:flex-row sm:gap-0">
        <div className="flex items-center gap-2 font-semibold">
          {startIcon || <div className="w-4" />}
          {name}
          {results?.response_time && (
            <div
              className="group/tooltip relative"
              onClick={(e) => {
                e.stopPropagation();
                setShowTooltip(!showTooltip);
              }}
              onMouseLeave={() => setShowTooltip(false)}
            >
              <Info className="hover" />{' '}
              <div
                className={cn(
                  'absolute bottom-full left-1/2 z-10 mb-2 hidden -translate-x-1/2 rounded border bg-white p-4 text-sm whitespace-nowrap group-hover/tooltip:block',
                  { block: showTooltip },
                )}
              >
                <Trans i18nKey="analysis-results:analysisDate" />
                {': '}
                {format(new Date(results.response_time), 'dd.MM.yyyy HH:mm')}
              </div>
            </div>
          )}
        </div>
        {results ? (
          <>
            <div className="flex items-center gap-3 sm:ml-auto">
              <div className="font-semibold">{value}</div>
              <div className="text-muted-foreground text-sm">{unit}</div>
            </div>
            <div className="text-muted-foreground mx-8 flex flex-col-reverse gap-2 text-center text-sm sm:block sm:gap-0">
              {normRangeText}
              <div>
                <Trans i18nKey="analysis-results:results.range.normal" />
              </div>
            </div>
            <AnalysisLevelBar
              results={results}
              level={analysisResultLevel}
              normRangeText={normRangeText}
            />
            {endIcon || <div className="mx-2 w-4" />}
          </>
        ) : isCancelled ? null : (
          <>
            <div className="flex items-center gap-3 sm:ml-auto">
              <div className="font-semibold">
                <Trans i18nKey="analysis-results:waitingForResults" />
              </div>
            </div>
            <div className="mx-8 w-[60px]"></div>
            <AnalysisLevelBarSkeleton />
          </>
        )}
      </div>
    </div>
  );
};

export default AnalysisDoctor;