'use client'

import React from 'react'
import type { StepProps } from '../_types'
import { DATA_CATEGORY_GROUPS } from '../_data-categories'
import { toggleInArray } from '../_data'

export function Step2DataCategories({ form, updateForm }: StepProps) {
  return (
    <div className="space-y-6">
      <h2 className="text-lg font-semibold text-gray-900">Welche Daten werden verarbeitet?</h2>
      <p className="text-sm text-gray-500">Waehlen Sie alle Datenkategorien, die in diesem Use Case verarbeitet werden.</p>

      {DATA_CATEGORY_GROUPS.map(group => (
        <div key={group.group}>
          <h3 className={`text-sm font-semibold mb-2 ${group.art9 ? 'text-orange-700' : 'text-gray-700'}`}>
            {group.art9 && '⚠️ '}{group.group}
          </h3>
          {group.art9 && (
            <p className="text-xs text-orange-600 mb-2">Besonders schutzwuerdig — erhoehte Anforderungen an Rechtsgrundlage und TOM</p>
          )}
          <div className="grid grid-cols-2 md:grid-cols-3 gap-2 mb-4">
            {group.items.map(item => (
              <button
                key={item.value}
                type="button"
                onClick={() => updateForm({ data_categories: toggleInArray(form.data_categories, item.value) })}
                className={`p-3 rounded-xl border-2 text-left transition-all ${
                  form.data_categories.includes(item.value)
                    ? group.art9
                      ? 'border-orange-500 bg-orange-50 ring-1 ring-orange-300'
                      : '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>
        </div>
      ))}

      {/* Sonstige Datentypen */}
      <div className="border border-gray-200 rounded-lg p-4 space-y-3">
        <div className="font-medium text-gray-900">Sonstige Datentypen</div>
        <p className="text-sm text-gray-500">
          Falls Ihre Datenkategorie oben nicht aufgefuehrt ist, koennen Sie sie hier ergaenzen.
        </p>
        {form.custom_data_types.map((dt, idx) => (
          <div key={idx} className="flex items-center gap-2">
            <input
              type="text"
              value={dt}
              onChange={e => {
                const updated = [...form.custom_data_types]
                updated[idx] = e.target.value
                updateForm({ custom_data_types: updated })
              }}
              placeholder="Datentyp eingeben..."
              className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent"
            />
            <button
              onClick={() => updateForm({ custom_data_types: form.custom_data_types.filter((_, i) => i !== idx) })}
              className="p-2 text-red-500 hover:bg-red-50 rounded-lg"
              title="Entfernen"
            >
              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
            </button>
          </div>
        ))}
        <button
          onClick={() => updateForm({ custom_data_types: [...form.custom_data_types, ''] })}
          className="flex items-center gap-1 text-sm text-purple-600 hover:text-purple-700 font-medium"
        >
          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" /></svg>
          Weiteren Datentyp hinzufuegen
        </button>
      </div>

      {form.data_categories.length > 0 && (
        <div className="bg-purple-50 border border-purple-200 rounded-lg px-4 py-3 text-sm text-purple-800">
          <span className="font-medium">{form.data_categories.length}</span> Datenkategorie{form.data_categories.length !== 1 ? 'n' : ''} ausgewaehlt
          {form.data_categories.some(c => DATA_CATEGORY_GROUPS.find(g => g.art9)?.items.some(i => i.value === c)) && (
            <span className="ml-2 text-orange-700 font-medium">— inkl. besonderer Kategorien (Art. 9)</span>
          )}
        </div>
      )}
    </div>
  )
}
