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

'use client';

import { useMemo, useState } from 'react';
import { useTranslations } from 'next-intl';
import { Button } from '@/components/ui/shared/Button';
import { Checkbox } from '@/components/ui/shared/Checkbox';
import { FORM_SELECT_CLASS } from '@/components/shared/formSelectStyles';
import { TreatmentHistoryDetailLine } from '@/components/ui/treatment/TreatmentHistoryDetailLine';
import { DetailLabSendBadge } from '@/components/ui/treatment/DetailLabSendBadge';
import { filterTreatmentHistoryItems } from '@/components/treatment/treatmentHistoryFilters';
import type { LinkedOrganizationOption, PastTreatment } from '@/types/treatment';
import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';

interface PastTreatmentsPanelProps {
  items: PastTreatment[];
  currentDraft?: PastTreatment | null;
  patientName?: string;
  currentAppointmentId?: string | null;
  treatmentCatalog: TreatmentCatalogEntry[];
  labDependentCodes: Set<string>;
  orgs?: LinkedOrganizationOption[];
  loading?: boolean;
  selectedPreviewId?: string | null;
  onSelectTreatment?: (treatment: PastTreatment) => void;
}

function formatHistoryTimestamp(iso: string): string {
  const date = new Date(iso);
  return date.toLocaleString(undefined, {
    weekday: 'short',
    month: 'short',
    day: 'numeric',
    year: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
  });
}

export function PastTreatmentsPanel({
  items,
  currentDraft = null,
  patientName,
  currentAppointmentId,
  treatmentCatalog,
  labDependentCodes,
  orgs,
  loading,
  selectedPreviewId,
  onSelectTreatment,
}: PastTreatmentsPanelProps) {
  const t = useTranslations('treatment');
  const [notShippedOnly, setNotShippedOnly] = useState(false);
  const [filterDate, setFilterDate] = useState('');

  const hasActiveFilters = notShippedOnly || Boolean(filterDate);

  const displayedItems = useMemo(
    () =>
      filterTreatmentHistoryItems(items, currentDraft, labDependentCodes, {
        notShippedOnly,
        date: filterDate,
      }),
    [items, currentDraft, labDependentCodes, notShippedOnly, filterDate],
  );

  function clearFilters() {
    setNotShippedOnly(false);
    setFilterDate('');
  }

  const filterInputClass = `${FORM_SELECT_CLASS} rounded-md px-2 py-1.5 text-xs min-w-[9.5rem]`;

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

      <div className="flex flex-wrap items-center gap-x-3 gap-y-2 rounded-[var(--radius-md)] border border-border/60 bg-background-secondary/30 p-2.5">
        <Checkbox
          checked={notShippedOnly}
          onChange={setNotShippedOnly}
          label={t('historyFilterNotShipped')}
          className="text-xs [&_span:last-child]:text-xs shrink-0"
        />
        <label className="flex items-center gap-1.5 shrink-0">
          <span className="text-xs font-medium text-text-muted whitespace-nowrap">
            {t('historyFilterDate')}
          </span>
          <input
            type="date"
            value={filterDate}
            onChange={(e) => setFilterDate(e.target.value)}
            className={filterInputClass}
          />
        </label>
        <Button
          variant="ghost"
          size="sm"
          onClick={clearFilters}
          disabled={!hasActiveFilters}
          className="shrink-0"
        >
          {t('historyClearFilters')}
        </Button>
      </div>

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

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

      <div className="space-y-1.5 max-h-[min(420px,50vh)] overflow-y-auto overscroll-y-contain pr-1">
        {displayedItems.map((treatment) => {
          const isSelected = selectedPreviewId === treatment.id;
          const isCurrentAppointment =
            Boolean(currentAppointmentId) && treatment.appointmentId === currentAppointmentId;
          const isLiveDraft = treatment.id === 'current-draft';

          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'
                }
              `}
            >
              <div className="flex flex-wrap items-center gap-2">
                <time
                  className="text-xs font-medium text-text-primary tabular-nums"
                  dateTime={treatment.treatmentAt}
                >
                  {formatHistoryTimestamp(treatment.treatmentAt)}
                </time>
                {isLiveDraft ? (
                  <span className="text-[10px] font-medium uppercase tracking-wide text-primary">
                    {t('labAttentionCurrentDraft')}
                  </span>
                ) : isCurrentAppointment ? (
                  <span className="text-[10px] font-medium uppercase tracking-wide text-primary">
                    {t('historyCurrentAppointment')}
                  </span>
                ) : null}
              </div>

              {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}-${idx}`} className="py-1.5 space-y-1">
                      <TreatmentHistoryDetailLine
                        detail={detail}
                        detailNumber={idx + 1}
                        treatmentCatalog={treatmentCatalog}
                      />
                      <DetailLabSendBadge
                        detail={detail}
                        labDependentCodes={labDependentCodes}
                        orgs={orgs}
                        className="text-[10px] px-1.5 py-0"
                      />
                    </div>
                  ))}
                </div>
              )}
            </article>
          );
        })}
      </div>
    </div>
  );
}