dyolink/frontend/src/app/[locale]/(dashboard)/cases/page.tsx

'use client';

import { useCallback, useEffect, useMemo, useState } from 'react';
import { useSearchParams } from 'next/navigation';
import { useTranslations } from 'next-intl';
import { MessageSquare } from 'lucide-react';
import { ToastStack } from '@/components/ui/shared/Toast';
import { formatApiErrorMessage } from '@/components/shared/formatApiError';
import { useAuth } from '@/lib/hooks/useAuth';
import { useToast } from '@/lib/hooks/useToast';
import { canEditCases, canEditTasks } from '@/components/shared/permissions';
import { Badge } from '@/components/ui/shared/Badge';
import { LabCaseCommentsPanel } from '@/components/ui/lab/LabCaseCommentsPanel';
import { CaseToothChartPanel } from '@/components/ui/lab/CaseToothChartPanel';
import { LabCaseAttachmentPreview } from '@/components/ui/lab/LabCaseAttachmentPreview';
import { labTaskStatusVariant } from '@/components/ui/lab/labTaskStatusDisplay';
import { casesApi } from '@/lib/api/cases';
import { tasksApi } from '@/lib/api/tasks';
import { treatmentCatalogApi } from '@/lib/api/treatment-catalog';
import { treatmentTypeLabelFromCatalog } from '@/components/ui/treatment/treatmentTypeDisplay';
import { Button } from '@/components/ui/shared/Button';
import { FORM_SELECT_CLASS } from '@/components/ui/shared/formSelectStyles';
import { SearchBar } from '@/components/ui/shared/SearchBar';
import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';
import type {
  CasesFilterOptions,
  LabCaseDetail,
  LabCaseListItem,
  LabTaskStatus,
  PaginatedLabCases,
} from '@/types/cases';
import {
  formatToothList,
  prosthesisTypeBadgeStyle,
} from '@/components/ui/treatment/prosthesisTypeDisplay';

const PAGE_SIZE = 20;

function formatPatientName(patient: { firstName: string; lastName: string }) {
  return `${patient.firstName} ${patient.lastName}`.trim();
}

function formatDateTime(value: string | null, locale: string) {
  if (!value) return '—';
  return new Intl.DateTimeFormat(locale, {
    dateStyle: 'medium',
    timeStyle: 'short',
  }).format(new Date(value));
}

function TaskProgressBar({ completed, total }: { completed: number; total: number }) {
  const pct = total > 0 ? Math.round((completed / total) * 100) : 0;

  return (
    <div className="space-y-1">
      <div className="flex items-center justify-between text-xs text-text-muted">
        <span>{completed}/{total}</span>
        <span>{pct}%</span>
      </div>
      <div className="h-1.5 rounded-full bg-border overflow-hidden">
        <div
          className="h-full rounded-full bg-primary transition-all duration-300"
          style={{ width: `${pct}%` }}
        />
      </div>
    </div>
  );
}

export default function CasesPage() {
  const t = useTranslations('cases');
  const tTreatment = useTranslations('treatment');
  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 [selectedCase, setSelectedCase] = useState<LabCaseDetail | null>(null);
  const [loadingList, setLoadingList] = useState(false);
  const [loadingDetail, setLoadingDetail] = useState(false);
  const [updatingTaskId, setUpdatingTaskId] = 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(formatApiErrorMessage(error, t('errorLoadList')));
    } finally {
      setLoadingList(false);
    }
  };

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

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

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

  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 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),
    [],
  );

  const latestCaseAttachment = useMemo(() => {
    if (!selectedCase?.attachments.length) return null;
    return [...selectedCase.attachments].sort(
      (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
    )[0];
  }, [selectedCase?.attachments]);

  const caseProsthesisRows = useMemo(() => {
    if (!selectedCase) return [];
    if (selectedCase.toothProsthesis.length > 0) {
      const byCode = new Map<string, string[]>();
      for (const row of selectedCase.toothProsthesis) {
        const key = row.prosthesisTypeCode;
        const teeth = byCode.get(key) ?? [];
        if (!teeth.includes(row.tooth)) teeth.push(row.tooth);
        byCode.set(key, teeth);
      }
      return [...byCode.entries()].map(([prosthesisTypeCode, teeth]) => ({
        prosthesisTypeCode,
        teeth,
      }));
    }
    return selectedCase.tasksByTooth.map((g) => ({
      prosthesisTypeCode: g.prosthesisTypeCode,
      teeth: g.teeth,
    }));
  }, [selectedCase]);

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

  async function handleImportantToggle(taskId: string, isImportant: boolean) {
    if (!selectedCaseId || !canEdit) return;

    setUpdatingTaskId(taskId);
    toast.setError('');
    try {
      await casesApi.setTaskImportant(selectedCaseId, taskId, isImportant);
      await loadDetail(selectedCaseId);
    } catch (error: unknown) {
      toast.showError(formatApiErrorMessage(error, t('errorUpdateTask')));
    } finally {
      setUpdatingTaskId(null);
    }
  }

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

  return (
    <div className="space-y-4">
      <div>
        <h1 className="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-4 space-y-3 flex flex-col min-h-0">
          <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)}
                        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>
                        <div className="text-xs text-text-muted mt-0.5">{item.clinic.name}</div>
                        <div className="text-xs text-text-muted mt-1">
                          {formatDateTime(item.sentAt, locale)}
                        </div>
                        <div className="text-xs text-text-muted mt-1 truncate">
                          {item.treatmentTypes.map(treatmentLabel).join(', ')}
                        </div>
                        <div className="mt-2">
                          <TaskProgressBar
                            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-4 min-h-[420px]">
          {!selectedCaseId ? (
            <p className="text-sm text-text-muted">{t('selectCaseHint')}</p>
          ) : loadingDetail || !selectedCase ? (
            <p className="text-sm text-text-muted">{tCommon('loading')}</p>
          ) : (
            <div className="space-y-4">
              <header className="space-y-1 border-b border-border pb-3">
                <div className="flex flex-wrap items-start justify-between gap-2">
                  <h2 className="text-lg font-semibold text-text-primary">
                    {formatPatientName(selectedCase.patient)}
                  </h2>
                  <Button type="button" variant="outline" size="sm" onClick={scrollToComments}>
                    <MessageSquare className="h-4 w-4 me-1.5" />
                    {commentCount > 0
                      ? t('commentsCount', { count: commentCount })
                      : t('showComments')}
                  </Button>
                </div>
                <p className="text-sm text-text-muted">
                  {t('patientMobile')}: {selectedCase.patient.mobile}
                </p>
                <p className="text-sm text-text-muted">
                  {t('fromClinic', { name: selectedCase.clinic.name })}
                </p>
                <p className="text-sm text-text-muted">
                  {t('sentAt', { date: formatDateTime(selectedCase.sentAt, locale) })}
                </p>
                <div className="pt-1 max-w-xs">
                  <p className="text-sm text-text-muted mb-1">
                    {t('taskProgressLabel', {
                      completed: selectedCase.taskProgress.completed,
                      total: selectedCase.taskProgress.total,
                    })}
                  </p>
                  <TaskProgressBar
                    completed={selectedCase.taskProgress.completed}
                    total={selectedCase.taskProgress.total}
                  />
                </div>
              </header>

              <div className="flex flex-wrap items-start gap-4">
                <CaseToothChartPanel
                  details={selectedCase.details}
                  prosthesisRows={caseProsthesisRows}
                  scale={0.5}
                  className="min-w-0 flex-1"
                />
                {latestCaseAttachment && selectedCaseId ? (
                  <div className="shrink-0 space-y-1">
                    <p className="text-xs font-medium text-text-secondary">{t('latestAttachment')}</p>
                    <LabCaseAttachmentPreview
                      caseId={selectedCaseId}
                      attachment={latestCaseAttachment}
                      loadBlob={loadCaseAttachmentBlob}
                    />
                  </div>
                ) : null}
              </div>

              {selectedCase.details.length > 0 && (
                <div className="space-y-2">
                  <h3 className="text-sm font-medium text-text-primary">{t('treatmentDetails')}</h3>
                  <ul className="space-y-2 text-sm">
                    {selectedCase.details.map((detail) => (
                      <li key={detail.id} className="rounded-md bg-background border border-border p-2">
                        <div className="font-medium">{treatmentLabel(detail.treatmentType)}</div>
                        <div className="text-text-muted">
                          {t('teethLabel')}: {detail.teeth.join(', ') || '—'}
                        </div>
                        {detail.comment ? (
                          <div className="text-text-muted mt-1">{detail.comment}</div>
                        ) : null}
                      </li>
                    ))}
                  </ul>
                </div>
              )}

              <div className="space-y-3">
                <h3 className="text-sm font-medium text-text-primary">{t('tasksByTooth')}</h3>
                {selectedCase.tasksByTooth.length === 0 ? (
                  <p className="text-sm text-text-muted">{t('noTasks')}</p>
                ) : (
                  selectedCase.tasksByTooth.map((group, groupIndex) => (
                    <div
                      key={`${group.treatmentDetailId}-${group.prosthesisTypeCode}`}
                      className="rounded-md border border-border p-3 space-y-2"
                    >
                      <div className="flex flex-wrap items-center gap-2">
                        <Badge
                          truncate
                          title={group.prosthesisTypeLabel}
                          style={prosthesisTypeBadgeStyle(group.prosthesisTypeCode, groupIndex)}
                        >
                          {group.prosthesisTypeLabel}
                        </Badge>
                        <span className="text-sm font-medium text-text-primary">
                          {t('toothGroupTitle', {
                            teeth: formatToothList(group.teeth),
                            prosthesis: group.prosthesisTypeLabel,
                          })}
                        </span>
                      </div>
                      <ul className="space-y-2">
                        {group.tasks.map((task) => (
                          <li
                            key={task.id}
                            className="rounded bg-background p-2 text-sm space-y-1"
                          >
                            <div className="flex flex-wrap items-center gap-2">
                              <span className="min-w-0 flex-1">
                                {task.stepOrder}. {task.stepLabel}
                              </span>
                              <Badge variant={labTaskStatusVariant(task.status)} fixedWidth={false}>
                                {statusOptions.find((opt) => opt.value === task.status)?.label ??
                                  task.status}
                              </Badge>
                              {canEdit ? (
                                <label className="flex items-center gap-1.5 text-xs cursor-pointer shrink-0">
                                  <input
                                    type="checkbox"
                                    checked={task.isImportant}
                                    disabled={updatingTaskId === task.id}
                                    onChange={(e) =>
                                      void handleImportantToggle(task.id, e.target.checked)
                                    }
                                  />
                                  {t('importantLabel')}
                                </label>
                              ) : task.isImportant ? (
                                <Badge variant="warning" fixedWidth={false}>
                                  {t('importantLabel')}
                                </Badge>
                              ) : null}
                            </div>
                            <p className="text-[11px] text-text-muted">
                              {task.lastStatusChangedBy
                                ? t('lastUpdatedBy', { name: task.lastStatusChangedBy.name })
                                : t('lastUpdatedUnknown')}
                              {task.lastStatusChangedAt
                                ? ` · ${formatDateTime(task.lastStatusChangedAt, locale)}`
                                : ''}
                            </p>
                          </li>
                        ))}
                      </ul>
                    </div>
                  ))
                )}
              </div>

              {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);
                      return r.data;
                    }}
                    onToggleVisibility={async (commentId, visible) => {
                      const r = await tasksApi.setCommentVisibility(commentId, visible);
                      return r.data;
                    }}
                    onError={toast.showError}
                  />
                </section>
              ) : null}
            </div>
          )}
        </section>
      </div>

      <ToastStack {...toast.messages} />
    </div>
  );
}