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

'use client';

import { useTranslations } from 'next-intl';
import { FileText } from 'lucide-react';
import type { PastTreatment } from '@/types/treatment';
import { CaseSentLabel } from '@/components/ui/treatment/CaseSentLabel';

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

interface PastTreatmentsPanelProps {
  items: PastTreatment[];
  loading?: boolean;
  onReviewTreatment?: (treatment: PastTreatment) => void;
}

export function PastTreatmentsPanel({
  items,
  loading,
  onReviewTreatment,
}: PastTreatmentsPanelProps) {
  const t = useTranslations('treatment');
  const tCommon = useTranslations('common');

  return (
    <div className="surface-card p-4 space-y-3">
      <div>
        <h3 className="text-sm font-semibold text-text-primary">{t('historyTitle')}</h3>
        <p className="text-[11px] text-text-muted mt-0.5">
          {t('historySubtitle')}
        </p>
      </div>

      {loading && <p className="text-sm text-text-muted">{t('loadingHistory')}</p>}

      {!loading && items.length === 0 && (
        <p className="text-sm text-text-muted">{t('historyEmpty')}</p>
      )}

      <div className="space-y-3 max-h-[min(420px,50vh)] overflow-y-auto pr-1">
        {items.map((treatment) => (
          <article
            key={treatment.id}
            className="border border-border/70 rounded-[var(--radius-md)] p-2.5 bg-background-secondary/40 space-y-2"
          >
            <div className="flex items-start justify-between gap-2">
              <div className="min-w-0">
                <p className="text-sm font-medium text-text-primary truncate">{treatment.title}</p>
                <p className="text-[11px] text-text-secondary capitalize mt-0.5">
                  {t('statusLabel')} {treatment.status}
                </p>
              </div>
              <time
                className="text-[11px] text-text-muted tabular-nums shrink-0"
                dateTime={treatment.treatmentAt}
              >
                {new Date(treatment.treatmentAt).toLocaleDateString()}
              </time>
            </div>

            <div className="space-y-1.5">
              {treatment.details.map((c, idx) => {
                const attachments = c.attachmentMetas ?? [];
                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="border border-border/60 rounded-[var(--radius-sm)] px-2.5 py-2 bg-background-secondary/30 space-y-1"
                  >
                    <div className="flex items-center justify-between gap-2">
                      <p className="text-xs font-medium text-text-primary capitalize">
                        {t('historyCaseLabel', { n: idx + 1, type: typeLabel })}
                      </p>
                      {c.sentAt && (
                        <CaseSentLabel
                          treatmentCase={c}
                          className="text-[10px] text-text-muted shrink-0 text-right"
                        />
                      )}
                    </div>
                    <p className="text-[11px] text-text-secondary">
                      {t('teethLabel')} {c.teeth.length ? [...c.teeth].sort().join(', ') : t('teethNone')}
                    </p>
                    {c.notes?.trim() && (
                      <p className="text-[11px] text-text-muted line-clamp-2">{c.notes}</p>
                    )}
                    <div>
                      <p className="text-[10px] uppercase tracking-wide text-text-muted mb-1">
                        {t('attachments')}
                      </p>
                      {attachments.length === 0 ? (
                        <p className="text-[11px] text-text-muted">{tCommon('none')}</p>
                      ) : (
                        <ul className="space-y-0.5">
                          {attachments.map((doc) => (
                            <li
                              key={doc.id}
                              className="flex items-center gap-1.5 text-[11px] text-text-secondary"
                            >
                              <FileText className="w-3 h-3 shrink-0 icon-flat" aria-hidden />
                              <span className="truncate">{doc.fileName}</span>
                              <span className="text-text-muted tabular-nums shrink-0">
                                {(doc.sizeBytes / 1024).toFixed(1)} KB
                              </span>
                            </li>
                          ))}
                        </ul>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>

            {onReviewTreatment && (
              <div className="pt-1 flex justify-end">
                <button
                  type="button"
                  onClick={() => onReviewTreatment(treatment)}
                  className="text-xs text-primary hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/35 rounded-[var(--radius-sm)] px-1"
                >
                  {t('reviewDetails')}
                </button>
              </div>
            )}
          </article>
        ))}
      </div>
    </div>
  );
}