'use client';

import { useTranslations } from 'next-intl';
import { CaseTaskProgressBar } from '@/components/ui/lab/CaseDetailPanel';
import { LabCaseProsthesisGroupsList } from '@/components/ui/lab/LabCaseProsthesisGroupsList';
import { LabCaseDueDateBadge } from '@/components/lab/LabCaseDueDateBadge';
import { formatCaseDateTime } from '@/components/lab/caseDetailUtils';
import type { ProsthesisCatalogEntry } from '@/types/treatment-catalog';
import type { PatientLabCaseSummary } from '@/types/lab-case-activity';

export type TreatmentLabCasesScope = 'patient' | 'updates';

interface TreatmentLabCasesPanelProps {
  scope: TreatmentLabCasesScope;
  onScopeChange: (scope: TreatmentLabCasesScope) => void;
  items: PatientLabCaseSummary[];
  loading: boolean;
  locale: string;
  prosthesisCatalog: ProsthesisCatalogEntry[];
  unreadUpdatesCount: number;
  otherPatientsUnreadCount: number;
  canShowPatientScope: boolean;
  selectedLabCaseId?: string | null;
  onSelect: (item: PatientLabCaseSummary) => void;
  compact?: boolean;
}

export function TreatmentLabCasesPanel({
  scope,
  onScopeChange,
  items,
  loading,
  locale,
  prosthesisCatalog,
  unreadUpdatesCount,
  otherPatientsUnreadCount,
  canShowPatientScope,
  selectedLabCaseId,
  onSelect,
  compact = false,
}: TreatmentLabCasesPanelProps) {
  const t = useTranslations('treatment');
  const tCommon = useTranslations('common');
  const showPatientName = scope === 'updates';

  return (
    <div className="space-y-2">
      {canShowPatientScope || unreadUpdatesCount > 0 ? (
        <div className="flex flex-wrap gap-1.5">
          {canShowPatientScope ? (
            <button
              type="button"
              onClick={() => onScopeChange('patient')}
              className={`rounded-md border px-2.5 py-1 text-[11px] font-medium transition-colors ${
                scope === 'patient'
                  ? 'border-primary bg-primary/10 text-text-primary'
                  : 'border-border text-text-muted hover:border-primary/40'
              }`}
            >
              {t('labShipmentsScopePatient')}
            </button>
          ) : null}
          {unreadUpdatesCount > 0 ? (
            <button
              type="button"
              onClick={() => onScopeChange('updates')}
              className={`rounded-md border px-2.5 py-1 text-[11px] font-medium transition-colors ${
                scope === 'updates'
                  ? 'border-primary bg-primary/10 text-text-primary'
                  : 'border-border text-text-muted hover:border-primary/40'
              }`}
            >
              {t('labShipmentsScopeUpdates', { count: unreadUpdatesCount })}
            </button>
          ) : null}
        </div>
      ) : null}

      {scope === 'patient' && otherPatientsUnreadCount > 0 ? (
        <button
          type="button"
          onClick={() => onScopeChange('updates')}
          className="text-[11px] text-primary hover:underline text-left"
        >
          {t('labShipmentsOtherPatientsUnread', { count: otherPatientsUnreadCount })}
        </button>
      ) : null}

      {loading ? (
        <p className="text-xs text-text-muted py-1">{tCommon('loading')}</p>
      ) : items.length === 0 ? (
        <p className="text-xs text-text-muted py-1">
          {scope === 'updates' ? t('labShipmentsUpdatesEmpty') : t('labShipmentsEmpty')}
        </p>
      ) : (
        <ul
          className={`space-y-1.5 overflow-y-auto overscroll-y-contain pr-1 ${
            compact ? 'max-h-[min(220px,32vh)]' : 'max-h-[40vh]'
          }`}
        >
          {items.map((item) => {
            const isActive = item.labCaseId === selectedLabCaseId;

            return (
              <li key={item.labCaseId}>
                <button
                  type="button"
                  onClick={() => onSelect(item)}
                  className={`w-full rounded-md border px-2.5 py-2 text-left transition-colors ${
                    isActive
                      ? 'border-primary bg-primary/5'
                      : 'border-border hover:border-primary/40'
                  }`}
                >
                  <div className="flex items-start gap-2">
                    <div className="min-w-0 flex-1 space-y-1">
                      {showPatientName ? (
                        <p className="text-[11px] font-medium text-text-secondary truncate">
                          {item.patientFirstName} {item.patientLastName}
                        </p>
                      ) : null}

                      <div className="flex flex-wrap items-center gap-1.5">
                        <span className="text-xs font-medium text-text-primary truncate">
                          {item.labName}
                        </span>
                        <LabCaseDueDateBadge
                          dueDate={item.dueDate}
                          locale={locale}
                          className="text-[10px]"
                        />
                      </div>

                      {item.prosthesisGroups.length > 0 || item.teeth.length > 0 ? (
                        <LabCaseProsthesisGroupsList
                          groups={item.prosthesisGroups}
                          prosthesisCatalog={prosthesisCatalog}
                          fallbackTeeth={item.teeth}
                        />
                      ) : null}

                      <p className="text-[10px] text-text-muted">
                        {formatCaseDateTime(item.sentAt, locale)}
                      </p>
                      <CaseTaskProgressBar
                        completed={item.taskProgress.completed}
                        total={item.taskProgress.total}
                      />
                    </div>
                    {item.hasUnread ? (
                      <span
                        className="mt-1 h-2 w-2 shrink-0 rounded-full bg-badge-warning-fg"
                        aria-label={t('unreadLabCase')}
                      />
                    ) : null}
                  </div>
                </button>
              </li>
            );
          })}
        </ul>
      )}
    </div>
  );
}
