'use client'

import { LegalTemplateResult } from '@/lib/sdk/types'
import { RuleEngineResult } from '../ruleEngine'

interface GeneratorPreviewTabProps {
  template: LegalTemplateResult
  ruleResult: RuleEngineResult | null
  renderedContent: string
  missing: string[]
  onCopy: () => void
  onExportMarkdown: () => void
}

export default function GeneratorPreviewTab({
  template,
  ruleResult,
  renderedContent,
  missing,
  onCopy,
  onExportMarkdown,
}: GeneratorPreviewTabProps) {
  return (
    <div className="space-y-4">
      {ruleResult && ruleResult.violations.length > 0 && (
        <div className="bg-red-50 border border-red-200 rounded-xl p-4">
          <p className="text-sm font-semibold text-red-700 mb-2">
            🔴 {ruleResult.violations.length} Fehler
          </p>
          <ul className="space-y-1">
            {ruleResult.violations.map((v) => (
              <li key={v.id} className="text-xs text-red-600">
                <span className="font-mono font-medium">[{v.id}]</span> {v.message}
              </li>
            ))}
          </ul>
        </div>
      )}
      {ruleResult && ruleResult.warnings.filter((w) => w.id !== 'WARN_LEGAL_REVIEW').length > 0 && (
        <div className="bg-yellow-50 border border-yellow-200 rounded-xl p-4">
          <ul className="space-y-1">
            {ruleResult.warnings
              .filter((w) => w.id !== 'WARN_LEGAL_REVIEW')
              .map((w) => (
                <li key={w.id} className="text-xs text-yellow-700">
                  🟡 <span className="font-mono font-medium">[{w.id}]</span> {w.message}
                </li>
              ))}
          </ul>
        </div>
      )}
      {ruleResult && (
        <div className="bg-blue-50 border border-blue-200 rounded-xl p-3">
          <p className="text-xs text-blue-700">
            ℹ️ Rechtlicher Hinweis: Diese Vorlage ist MIT-lizenziert. Vor Produktionseinsatz
            wird eine rechtliche Überprüfung dringend empfohlen.
          </p>
        </div>
      )}
      {ruleResult && ruleResult.appliedDefaults.length > 0 && (
        <p className="text-xs text-gray-400">
          Defaults angewendet: {ruleResult.appliedDefaults.join(', ')}
        </p>
      )}

      <div className="flex items-center justify-between flex-wrap gap-2">
        <span className="text-sm text-gray-600">
          {missing.length > 0 && (
            <span className="text-orange-600">
              ⚠ {missing.length} Platzhalter noch nicht ausgefüllt
            </span>
          )}
        </span>
        <div className="flex gap-2">
          <button
            onClick={onCopy}
            className="flex items-center gap-1.5 px-3 py-1.5 text-xs border border-gray-200 rounded-lg hover:bg-gray-50 text-gray-600 transition-colors"
          >
            <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
            </svg>
            Kopieren
          </button>
          <button
            onClick={onExportMarkdown}
            className="flex items-center gap-1.5 px-3 py-1.5 text-xs border border-gray-200 rounded-lg hover:bg-gray-50 text-gray-600 transition-colors"
          >
            <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
            </svg>
            Markdown
          </button>
          <button
            onClick={() => window.print()}
            className="flex items-center gap-1.5 px-4 py-1.5 text-xs bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
          >
            <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
            </svg>
            PDF drucken
          </button>
        </div>
      </div>
      <div className="bg-gray-50 rounded-xl border border-gray-200 p-6 max-h-[600px] overflow-y-auto">
        <pre className="text-sm text-gray-800 whitespace-pre-wrap leading-relaxed font-sans">
          {renderedContent}
        </pre>
      </div>
      {template.attributionRequired && template.attributionText && (
        <div className="text-xs text-orange-600 bg-orange-50 p-3 rounded-lg border border-orange-200">
          <strong>Attribution erforderlich:</strong> {template.attributionText}
        </div>
      )}
    </div>
  )
}
