/**
 * @file TrackingTab.tsx - Tab component that displays work item tracking records in a chronological numbered list.
 * Each record shows a description, message (with automatic link detection via Linkify), username, last action, and timestamp.
 * Read-only; no editing capability.
 */

import type { FC } from 'react';
import { Alert, ListGroup } from 'react-bootstrap';
import { useNamedAnchorRemainingHeight } from '../../../../hooks/useNamedAnchorRemainingHeight.ts';
import { useWorkItem } from '../../../../contexts/WorkItemContext.tsx';
import { useProcessingUI } from '../../../../contexts/ProcessingUIContext.tsx';
import { useTranslation } from 'react-i18next';
import Linkify from 'linkify-react';

/**
 * Props for the TrackingTab component.
 */
interface TrackingTabProps {
  /** Whether the tab content is currently visible (controls d-none CSS class) */
  show: boolean;
}

/**
 * Tracking tab within the Fields/Notes/Tracking panel that displays work item tracking records in a numbered list with description, message, user info, and timestamps.
 */
export const TrackingTab: FC<TrackingTabProps> = ({ show }) => {
  const { registerAnchor, maxHeight } =
    useNamedAnchorRemainingHeight('tracking');

  // Required contexts for work item processing
  const { trackingRecords } = useWorkItem();
  const { isMobile } = useProcessingUI();

  const { t } = useTranslation(undefined, {
    keyPrefix:
      'components.processing.fields_notes_tracking_panel.tabs.tracking',
  });

  return (
    <div className={show ? '' : 'd-none'}>
      <div ref={registerAnchor('tracking')} />
      <div
        className={'overflow-y-auto'}
        style={{ maxHeight: isMobile ? undefined : maxHeight }}
      >
        {trackingRecords?.length ? (
          <ListGroup numbered>
            {trackingRecords.map((record) => (
              <ListGroup.Item
                key={record.id}
                className={'d-flex justify-content-between align-items-start'}
              >
                <div className={'ms-2 me-auto'}>
                  <div className={'fw-bold'}>{record.description}</div>
                  <div className={'text-break'}>
                    <Linkify
                      options={{
                        target: '_blank',
                        rel: 'noreferrer',
                      }}
                    >
                      {record.message}
                    </Linkify>
                  </div>
                  <div className={'text-break'}>
                    {record.userName && record.lastAction && (
                      <>
                        <i>
                          {record.userName}: {record.lastAction}
                        </i>
                        <br />
                      </>
                    )}
                    <small>
                      {new Date(record.trackingDate).toLocaleString()}
                    </small>
                  </div>
                </div>
              </ListGroup.Item>
            ))}
          </ListGroup>
        ) : (
          <Alert variant={'light'} className={'text-center mb-0'}>
            {t('alerts.none')}
          </Alert>
        )}
      </div>
    </div>
  );
};
