'use client'

import { CompanyProfile, CompanySize, COMPANY_SIZE_LABELS } from '@/lib/sdk/types'

export function StepCompanySize({
  data,
  onChange,
}: {
  data: Partial<CompanyProfile>
  onChange: (updates: Partial<CompanyProfile>) => void
}) {
  return (
    <div className="space-y-8">
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-4">
          Unternehmensgr&ouml;&szlig;e <span className="text-red-500">*</span>
        </label>
        <div className="space-y-3">
          {Object.entries(COMPANY_SIZE_LABELS).map(([value, label]) => (
            <button
              key={value}
              type="button"
              onClick={() => onChange({ companySize: value as CompanySize })}
              className={`w-full p-4 rounded-xl border-2 text-left transition-all ${
                data.companySize === value
                  ? 'border-purple-500 bg-purple-50'
                  : 'border-gray-200 hover:border-purple-300'
              }`}
            >
              <div className="font-medium text-gray-900">{label}</div>
            </button>
          ))}
        </div>
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-3">Jahresumsatz</label>
        <div className="grid grid-cols-2 gap-3">
          {[
            { value: '< 2 Mio', label: '< 2 Mio. Euro' },
            { value: '2-10 Mio', label: '2-10 Mio. Euro' },
            { value: '10-50 Mio', label: '10-50 Mio. Euro' },
            { value: '> 50 Mio', label: '> 50 Mio. Euro' },
          ].map(opt => (
            <button
              key={opt.value}
              type="button"
              onClick={() => onChange({ annualRevenue: opt.value })}
              className={`p-4 rounded-xl border-2 text-left transition-all ${
                data.annualRevenue === opt.value
                  ? 'border-purple-500 bg-purple-50 text-purple-700 font-medium'
                  : 'border-gray-200 hover:border-purple-300 text-gray-700'
              }`}
            >
              {opt.label}
            </button>
          ))}
        </div>
        {(data.companySize === 'medium' || data.companySize === 'large' || data.companySize === 'enterprise') && (
          <p className="text-xs text-amber-600 mt-2">
            Geben Sie den konsolidierten Konzernumsatz an, wenn der Compliance-Check f&uuml;r Mutter- und Tochtergesellschaften gelten soll.
            F&uuml;r eine einzelne Einheit eines Konzerns geben Sie nur deren Umsatz an.
          </p>
        )}
      </div>
    </div>
  )
}
