'use client';

import { useTranslation } from '@/hooks/useTranslation';
import type { AllowedModeSource, CheckinMode } from '../constants/checkin-mode';

interface AllowedModeTagProps {
  mode: CheckinMode | null;
  source?: AllowedModeSource;
  defaultMode?: CheckinMode | null;
  size?: 'sm' | 'md';
  showDataAttrs?: boolean;
}

export default function AllowedModeTag({
  mode,
  source,
  defaultMode,
  size = 'md',
  showDataAttrs = false,
}: AllowedModeTagProps) {
  const { t } = useTranslation();
  const a = t.meetingAttendance.allowedMode;
  const padding = size === 'sm' ? 'px-2 py-0.5' : 'px-2 py-1';

  const label = (m: CheckinMode | null) =>
    m === 'ON_SITE' ? a.onSite : m === 'ONLINE' ? a.online : a.notSet;

  if (mode == null) {
    return (
      <span
        className={`inline-flex items-center ${padding} rounded-full text-xs font-medium bg-red-50 text-red-700 border border-red-200`}
        title={a.notSetTooltip}
        {...(showDataAttrs ? { 'data-allowed-mode': 'NOT_SET' } : {})}
      >
        {a.notSet}
      </span>
    );
  }

  const text = label(mode);

  if (source === 'MEETING_OVERRIDE') {
    const tooltip = a.overrideTooltip
      .replace('{defaultMode}', label(defaultMode ?? null))
      .replace('{newMode}', text);
    return (
      <span
        className={`inline-flex items-center ${padding} rounded-full text-xs font-medium bg-blue-600 text-white`}
        title={tooltip}
        {...(showDataAttrs ? { 'data-allowed-mode': mode, 'data-source': 'MEETING_OVERRIDE' } : {})}
      >
        {text} · {a.sourceMeetingOverride}
      </span>
    );
  }
  if (source === 'SERIES_PREFERENCE') {
    return (
      <span
        className={`inline-flex items-center ${padding} rounded-full text-xs font-medium bg-purple-50 text-purple-700 border border-purple-200`}
        title={a.sourceSeriesPreference}
        {...(showDataAttrs ? { 'data-allowed-mode': mode, 'data-source': 'SERIES_PREFERENCE' } : {})}
      >
        {text} · {a.sourceSeriesPreference}
      </span>
    );
  }
  return (
    <span
      className={`inline-flex items-center ${padding} rounded-full text-xs font-medium text-gray-600 border border-gray-300`}
      title={a.sourceCityDerived}
      {...(showDataAttrs ? { 'data-allowed-mode': mode, 'data-source': 'CITY_DERIVED' } : {})}
    >
      {text}
    </span>
  );
}