'use client';

import { useTranslations } from 'next-intl';
import { DetailLabSendBadge } from '@/components/ui/treatment/DetailLabSendBadge';
import { TreatmentTypeBadge } from '@/components/ui/treatment/TreatmentTypeBadge';
import type { LinkedOrganizationOption, PastTreatmentDetail } from '@/types/treatment';

interface TreatmentDetailSummaryRowProps {
  detail: PastTreatmentDetail;
  detailNumber: number;
  labDependentCodes: Set<string>;
  orgs?: LinkedOrganizationOption[];
  compact?: boolean;
}

export function TreatmentDetailSummaryRow({
  detail,
  detailNumber,
  labDependentCodes,
  orgs,
  compact = false,
}: TreatmentDetailSummaryRowProps) {
  const t = useTranslations('treatment');
  const teeth = detail.teeth.length ? [...detail.teeth].sort().join(', ') : t('teethNone');
  const attachmentCount = detail.attachmentMetas?.length ?? 0;

  return (
    <div
      className={`rounded-[var(--radius-sm)] border border-border/60 bg-background-secondary/30 ${
        compact ? 'px-2.5 py-2' : 'px-3 py-2'
      } space-y-1`}
    >
      <div className="flex flex-wrap items-center justify-between gap-2">
        <div className="flex flex-wrap items-center gap-1.5 min-w-0">
          <span className={`text-text-muted tabular-nums ${compact ? 'text-[11px]' : 'text-xs'}`}>
            {t('detailLabel', { n: detailNumber })}
          </span>
          <TreatmentTypeBadge type={detail.treatmentType} />
        </div>
        <DetailLabSendBadge detail={detail} labDependentCodes={labDependentCodes} orgs={orgs} />
      </div>
      <p className={`text-text-secondary ${compact ? 'text-[11px]' : 'text-xs'}`}>
        {t('teethLabel')} {teeth}
      </p>
      {attachmentCount > 0 && (
        <p className={`text-text-muted ${compact ? 'text-[11px]' : 'text-xs'}`}>
          {t('detailAttachmentCount', { n: attachmentCount })}
        </p>
      )}
      {detail.notes?.trim() && (
        <p className={`text-text-muted line-clamp-2 ${compact ? 'text-[11px]' : 'text-xs'}`}>
          {detail.notes}
        </p>
      )}
    </div>
  );
}