import React, { useState } from 'react';
import { Check, Copy } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { Button } from '../../ui/button';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';

// Elegant custom theme inspired by Xertica.ai design system
const elegantTheme = {
  'code[class*="language-"]': {
    color: 'var(--foreground)',
    fontFamily: 'var(--font-mono)',
    fontSize: '0.875rem',
    textAlign: 'left' as const,
    whiteSpace: 'pre' as const,
    wordSpacing: 'normal',
    wordBreak: 'normal',
    lineHeight: '1.6',
    tabSize: 2,
    hyphens: 'none' as const,
  },
  'pre[class*="language-"]': {
    color: 'var(--foreground)',
    fontFamily: 'var(--font-mono)',
    fontSize: '0.875rem',
    textAlign: 'left' as const,
    whiteSpace: 'pre' as const,
    wordSpacing: 'normal',
    wordBreak: 'normal',
    lineHeight: '1.6',
    tabSize: 2,
    hyphens: 'none' as const,
    padding: '1rem',
    margin: 0,
    overflow: 'auto',
    background: 'transparent',
  },
  comment: {
    color: 'var(--muted-foreground)',
    fontStyle: 'italic',
  },
  prolog: {
    color: 'var(--muted-foreground)',
  },
  doctype: {
    color: 'var(--muted-foreground)',
  },
  cdata: {
    color: 'var(--muted-foreground)',
  },
  punctuation: {
    color: 'var(--muted-foreground)',
  },
  property: {
    color: 'var(--chart-4)',
  },
  tag: {
    color: 'var(--chart-1)',
  },
  boolean: {
    color: 'var(--chart-5)',
  },
  number: {
    color: 'var(--chart-5)',
  },
  constant: {
    color: 'var(--chart-5)',
  },
  symbol: {
    color: 'var(--chart-5)',
  },
  deleted: {
    color: 'var(--chart-5)',
  },
  selector: {
    color: 'var(--chart-2)',
  },
  'attr-name': {
    color: 'var(--chart-4)',
  },
  string: {
    color: 'var(--chart-2)',
  },
  char: {
    color: 'var(--chart-2)',
  },
  builtin: {
    color: 'var(--chart-4)',
  },
  inserted: {
    color: 'var(--chart-2)',
  },
  operator: {
    color: 'var(--primary)',
  },
  entity: {
    color: 'var(--chart-4)',
  },
  url: {
    color: 'var(--chart-1)',
  },
  '.language-css .token.string': {
    color: 'var(--chart-2)',
  },
  '.style .token.string': {
    color: 'var(--chart-2)',
  },
  atrule: {
    color: 'var(--chart-3)',
  },
  'attr-value': {
    color: 'var(--chart-2)',
  },
  keyword: {
    color: 'var(--chart-3)',
  },
  function: {
    color: 'var(--chart-1)',
  },
  'class-name': {
    color: 'var(--chart-4)',
  },
  regex: {
    color: 'var(--chart-5)',
  },
  important: {
    color: 'var(--chart-5)',
    fontWeight: 'bold',
  },
  variable: {
    color: 'var(--chart-5)',
  },
};

/**
 * Props for the CodeBlock component.
 */
interface CodeBlockProps {
  /** The code string to be displayed */
  code: string;
  /** Programming language for syntax highlighting */
  language?: 'typescript' | 'tsx' | 'css' | 'bash' | 'jsx';
  /** Optional filename to display in the header */
  filename?: string;
  /** Whether to show line numbers */
  showLineNumbers?: boolean;
}

/**
 * Enhanced Syntax Highlighter component with "Copy to Clipboard" functionality.
 *
 * @description
 * Uses `react-syntax-highlighter` with a custom "Elegant" theme inspired by Xertica's
 * design tokens. It includes a fallback mechanism for the Clipboard API and
 * optionally displays a header with the filename and language.
 *
 * @ai-rules
 * 1. Theme: Uses a custom `elegantTheme` that maps to system CSS variables. Avoid overriding these colors manually.
 * 2. Clipboard: The copy functionality is robust with multiple fallback methods.
 * 3. Content: Ensure `code` is passed as a raw string without pre-formatting indentation if possible.
 */
export const CodeBlock = ({
  code,
  language = 'tsx',
  filename,
  showLineNumbers = false,
}: CodeBlockProps) => {
  const [copied, setCopied] = useState(false);
  const { t } = useTranslation();

  const handleCopy = async () => {
    try {
      // Try modern Clipboard API first (with permission check)
      if (navigator.clipboard && navigator.clipboard.writeText) {
        try {
          await navigator.clipboard.writeText(code);
        } catch (clipboardError: any) {
          // If clipboard API fails due to permissions, fall back to execCommand
          if (
            clipboardError.name === 'NotAllowedError' ||
            clipboardError.message.includes('permissions policy')
          ) {
            throw new Error('Clipboard permission denied, falling back');
          }
          throw clipboardError;
        }
      } else {
        throw new Error('Clipboard API not available');
      }

      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (err) {
      // Fallback for browsers that don't support Clipboard API or when permissions are denied
      try {
        const textArea = document.createElement('textarea');
        textArea.value = code;
        textArea.style.position = 'fixed';
        textArea.style.left = '-999999px';
        textArea.style.top = '-999999px';
        document.body.appendChild(textArea);
        textArea.focus();
        textArea.select();

        const successful = document.execCommand('copy');
        document.body.removeChild(textArea);

        if (successful) {
          setCopied(true);
          setTimeout(() => setCopied(false), 2000);
        } else {
          console.error('Failed to copy text: execCommand returned false');
        }
      } catch (fallbackErr) {
        console.error('All copy methods failed:', fallbackErr);
      }
    }
  };

  // Ensure code is a string
  const codeString = typeof code === 'string' ? code : String(code || '');

  return (
    <div className="relative group rounded-[var(--radius)] border border-border overflow-hidden bg-muted/30">
      {filename && (
        <div className="flex items-center justify-between px-4 py-2 bg-muted border-b border-border">
          <span className="text-xs text-muted-foreground font-mono">{filename}</span>
          <span className="text-xs text-muted-foreground uppercase">{language}</span>
        </div>
      )}

      <div className="relative">
        <Button
          variant="ghost"
          size="icon"
          className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity z-10 bg-background/80 hover:bg-background"
          onClick={handleCopy}
          aria-label={copied ? t('common.copied') : t('common.copyCode')}
        >
          {copied ? (
            <Check className="w-4 h-4 text-[var(--toast-success-icon)]" aria-hidden="true" />
          ) : (
            <Copy className="w-4 h-4" aria-hidden="true" />
          )}
        </Button>

        <div className="overflow-x-auto w-full max-w-full">
          <SyntaxHighlighter
            language={language}
            style={elegantTheme as any}
            showLineNumbers={showLineNumbers}
            wrapLines={true}
            customStyle={{
              margin: 0,
              padding: '1rem',
              background: 'transparent',
              fontSize: 'inherit',
            }}
            codeTagProps={{
              className: 'text-[length:inherit]',
            }}
          >
            {codeString}
          </SyntaxHighlighter>
        </div>
      </div>
    </div>
  );
};