'use client';

import { useTranslations } from 'next-intl';
import { TreatmentTypeBadge } from '@/components/ui/treatment/TreatmentTypeBadge';
import { isDetailTypeSelected } from '@/components/treatment/treatmentDetailRules';
import { treatmentTypeLabelFromCatalog } from '@/components/shared/treatmentTypeDisplay';
import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';
import type { PastTreatmentDetail } from '@/types/treatment';

interface TreatmentHistoryDetailLineProps {
  detail: PastTreatmentDetail;
  detailNumber: number;
  treatmentCatalog: TreatmentCatalogEntry[];
}

export function TreatmentHistoryDetailLine({
  detail,
  detailNumber,
  treatmentCatalog,
}: TreatmentHistoryDetailLineProps) {
  const t = useTranslations('treatment');
  const teeth = detail.teeth.length ? [...detail.teeth].sort().join(', ') : t('teethNone');
  const attachmentCount = detail.attachmentMetas?.length ?? 0;

  return (
    <div className="flex items-center gap-2 min-w-0 text-[11px] leading-tight">
      <span className="text-text-muted tabular-nums shrink-0">{detailNumber}.</span>
      {isDetailTypeSelected(detail) ? (
        <TreatmentTypeBadge
          type={detail.treatmentType}
          label={treatmentTypeLabelFromCatalog(detail.treatmentType, treatmentCatalog)}
        />
      ) : (
        <span className="text-text-muted italic shrink-0">{t('treatmentTypeNotSelected')}</span>
      )}
      <span className="text-text-secondary truncate min-w-0">{teeth}</span>
      {attachmentCount > 0 && (
        <span className="text-text-muted shrink-0 tabular-nums">
          {t('detailAttachmentCount', { n: attachmentCount })}
        </span>
      )}
    </div>
  );
}
