'use client'

import React from 'react'
import { AI_USE_CASE_TYPES, AIUseCaseType } from '@/lib/sdk/dsfa/ai-use-case-types'

interface AIUseCaseTypeSelectorProps {
  onSelect: (type: AIUseCaseType) => void
  onCancel: () => void
}

export function AIUseCaseTypeSelector({ onSelect, onCancel }: AIUseCaseTypeSelectorProps) {
  const types = Object.entries(AI_USE_CASE_TYPES) as [AIUseCaseType, typeof AI_USE_CASE_TYPES[AIUseCaseType]][]

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-2xl mx-4 overflow-hidden">
        {/* Header */}
        <div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
          <div>
            <h2 className="text-lg font-semibold text-gray-900">KI-Anwendungsfall hinzufügen</h2>
            <p className="text-sm text-gray-500 mt-0.5">Wählen Sie den Typ des KI-Systems für diesen Anhang</p>
          </div>
          <button
            onClick={onCancel}
            className="text-gray-400 hover:text-gray-600 transition-colors"
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>

        {/* Type Grid */}
        <div className="p-6 grid grid-cols-2 gap-3 max-h-[60vh] overflow-y-auto">
          {types.map(([type, info]) => (
            <button
              key={type}
              onClick={() => onSelect(type)}
              className="flex items-start gap-3 p-4 rounded-xl border-2 border-gray-200 hover:border-purple-400 hover:bg-purple-50 text-left transition-all group"
            >
              <span className="text-2xl flex-shrink-0">{info.icon}</span>
              <div className="flex-1 min-w-0">
                <div className="font-medium text-gray-900 group-hover:text-purple-700">{info.label}</div>
                <p className="text-xs text-gray-500 mt-0.5 line-clamp-2">{info.description}</p>
                {info.typical_risks.length > 0 && (
                  <div className="flex flex-wrap gap-1 mt-2">
                    {info.typical_risks.slice(0, 2).map(risk => (
                      <span key={risk} className="text-[10px] px-1.5 py-0.5 bg-red-50 text-red-600 rounded">
                        {risk}
                      </span>
                    ))}
                  </div>
                )}
              </div>
            </button>
          ))}
        </div>

        {/* Footer */}
        <div className="px-6 py-4 border-t border-gray-200 flex justify-end">
          <button
            onClick={onCancel}
            className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
          >
            Abbrechen
          </button>
        </div>
      </div>
    </div>
  )
}
