'use client'
import React, { useState, useCallback } from 'react'
import type { ScopeDecision, ScopeProfilingAnswer } from '@/lib/sdk/compliance-scope-types'
import { DEPTH_LEVEL_LABELS, DOCUMENT_TYPE_LABELS } from '@/lib/sdk/compliance-scope-types'

interface ScopeExportTabProps {
  decision?: ScopeDecision | null
  answers?: ScopeProfilingAnswer[]
  scopeState?: { decision: ScopeDecision | null; answers: ScopeProfilingAnswer[] }
  onBackToDecision?: () => void
}

export function ScopeExportTab({ decision: decisionProp, answers: answersProp, scopeState, onBackToDecision }: ScopeExportTabProps) {
  const decision = decisionProp ?? scopeState?.decision ?? null
  const answers = answersProp ?? scopeState?.answers ?? []
  // onBackToDecision is accepted but not used in this component (navigation handled by parent)
  const [copiedMarkdown, setCopiedMarkdown] = useState(false)

  const handleDownloadJSON = useCallback(() => {
    if (!decision) return
    const dataStr = JSON.stringify(decision, null, 2)
    const dataBlob = new Blob([dataStr], { type: 'application/json' })
    const url = URL.createObjectURL(dataBlob)
    const link = document.createElement('a')
    link.href = url
    link.download = `compliance-scope-decision-${new Date().toISOString().split('T')[0]}.json`
    link.click()
    URL.revokeObjectURL(url)
  }, [decision])

  const handleDownloadCSV = useCallback(() => {
    if (!decision || !decision.requiredDocuments) return

    const headers = ['Typ', 'Priorität', 'Aufwand (Stunden)', 'Pflicht', 'Hard-Trigger']
    const rows = decision.requiredDocuments.map((doc) => [
      DOCUMENT_TYPE_LABELS[doc.documentType] || doc.documentType,
      doc.priority,
      String(doc.estimatedEffort || 0),
      doc.requirement === 'mandatory' ? 'Ja' : 'Nein',
      doc.triggeredBy.length > 0 ? 'Ja' : 'Nein',
    ])

    const csvContent = [headers, ...rows].map((row) => row.map((cell) => `"${cell}"`).join(',')).join('\n')

    const dataBlob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
    const url = URL.createObjectURL(dataBlob)
    const link = document.createElement('a')
    link.href = url
    link.download = `compliance-scope-documents-${new Date().toISOString().split('T')[0]}.csv`
    link.click()
    URL.revokeObjectURL(url)
  }, [decision])

  const generateMarkdownSummary = useCallback(() => {
    if (!decision) return ''

    let markdown = `# Compliance Scope Entscheidung\n\n`
    markdown += `**Datum:** ${new Date().toLocaleDateString('de-DE')}\n\n`
    markdown += `## Einstufung\n\n`
    markdown += `**Level:** ${decision.determinedLevel} - ${DEPTH_LEVEL_LABELS[decision.determinedLevel]}\n\n`
    if (decision.reasoning && decision.reasoning.length > 0) {
      markdown += `**Begründung:** ${decision.reasoning.map(r => r.description).filter(Boolean).join('. ')}\n\n`
    }

    if (decision.scores) {
      markdown += `## Scores\n\n`
      markdown += `- **Risiko-Score:** ${decision.scores.risk_score}/100\n`
      markdown += `- **Komplexitäts-Score:** ${decision.scores.complexity_score}/100\n`
      markdown += `- **Assurance-Score:** ${decision.scores.assurance_need}/100\n`
      markdown += `- **Gesamt-Score:** ${decision.scores.composite_score}/100\n\n`
    }

    if (decision.triggeredHardTriggers && decision.triggeredHardTriggers.length > 0) {
      markdown += `## Aktive Hard-Trigger\n\n`
      decision.triggeredHardTriggers.forEach((trigger) => {
        markdown += `- **${trigger.description}**\n`
        markdown += `  - ${trigger.description}\n`
        if (trigger.legalReference) {
          markdown += `  - Rechtsgrundlage: ${trigger.legalReference}\n`
        }
      })
      markdown += `\n`
    }

    if (decision.requiredDocuments && decision.requiredDocuments.length > 0) {
      markdown += `## Erforderliche Dokumente\n\n`
      markdown += `| Typ | Priorität | Aufwand (h) | Pflicht | Hard-Trigger |\n`
      markdown += `|-----|-----------|-------------|---------|-------------|\n`
      decision.requiredDocuments.forEach((doc) => {
        markdown += `| ${DOCUMENT_TYPE_LABELS[doc.documentType] || doc.documentType} | ${doc.priority} | ${
          doc.estimatedEffort || 0
        } | ${doc.requirement === 'mandatory' ? 'Ja' : 'Nein'} | ${doc.triggeredBy.length > 0 ? 'Ja' : 'Nein'} |\n`
      })
      markdown += `\n`
    }

    if (decision.riskFlags && decision.riskFlags.length > 0) {
      markdown += `## Risiko-Flags\n\n`
      decision.riskFlags.forEach((flag) => {
        markdown += `### ${flag.message} (${flag.severity})\n\n`
        if (flag.legalReference) markdown += `Rechtsgrundlage: ${flag.legalReference}\n\n`
        markdown += `**Empfehlung:** ${flag.recommendation}\n\n`
      })
    }

    if (decision.gaps && decision.gaps.length > 0) {
      markdown += `## Gap-Analyse\n\n`
      decision.gaps.forEach((gap) => {
        markdown += `### ${gap.description} (${gap.severity})\n\n`
        markdown += `- **Ist:** ${gap.currentState}\n`
        markdown += `- **Soll:** ${gap.targetState}\n`
        markdown += `- **Aufwand:** ~${gap.effort}h\n\n`
      })
    }

    if (decision.nextActions && decision.nextActions.length > 0) {
      markdown += `## Nächste Schritte\n\n`
      decision.nextActions.forEach((action, idx) => {
        markdown += `${idx + 1}. **${action.title}**\n`
        markdown += `   ${action.description}\n`
        if (action.estimatedEffort) {
          markdown += `   Aufwand: ~${action.estimatedEffort}h\n`
        }
        markdown += `\n`
      })
    }

    return markdown
  }, [decision])

  const handleCopyMarkdown = useCallback(() => {
    const markdown = generateMarkdownSummary()
    navigator.clipboard.writeText(markdown).then(() => {
      setCopiedMarkdown(true)
      setTimeout(() => setCopiedMarkdown(false), 2000)
    })
  }, [generateMarkdownSummary])

  /** Simple markdown-to-HTML converter for print view */
  const markdownToHtml = useCallback((md: string): string => {
    let html = md
      // Escape HTML entities
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
    // Headers
    html = html.replace(/^### (.+)$/gm, '<h3>$1</h3>')
    html = html.replace(/^## (.+)$/gm, '<h2>$1</h2>')
    html = html.replace(/^# (.+)$/gm, '<h1>$1</h1>')
    // Bold
    html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
    // Tables
    const lines = html.split('\n')
    let inTable = false
    const result: string[] = []
    for (const line of lines) {
      if (line.trim().startsWith('|') && line.trim().endsWith('|')) {
        if (line.includes('---')) continue // separator row
        const cells = line.split('|').filter(c => c.trim() !== '')
        if (!inTable) {
          result.push('<table><thead><tr>')
          cells.forEach(c => result.push(`<th>${c.trim()}</th>`))
          result.push('</tr></thead><tbody>')
          inTable = true
        } else {
          result.push('<tr>')
          cells.forEach(c => result.push(`<td>${c.trim()}</td>`))
          result.push('</tr>')
        }
      } else {
        if (inTable) {
          result.push('</tbody></table>')
          inTable = false
        }
        // List items
        if (line.trim().startsWith('- ')) {
          result.push(`<li>${line.trim().slice(2)}</li>`)
        } else if (/^\d+\.\s/.test(line.trim())) {
          result.push(`<li>${line.trim().replace(/^\d+\.\s/, '')}</li>`)
        } else if (line.trim() === '') {
          result.push('<br/>')
        } else {
          result.push(`<p>${line}</p>`)
        }
      }
    }
    if (inTable) result.push('</tbody></table>')
    return result.join('\n')
  }, [])

  const handlePrintView = useCallback(() => {
    if (!decision) return

    const markdown = generateMarkdownSummary()
    const renderedHtml = markdownToHtml(markdown)
    const htmlContent = `
      <!DOCTYPE html>
      <html>
      <head>
        <meta charset="UTF-8">
        <title>Compliance Scope Entscheidung</title>
        <style>
          body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            max-width: 900px;
            margin: 40px auto;
            padding: 20px;
            line-height: 1.6;
          }
          h1 { color: #7c3aed; border-bottom: 3px solid #7c3aed; padding-bottom: 10px; }
          h2 { color: #5b21b6; margin-top: 30px; border-bottom: 2px solid #e5e7eb; padding-bottom: 8px; }
          h3 { color: #4c1d95; margin-top: 20px; }
          table { width: 100%; border-collapse: collapse; margin: 20px 0; }
          th, td { border: 1px solid #d1d5db; padding: 12px; text-align: left; }
          th { background-color: #f3f4f6; font-weight: 600; }
          ul { list-style-type: disc; padding-left: 20px; }
          li { margin: 8px 0; }
          p { margin: 4px 0; }
          @media print {
            body { margin: 20px; }
            h1, h2, h3 { page-break-after: avoid; }
            table { page-break-inside: avoid; }
          }
        </style>
      </head>
      <body>
        ${renderedHtml}
      </body>
      </html>
    `
    const printWindow = window.open('', '_blank')
    if (printWindow) {
      printWindow.document.write(htmlContent)
      printWindow.document.close()
      printWindow.focus()
      setTimeout(() => printWindow.print(), 250)
    }
  }, [decision, generateMarkdownSummary, markdownToHtml])

  if (!decision) {
    return (
      <div className="bg-white rounded-xl border border-gray-200 p-12 text-center">
        <div className="inline-flex items-center justify-center w-16 h-16 bg-gray-100 rounded-full mb-4">
          <svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
            />
          </svg>
        </div>
        <h3 className="text-xl font-semibold text-gray-900 mb-2">Keine Daten zum Export</h3>
        <p className="text-gray-600">Bitte führen Sie zuerst das Scope-Profiling durch.</p>
      </div>
    )
  }

  return (
    <div className="space-y-6">
      {/* JSON Export */}
      <div className="bg-white rounded-xl border border-gray-200 p-6">
        <div className="flex items-start justify-between">
          <div className="flex-1">
            <div className="flex items-center gap-2 mb-2">
              <svg className="w-5 h-5 text-blue-600" 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>
              <h3 className="text-lg font-semibold text-gray-900">JSON Export</h3>
            </div>
            <p className="text-sm text-gray-600 mb-3">
              Exportieren Sie die vollständige Entscheidung als strukturierte JSON-Datei für weitere Verarbeitung oder
              Archivierung.
            </p>
            <button
              onClick={handleDownloadJSON}
              className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium text-sm"
            >
              JSON herunterladen
            </button>
          </div>
        </div>
      </div>

      {/* CSV Export */}
      <div className="bg-white rounded-xl border border-gray-200 p-6">
        <div className="flex items-start justify-between">
          <div className="flex-1">
            <div className="flex items-center gap-2 mb-2">
              <svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
                />
              </svg>
              <h3 className="text-lg font-semibold text-gray-900">CSV Export</h3>
            </div>
            <p className="text-sm text-gray-600 mb-3">
              Exportieren Sie die Liste der erforderlichen Dokumente als CSV-Datei für Excel, Google Sheets oder andere
              Tabellenkalkulationen.
            </p>
            <button
              onClick={handleDownloadCSV}
              className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors font-medium text-sm"
            >
              CSV herunterladen
            </button>
          </div>
        </div>
      </div>

      {/* Markdown Summary */}
      <div className="bg-white rounded-xl border border-gray-200 p-6">
        <div className="flex items-center gap-2 mb-3">
          <svg className="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
            />
          </svg>
          <h3 className="text-lg font-semibold text-gray-900">Markdown-Zusammenfassung</h3>
        </div>
        <p className="text-sm text-gray-600 mb-3">
          Strukturierte Zusammenfassung im Markdown-Format für Dokumentation oder Berichte.
        </p>
        <textarea
          readOnly
          value={generateMarkdownSummary()}
          className="w-full h-64 px-4 py-3 border border-gray-300 rounded-lg font-mono text-sm text-gray-700 resize-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
        />
        <button
          onClick={handleCopyMarkdown}
          className="mt-3 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors font-medium text-sm"
        >
          {copiedMarkdown ? 'Kopiert!' : 'Kopieren'}
        </button>
      </div>

      {/* Print View */}
      <div className="bg-white rounded-xl border border-gray-200 p-6">
        <div className="flex items-start justify-between">
          <div className="flex-1">
            <div className="flex items-center gap-2 mb-2">
              <svg className="w-5 h-5 text-gray-600" 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>
              <h3 className="text-lg font-semibold text-gray-900">Druckansicht</h3>
            </div>
            <p className="text-sm text-gray-600 mb-3">
              Öffnen Sie eine druckfreundliche HTML-Ansicht der Entscheidung in einem neuen Fenster.
            </p>
            <button
              onClick={handlePrintView}
              className="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors font-medium text-sm"
            >
              Druckansicht öffnen
            </button>
          </div>
        </div>
      </div>

      {/* Export Info */}
      <div className="bg-blue-50 border border-blue-200 rounded-xl p-4">
        <div className="flex gap-3">
          <svg className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
            />
          </svg>
          <div>
            <h4 className="text-sm font-semibold text-blue-900 mb-1">Export-Hinweise</h4>
            <ul className="text-sm text-blue-800 space-y-1">
              <li>• JSON-Exporte enthalten alle Daten und können wieder importiert werden</li>
              <li>• CSV-Exporte sind ideal für Tabellenkalkulation und Aufwandsschätzungen</li>
              <li>• Markdown eignet sich für Dokumentation und Berichte</li>
              <li>• Die Druckansicht ist optimiert für PDF-Export über den Browser</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  )
}
