resolutionflow/frontend/src/components/script-builder/ScriptCodeBlock.tsx

import { useState } from 'react'
import { Light as SyntaxHighlighter } from 'react-syntax-highlighter'
import powershell from 'react-syntax-highlighter/dist/esm/languages/hljs/powershell'
import bash from 'react-syntax-highlighter/dist/esm/languages/hljs/bash'
import python from 'react-syntax-highlighter/dist/esm/languages/hljs/python'
import atomOneDark from 'react-syntax-highlighter/dist/esm/styles/hljs/atom-one-dark'
import { Eye, Copy, Check, BookmarkPlus } from 'lucide-react'

SyntaxHighlighter.registerLanguage('powershell', powershell)
SyntaxHighlighter.registerLanguage('bash', bash)
SyntaxHighlighter.registerLanguage('python', python)

const LANGUAGE_MAP: Record<string, string> = {
  powershell: 'powershell',
  bash: 'bash',
  python: 'python',
}

interface ScriptCodeBlockProps {
  script: string
  filename: string | null
  lineCount: number | null
  language: string
  onViewFull: () => void
  onSave: () => void
}

export function ScriptCodeBlock({
  script,
  filename,
  lineCount,
  language,
  onViewFull,
  onSave,
}: ScriptCodeBlockProps) {
  const [copied, setCopied] = useState(false)
  const lines = script.split('\n')
  const previewLines = lines.slice(0, 5).join('\n')
  const remainingLines = lines.length - 5
  const hlLanguage = LANGUAGE_MAP[language] || 'powershell'

  const handleCopy = async (e: React.MouseEvent) => {
    e.stopPropagation()
    try {
      await navigator.clipboard.writeText(script)
      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
    } catch {
      // clipboard not available
    }
  }

  return (
    <div className="mt-3 rounded-lg border border-border bg-[var(--color-bg-code)] overflow-hidden">
      {/* Header */}
      <div className="flex items-center justify-between px-3 py-2 border-b border-border">
        <span className="font-mono text-xs text-accent-text truncate">
          {filename || 'script'}
        </span>
        {lineCount != null && (
          <span className="font-mono text-[0.625rem] text-muted-foreground ml-2 shrink-0">
            {lineCount} lines
          </span>
        )}
      </div>

      {/* Code preview — clickable */}
      <button
        onClick={onViewFull}
        className="block w-full text-left cursor-pointer hover:bg-[rgba(255,255,255,0.02)] transition-colors"
      >
        <SyntaxHighlighter
          language={hlLanguage}
          style={atomOneDark}
          customStyle={{
            background: 'transparent',
            padding: '12px',
            margin: 0,
            fontSize: '0.8125rem',
            lineHeight: '1.5',
          }}
          wrapLongLines
        >
          {previewLines}
        </SyntaxHighlighter>
        {remainingLines > 0 && (
          <div className="px-3 pb-2 font-mono text-[0.625rem] text-muted-foreground">
            {"··· "}{remainingLines} more line{remainingLines !== 1 ? 's' : ''}
          </div>
        )}
      </button>

      {/* Action buttons */}
      <div className="flex items-center gap-2 px-3 py-2 border-t border-border">
        <button
          onClick={onViewFull}
          className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold transition-all bg-primary text-white hover:brightness-110 active:scale-[0.98]"
        >
          <Eye size={14} />
          View Full Script
        </button>
        <button
          onClick={handleCopy}
          className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors border border-border text-foreground hover:border-[var(--color-border-hover)] hover:bg-[var(--color-bg-elevated)]"
        >
          {copied ? <Check size={14} className="text-success" /> : <Copy size={14} />}
          {copied ? 'Copied' : 'Copy'}
        </button>
        <button
          onClick={(e) => { e.stopPropagation(); onSave() }}
          className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors border border-border text-muted-foreground hover:text-foreground hover:border-[var(--color-border-hover)] hover:bg-[var(--color-bg-elevated)]"
        >
          <BookmarkPlus size={14} />
          Save to Library
        </button>
      </div>
    </div>
  )
}