'use client'

import React from 'react'
import type { StepProps } from '../_types'
import { PURPOSE_TILES } from '../_tiles'
import { toggleInArray } from '../_data'

export function Step3Purposes({ form, updateForm }: StepProps) {
  return (
    <div className="space-y-4">
      <h2 className="text-lg font-semibold text-gray-900">Zweck der Verarbeitung</h2>
      <p className="text-sm text-gray-500">Waehlen Sie alle zutreffenden Verarbeitungszwecke. Die passende Rechtsgrundlage wird vom SDK automatisch ermittelt.</p>

      <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
        {PURPOSE_TILES.map(item => (
          <button
            key={item.value}
            type="button"
            onClick={() => updateForm({ purposes: toggleInArray(form.purposes, item.value) })}
            className={`p-3 rounded-xl border-2 text-left transition-all ${
              form.purposes.includes(item.value)
                ? 'border-purple-500 bg-purple-50 ring-1 ring-purple-300'
                : 'border-gray-200 hover:border-purple-300 hover:bg-gray-50'
            }`}
          >
            <div className="flex items-center gap-2 mb-1">
              <span className="text-lg">{item.icon}</span>
              <span className="text-sm font-medium text-gray-900">{item.label}</span>
            </div>
            <p className="text-xs text-gray-500 leading-tight">{item.desc}</p>
          </button>
        ))}
      </div>

      {form.purposes.includes('profiling') && (
        <div className="bg-amber-50 border border-amber-200 rounded-lg p-4 text-sm text-amber-800">
          <div className="font-medium mb-1">Hinweis: Profiling</div>
          <p>Profiling unterliegt besonderen Anforderungen nach Art. 22 DSGVO. Betroffene haben das Recht auf Information und Widerspruch.</p>
        </div>
      )}
      {form.purposes.includes('automated_decision') && (
        <div className="bg-red-50 border border-red-200 rounded-lg p-4 text-sm text-red-800">
          <div className="font-medium mb-1">Achtung: Automatisierte Entscheidung</div>
          <p>Art. 22 DSGVO: Vollautomatisierte Entscheidungen mit rechtlicher Wirkung erfordern besondere Schutzmassnahmen, Informationspflichten und das Recht auf menschliche Ueberpruefung.</p>
        </div>
      )}
    </div>
  )
}