'use client'

import { useState, useEffect } from 'react'

interface Vendor {
  vendor_name: string
  vendor_url: string | null
  category_key: string
  description_de: string | null
  cookie_names: string[]
  retention_days: number | null
}

const CAT_LABELS: Record<string, string> = {
  necessary: 'Notwendig',
  functional: 'Funktional',
  statistics: 'Statistik',
  marketing: 'Marketing',
}

function generateHTML(vendors: Vendor[]): string {
  const grouped = vendors.reduce<Record<string, Vendor[]>>((acc, v) => {
    const key = v.category_key || 'other'
    if (!acc[key]) acc[key] = []
    acc[key].push(v)
    return acc
  }, {})

  let html = `<div style="font-family:system-ui,sans-serif;font-size:14px;color:#1f2937;">\n`
  html += `<h3 style="margin:0 0 12px;font-size:16px;">Eingesetzte Dienste und Cookies</h3>\n`

  for (const [catKey, catVendors] of Object.entries(grouped)) {
    const label = CAT_LABELS[catKey] || catKey
    html += `<h4 style="margin:16px 0 8px;font-size:14px;color:#6b21a8;">${label}</h4>\n`
    html += `<table style="width:100%;border-collapse:collapse;margin-bottom:12px;font-size:13px;">\n`
    html += `<tr style="background:#f9fafb;"><th style="text-align:left;padding:6px 8px;border:1px solid #e5e7eb;">Anbieter</th><th style="text-align:left;padding:6px 8px;border:1px solid #e5e7eb;">Zweck</th><th style="text-align:left;padding:6px 8px;border:1px solid #e5e7eb;">Cookies</th><th style="text-align:left;padding:6px 8px;border:1px solid #e5e7eb;">Speicherdauer</th></tr>\n`

    for (const v of catVendors) {
      const name = v.vendor_url
        ? `<a href="${v.vendor_url}" target="_blank" rel="noopener">${v.vendor_name}</a>`
        : v.vendor_name
      const cookies = v.cookie_names?.join(', ') || '-'
      const retention = v.retention_days ? `${v.retention_days} Tage` : '-'
      html += `<tr><td style="padding:6px 8px;border:1px solid #e5e7eb;">${name}</td><td style="padding:6px 8px;border:1px solid #e5e7eb;">${v.description_de || '-'}</td><td style="padding:6px 8px;border:1px solid #e5e7eb;font-family:monospace;font-size:11px;">${cookies}</td><td style="padding:6px 8px;border:1px solid #e5e7eb;">${retention}</td></tr>\n`
    }
    html += `</table>\n`
  }
  html += `</div>`
  return html
}

export function EmbeddableVendorHTML({ siteId }: { siteId?: string }) {
  const [vendors, setVendors] = useState<Vendor[]>([])
  const [copied, setCopied] = useState(false)

  useEffect(() => {
    const sid = siteId || 'preview-test-site'
    fetch(`/api/sdk/v1/banner/admin/sites/${sid}/vendors`)
      .then(r => r.ok ? r.json() : [])
      .then(data => setVendors(Array.isArray(data) ? data : []))
      .catch(() => {})
  }, [siteId])

  const html = generateHTML(vendors)

  const handleCopy = () => {
    navigator.clipboard.writeText(html)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div>
          <h3 className="font-semibold text-gray-900">Einbettbarer HTML-Code</h3>
          <p className="text-xs text-gray-500 mt-1">
            Kopieren Sie diesen Code in Ihre Datenschutzerklaerung oder Cookie-Richtlinie.
          </p>
        </div>
        <button onClick={handleCopy}
          className="px-4 py-2 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">
          {copied ? 'Kopiert!' : 'HTML kopieren'}
        </button>
      </div>

      {/* Preview */}
      <div className="border border-gray-200 rounded-lg p-4 bg-white">
        <div dangerouslySetInnerHTML={{ __html: html }} />
      </div>

      {/* Raw HTML */}
      <details className="group">
        <summary className="text-xs text-gray-500 cursor-pointer hover:text-gray-700">
          Quellcode anzeigen
        </summary>
        <pre className="mt-2 p-3 bg-gray-50 border border-gray-200 rounded-lg text-xs text-gray-700 overflow-x-auto max-h-[300px] overflow-y-auto">
          {html}
        </pre>
      </details>
    </div>
  )
}