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

'use client';

import { useEffect, useMemo, useState, type ReactNode } from 'react';
import { useTranslations } from 'next-intl';
import { MessageSquare } from 'lucide-react';
import { Badge } from '@/components/ui/shared/Badge';
import { Button } from '@/components/ui/shared/Button';
import { Checkbox } from '@/components/ui/shared/Checkbox';
import { CaseToothChartPanel } from '@/components/ui/lab/CaseToothChartPanel';
import { FORM_SELECT_CLASS } from '@/components/shared/formSelectStyles';
import { LabCaseAttachmentPreview } from '@/components/ui/lab/LabCaseAttachmentPreview';
import { LabCaseAttachmentsDialog } from '@/components/ui/lab/LabCaseAttachmentsDialog';
import {
  LabCaseShareQrDialog,
  LabCaseShareQrThumb,
} from '@/components/ui/lab/LabCaseShareQrDialog';
import { labTaskStatusVariant } from '@/components/lab/labTaskStatusDisplay';
import { LabCaseDueDateBadge } from '@/components/lab/LabCaseDueDateBadge';
import {
  formatToothList,
  prosthesisTypeBadgeStyleFromCatalog,
} from '@/components/treatment/prosthesisTypeDisplay';
import { prosthesisCatalogApi } from '@/lib/api/prosthesis-catalog';
import {
  buildCaseProsthesisRows,
  formatCaseDateTime,
  formatPatientName,
  latestCaseAttachment,
} from '@/components/lab/caseDetailUtils';
import type { AssignableTaskStaff, LabCaseDetail, LabTaskStatus } from '@/types/cases';
import type { ProsthesisCatalogEntry } from '@/types/treatment-catalog';

function CaseTaskProgressBar({ 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 interface CaseDetailPanelProps {
  labCase: LabCaseDetail;
  locale: string;
  treatmentLabel: (type: string) => string;
  statusOptions: { value: LabTaskStatus; label: string }[];
  loadAttachmentBlob: (caseId: string, attachmentId: string) => Promise<Blob>;
  /** Extra lines below patient mobile (e.g. connection-specific clinic/lab line). */
  headerMetaLines?: ReactNode;
  showCommentsButton?: boolean;
  commentCount?: number;
  onCommentsClick?: () => void;
  canEditImportant?: boolean;
  updatingImportant?: boolean;
  onImportantChange?: (checked: boolean) => void;
  commentsSection?: ReactNode;
  assignableStaff?: AssignableTaskStaff[];
  canAssignTasks?: boolean;
  assigningTaskId?: string | null;
  onAssignTask?: (taskId: string, assigneeUserId: string | null) => void;
}

export function CaseDetailPanel({
  labCase,
  locale,
  treatmentLabel,
  statusOptions,
  loadAttachmentBlob,
  headerMetaLines,
  showCommentsButton = false,
  commentCount = 0,
  onCommentsClick,
  canEditImportant = false,
  updatingImportant = false,
  onImportantChange,
  commentsSection,
  assignableStaff = [],
  canAssignTasks = false,
  assigningTaskId = null,
  onAssignTask,
}: CaseDetailPanelProps) {
  const t = useTranslations('cases');
  const [attachmentsDialogOpen, setAttachmentsDialogOpen] = useState(false);
  const [shareQrDialogOpen, setShareQrDialogOpen] = useState(false);
  const [prosthesisCatalog, setProsthesisCatalog] = useState<ProsthesisCatalogEntry[]>([]);

  useEffect(() => {
    void prosthesisCatalogApi
      .list()
      .then((response) => setProsthesisCatalog(response.data))
      .catch(() => {});
  }, []);

  const prosthesisRows = useMemo(() => buildCaseProsthesisRows(labCase), [labCase]);
  const previewAttachment = useMemo(() => latestCaseAttachment(labCase), [labCase]);

  return (
    <div className="space-y-4">
      <header className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between border-b border-border pb-3">
        <div className="min-w-0 flex-1 space-y-1">
          <div className="flex flex-wrap items-center gap-2">
            <h2 className="text-lg font-semibold text-text-primary">
              {formatPatientName(labCase.patient)}
            </h2>
            <LabCaseDueDateBadge dueDate={labCase.dueDate} locale={locale} />
          </div>
          {!canEditImportant && labCase.isImportant ? (
            <Badge variant="warning" fixedWidth={false} className="mt-1">
              {t('importantLabel')}
            </Badge>
          ) : null}
          <p className="text-sm text-text-muted">
            {t('patientMobile')}: {labCase.patient.mobile}
          </p>
          {headerMetaLines}
          <p className="text-sm text-text-muted">
            {t('sentAt', { date: formatCaseDateTime(labCase.sentAt, locale) })}
          </p>
          <div className="pt-1 max-w-xs">
            <p className="text-sm text-text-muted mb-1">
              {t('taskProgressLabel', {
                completed: labCase.taskProgress.completed,
                total: labCase.taskProgress.total,
              })}
            </p>
            <CaseTaskProgressBar
              completed={labCase.taskProgress.completed}
              total={labCase.taskProgress.total}
            />
          </div>
        </div>

        <div className="flex w-full sm:w-auto shrink-0 flex-col items-end gap-2">
          {canEditImportant ? (
            <Checkbox
              checked={labCase.isImportant ?? false}
              disabled={updatingImportant}
              label={t('markCaseImportant')}
              className="shrink-0"
              onChange={(checked) => onImportantChange?.(checked)}
            />
          ) : null}
          {showCommentsButton && onCommentsClick ? (
            <Button type="button" variant="outline" size="sm" onClick={onCommentsClick}>
              <MessageSquare className="h-4 w-4 me-1.5" />
              {commentCount > 0
                ? t('commentsCount', { count: commentCount })
                : t('showComments')}
            </Button>
          ) : null}
          {labCase.shareUrl || (previewAttachment && labCase.attachments.length > 0) ? (
            <div className="flex flex-row items-center gap-2 shrink-0">
              {previewAttachment && labCase.attachments.length > 0 ? (
                <button
                  type="button"
                  onClick={() => setAttachmentsDialogOpen(true)}
                  className="aspect-square w-24 sm:w-32 cursor-pointer rounded-[var(--radius-md)] border border-border/60 overflow-hidden transition-colors hover:border-primary/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
                  title={previewAttachment.fileName}
                  aria-label={t('viewAttachments')}
                >
                  <LabCaseAttachmentPreview
                    caseId={labCase.id}
                    attachment={previewAttachment}
                    loadBlob={loadAttachmentBlob}
                    className="h-full w-full"
                  />
                </button>
              ) : null}
              {labCase.shareUrl ? (
                <LabCaseShareQrThumb
                  shareUrl={labCase.shareUrl}
                  onClick={() => setShareQrDialogOpen(true)}
                />
              ) : null}
            </div>
          ) : null}
        </div>
      </header>

      <CaseToothChartPanel
        details={labCase.detail ? [{ teeth: labCase.detail.teeth }] : []}
        prosthesisRows={prosthesisRows}
        prosthesisCatalog={prosthesisCatalog}
        className="w-full"
      />

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

      <div className="space-y-3">
        <h3 className="text-sm font-medium text-text-primary">{t('tasksByTooth')}</h3>
        {labCase.tasksByTooth.length === 0 ? (
          <p className="text-sm text-text-muted">{t('noTasks')}</p>
        ) : (
          labCase.tasksByTooth.map((group) => (
            <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={prosthesisTypeBadgeStyleFromCatalog(
                    group.prosthesisTypeCode,
                    prosthesisCatalog,
                  )}
                >
                  {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 px-2 py-1.5 text-sm">
                    <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
                      <span className="min-w-0 flex-1 font-medium text-text-primary">
                        {task.stepOrder}. {task.stepLabel}
                      </span>
                      <span className="text-[11px] text-text-muted shrink-0">
                        {task.lastStatusChangedBy
                          ? t('lastUpdatedBy', { name: task.lastStatusChangedBy.name })
                          : t('lastUpdatedUnknown')}
                        {task.lastStatusChangedAt
                          ? ` · ${formatCaseDateTime(task.lastStatusChangedAt, locale)}`
                          : ''}
                      </span>
                      {canAssignTasks && onAssignTask ? (
                        <select
                          value={task.assignee?.id ?? ''}
                          disabled={assigningTaskId === task.id}
                          onChange={(e) =>
                            onAssignTask(task.id, e.target.value ? e.target.value : null)
                          }
                          aria-label={t('assigneeLabel')}
                          className={`${FORM_SELECT_CLASS} max-w-[9.5rem] rounded-md py-0.5 text-xs`}
                        >
                          <option value="">{t('assigneeUnassigned')}</option>
                          {assignableStaff.map((staff) => (
                            <option key={staff.id} value={staff.id}>
                              {staff.name}
                            </option>
                          ))}
                        </select>
                      ) : null}
                      <Badge variant={labTaskStatusVariant(task.status)} fixedWidth={false}>
                        {statusOptions.find((opt) => opt.value === task.status)?.label ??
                          task.status}
                      </Badge>
                    </div>
                  </li>
                ))}
              </ul>
            </div>
          ))
        )}
      </div>

      {commentsSection}

      <LabCaseAttachmentsDialog
        open={attachmentsDialogOpen}
        onClose={() => setAttachmentsDialogOpen(false)}
        caseId={labCase.id}
        attachments={labCase.attachments}
        loadBlob={loadAttachmentBlob}
      />

      {labCase.shareUrl ? (
        <LabCaseShareQrDialog
          open={shareQrDialogOpen}
          onClose={() => setShareQrDialogOpen(false)}
          shareUrl={labCase.shareUrl}
        />
      ) : null}
    </div>
  );
}

export { CaseTaskProgressBar };