/**
 * UserMessageItem - Single user message item showing turn link, tokens, and preview.
 */

import React from 'react';

import { COLOR_TEXT_MUTED, COLOR_TEXT_SECONDARY } from '@renderer/constants/cssVariables';
import { MessageSquare } from 'lucide-react';

import { formatTokens } from '../utils/formatting';

import type { UserMessageInjection } from '@renderer/types/contextInjection';

interface UserMessageItemProps {
  injection: UserMessageInjection;
  onNavigateToTurn?: (turnIndex: number) => void;
}

export const UserMessageItem = ({
  injection,
  onNavigateToTurn,
}: Readonly<UserMessageItemProps>): React.ReactElement => {
  const turnIndex = injection.turnIndex;
  const isClickable = onNavigateToTurn && turnIndex >= 0;

  return (
    <div className="rounded px-2 py-1.5">
      <div className="flex w-full items-center gap-1.5">
        <MessageSquare size={12} style={{ color: COLOR_TEXT_MUTED, flexShrink: 0 }} />
        {isClickable ? (
          <span
            role="link"
            tabIndex={0}
            className="cursor-pointer text-xs transition-opacity hover:opacity-80"
            style={{
              color: '#93c5fd',
              textDecoration: 'underline',
              textDecorationStyle: 'dotted' as const,
              textUnderlineOffset: '2px',
            }}
            onClick={() => onNavigateToTurn(turnIndex)}
            onKeyDown={(e) => {
              if (e.key === 'Enter' || e.key === ' ') {
                onNavigateToTurn(turnIndex);
              }
            }}
          >
            @Turn {turnIndex + 1}
          </span>
        ) : (
          <span className="text-xs" style={{ color: COLOR_TEXT_SECONDARY }}>
            @Turn {turnIndex + 1}
          </span>
        )}
        <span className="text-xs" style={{ color: COLOR_TEXT_MUTED }}>
          ~{formatTokens(injection.estimatedTokens)} tokens
        </span>
      </div>
      {injection.textPreview && (
        <div
          className="mt-0.5 truncate pl-5 text-xs italic"
          style={{ color: COLOR_TEXT_MUTED, opacity: 0.7 }}
        >
          {injection.textPreview}
        </div>
      )}
    </div>
  );
};