'use client'

/**
 * DSGVO Dashboard - Übersicht aller Datenschutz-Module
 */

import { useState, useEffect } from 'react'
import Link from 'next/link'
import { PagePurpose } from '@/components/common/PagePurpose'

interface ModuleCard {
  id: string
  title: string
  description: string
  href: string
  icon: string
  status: 'active' | 'coming_soon'
  stats?: {
    label: string
    value: string | number
  }
}

const modules: ModuleCard[] = [
  {
    id: 'consent',
    title: 'Consent Management',
    description: 'Dokumente, Versionen und Einwilligungen verwalten',
    href: '/dsgvo/consent',
    icon: '📋',
    status: 'active',
  },
  {
    id: 'dsr',
    title: 'Betroffenenrechte (DSR)',
    description: 'Art. 15-22 DSGVO: Auskunft, Löschung, Berichtigung',
    href: '/dsgvo/dsr',
    icon: '👤',
    status: 'active',
  },
  {
    id: 'einwilligungen',
    title: 'Einwilligungen',
    description: 'Übersicht aller erteilten Einwilligungen',
    href: '/dsgvo/einwilligungen',
    icon: '✅',
    status: 'active',
  },
  {
    id: 'vvt',
    title: 'Verarbeitungsverzeichnis',
    description: 'Art. 30 DSGVO: Dokumentation aller Verarbeitungstätigkeiten',
    href: '/dsgvo/vvt',
    icon: '📑',
    status: 'active',
  },
  {
    id: 'dsfa',
    title: 'Datenschutz-Folgenabschätzung',
    description: 'Art. 35 DSGVO: Risikobewertung für Verarbeitungen',
    href: '/dsgvo/dsfa',
    icon: '⚠️',
    status: 'active',
  },
  {
    id: 'tom',
    title: 'TOM',
    description: 'Art. 32 DSGVO: Technische und Organisatorische Maßnahmen',
    href: '/dsgvo/tom',
    icon: '🔒',
    status: 'active',
  },
  {
    id: 'loeschfristen',
    title: 'Löschfristen',
    description: 'Art. 17 DSGVO: Aufbewahrungsfristen und Löschkonzept',
    href: '/dsgvo/loeschfristen',
    icon: '🗑️',
    status: 'active',
  },
  {
    id: 'advisory-board',
    title: 'Advisory Board',
    description: 'KI-Use-Case Machbarkeits- und Compliance-Pruefung',
    href: '/dsgvo/advisory-board',
    icon: '🎯',
    status: 'active',
  },
]

export default function DSGVODashboard() {
  const [stats, setStats] = useState<Record<string, any>>({})
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    // Load stats from SDK
    async function loadStats() {
      try {
        const res = await fetch('/sdk/v1/dsgvo/stats', {
          headers: {
            'X-Tenant-ID': localStorage.getItem('bp_tenant_id') || '',
            'X-User-ID': localStorage.getItem('bp_user_id') || '',
          }
        })
        if (res.ok) {
          const data = await res.json()
          setStats(data)
        }
      } catch (err) {
        console.error('Failed to load DSGVO stats:', err)
      } finally {
        setLoading(false)
      }
    }
    loadStats()
  }, [])

  return (
    <div className="space-y-6">
      <PagePurpose
        title="DSGVO Compliance"
        purpose="Zentrale Übersicht aller DSGVO-Module für die vollständige Datenschutz-Konformität. Hier verwalten Sie Verarbeitungsverzeichnis, Betroffenenrechte, technische Maßnahmen und Löschfristen."
        audience={['Datenschutzbeauftragter', 'Compliance Officer', 'IT-Leitung']}
        gdprArticles={['Art. 15-22', 'Art. 30', 'Art. 32', 'Art. 35']}
        collapsible={true}
        defaultCollapsed={true}
      />

      {/* Quick Stats */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
          <div className="text-2xl font-bold text-slate-800">
            {loading ? '--' : (stats.processing_activities || 0)}
          </div>
          <div className="text-sm text-slate-500">Verarbeitungstätigkeiten</div>
        </div>
        <div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
          <div className="text-2xl font-bold text-slate-800">
            {loading ? '--' : (stats.open_dsrs || 0)}
          </div>
          <div className="text-sm text-slate-500">Offene DSR-Anfragen</div>
        </div>
        <div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
          <div className="text-2xl font-bold text-slate-800">
            {loading ? '--' : (stats.toms_implemented || 0)}
          </div>
          <div className="text-sm text-slate-500">TOM implementiert</div>
        </div>
        <div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
          <div className="text-2xl font-bold text-slate-800">
            {loading ? '--' : (stats.retention_policies || 0)}
          </div>
          <div className="text-sm text-slate-500">Löschfristen definiert</div>
        </div>
      </div>

      {/* Module Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {modules.map((module) => (
          <Link
            key={module.id}
            href={module.href}
            className="group bg-white rounded-xl border border-slate-200 p-6 shadow-sm hover:shadow-md hover:border-primary-300 transition-all"
          >
            <div className="flex items-start gap-4">
              <div className="text-3xl">{module.icon}</div>
              <div className="flex-1">
                <div className="flex items-center gap-2">
                  <h3 className="text-lg font-semibold text-slate-800 group-hover:text-primary-600 transition-colors">
                    {module.title}
                  </h3>
                  {module.status === 'coming_soon' && (
                    <span className="text-xs bg-yellow-100 text-yellow-700 px-2 py-0.5 rounded">
                      Coming Soon
                    </span>
                  )}
                </div>
                <p className="text-sm text-slate-500 mt-1">{module.description}</p>
                {module.stats && (
                  <div className="mt-3 text-sm">
                    <span className="text-slate-400">{module.stats.label}:</span>{' '}
                    <span className="text-slate-700 font-medium">{module.stats.value}</span>
                  </div>
                )}
              </div>
            </div>
          </Link>
        ))}
      </div>

      {/* Info Box */}
      <div className="bg-blue-50 border border-blue-200 rounded-xl p-4">
        <h4 className="text-blue-700 font-medium mb-2">SDK-Integration aktiv</h4>
        <p className="text-sm text-blue-600">
          Die DSGVO-Module sind in das AI Compliance SDK integriert.
          Alle Datenschutz-Funktionen sind über eine einheitliche API verfügbar
          und können von externen Systemen genutzt werden.
        </p>
      </div>
    </div>
  )
}