'use client';

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

interface PastTreatmentsPanelProps {
  items: PastTreatment[];
  loading?: boolean;
}

export function PastTreatmentsPanel({ items, loading }: 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 border-border/70 rounded-[var(--radius-md)] p-3 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.records.length > 0 && (
              <ul className="mt-2 space-y-1.5 text-xs text-text-secondary">
                {t.records.map((r) => (
                  <li key={r.id}>
                    <span className="text-text-primary font-medium">Record: </span>
                    {r.teeth.length > 0 ? `Teeth ${[...r.teeth].sort().join(', ')}` : 'No teeth tagged'}
                    {r.notes ? ` — ${r.notes}` : ''}
                  </li>
                ))}
              </ul>
            )}

            {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>
  );
}