dyolink/frontend/src/components/ui/treatment/TreatmentPreviewCard.tsx

'use client';

import { useTranslations } from 'next-intl';
import { Button } from '@/components/ui/shared/Button';
import { TreatmentDetailSummaryRow } from '@/components/ui/treatment/TreatmentDetailSummaryRow';
import type { LinkedOrganizationOption, PastTreatment } from '@/types/treatment';
import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';

interface TreatmentPreviewCardProps {
  treatment: PastTreatment | null;
  labDependentCodes: Set<string>;
  treatmentCatalog: TreatmentCatalogEntry[];
  orgs?: LinkedOrganizationOption[];
  openDisabled?: boolean;
  onOpen: () => void;
}

export function TreatmentPreviewCard({
  treatment,
  labDependentCodes,
  treatmentCatalog,
  orgs,
  openDisabled = false,
  onOpen,
}: TreatmentPreviewCardProps) {
  const t = useTranslations('treatment');

  return (
    <div className="surface-card p-4 space-y-3">
      <div className="flex items-center justify-between gap-2">
        <h3 className="text-sm font-semibold text-text-primary">{t('previewTitle')}</h3>
        <Button type="button" variant="primary" disabled={openDisabled || !treatment} onClick={onOpen}>
          {t('openTreatment')}
        </Button>
      </div>
      {!treatment ? (
        <p className="text-sm text-text-muted">{t('selectAppointment')}</p>
      ) : (
        <div className="border border-border/70 rounded-[var(--radius-md)] p-3 bg-background-secondary/40 space-y-2">
          <div className="flex items-start justify-between gap-2">
            <p className="text-sm font-medium text-text-primary">{treatment.title}</p>
            <time
              className="text-xs text-text-muted tabular-nums shrink-0"
              dateTime={treatment.treatmentAt}
            >
              {new Date(treatment.treatmentAt).toLocaleDateString()}
            </time>
          </div>
          <div className="space-y-2 max-h-[min(280px,40vh)] overflow-y-auto pr-1">
            {treatment.details.length === 0 ? (
              <p className="text-xs text-text-muted">{t('noDetails')}</p>
            ) : (
              treatment.details.map((detail, idx) => (
                <TreatmentDetailSummaryRow
                  key={detail.clientId ?? detail.id}
                  detail={detail}
                  detailNumber={idx + 1}
                  labDependentCodes={labDependentCodes}
                  treatmentCatalog={treatmentCatalog}
                  orgs={orgs}
                  compact
                />
              ))
            )}
          </div>
        </div>
      )}
    </div>
  );
}