'use client'

import { useState, useEffect } from 'react'
import type { VVTOrganizationHeader } from '@/lib/sdk/vvt-types'

// ---------------------------------------------------------------------------
// Types
// ---------------------------------------------------------------------------

interface VendorForProcessor {
  id: string
  name: string
  role: string
  serviceDescription: string
  country: string
  processingLocations: { country: string; region?: string; isEU: boolean; isAdequate: boolean }[]
  transferMechanisms: string[]
  certifications: { type: string; expirationDate?: string }[]
  status: string
  primaryContact: { name: string; email: string; phone?: string }
  dpoContact?: { name: string; email: string }
  contractTypes: string[]
  inherentRiskScore: number
  residualRiskScore: number
  nextReviewDate?: string
  processingActivityIds: string[]
  notes?: string
  createdAt: string
  updatedAt: string
}

// ---------------------------------------------------------------------------
// Constants
// ---------------------------------------------------------------------------

const VENDOR_STATUS_LABELS: Record<string, string> = {
  ACTIVE: 'Aktiv', PENDING_REVIEW: 'In Pruefung', APPROVED: 'Genehmigt',
  SUSPENDED: 'Ausgesetzt', ARCHIVED: 'Archiviert', DRAFT: 'Entwurf', REVIEW: 'In Pruefung',
}

const VENDOR_STATUS_COLORS: Record<string, string> = {
  ACTIVE: 'bg-green-100 text-green-700', PENDING_REVIEW: 'bg-yellow-100 text-yellow-700',
  APPROVED: 'bg-green-100 text-green-800', SUSPENDED: 'bg-red-100 text-red-700',
  ARCHIVED: 'bg-gray-100 text-gray-600', DRAFT: 'bg-gray-100 text-gray-600',
  REVIEW: 'bg-yellow-100 text-yellow-700',
}

const ROLE_LABELS: Record<string, string> = {
  PROCESSOR: 'Auftragsverarbeiter', SUB_PROCESSOR: 'Unterauftragsverarbeiter',
}

function riskColor(score: number): string {
  if (score <= 3) return 'bg-green-100 text-green-700'
  if (score <= 6) return 'bg-yellow-100 text-yellow-700'
  return 'bg-red-100 text-red-700'
}

// ---------------------------------------------------------------------------
// API
// ---------------------------------------------------------------------------

async function apiListProcessorVendors(): Promise<VendorForProcessor[]> {
  const res = await fetch('/api/sdk/v1/vendor-compliance/vendors?limit=500')
  if (!res.ok) throw new Error(`Vendor API error: ${res.status}`)
  const data = await res.json()
  const items: any[] = data?.data?.items ?? []
  return items
    .filter((v: any) => v.role === 'PROCESSOR' || v.role === 'SUB_PROCESSOR')
    .map((v: any) => ({
      id: v.id, name: v.name ?? '', role: v.role ?? '',
      serviceDescription: v.serviceDescription ?? v.service_description ?? '',
      country: v.country ?? '',
      processingLocations: (v.processingLocations ?? v.processing_locations ?? []).map((l: any) => ({
        country: l.country ?? '', region: l.region,
        isEU: l.isEU ?? l.is_eu ?? false, isAdequate: l.isAdequate ?? l.is_adequate ?? false,
      })),
      transferMechanisms: v.transferMechanisms ?? v.transfer_mechanisms ?? [],
      certifications: (v.certifications ?? []).map((c: any) => ({
        type: c.type ?? '', expirationDate: c.expirationDate ?? c.expiration_date,
      })),
      status: v.status ?? 'ACTIVE',
      primaryContact: {
        name: v.primaryContact?.name ?? v.primary_contact?.name ?? '',
        email: v.primaryContact?.email ?? v.primary_contact?.email ?? '',
        phone: v.primaryContact?.phone ?? v.primary_contact?.phone,
      },
      dpoContact: (v.dpoContact ?? v.dpo_contact) ? {
        name: (v.dpoContact ?? v.dpo_contact).name ?? '',
        email: (v.dpoContact ?? v.dpo_contact).email ?? '',
      } : undefined,
      contractTypes: v.contractTypes ?? v.contract_types ?? [],
      inherentRiskScore: v.inherentRiskScore ?? v.inherent_risk_score ?? 0,
      residualRiskScore: v.residualRiskScore ?? v.residual_risk_score ?? 0,
      nextReviewDate: v.nextReviewDate ?? v.next_review_date,
      processingActivityIds: v.processingActivityIds ?? v.processing_activity_ids ?? [],
      notes: v.notes, createdAt: v.createdAt ?? v.created_at ?? '',
      updatedAt: v.updatedAt ?? v.updated_at ?? '',
    }))
}

// ---------------------------------------------------------------------------
// Component
// ---------------------------------------------------------------------------

export function TabProcessor({ orgHeader }: { orgHeader: VVTOrganizationHeader }) {
  const [vendors, setVendors] = useState<VendorForProcessor[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  const loadVendors = () => {
    setLoading(true)
    setError(null)
    apiListProcessorVendors()
      .then(data => setVendors(data))
      .catch(err => setError(err.message ?? 'Fehler beim Laden der Auftragsverarbeiter'))
      .finally(() => setLoading(false))
  }

  useEffect(() => {
    let cancelled = false
    setLoading(true)
    setError(null)
    apiListProcessorVendors()
      .then(data => { if (!cancelled) setVendors(data) })
      .catch(err => { if (!cancelled) setError(err.message ?? 'Fehler beim Laden der Auftragsverarbeiter') })
      .finally(() => { if (!cancelled) setLoading(false) })
    return () => { cancelled = true }
  }, [])

  const handlePrintProcessorDoc = () => {
    const today = new Date().toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' })
    const activeVendors = vendors.filter(v => v.status !== 'ARCHIVED')
    const subProcessors = vendors.filter(v => v.role === 'SUB_PROCESSOR')

    let html = `<!DOCTYPE html><html lang="de"><head><meta charset="UTF-8">
  <title>Verzeichnis Auftragsverarbeiter — Art. 30 Abs. 2 DSGVO</title>
  <style>* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; max-width: 900px; margin: 0 auto; padding: 40px 30px; line-height: 1.6; color: #1a202c; font-size: 11pt; } .cover { text-align: center; padding: 80px 0 60px; page-break-after: always; } .cover h1 { font-size: 22pt; color: #5b21b6; margin-bottom: 8px; } .cover .subtitle { font-size: 13pt; color: #6b7280; margin-bottom: 40px; } .cover .org-info { font-size: 11pt; color: #374151; line-height: 2; } .record { page-break-inside: avoid; margin-bottom: 30px; border: 1px solid #e5e7eb; border-radius: 8px; padding: 20px; } .record-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid #7c3aed; } .record-header .vvt-id { font-family: monospace; font-size: 10pt; color: #6b7280; background: #f3f4f6; padding: 2px 8px; border-radius: 4px; } .record-header h3 { font-size: 13pt; color: #1f2937; } table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 10pt; } th { background: #f5f3ff; color: #5b21b6; font-weight: 600; text-align: left; padding: 8px 10px; border: 1px solid #e5e7eb; } td { padding: 6px 10px; border: 1px solid #e5e7eb; vertical-align: top; } .page-footer { margin-top: 40px; padding-top: 16px; border-top: 2px solid #e5e7eb; font-size: 9pt; color: #9ca3af; display: flex; justify-content: space-between; } @media print { body { margin: 15mm; padding: 0; max-width: none; } .record { page-break-inside: avoid; } }</style>
</head><body>
<div class="cover">
  <h1>Verzeichnis aller Verarbeitungstaetigkeiten</h1>
  <div class="subtitle">als Auftragsverarbeiter gemaess Art. 30 Abs. 2 DSGVO</div>
  <div class="org-info"><strong>${orgHeader.organizationName || '(Organisation eintragen)'}</strong><br/>${orgHeader.dpoName ? `Datenschutzbeauftragter: ${orgHeader.dpoName}<br/>` : ''}Stand: ${today}</div>
</div>`

    for (const v of activeVendors) {
      const thirdCountryLocations = v.processingLocations.filter(l => !l.isEU && !l.isAdequate)
      const thirdCountryHtml = thirdCountryLocations.length > 0
        ? thirdCountryLocations.map(l => `${l.country}${l.region ? ` (${l.region})` : ''}`).join(', ') +
          (v.transferMechanisms.length > 0 ? `<br/>Garantien: ${v.transferMechanisms.join(', ')}` : '')
        : 'Keine Drittlanduebermittlung'
      const subProcessorHtml = subProcessors.length > 0
        ? subProcessors.map(s => `${s.name} — ${s.serviceDescription || s.country}`).join('<br/>')
        : 'Keine'

      html += `<div class="record"><div class="record-header"><span class="vvt-id">${ROLE_LABELS[v.role] ?? v.role}</span><h3>${v.name}</h3></div>
  <table><tr><th style="width:35%">Pflichtfeld (Art. 30 Abs. 2)</th><th>Inhalt</th></tr>
    <tr><td><strong>Name/Kontaktdaten des Auftragsverarbeiters</strong></td><td>${orgHeader.organizationName}${orgHeader.dpoContact ? `<br/>Kontakt: ${orgHeader.dpoContact}` : ''}</td></tr>
    <tr><td><strong>Name/Kontaktdaten des Verantwortlichen</strong></td><td>${v.name}${v.primaryContact.email ? `<br/>Kontakt: ${v.primaryContact.email}` : ''}</td></tr>
    <tr><td><strong>Kategorien von Verarbeitungen</strong></td><td>${v.serviceDescription || '<em style="color:#9ca3af;">nicht angegeben</em>'}</td></tr>
    <tr><td><strong>Unterauftragsverarbeiter</strong></td><td>${subProcessorHtml}</td></tr>
    <tr><td><strong>Uebermittlung an Drittlaender</strong></td><td>${thirdCountryHtml}</td></tr>
    <tr><td><strong>TOM (Art. 32 DSGVO)</strong></td><td>Siehe TOM-Dokumentation im Vendor-Compliance-Modul</td></tr>
  </table></div>`
    }

    html += `<div class="page-footer"><span>Auftragsverarbeiter-Verzeichnis — ${orgHeader.organizationName}</span><span>Stand: ${today}</span></div></body></html>`

    const printWindow = window.open('', '_blank')
    if (printWindow) {
      printWindow.document.write(html)
      printWindow.document.close()
      printWindow.focus()
      setTimeout(() => printWindow.print(), 300)
    }
  }

  return (
    <div className="space-y-4">
      <div className="bg-purple-50 border border-purple-200 rounded-xl p-4 flex items-start gap-3">
        <svg className="w-5 h-5 text-purple-500 mt-0.5 flex-shrink-0" 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 className="flex-1">
          <p className="text-sm text-purple-800">
            Dieses Verzeichnis zeigt alle Auftragsverarbeiter aus dem Vendor Register.
            Neue Auftragsverarbeiter hinzufuegen oder bestehende bearbeiten:
          </p>
          <a href="/sdk/vendor-compliance"
            className="inline-flex items-center gap-1.5 mt-2 px-3 py-1.5 bg-purple-600 text-white text-sm rounded-lg hover:bg-purple-700 transition-colors">
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
            </svg>
            Zum Vendor Register
          </a>
        </div>
      </div>

      <div className="bg-white rounded-xl border border-gray-200 p-6">
        <div className="flex items-center justify-between mb-4">
          <div>
            <h3 className="text-lg font-semibold text-gray-900">Auftragsverarbeiter-Verzeichnis (Art. 30 Abs. 2)</h3>
            <p className="text-sm text-gray-500 mt-0.5">
              Auftragsverarbeiter und Unterauftragsverarbeiter aus dem Vendor-Compliance-Modul (nur lesen).
            </p>
          </div>
          {vendors.length > 0 && (
            <button onClick={handlePrintProcessorDoc}
              className="flex items-center gap-2 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 text-sm">
              <svg className="w-4 h-4" 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>
              Als PDF drucken
            </button>
          )}
        </div>

        {loading && (
          <div className="p-8 text-center">
            <div className="w-8 h-8 mx-auto border-2 border-purple-200 border-t-purple-600 rounded-full animate-spin mb-3" />
            <p className="text-sm text-gray-500">Auftragsverarbeiter werden geladen...</p>
          </div>
        )}

        {!loading && error && (
          <div className="p-6 bg-red-50 border border-red-200 rounded-lg text-center">
            <p className="text-sm text-red-700 mb-2">{error}</p>
            <button onClick={loadVendors} className="text-sm text-red-600 underline hover:text-red-800">
              Erneut versuchen
            </button>
          </div>
        )}

        {!loading && !error && vendors.length === 0 && (
          <div className="p-8 bg-gray-50 rounded-lg text-center">
            <div className="w-12 h-12 mx-auto bg-gray-100 rounded-full flex items-center justify-center mb-3">
              <svg className="w-6 h-6 text-gray-400" 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>
            </div>
            <h4 className="font-medium text-gray-700 mb-1">Keine Auftragsverarbeiter im Vendor Register</h4>
            <p className="text-sm text-gray-500 max-w-md mx-auto">
              Legen Sie Auftragsverarbeiter im Vendor Register an, damit sie hier automatisch erscheinen.
            </p>
            <a href="/sdk/vendor-compliance"
              className="inline-flex items-center gap-1.5 mt-3 px-4 py-2 bg-purple-600 text-white text-sm rounded-lg hover:bg-purple-700 transition-colors">
              Zum Vendor Register
            </a>
          </div>
        )}

        {!loading && !error && vendors.length > 0 && (
          <div className="space-y-3">
            {vendors.map(v => {
              const thirdCountryLocations = v.processingLocations.filter(l => !l.isEU && !l.isAdequate)
              return (
                <div key={v.id} className="bg-white rounded-xl border border-gray-200 p-5 hover:border-purple-200 transition-colors">
                  <div className="flex items-start justify-between">
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2 mb-1 flex-wrap">
                        <h4 className="text-base font-semibold text-gray-900">{v.name}</h4>
                        <span className="px-2 py-0.5 text-xs rounded-full bg-purple-100 text-purple-700">{ROLE_LABELS[v.role] ?? v.role}</span>
                        <span className={`px-2 py-0.5 text-xs rounded-full ${VENDOR_STATUS_COLORS[v.status] ?? 'bg-gray-100 text-gray-600'}`}>
                          {VENDOR_STATUS_LABELS[v.status] ?? v.status}
                        </span>
                      </div>
                      {v.serviceDescription && <p className="text-sm text-gray-600 mt-1">{v.serviceDescription}</p>}
                      <div className="flex items-center gap-4 mt-2 text-xs text-gray-500">
                        {v.primaryContact.name && (
                          <span className="flex items-center gap-1">
                            <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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                            </svg>
                            {v.primaryContact.name}
                          </span>
                        )}
                        {v.primaryContact.email && (
                          <span className="flex items-center gap-1">
                            <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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                            </svg>
                            {v.primaryContact.email}
                          </span>
                        )}
                      </div>
                      <div className="flex items-center gap-3 mt-2 flex-wrap">
                        <span className={`px-2 py-0.5 text-xs rounded-full ${riskColor(v.inherentRiskScore)}`}>Inherent: {v.inherentRiskScore}</span>
                        <span className={`px-2 py-0.5 text-xs rounded-full ${riskColor(v.residualRiskScore)}`}>Residual: {v.residualRiskScore}</span>
                        {v.updatedAt && <span className="text-xs text-gray-400">Aktualisiert: {new Date(v.updatedAt).toLocaleDateString('de-DE')}</span>}
                      </div>
                      {thirdCountryLocations.length > 0 && (
                        <div className="mt-2">
                          <span className="text-xs font-medium text-amber-700 bg-amber-50 px-2 py-0.5 rounded">Drittlandtransfers:</span>
                          <span className="text-xs text-gray-600 ml-1">
                            {thirdCountryLocations.map(l => `${l.country}${l.region ? ` (${l.region})` : ''}`).join(', ')}
                          </span>
                        </div>
                      )}
                      {v.certifications.length > 0 && (
                        <div className="flex items-center gap-2 mt-2 flex-wrap">
                          {v.certifications.map((c, i) => (
                            <span key={i} className="px-2 py-0.5 text-xs rounded-full bg-blue-50 text-blue-700 border border-blue-200">
                              {c.type}{c.expirationDate ? ` (bis ${new Date(c.expirationDate).toLocaleDateString('de-DE')})` : ''}
                            </span>
                          ))}
                        </div>
                      )}
                    </div>
                    <div className="ml-4 flex-shrink-0">
                      <a href="/sdk/vendor-compliance"
                        className="px-3 py-1.5 text-sm text-purple-600 hover:bg-purple-50 rounded-lg transition-colors inline-flex items-center gap-1">
                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                        </svg>
                        Im Vendor Register oeffnen
                      </a>
                    </div>
                  </div>
                </div>
              )
            })}
          </div>
        )}
      </div>

      <div className="bg-amber-50 border border-amber-200 rounded-xl p-4">
        <h4 className="text-sm font-medium text-amber-800 mb-1">Art. 30 Abs. 2 DSGVO — Pflichtangaben</h4>
        <ul className="text-sm text-amber-700 space-y-1 ml-4 list-disc">
          <li>Name und Kontaktdaten des/der Auftragsverarbeiter(s) und jedes Verantwortlichen</li>
          <li>Kategorien von Verarbeitungen, die im Auftrag jedes Verantwortlichen durchgefuehrt werden</li>
          <li>Uebermittlungen an Drittlaender einschliesslich Dokumentierung geeigneter Garantien</li>
          <li>Allgemeine Beschreibung der technischen und organisatorischen Massnahmen (Art. 32 Abs. 1)</li>
        </ul>
      </div>
    </div>
  )
}
