'use client'

import { CompanyProfile, LegalForm } from '@/lib/sdk/types'
import { INDUSTRIES, LEGAL_FORM_LABELS } from './constants'

export function StepBasicInfo({
  data,
  onChange,
}: {
  data: Partial<CompanyProfile>
  onChange: (updates: Partial<CompanyProfile>) => void
}) {
  return (
    <div className="space-y-6">
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">
          Firmenname <span className="text-red-500">*</span>
        </label>
        <input
          type="text"
          value={data.companyName || ''}
          onChange={e => onChange({ companyName: e.target.value })}
          placeholder="Ihre Firma (ohne Rechtsform)"
          className="w-full px-4 py-3 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-2">
          Rechtsform <span className="text-red-500">*</span>
        </label>
        <select
          value={data.legalForm || ''}
          onChange={e => onChange({ legalForm: e.target.value as LegalForm })}
          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
        >
          <option value="">Bitte w&auml;hlen...</option>
          {Object.entries(LEGAL_FORM_LABELS).map(([value, label]) => (
            <option key={value} value={value}>
              {label}
            </option>
          ))}
        </select>
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-1">Branche(n)</label>
        <p className="text-sm text-gray-500 mb-3">Mehrfachauswahl moeglich</p>
        <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
          {INDUSTRIES.map(ind => {
            const selected = (data.industry || []).includes(ind)
            return (
              <button
                key={ind}
                type="button"
                onClick={() => {
                  const current = data.industry || []
                  const updated = selected
                    ? current.filter(i => i !== ind)
                    : [...current, ind]
                  onChange({ industry: updated })
                }}
                className={`p-3 rounded-lg border-2 text-sm text-left transition-all ${
                  selected
                    ? 'border-purple-500 bg-purple-50 text-purple-700 font-medium'
                    : 'border-gray-200 hover:border-purple-300 text-gray-700'
                }`}
              >
                {ind}
              </button>
            )
          })}
        </div>
        {(data.industry || []).includes('Sonstige') && (
          <div className="mt-3">
            <input
              type="text"
              value={data.industryOther || ''}
              onChange={e => onChange({ industryOther: e.target.value })}
              placeholder="Ihre Branche eingeben..."
              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
            />
          </div>
        )}
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">Gr&uuml;ndungsjahr</label>
        <input
          type="number"
          value={data.foundedYear || ''}
          onChange={e => {
            const val = parseInt(e.target.value)
            onChange({ foundedYear: isNaN(val) ? null : val })
          }}
          onFocus={e => {
            if (!data.foundedYear) onChange({ foundedYear: 2000 })
          }}
          placeholder="2020"
          min="1900"
          max={new Date().getFullYear()}
          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
        />
      </div>
    </div>
  )
}