import { useState } from 'react'
import { Highlight, themes } from 'prism-react-renderer'
import { useTheme } from '@hooks/useTheme'

interface CodeBlockProps {
  children: string
  language?: string
  copyable?: boolean
  editable?: boolean
  showLineNumbers?: boolean
}

export function CodeBlock({
  children,
  language = 'typescript',
  copyable = true,
  editable = false,
  showLineNumbers = true,
}: CodeBlockProps) {
  const [copied, setCopied] = useState(false)
  const [code, setCode] = useState(children.trim())
  const { isDark } = useTheme()

  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(code)
      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
    } catch (err) {
      console.error('Failed to copy:', err)
    }
  }

  return (
    <div className="relative group overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-bg-elevated)]">
      {/* 语言标签和复制按钮 */}
      <div className="flex items-center justify-between px-3 py-2 border-b border-[var(--color-border)] bg-[var(--color-bg-card)]">
        <span className="text-xs text-[var(--color-text-tertiary)] font-mono uppercase tracking-wide">
          {language}
        </span>
        {copyable && (
          <button
            onClick={handleCopy}
            className={`
              text-xs px-3 py-1 rounded-[var(--radius-md)] transition-all font-medium
              ${copied
                ? 'text-[var(--color-primary)] bg-[var(--color-primary-dim)]'
                : 'text-[var(--color-text-muted)] hover:text-[var(--color-primary)] hover:bg-[var(--color-primary-dim)]'
              }
            `}
          >
            {copied ? '已复制 ✓' : '复制'}
          </button>
        )}
      </div>

      {/* 代码区域 */}
      <Highlight
        theme={isDark ? themes.okaidia : themes.github}
        code={code}
        language={language as any}
      >
        {({ className, style, tokens, getLineProps, getTokenProps }) => (
          <div
            className={`${className} overflow-x-auto p-4 text-sm leading-relaxed`}
            style={{ 
              ...style, 
              backgroundColor: 'transparent',
              fontFamily: 'var(--font-mono)',
              fontSize: '14px',
              lineHeight: '1.6'
            }}
          >
            {editable ? (
              <textarea
                value={code}
                onChange={(e) => setCode(e.target.value)}
                className="w-full min-h-[100px] bg-transparent outline-none resize-y font-mono"
                spellCheck={false}
              />
            ) : (
              tokens.map((line, i) => (
                <div key={i} {...getLineProps({ line })} className="table-row">
                  {showLineNumbers && (
                    <span className="table-cell pr-4 text-right text-[var(--color-text-muted)] select-none text-xs w-8">
                      {i + 1}
                    </span>
                  )}
                  <span className="table-cell">
                    {line.map((token, key) => (
                      <span key={key} {...getTokenProps({ token })} />
                    ))}
                  </span>
                </div>
              ))
            )}
          </div>
        )}
      </Highlight>
    </div>
  )
}