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

'use client';

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

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

interface TreatmentPreviewCardProps {
  draft: PastTreatment | null;
  disabled?: boolean;
  onPreview: () => void;
}

export function TreatmentPreviewCard({ draft, disabled, onPreview }: TreatmentPreviewCardProps) {
  const t = useTranslations('treatment');

  const attachmentCount = draft
    ? draft.details.reduce((n, c) => n + (c.attachmentMetas?.length ?? 0), 0)
    : 0;

  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={disabled || !draft} onClick={onPreview}>
          {t('previewDraft')}
        </Button>
      </div>
      {!draft ? (
        <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">{draft.title}</p>
            <span className="text-xs text-text-muted tabular-nums shrink-0 capitalize">{draft.status}</span>
          </div>
          <p className="text-xs text-text-secondary">
            {t('caseCount', { n: draft.details.length })} ·{' '}
            {t('attachmentCount', { n: attachmentCount })}
          </p>
          <div className="space-y-2">
            {draft.details.slice(0, 2).map((c, idx) => {
              const typeKey = TREATMENT_TYPE_KEYS[c.treatmentType as keyof typeof TREATMENT_TYPE_KEYS];
              const typeLabel = typeKey ? t(typeKey) : c.treatmentType;
              return (
              <div
                key={c.id}
                className="rounded-[var(--radius-sm)] border border-border/60 px-2.5 py-2 text-xs text-text-secondary"
              >
                <span className="text-text-primary font-medium capitalize">
                  {t('caseSummary', { n: idx + 1, type: typeLabel })}
                </span>
                {c.teeth.length > 0 && (
                  <span className="ml-1 tabular-nums">
                    {t('teethPrefix')} {[...c.teeth].sort().join(', ')}
                  </span>
                )}
              </div>
              );
            })}
            {draft.details.length > 2 && (
              <p className="text-xs text-text-muted">{t('moreCases', { n: draft.details.length - 2 })}</p>
            )}
          </div>
        </div>
      )}
    </div>
  );
}