'use client'

import React from 'react'
import type { StepProps } from '../_types'
import { TRANSFER_TARGET_TILES, TRANSFER_MECHANISM_TILES } from '../_tiles'
import { toggleInArray } from '../_data'

export function Step6Transfer({ form, updateForm }: StepProps) {
  return (
    <div className="space-y-6">
      <h2 className="text-lg font-semibold text-gray-900">Internationaler Datentransfer</h2>
      <p className="text-sm text-gray-500">Wohin werden die Daten uebermittelt? Waehlen Sie alle zutreffenden Ziellaender/-regionen.</p>

      {/* Transfer Targets */}
      <div>
        <h3 className="text-sm font-medium text-gray-700 mb-2">Datentransfer-Ziele</h3>
        <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
          {TRANSFER_TARGET_TILES.map(item => (
            <button
              key={item.value}
              type="button"
              onClick={() => updateForm({ transfer_targets: toggleInArray(form.transfer_targets, item.value) })}
              className={`p-3 rounded-xl border-2 text-left transition-all ${
                form.transfer_targets.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>
      </div>

      {/* Transfer Mechanism — only if not "no_transfer" only */}
      {form.transfer_targets.length > 0 && !form.transfer_targets.every(t => t === 'no_transfer') && (
        <div>
          <h3 className="text-sm font-medium text-gray-700 mb-2">Transfer-Mechanismus</h3>
          <p className="text-sm text-gray-500 mb-3">Welche Schutzgarantie nutzen Sie fuer den Drittlandtransfer?</p>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
            {TRANSFER_MECHANISM_TILES.map(item => (
              <button
                key={item.value}
                type="button"
                onClick={() => updateForm({ transfer_mechanism: item.value })}
                className={`p-3 rounded-xl border-2 text-left transition-all ${
                  form.transfer_mechanism === 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>
        </div>
      )}

      {/* Specific countries text input */}
      {form.transfer_targets.some(t => !['no_transfer'].includes(t)) && (
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">Konkrete Ziellaender (optional)</label>
          <input
            type="text"
            value={form.transfer_countries.join(', ')}
            onChange={e => updateForm({ transfer_countries: e.target.value.split(',').map(s => s.trim()).filter(Boolean) })}
            placeholder="z.B. USA, UK, Schweiz, Japan"
            className="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent"
          />
          <p className="text-xs text-gray-500 mt-1">Kommagetrennte Laendernamen oder -kuerzel</p>
        </div>
      )}
    </div>
  )
}