dyolink/frontend/src/components/ui/lab/CasesPage.tsx

'use client';

import { useCallback, useEffect, useMemo, useState } from 'react';
import { useSearchParams } from 'next/navigation';
import { useTranslations } from 'next-intl';
import { getUserFacingError } from '@/components/shared/formatApiError';
import { useAuth } from '@/lib/hooks/useAuth';
import { useToast } from '@/lib/hooks/useToast';
import { canEditCases, canEditTasks } from '@/components/shared/permissions';
import { CaseDetailPanel, CaseTaskProgressBar } from '@/components/ui/lab/CaseDetailPanel';
import { LabCaseCommentsPanel } from '@/components/ui/lab/LabCaseCommentsPanel';
import {
  formatCaseDateTime,
  formatPatientName,
} from '@/components/lab/caseDetailUtils';
import { LabCaseDueDateBadge } from '@/components/lab/LabCaseDueDateBadge';
import { notificationsApi } from '@/lib/api/notifications';
import { notifyTabBadgesChanged } from '@/lib/tabBadgeUtils';
import { casesApi } from '@/lib/api/cases';
import { tasksApi } from '@/lib/api/tasks';
import { treatmentCatalogApi } from '@/lib/api/treatment-catalog';
import { treatmentTypeLabelFromCatalog } from '@/components/shared/treatmentTypeDisplay';
import { Badge } from '@/components/ui/shared/Badge';
import { Button } from '@/components/ui/shared/Button';
import { MobileDetailBackButton } from '@/components/ui/shared/MobileDetailBackButton';
import { FORM_SELECT_CLASS } from '@/components/shared/formSelectStyles';
import { SearchBar } from '@/components/ui/shared/SearchBar';
import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';
import type {
  AssignableTaskStaff,
  CasesFilterOptions,
  LabCaseDetail,
  LabCaseListItem,
  LabTaskStatus,
  PaginatedLabCases,
} from '@/types/cases';

const PAGE_SIZE = 20;

export function CasesPage() {
  const t = useTranslations('cases');
  const tErrors = useTranslations('errors');
  const tCommon = useTranslations('common');
  const { currentOrganization, user } = useAuth();
  const toast = useToast();
  const searchParams = useSearchParams();

  const [search, setSearch] = useState('');
  const [clinicId, setClinicId] = useState('');
  const [treatmentType, setTreatmentType] = useState('');
  const [sentFrom, setSentFrom] = useState('');
  const [sentTo, setSentTo] = useState('');
  const [page, setPage] = useState(1);

  const [cases, setCases] = useState<LabCaseListItem[]>([]);
  const [pagination, setPagination] = useState<PaginatedLabCases['pagination']>({
    page: 1,
    limit: PAGE_SIZE,
    total: 0,
    totalPages: 1,
  });
  const [filterOptions, setFilterOptions] = useState<CasesFilterOptions>({
    clinics: [],
    treatmentTypes: [],
  });
  const [treatmentCatalog, setTreatmentCatalog] = useState<TreatmentCatalogEntry[]>([]);

  const [selectedCaseId, setSelectedCaseId] = useState<string | null>(null);
  const [mobileDetailOpen, setMobileDetailOpen] = useState(false);
  const [selectedCase, setSelectedCase] = useState<LabCaseDetail | null>(null);
  const [loadingList, setLoadingList] = useState(false);
  const [loadingDetail, setLoadingDetail] = useState(false);
  const [updatingImportant, setUpdatingImportant] = useState(false);
  const [assignableStaff, setAssignableStaff] = useState<AssignableTaskStaff[]>([]);
  const [assigningTaskId, setAssigningTaskId] = useState<string | null>(null);
  const [commentCount, setCommentCount] = useState(0);

  const canEdit = canEditCases(currentOrganization);
  const canEditComments = canEditTasks(currentOrganization);
  const locale = user?.language ?? 'en';

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

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

  const hasActiveFilters = Boolean(
    search.trim() || clinicId || treatmentType || sentFrom || sentTo,
  );

  const loadCases = async (params: {
    q: string;
    clinicOrganizationId: string;
    treatmentType: string;
    sentFrom: string;
    sentTo: string;
    page: number;
  }) => {
    setLoadingList(true);
    toast.setError('');
    try {
      const response = await casesApi.list({
        q: params.q.trim() || undefined,
        clinicOrganizationId: params.clinicOrganizationId || undefined,
        treatmentType: params.treatmentType || undefined,
        sentFrom: params.sentFrom || undefined,
        sentTo: params.sentTo || undefined,
        page: params.page,
        limit: PAGE_SIZE,
      });
      setCases(response.data.items);
      setPagination(response.data.pagination);
    } catch (error: unknown) {
      toast.showError(getUserFacingError(error, tErrors, t('errorLoadList')));
    } finally {
      setLoadingList(false);
    }
  };

  const loadDetail = async (caseId: string, options?: { silent?: boolean }) => {
    if (!options?.silent) {
      setLoadingDetail(true);
    }
    toast.setError('');
    try {
      const response = await casesApi.getOne(caseId);
      setSelectedCase(response.data);
    } catch (error: unknown) {
      toast.showError(getUserFacingError(error, tErrors, t('errorLoadDetail')));
      if (!options?.silent) {
        setSelectedCase(null);
      }
    } finally {
      if (!options?.silent) {
        setLoadingDetail(false);
      }
    }
  };

  useEffect(() => {
    void casesApi.listFilterOptions().then((r) => setFilterOptions(r.data)).catch(() => {});
    void treatmentCatalogApi.list().then((r) => setTreatmentCatalog(r.data)).catch(() => {});
    if (canEdit) {
      void casesApi.listAssignableStaff().then((r) => setAssignableStaff(r.data)).catch(() => {});
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps -- mount-only initial fetch
  }, [canEdit]);

  useEffect(() => {
    const caseIdFromUrl = searchParams.get('caseId');
    if (caseIdFromUrl) {
      setSelectedCaseId(caseIdFromUrl);
      setMobileDetailOpen(true);
    }
  }, [searchParams]);

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

  useEffect(() => {
    const timeout = setTimeout(() => {
      void loadCases({
        q: search,
        clinicOrganizationId: clinicId,
        treatmentType,
        sentFrom,
        sentTo,
        page,
      });
    }, search ? 300 : 0);
    return () => clearTimeout(timeout);
    // eslint-disable-next-line react-hooks/exhaustive-deps -- debounced search + filter reload
  }, [search, clinicId, treatmentType, sentFrom, sentTo, page]);

  useEffect(() => {
    if (selectedCaseId) {
      void loadDetail(selectedCaseId);
      void notificationsApi.markCaseRead(selectedCaseId).then(() => {
        notifyTabBadgesChanged();
        setCases((prev) =>
          prev.map((item) =>
            item.id === selectedCaseId ? { ...item, hasUnread: false } : item,
          ),
        );
      });
      void tasksApi
        .listComments(selectedCaseId)
        .then((r) => setCommentCount(r.data.length))
        .catch(() => setCommentCount(0));
    } else {
      setSelectedCase(null);
      setCommentCount(0);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps -- reload when selection changes
  }, [selectedCaseId]);

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

  const loadCaseAttachmentBlob = useCallback(
    (caseId: string, attachmentId: string) => casesApi.getAttachmentFileBlob(caseId, attachmentId),
    [],
  );

  function clearFilters() {
    setSearch('');
    setClinicId('');
    setTreatmentType('');
    setSentFrom('');
    setSentTo('');
    setPage(1);
  }

  async function handleAssignTask(taskId: string, assigneeUserId: string | null) {
    if (!selectedCaseId || !canEdit) return;

    setAssigningTaskId(taskId);
    toast.setError('');
    try {
      const response = await casesApi.assignTask(selectedCaseId, taskId, assigneeUserId);
      setSelectedCase(response.data);
    } catch (error: unknown) {
      toast.showError(getUserFacingError(error, tErrors, t('errorAssignTask')));
    } finally {
      setAssigningTaskId(null);
    }
  }

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

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

    setUpdatingImportant(true);
    toast.setError('');
    try {
      const response = await casesApi.setCaseImportant(selectedCaseId, isImportant);
      setSelectedCase(response.data);
      setCases((prev) =>
        prev.map((item) =>
          item.id === selectedCaseId ? { ...item, isImportant: response.data.isImportant } : item,
        ),
      );
      notifyTabBadgesChanged();
    } catch (error: unknown) {
      setSelectedCase(previousCase);
      toast.showError(getUserFacingError(error, tErrors, t('errorUpdateTask')));
    } finally {
      setUpdatingImportant(false);
    }
  }

  const filterSelectClass = `${FORM_SELECT_CLASS} w-full rounded-md px-3 py-2`;

  return (
    <div className="space-y-4">
      <div>
        <h1 className="text-xl sm:text-2xl font-semibold text-text-primary">{t('title')}</h1>
        <p className="text-sm text-text-muted mt-1">{t('subtitle')}</p>
      </div>

      <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={t('searchPlaceholder')}
          />

          <div className="grid gap-2 sm:grid-cols-2">
            <label className="space-y-1">
              <span className="text-xs font-medium text-text-muted">{t('filterClinic')}</span>
              <select
                value={clinicId}
                onChange={(e) => {
                  setClinicId(e.target.value);
                  setPage(1);
                }}
                className={filterSelectClass}
              >
                <option value="">{t('filterClinicAll')}</option>
                {filterOptions.clinics.map((clinic) => (
                  <option key={clinic.id} value={clinic.id}>
                    {clinic.name}
                  </option>
                ))}
              </select>
            </label>

            <label className="space-y-1">
              <span className="text-xs font-medium text-text-muted">{t('filterTreatmentType')}</span>
              <select
                value={treatmentType}
                onChange={(e) => {
                  setTreatmentType(e.target.value);
                  setPage(1);
                }}
                className={filterSelectClass}
              >
                <option value="">{t('filterTreatmentTypeAll')}</option>
                {filterOptions.treatmentTypes.map((type) => (
                  <option key={type.code} value={type.code}>
                    {treatmentLabel(type.code)}
                  </option>
                ))}
              </select>
            </label>

            <label className="space-y-1">
              <span className="text-xs font-medium text-text-muted">{t('filterSentFrom')}</span>
              <input
                type="date"
                value={sentFrom}
                onChange={(e) => {
                  setSentFrom(e.target.value);
                  setPage(1);
                }}
                className={filterSelectClass}
              />
            </label>

            <label className="space-y-1">
              <span className="text-xs font-medium text-text-muted">{t('filterSentTo')}</span>
              <input
                type="date"
                value={sentTo}
                onChange={(e) => {
                  setSentTo(e.target.value);
                  setPage(1);
                }}
                className={filterSelectClass}
              />
            </label>
          </div>

          {hasActiveFilters ? (
            <Button variant="ghost" size="sm" onClick={clearFilters} className="self-start">
              {t('clearFilters')}
            </Button>
          ) : null}

          <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('emptyList')}</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="flex items-center gap-2">
                          <div className="flex min-w-0 flex-1 flex-wrap items-center gap-1.5">
                            <div className="font-medium text-text-primary">
                              {formatPatientName(item.patient)}
                            </div>
                            <LabCaseDueDateBadge
                              dueDate={item.dueDate}
                              locale={locale}
                              className="text-[10px]"
                            />
                            {item.isImportant ? (
                              <Badge variant="warning" fixedWidth={false}>
                                {t('importantLabel')}
                              </Badge>
                            ) : null}
                          </div>
                          {item.hasUnread ? (
                            <span
                              className="h-2 w-2 shrink-0 rounded-full bg-badge-warning-fg"
                              aria-label={t('unreadCase')}
                            />
                          ) : null}
                        </div>
                        <div className="text-xs text-text-muted mt-0.5">
                          {item.patient.mobile}
                        </div>
                        <div className="text-xs text-text-muted mt-0.5">{item.clinic.name}</div>
                        <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))}
              >
                {t('prevPage')}
              </Button>
              <span className="text-xs text-text-muted text-center">
                {t('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)}
              >
                {t('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">{t('selectCaseHint')}</p>
          ) : loadingDetail || !selectedCase ? (
            <p className="text-sm text-text-muted">{tCommon('loading')}</p>
          ) : (
            <CaseDetailPanel
              labCase={selectedCase}
              locale={locale}
              treatmentLabel={treatmentLabel}
              statusOptions={statusOptions}
              loadAttachmentBlob={loadCaseAttachmentBlob}
              showCommentsButton
              commentCount={commentCount}
              onCommentsClick={scrollToComments}
              canEditImportant={canEdit}
              updatingImportant={updatingImportant}
              onImportantChange={(checked) => void handleCaseImportantToggle(checked)}
              assignableStaff={assignableStaff}
              canAssignTasks={canEdit}
              assigningTaskId={assigningTaskId}
              onAssignTask={(taskId, assigneeUserId) =>
                void handleAssignTask(taskId, assigneeUserId)
              }
              headerMetaLines={
                <p className="text-sm text-text-muted">
                  {t('fromClinic', { name: selectedCase.clinic.name })}
                </p>
              }
              commentsSection={
                selectedCaseId ? (
                  <section id="case-comments" className="scroll-mt-4 border-t border-border pt-4">
                    <LabCaseCommentsPanel
                      caseId={selectedCaseId}
                      canPost={canEditComments}
                      canToggleVisibility={canEditComments}
                      loadComments={async () => {
                        const r = await tasksApi.listComments(selectedCaseId);
                        setCommentCount(r.data.length);
                        return r.data;
                      }}
                      onPost={async (body, visibleToClinic) => {
                        const r = await tasksApi.addComment(selectedCaseId, {
                          body,
                          visibleToClinic,
                        });
                        setCommentCount((n) => n + 1);
                        notifyTabBadgesChanged();
                        return r.data;
                      }}
                      onToggleVisibility={async (commentId, visible) => {
                        const r = await tasksApi.setCommentVisibility(commentId, visible);
                        return r.data;
                      }}
                      onError={toast.showError}
                    />
                  </section>
                ) : null
              }
            />
          )}
        </section>
      </div>

    </div>
  );
}