'use client'

import React from 'react'
import type { StepProps } from '../_types'
import { AI_USE_CATEGORIES } from '../_data'

interface Props extends StepProps {
  profileIndustry: string | string[] | undefined
}

export function Step1Basics({ form, updateForm, profileIndustry }: Props) {
  return (
    <div className="space-y-6">
      <h2 className="text-lg font-semibold text-gray-900">Grundlegende Informationen</h2>

      {/* Branche aus Profil (nur Anzeige) */}
      {profileIndustry && (Array.isArray(profileIndustry) ? profileIndustry.length > 0 : true) && (
        <div className="bg-gray-50 rounded-lg border border-gray-200 px-4 py-3">
          <span className="text-xs font-medium text-gray-500 uppercase tracking-wide">Branche (aus Unternehmensprofil)</span>
          <p className="text-sm text-gray-900 mt-0.5">
            {Array.isArray(profileIndustry) ? profileIndustry.join(', ') : profileIndustry}
          </p>
        </div>
      )}

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-1">Titel des Anwendungsfalls</label>
        <input
          type="text"
          value={form.title}
          onChange={e => updateForm({ title: e.target.value })}
          placeholder="z.B. Chatbot fuer Kundenservice"
          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
        />
      </div>
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-1">Beschreibung</label>
        <textarea
          value={form.use_case_text}
          onChange={e => updateForm({ use_case_text: e.target.value })}
          rows={4}
          placeholder="Beschreiben Sie den Anwendungsfall..."
          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
        />
      </div>

      {/* KI-Anwendungskategorie als Kacheln */}
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-1">
          In welchem Bereich kommt KI zum Einsatz?
        </label>
        <p className="text-sm text-gray-500 mb-3">Waehlen Sie die passende Kategorie fuer Ihren Anwendungsfall.</p>
        <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
          {AI_USE_CATEGORIES.map(cat => (
            <button
              key={cat.value}
              type="button"
              onClick={() => updateForm({ category: cat.value })}
              className={`p-3 rounded-xl border-2 text-left transition-all ${
                form.category === cat.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">{cat.icon}</span>
                <span className="text-sm font-medium text-gray-900">{cat.label}</span>
              </div>
              <p className="text-xs text-gray-500 leading-tight">{cat.desc}</p>
            </button>
          ))}
        </div>
      </div>
    </div>
  )
}