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

'use client';

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

interface PastTreatmentsPanelProps {
  items: PastTreatment[];
  loading?: boolean;
  selectedTreatmentId?: string | null;
  onSelectTreatment?: (treatment: PastTreatment) => void;
}

export function PastTreatmentsPanel({
  items,
  loading,
  selectedTreatmentId,
  onSelectTreatment,
}: 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-xs text-text-muted mt-0.5">
          Document preview is not implemented yet; file names are listed for context.
        </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,55vh)] overflow-y-auto pr-1">
        {items.map((t) => (
          <article
            key={t.id}
            className={`border rounded-[var(--radius-md)] p-3 ${
              selectedTreatmentId === t.id
                ? 'border-primary/70 bg-primary-soft/35'
                : 'border-border/70 bg-background-secondary/40'
            }`}
          >
            <div className="flex items-start justify-between gap-2">
              <p className="text-sm font-medium text-text-primary">{t.title}</p>
              <time className="text-xs text-text-muted tabular-nums shrink-0" dateTime={t.treatmentAt}>
                {new Date(t.treatmentAt).toLocaleDateString()}
              </time>
            </div>
            <p className="text-xs text-text-secondary mt-1">Status: {t.status}</p>

            {t.cases.length > 0 && (
              <ul className="mt-2 space-y-1.5 text-xs text-text-secondary">
                {t.cases.map((c) => (
                  <li key={c.id}>
                    <span className="text-text-primary font-medium">Case: </span>
                    <span className="capitalize">{c.treatmentType}</span>
                    {' | '}
                    {c.teeth.length > 0 ? `Teeth ${[...c.teeth].sort().join(', ')}` : 'No teeth tagged'}
                    {c.notes ? ` — ${c.notes}` : ''}
                  </li>
                ))}
              </ul>
            )}

            {onSelectTreatment && (
              <div className="mt-3 pt-2 border-t border-border/50 flex justify-end">
                <button
                  type="button"
                  onClick={() => onSelectTreatment(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>
            )}

            {t.documents.length > 0 && (
              <div className="mt-3 pt-2 border-t border-border/50">
                <p className="text-[11px] uppercase tracking-wide text-text-muted mb-1.5">Attachments</p>
                <ul className="space-y-1">
                  {t.documents.map((doc) => (
                    <li
                      key={doc.id}
                      className="flex items-center gap-2 text-xs text-text-secondary"
                    >
                      <FileText className="w-3.5 h-3.5 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>
            )}
          </article>
        ))}
      </div>
    </div>
  );
}