dyolink/frontend/src/components/ui/organizations/ConnectionCaseHistoryContent.tsx

'use client';

import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useTranslations } from 'next-intl';
import { formatApiErrorMessage } from '@/components/shared/formatApiError';
import { canEditCases } from '@/components/shared/permissions';
import { useAuth } from '@/lib/hooks/useAuth';
import { useToast } from '@/lib/hooks/useToast';
import { organizationApi } from '@/lib/api/organization';
import { treatmentCatalogApi } from '@/lib/api/treatment-catalog';
import { treatmentTypeLabelFromCatalog } from '@/components/ui/treatment/treatmentTypeDisplay';
import { Button } from '@/components/ui/shared/Button';
import { MobileDetailBackButton } from '@/components/ui/shared/MobileDetailBackButton';
import { SearchBar } from '@/components/ui/shared/SearchBar';
import { ToastStack } from '@/components/ui/shared/Toast';
import { CaseDetailPanel, CaseTaskProgressBar } from '@/components/ui/lab/CaseDetailPanel';
import { LabCaseCommentsPanel } from '@/components/ui/lab/LabCaseCommentsPanel';
import {
  formatCaseDateTime,
  formatPatientName,
} from '@/components/ui/lab/caseDetailUtils';
import { treatmentsApi } from '@/lib/api/treatments';
import { casesApi } from '@/lib/api/cases';
import type { CounterpartItemDto } from '@/lib/api/organization';
import type { LabCaseDetail, LabCaseListItem, LabTaskStatus } from '@/types/cases';
import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';

const PAGE_SIZE = 20;

interface ConnectionCaseHistoryContentProps {
  connection: CounterpartItemDto;
  onBack: () => void;
}

export function ConnectionCaseHistoryContent({
  connection,
  onBack,
}: ConnectionCaseHistoryContentProps) {
  const t = useTranslations('organizations');
  const tCases = useTranslations('cases');
  const tCommon = useTranslations('common');
  const { currentOrganization, user } = useAuth();
  const { showError, setError, messages: toastMessages } = useToast();

  const [search, setSearch] = useState('');
  const [page, setPage] = useState(1);
  const [cases, setCases] = useState<LabCaseListItem[]>([]);
  const [pagination, setPagination] = useState({
    page: 1,
    limit: PAGE_SIZE,
    total: 0,
    totalPages: 1,
  });
  const [selectedCaseId, setSelectedCaseId] = useState<string | null>(null);
  const [mobileDetailOpen, setMobileDetailOpen] = useState(false);
  const [selectedCase, setSelectedCase] = useState<LabCaseDetail | null>(null);
  const [treatmentCatalog, setTreatmentCatalog] = useState<TreatmentCatalogEntry[]>([]);
  const [loadingList, setLoadingList] = useState(false);
  const [loadingDetail, setLoadingDetail] = useState(false);
  const [updatingImportant, setUpdatingImportant] = useState(false);
  const [commentCount, setCommentCount] = useState(0);

  const locale = user?.language ?? 'en';
  const isClinic = currentOrganization?.type === 'CLINIC';
  const canEditImportant = !isClinic && canEditCases(currentOrganization);

  const tRef = useRef(t);
  tRef.current = t;

  const treatmentLabel = useCallback(
    (type: string) => treatmentTypeLabelFromCatalog(type, treatmentCatalog),
    [treatmentCatalog],
  );

  useEffect(() => {
    void treatmentCatalogApi.list().then((r) => setTreatmentCatalog(r.data)).catch(() => {});
  }, []);

  const statusOptions: { value: LabTaskStatus; label: string }[] = useMemo(
    () => [
      { value: 'IN_PROGRESS', label: tCases('statusInProgress') },
      { value: 'COMPLETED', label: tCases('statusCompleted') },
    ],
    [tCases],
  );

  useEffect(() => {
    let cancelled = false;

    const timeout = setTimeout(() => {
      void (async () => {
        setLoadingList(true);
        setError('');
        try {
          const response = await organizationApi.listConnectionCases(connection.id, {
            q: search.trim() || undefined,
            page,
            limit: PAGE_SIZE,
          });
          if (cancelled) return;
          setCases(response.data.items);
          setPagination(response.data.pagination);
        } catch (error: unknown) {
          if (cancelled) return;
          showError(formatApiErrorMessage(error, tRef.current('caseHistoryErrorLoadList')));
        } finally {
          if (!cancelled) setLoadingList(false);
        }
      })();
    }, search ? 300 : 0);

    return () => {
      cancelled = true;
      clearTimeout(timeout);
    };
  }, [search, page, connection.id, showError, setError]);

  useEffect(() => {
    if (!selectedCaseId) {
      setSelectedCase(null);
      setCommentCount(0);
      return;
    }

    let cancelled = false;

    void organizationApi
      .listConnectionCaseComments(connection.id, selectedCaseId)
      .then((r) => {
        if (!cancelled) setCommentCount(r.data.length);
      })
      .catch(() => {
        if (!cancelled) setCommentCount(0);
      });

    void (async () => {
      setLoadingDetail(true);
      setError('');
      try {
        const response = await organizationApi.getConnectionCase(connection.id, selectedCaseId);
        if (cancelled) return;
        setSelectedCase(response.data);
      } catch (error: unknown) {
        if (cancelled) return;
        showError(formatApiErrorMessage(error, tRef.current('caseHistoryErrorLoadDetail')));
        setSelectedCase(null);
      } finally {
        if (!cancelled) setLoadingDetail(false);
      }
    })();

    return () => {
      cancelled = true;
    };
  }, [selectedCaseId, connection.id, showError, setError]);

  useEffect(() => {
    if (!selectedCaseId) {
      setMobileDetailOpen(false);
    }
  }, [selectedCaseId]);

  function scrollToComments() {
    document.getElementById('case-comments')?.scrollIntoView({ behavior: 'smooth' });
  }

  const loadClinicAttachmentBlob = useCallback(
    (_caseId: string, attachmentId: string) => treatmentsApi.getAttachmentFileBlob(attachmentId),
    [],
  );

  async function handleCaseImportantToggle(isImportant: boolean) {
    if (!selectedCaseId || !canEditImportant || !selectedCase) return;

    const previousCase = selectedCase;
    setSelectedCase({ ...selectedCase, isImportant });

    setUpdatingImportant(true);
    setError('');
    try {
      const response = await casesApi.setCaseImportant(selectedCaseId, isImportant);
      setSelectedCase(response.data);
    } catch (error: unknown) {
      setSelectedCase(previousCase);
      showError(formatApiErrorMessage(error, tCases('errorUpdateTask')));
    } finally {
      setUpdatingImportant(false);
    }
  }

  return (
    <div className="space-y-6">
      <div>
        <button
          type="button"
          onClick={onBack}
          className="text-sm text-primary hover:opacity-90"
        >
          {t('caseHistoryBackToConnections')}
        </button>
      </div>

      <div>
        <h1 className="text-xl sm:text-2xl font-semibold text-text-primary">
          {t('caseHistoryTitle', { name: connection.organizationName })}
        </h1>
        <p className="text-sm text-text-secondary mt-1">
          {isClinic ? t('caseHistorySubtitleClinic') : t('caseHistorySubtitleLab')}
        </p>
      </div>

      <ToastStack {...toastMessages} />

      <div className="grid gap-4 lg:grid-cols-[minmax(300px,380px)_1fr]">
        <section
          className={`rounded-lg border border-border bg-surface p-3 sm:p-4 space-y-3 flex flex-col min-h-0 ${
            mobileDetailOpen && selectedCaseId ? 'hidden lg:flex' : 'flex'
          }`}
        >
          <SearchBar
            embedded
            value={search}
            onChange={(value) => {
              setSearch(value);
              setPage(1);
            }}
            placeholder={tCases('searchPlaceholder')}
          />

          <div className="flex-1 min-h-0">
            {loadingList ? (
              <p className="text-sm text-text-muted">{tCommon('loading')}</p>
            ) : cases.length === 0 ? (
              <p className="text-sm text-text-muted">{t('caseHistoryEmpty')}</p>
            ) : (
              <ul className="space-y-2 max-h-[55vh] overflow-y-auto pr-1">
                {cases.map((item) => {
                  const isActive = item.id === selectedCaseId;

                  return (
                    <li key={item.id}>
                      <button
                        type="button"
                        onClick={() => {
                          setSelectedCaseId(item.id);
                          setMobileDetailOpen(true);
                        }}
                        className={`w-full rounded-md border px-3 py-2.5 text-left transition-colors ${
                          isActive
                            ? 'border-primary bg-primary/5'
                            : 'border-border hover:border-primary/40'
                        }`}
                      >
                        <div className="font-medium text-text-primary">
                          {formatPatientName(item.patient)}
                        </div>
                        <div className="text-xs text-text-muted mt-0.5">{item.patient.mobile}</div>
                        {!isClinic ? (
                          <div className="text-xs text-text-muted mt-0.5">{item.clinic.name}</div>
                        ) : null}
                        <div className="text-xs text-text-muted mt-1">
                          {formatCaseDateTime(item.sentAt, locale)}
                        </div>
                        <div className="text-xs text-text-muted mt-1 truncate">
                          {item.treatmentType ? treatmentLabel(item.treatmentType) : '—'}
                        </div>
                        <div className="mt-2">
                          <CaseTaskProgressBar
                            completed={item.taskProgress.completed}
                            total={item.taskProgress.total}
                          />
                        </div>
                      </button>
                    </li>
                  );
                })}
              </ul>
            )}
          </div>

          {pagination.totalPages > 1 ? (
            <div className="flex items-center justify-between gap-2 pt-2 border-t border-border">
              <Button
                variant="outline"
                size="sm"
                disabled={page <= 1 || loadingList}
                onClick={() => setPage((p) => Math.max(1, p - 1))}
              >
                {tCases('prevPage')}
              </Button>
              <span className="text-xs text-text-muted text-center">
                {tCases('pageSummary', {
                  page: pagination.page,
                  totalPages: pagination.totalPages,
                  total: pagination.total,
                })}
              </span>
              <Button
                variant="outline"
                size="sm"
                disabled={page >= pagination.totalPages || loadingList}
                onClick={() => setPage((p) => p + 1)}
              >
                {tCases('nextPage')}
              </Button>
            </div>
          ) : null}
        </section>

        <section
          className={`rounded-lg border border-border bg-surface p-3 sm:p-4 min-h-[320px] lg:min-h-[420px] ${
            selectedCaseId && !mobileDetailOpen ? 'hidden lg:block' : ''
          }`}
        >
          {mobileDetailOpen && selectedCaseId ? (
            <MobileDetailBackButton onClick={() => setMobileDetailOpen(false)} />
          ) : null}
          {!selectedCaseId ? (
            <p className="text-sm text-text-muted">{tCases('selectCaseHint')}</p>
          ) : loadingDetail || !selectedCase ? (
            <p className="text-sm text-text-muted">{tCommon('loading')}</p>
          ) : (
            <CaseDetailPanel
              labCase={selectedCase}
              locale={locale}
              treatmentLabel={treatmentLabel}
              statusOptions={statusOptions}
              loadAttachmentBlob={loadClinicAttachmentBlob}
              showCommentsButton={isClinic}
              commentCount={commentCount}
              onCommentsClick={scrollToComments}
              canEditImportant={canEditImportant}
              updatingImportant={updatingImportant}
              onImportantChange={(checked) => void handleCaseImportantToggle(checked)}
              headerMetaLines={
                !isClinic ? (
                  <p className="text-sm text-text-muted">
                    {tCases('fromClinic', { name: selectedCase.clinic.name })}
                  </p>
                ) : (
                  <p className="text-sm text-text-muted">
                    {t('caseHistorySentToLab', { name: connection.organizationName })}
                  </p>
                )
              }
              commentsSection={
                isClinic && selectedCaseId ? (
                  <section id="case-comments" className="scroll-mt-4 border-t border-border pt-4">
                    <LabCaseCommentsPanel
                      caseId={selectedCaseId}
                      canPost
                      canToggleVisibility={false}
                      loadComments={async () => {
                        const r = await organizationApi.listConnectionCaseComments(
                          connection.id,
                          selectedCaseId,
                        );
                        setCommentCount(r.data.length);
                        return r.data;
                      }}
                      onPost={async (body) => {
                        const r = await organizationApi.addConnectionCaseComment(
                          connection.id,
                          selectedCaseId,
                          body,
                        );
                        setCommentCount((n) => n + 1);
                        return r.data;
                      }}
                      onError={showError}
                    />
                  </section>
                ) : null
              }
            />
          )}
        </section>
      </div>
    </div>
  );
}