import React from 'react';
import { useTranslation } from 'react-i18next';
import styled from '@emotion/styled';
import { spacing } from '../../../theme';

interface Props {
  inputType: string;
  text: string | null | undefined;
}

/** Split raw input into clean paragraphs. Single \n collapses to space; \n\n+ = new paragraph. */
function toParagraphs(raw: string): string[] {
  return raw.split(/\n{2,}/).map(p => p.replace(/\s*\n\s*/g, ' ').trim()).filter(Boolean);
}

export const InputPreview: React.FC<Props> = ({ inputType, text }) => {
  const { t } = useTranslation();
  if (!text) return null;
  const paragraphs = toParagraphs(text);
  return (
    <Block>
      <Label>{t('history.inputLabel', { type: inputType })}</Label>
      <Body>
        {paragraphs.map((p, i) => <p key={i}>{p}</p>)}
      </Body>
    </Block>
  );
};

const Block = styled.div`
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 18px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  margin-bottom: ${spacing.md}px;
`;
const Label = styled.div`
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-muted);
`;
const Body = styled.div`
  font-size: 13px; color: var(--fg-secondary); line-height: 1.6;
  word-break: break-word; overflow-wrap: break-word;
  max-height: 240px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
  & p { margin: 0; }
`;
