'use client';

import { useTranslations } from 'next-intl';
import { TreatmentHistoryDetailLine } from '@/components/ui/treatment/TreatmentHistoryDetailLine';
import type { PastTreatment } from '@/types/treatment';
import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';

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

export function PastTreatmentsPanel({
  items,
  treatmentCatalog,
  loading,
  selectedPreviewId,
  onSelectTreatment,
}: PastTreatmentsPanelProps) {
  const t = useTranslations('treatment');

  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-1.5 max-h-[min(420px,50vh)] overflow-y-auto pr-1">
        {items.map((treatment) => {
          const isSelected = selectedPreviewId === treatment.id;

          return (
            <article
              key={treatment.id}
              role="button"
              tabIndex={0}
              onClick={() => onSelectTreatment?.(treatment)}
              onKeyDown={(e) => {
                if (e.key === 'Enter' || e.key === ' ') {
                  e.preventDefault();
                  onSelectTreatment?.(treatment);
                }
              }}
              className={`
                border rounded-[var(--radius-sm)] px-2 py-1.5 cursor-pointer transition-colors
                focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/45
                ${
                  isSelected
                    ? 'border-primary bg-primary/5'
                    : 'border-border/60 bg-background-secondary/30 hover:border-border hover:bg-background-secondary/50'
                }
              `}
            >
              <time
                className="text-xs font-medium text-text-primary tabular-nums block"
                dateTime={treatment.treatmentAt}
              >
                {new Date(treatment.treatmentAt).toLocaleDateString(undefined, {
                  year: 'numeric',
                  month: 'short',
                  day: 'numeric',
                })}
              </time>

              {treatment.details.length === 0 ? (
                <p className="text-[10px] text-text-muted mt-1">{t('noDetails')}</p>
              ) : (
                <div className="mt-1.5 divide-y divide-border/50 border-t border-border/40 pointer-events-none">
                  {treatment.details.map((detail, idx) => (
                    <div key={detail.clientId ?? detail.id} className="py-1.5">
                      <TreatmentHistoryDetailLine
                        detail={detail}
                        detailNumber={idx + 1}
                        treatmentCatalog={treatmentCatalog}
                      />
                    </div>
                  ))}
                </div>
              )}
            </article>
          );
        })}
      </div>
    </div>
  );
}