'use client';

/**
 * StateTransitionsTimeline — renders support-parent state transitions
 * using the admin i18n namespace so ticket/case statuses appear in locale.
 *
 * Uses support.ticket_status_* for tickets and support.case_status_* for cases.
 */

import { formatDateTime } from '@/lib/format';
import { useLocale, useT } from '@/lib/i18n/react';
import type { StateTransitionView } from '@/server/support/types';

export interface StateTransitionsTimelineProps {
  parentType: 'ticket' | 'case';
  transitions: StateTransitionView[];
}

export function StateTransitionsTimeline({
  parentType,
  transitions,
}: StateTransitionsTimelineProps) {
  const t = useT('admin');
  const ts = t('support') as unknown as Record<string, string>;
  const { locale } = useLocale();

  const prefix = parentType === 'ticket' ? 'ticket_status_' : 'case_status_';

  function labelFor(state: string): string {
    return ts[`${prefix}${state}`] ?? state;
  }

  return (
    <ol className="flex flex-col gap-2" aria-label={ts.ctx_timeline}>
      {transitions.map((tr) => (
        <li key={tr.id} className="text-text-secondary text-xs">
          <time dateTime={tr.createdAt} suppressHydrationWarning>
            {formatDateTime(tr.createdAt, locale)}
          </time>
          {' — '}
          <span>{labelFor(tr.fromState)}</span>
          {' → '}
          <span className="text-text-primary font-medium">{labelFor(tr.toState)}</span>
          {tr.reason && (
            <span className="text-text-muted">
              {' ('}
              <span data-display-name>{tr.reason}</span>
              {')'}
            </span>
          )}
        </li>
      ))}
    </ol>
  );
}