'use client'

import { GDPR_PROCESSES } from './types'

export default function GdprTab() {
  return (
    <div className="p-6">
      <div className="flex items-center justify-between mb-6">
        <div>
          <h2 className="text-lg font-semibold text-slate-900">DSGVO Betroffenenrechte</h2>
          <p className="text-sm text-slate-500 mt-1">Artikel 15-21 Prozesse und Vorlagen</p>
        </div>
        <button className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors text-sm font-medium">
          + DSR Anfrage erstellen
        </button>
      </div>

      {/* Info Banner */}
      <div className="bg-purple-50 border border-purple-200 rounded-lg p-4 mb-6">
        <div className="flex items-start gap-3">
          <span className="text-2xl">⚖️</span>
          <div>
            <h4 className="font-medium text-purple-900">Data Subject Rights (DSR)</h4>
            <p className="text-sm text-purple-700 mt-1">
              Hier verwalten Sie alle DSGVO-Anfragen. Jeder Artikel hat definierte Prozesse, SLAs und automatisierte Workflows.
            </p>
          </div>
        </div>
      </div>

      {/* GDPR Process Cards */}
      <div className="space-y-4">
        {GDPR_PROCESSES.map((process) => (
          <div
            key={process.article}
            className="border border-slate-200 rounded-xl p-5 hover:border-purple-300 transition-colors bg-white"
          >
            <div className="flex items-start justify-between">
              <div className="flex items-start gap-4">
                <div className="w-12 h-12 bg-purple-100 text-purple-700 rounded-lg flex items-center justify-center font-bold text-lg">
                  {process.article}
                </div>
                <div className="flex-1">
                  <div className="flex items-center gap-2 mb-1">
                    <h3 className="font-semibold text-slate-900">{process.title}</h3>
                    <span className="px-2 py-0.5 bg-green-100 text-green-700 rounded text-xs">Aktiv</span>
                  </div>
                  <p className="text-sm text-slate-600 mb-3">{process.description}</p>

                  {/* Actions */}
                  <div className="flex flex-wrap gap-2 mb-3">
                    {process.actions.map((action, idx) => (
                      <span key={idx} className="px-2 py-1 bg-slate-100 text-slate-600 rounded text-xs">
                        {action}
                      </span>
                    ))}
                  </div>

                  {/* SLA */}
                  <div className="flex items-center gap-4 text-sm">
                    <span className="text-slate-500">
                      SLA: <span className="font-medium text-slate-700">{process.sla}</span>
                    </span>
                    <span className="text-slate-300">|</span>
                    <span className="text-slate-500">
                      Offene Anfragen: <span className="font-medium text-slate-700">0</span>
                    </span>
                  </div>
                </div>
              </div>

              <div className="flex flex-col gap-2">
                <button className="px-3 py-1.5 text-sm text-white bg-purple-600 hover:bg-purple-700 rounded-lg">
                  Anfragen
                </button>
                <button className="px-3 py-1.5 text-sm text-slate-600 hover:text-slate-900 border border-slate-300 rounded-lg hover:border-slate-400">
                  Vorlage
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* DSR Request Statistics */}
      <div className="mt-8 pt-6 border-t border-slate-200">
        <h3 className="text-sm font-semibold text-slate-700 uppercase tracking-wider mb-4">DSR Übersicht</h3>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          <div className="bg-slate-50 rounded-lg p-4 text-center">
            <div className="text-2xl font-bold text-slate-900">0</div>
            <div className="text-xs text-slate-500 mt-1">Offen</div>
          </div>
          <div className="bg-green-50 rounded-lg p-4 text-center">
            <div className="text-2xl font-bold text-green-700">0</div>
            <div className="text-xs text-slate-500 mt-1">Erledigt</div>
          </div>
          <div className="bg-yellow-50 rounded-lg p-4 text-center">
            <div className="text-2xl font-bold text-yellow-700">0</div>
            <div className="text-xs text-slate-500 mt-1">In Bearbeitung</div>
          </div>
          <div className="bg-red-50 rounded-lg p-4 text-center">
            <div className="text-2xl font-bold text-red-700">0</div>
            <div className="text-xs text-slate-500 mt-1">Überfällig</div>
          </div>
        </div>
      </div>
    </div>
  )
}