import { useState, useMemo } from 'react';
import { syntaxHighlight } from '../utils/syntaxHighlight';
import './JsonViewer.css';

export type FontFamily = 'jetbrains' | 'fira';

interface JsonViewerProps {
  value: string;
  title?: string;
  placeholder?: string;
  fontFamily?: FontFamily;
}

const FONT_FAMILIES = {
  jetbrains: "'JetBrains Mono', monospace",
  fira: "'Fira Mono', monospace"
};

export function JsonViewer({
  value,
  title = 'Форматированный JSON',
  placeholder = 'Форматированный результат появится здесь...',
  fontFamily = 'jetbrains'
}: JsonViewerProps) {
  const [copied, setCopied] = useState(false);

  const highlightedValue = useMemo(() => {
    return value ? syntaxHighlight(value) : '';
  }, [value]);

  const handleCopy = async () => {
    if (!value) return;

    try {
      await navigator.clipboard.writeText(value);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (err) {
      console.error('Ошибка копирования:', err);
    }
  };

  return (
    <div className="json-viewer">
      <div className="viewer-header">
        <h2>{title}</h2>
        {value && (
          <button
            className="copy-button"
            onClick={handleCopy}
            title="Копировать в буфер обмена"
          >
            {copied ? (
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <polyline points="20 6 9 17 4 12" />
              </svg>
            ) : (
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
              </svg>
            )}
          </button>
        )}
      </div>
      {value ? (
        <pre
          className="viewer-content"
          dangerouslySetInnerHTML={{ __html: highlightedValue }}
          style={{ fontFamily: FONT_FAMILIES[fontFamily] }}
        />
      ) : (
        <pre
          className="viewer-content"
          style={{ fontFamily: FONT_FAMILIES[fontFamily] }}
        >
          {placeholder}
        </pre>
      )}
      {copied && <div className="copy-notification">Скопировано!</div>}
    </div>
  );
}