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

'use client';

import { useCallback, useEffect, useMemo, useState } from 'react';
import { useTranslations } from 'next-intl';
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 { hasPermission } from '@/components/shared/permissions';
import { casesApi } from '@/lib/api/cases';
import type { AssignableMember, LabCaseDetail, LabCaseListItem, LabTaskStatus } from '@/types/cases';

const TREATMENT_TYPE_KEYS = {
  consultation: 'typeConsultation',
  filling: 'typeFilling',
  endo: 'typeEndo',
  visit: 'typeVisit',
  hygiene: 'typeHygiene',
} as const;

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));
}

export default function CasesPage() {
  const t = useTranslations('cases');
  const tTreatment = useTranslations('treatment');
  const tCommon = useTranslations('common');
  const { currentOrganization, user } = useAuth();
  const toast = useToast();

  const [search, setSearch] = useState('');
  const [cases, setCases] = useState<LabCaseListItem[]>([]);
  const [selectedCaseId, setSelectedCaseId] = useState<string | null>(null);
  const [selectedCase, setSelectedCase] = useState<LabCaseDetail | null>(null);
  const [members, setMembers] = useState<AssignableMember[]>([]);
  const [loadingList, setLoadingList] = useState(false);
  const [loadingDetail, setLoadingDetail] = useState(false);
  const [updatingTaskId, setUpdatingTaskId] = useState<string | null>(null);

  const canEdit = hasPermission(currentOrganization, 'TAB_CASES_EDIT');
  const locale = user?.language ?? 'en';

  const treatmentLabel = useCallback(
    (type: string) => {
      const key = TREATMENT_TYPE_KEYS[type as keyof typeof TREATMENT_TYPE_KEYS];
      return key ? tTreatment(key) : type;
    },
    [tTreatment],
  );

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

  const loadCases = async (q: string) => {
    setLoadingList(true);
    toast.setError('');
    try {
      const response = await casesApi.list({ q: q.trim() || undefined, page: 1, limit: 50 });
      setCases(response.data.items);
    } 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 loadCases('');
    void casesApi.listAssignableMembers().then((r) => setMembers(r.data)).catch(() => {});
    // eslint-disable-next-line react-hooks/exhaustive-deps -- mount-only initial fetch
  }, []);

  useEffect(() => {
    const timeout = setTimeout(() => {
      void loadCases(search);
    }, 300);
    return () => clearTimeout(timeout);
    // eslint-disable-next-line react-hooks/exhaustive-deps -- debounced search only
  }, [search]);

  useEffect(() => {
    if (selectedCaseId) {
      void loadDetail(selectedCaseId);
    } else {
      setSelectedCase(null);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps -- reload when selection changes
  }, [selectedCaseId]);

  async function handleTaskUpdate(
    taskId: string,
    payload: { assigneeUserId?: string | null; status?: LabTaskStatus },
  ) {
    if (!selectedCaseId || !canEdit) return;

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

  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(280px,360px)_1fr]">
        <section className="rounded-lg border border-border bg-surface p-4 space-y-3">
          <input
            type="search"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            placeholder={t('searchPlaceholder')}
            className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm"
          />

          {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-[70vh] overflow-y-auto">
              {cases.map((item) => {
                const isActive = item.id === selectedCaseId;
                const progress =
                  item.taskProgress.total > 0
                    ? `${item.taskProgress.completed}/${item.taskProgress.total}`
                    : '0/0';

                return (
                  <li key={item.id}>
                    <button
                      type="button"
                      onClick={() => setSelectedCaseId(item.id)}
                      className={`w-full rounded-md border px-3 py-2 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.clinic.name}</div>
                      <div className="flex items-center justify-between text-xs text-text-muted mt-1">
                        <span>{formatDateTime(item.sentAt, locale)}</span>
                        <span>{t('taskProgressShort', { progress })}</span>
                      </div>
                      <div className="text-xs text-text-muted mt-1 truncate">
                        {item.treatmentTypes.map(treatmentLabel).join(', ')}
                      </div>
                    </button>
                  </li>
                );
              })}
            </ul>
          )}
        </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">
                <h2 className="text-lg font-semibold text-text-primary">
                  {formatPatientName(selectedCase.patient)}
                </h2>
                <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>
                <p className="text-sm text-text-muted">
                  {t('taskProgressLabel', {
                    completed: selectedCase.taskProgress.completed,
                    total: selectedCase.taskProgress.total,
                  })}
                </p>
              </header>

              {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) => (
                    <div
                      key={`${group.tooth}-${group.treatmentType}`}
                      className="rounded-md border border-border p-3 space-y-2"
                    >
                      <div className="text-sm font-medium text-text-primary">
                        {t('toothGroupTitle', {
                          tooth: group.tooth,
                          type: treatmentLabel(group.treatmentType),
                        })}
                      </div>
                      <ul className="space-y-2">
                        {group.tasks.map((task) => (
                          <li
                            key={task.id}
                            className="grid gap-2 sm:grid-cols-[1fr_160px_180px] items-center text-sm rounded bg-background p-2"
                          >
                            <span>
                              {task.stepOrder}. {task.stepLabel}
                            </span>
                            <select
                              value={task.status}
                              disabled={!canEdit || updatingTaskId === task.id}
                              onChange={(e) =>
                                void handleTaskUpdate(task.id, {
                                  status: e.target.value as LabTaskStatus,
                                })
                              }
                              className="rounded border border-border bg-surface px-2 py-1 text-sm disabled:opacity-60"
                            >
                              {statusOptions.map((opt) => (
                                <option key={opt.value} value={opt.value}>
                                  {opt.label}
                                </option>
                              ))}
                            </select>
                            <select
                              value={task.assigneeUserId ?? ''}
                              disabled={!canEdit || updatingTaskId === task.id}
                              onChange={(e) =>
                                void handleTaskUpdate(task.id, {
                                  assigneeUserId: e.target.value || null,
                                })
                              }
                              className="rounded border border-border bg-surface px-2 py-1 text-sm disabled:opacity-60"
                            >
                              <option value="">{t('unassigned')}</option>
                              {members.map((member) => (
                                <option key={member.userId} value={member.userId}>
                                  {member.name}
                                </option>
                              ))}
                            </select>
                          </li>
                        ))}
                      </ul>
                    </div>
                  ))
                )}
              </div>
            </div>
          )}
        </section>
      </div>

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