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

'use client';

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

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

export function PastTreatmentsPanel({
  items,
  loading,
  onReviewTreatment,
}: PastTreatmentsPanelProps) {
  return (
    <div className="surface-card p-4 space-y-3">
      <div>
        <h3 className="text-sm font-semibold text-text-primary">Previous treatments</h3>
        <p className="text-[11px] text-text-muted mt-0.5">
          Completed treatments for this patient. Each case is listed separately.
        </p>
      </div>

      {loading && <p className="text-sm text-text-muted">Loading history…</p>}

      {!loading && items.length === 0 && (
        <p className="text-sm text-text-muted">No prior treatments for this patient.</p>
      )}

      <div className="space-y-3 max-h-[min(420px,50vh)] overflow-y-auto pr-1">
        {items.map((t) => (
          <article
            key={t.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">{t.title}</p>
                <p className="text-[11px] text-text-secondary capitalize mt-0.5">Status: {t.status}</p>
              </div>
              <time
                className="text-[11px] text-text-muted tabular-nums shrink-0"
                dateTime={t.treatmentAt}
              >
                {new Date(t.treatmentAt).toLocaleDateString()}
              </time>
            </div>

            <div className="space-y-1.5">
              {t.cases.map((c, idx) => {
                const attachments = c.attachmentMetas ?? [];
                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">
                        Case {idx + 1} · {c.treatmentType}
                      </p>
                      {c.sentAt && (
                        <CaseSentLabel
                          treatmentCase={c}
                          className="text-[10px] text-text-muted shrink-0 text-right"
                        />
                      )}
                    </div>
                    <p className="text-[11px] text-text-secondary">
                      Teeth: {c.teeth.length ? [...c.teeth].sort().join(', ') : 'None selected'}
                    </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">
                        Attachments
                      </p>
                      {attachments.length === 0 ? (
                        <p className="text-[11px] text-text-muted">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(t)}
                  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"
                >
                  Review details
                </button>
              </div>
            )}
          </article>
        ))}
      </div>
    </div>
  );
}