'use client'

import React from 'react'
import type { StepProps } from '../_types'
import { HOSTING_PROVIDER_TILES, HOSTING_REGION_TILES, MODEL_USAGE_TILES } from '../_tiles'
import { toggleInArray } from '../_data'

export function Step5Hosting({ form, updateForm }: StepProps) {
  return (
    <div className="space-y-6">
      <h2 className="text-lg font-semibold text-gray-900">Technische Details</h2>

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

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

      {/* Model Usage */}
      <div>
        <h3 className="text-sm font-medium text-gray-700 mb-1">Wie wird das KI-Modell genutzt?</h3>
        <p className="text-sm text-gray-500 mb-3">Waehlen Sie alle zutreffenden Optionen.</p>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
          {MODEL_USAGE_TILES.map(item => (
            <button
              key={item.value}
              type="button"
              onClick={() => updateForm({ model_usage: toggleInArray(form.model_usage, item.value) })}
              className={`p-3 rounded-xl border-2 text-left transition-all ${
                form.model_usage.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>

      {/* Info-Box: Begriffe erklaert */}
      <details className="bg-amber-50 border border-amber-200 rounded-lg overflow-hidden">
        <summary className="px-4 py-3 text-sm font-medium text-amber-800 cursor-pointer hover:bg-amber-100">
          Begriffe erklaert: ML, DL, NLP, LLM &mdash; Was bedeutet das?
        </summary>
        <div className="px-4 pb-4 space-y-3 text-sm text-amber-900">
          <div><span className="font-semibold">ML (Machine Learning)</span> &mdash; Computer lernt Muster aus Daten. Beispiel: Spam-Filter.</div>
          <div><span className="font-semibold">DL (Deep Learning)</span> &mdash; ML mit neuronalen Netzen. Beispiel: Bilderkennung, Spracherkennung.</div>
          <div><span className="font-semibold">NLP (Natural Language Processing)</span> &mdash; KI versteht Sprache. Beispiel: ChatGPT, DeepL.</div>
          <div><span className="font-semibold">LLM (Large Language Model)</span> &mdash; Grosses Sprachmodell. Beispiel: GPT-4, Claude, Llama.</div>
          <div><span className="font-semibold">RAG</span> &mdash; LLM erhaelt Kontext aus eigener Datenbank. Vorteil: Aktuelle, firmenspezifische Antworten.</div>
          <div><span className="font-semibold">Fine-Tuning</span> &mdash; Bestehendes Modell mit eigenen Daten weitertrainieren. Achtung: Daten werden Teil des Modells.</div>
        </div>
      </details>
    </div>
  )
}