'use client'

import type { FoundingWizardState } from '@/lib/sdk/founding/types'

interface Props {
  state: FoundingWizardState
  update: <K extends keyof FoundingWizardState>(k: K, v: FoundingWizardState[K]) => void
}

export function StepBasics({ state, update }: Props) {
  const b = state.basics
  return (
    <div className="space-y-4">
      <div className="grid grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">Firmenname</label>
          <input
            data-testid="company-name"
            type="text"
            value={b.company_name}
            onChange={e => update('basics', { ...b, company_name: e.target.value })}
            placeholder="Breakpilot GmbH"
            className="w-full px-3 py-2 border rounded-lg"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">Rechtsform</label>
          <select
            data-testid="legal-form"
            value={b.legal_form}
            onChange={e => update('basics', { ...b, legal_form: e.target.value as 'GmbH' | 'UG' })}
            className="w-full px-3 py-2 border rounded-lg"
          >
            <option value="GmbH">GmbH</option>
            <option value="UG">UG (haftungsbeschränkt)</option>
          </select>
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">Sitz (Stadt)</label>
          <input
            data-testid="company-seat"
            type="text"
            value={b.company_seat}
            onChange={e => update('basics', { ...b, company_seat: e.target.value })}
            placeholder="z.B. Stuttgart"
            className="w-full px-3 py-2 border rounded-lg"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">Adresse</label>
          <input
            data-testid="company-address"
            type="text"
            value={b.company_address}
            onChange={e => update('basics', { ...b, company_address: e.target.value })}
            placeholder="Straße, PLZ Ort"
            className="w-full px-3 py-2 border rounded-lg"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">Branche</label>
          <input
            data-testid="industry"
            type="text"
            value={b.industry}
            onChange={e => update('basics', { ...b, industry: e.target.value })}
            placeholder="z.B. SaaS, Beratung, Handwerk"
            className="w-full px-3 py-2 border rounded-lg"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">Geschäftsjahr</label>
          <input
            data-testid="business-year"
            type="text"
            value={b.business_year}
            onChange={e => update('basics', { ...b, business_year: e.target.value })}
            className="w-full px-3 py-2 border rounded-lg"
          />
        </div>
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-1">
          Unternehmensgegenstand (Volltext für § 2 Satzung)
        </label>
        <textarea
          data-testid="company-purpose"
          value={b.company_purpose_description}
          onChange={e => update('basics', { ...b, company_purpose_description: e.target.value })}
          rows={4}
          placeholder="z.B. die Entwicklung, Bereitstellung, der Betrieb und der Vertrieb von Softwarelösungen, Plattformen und IT-Dienstleistungen im Bereich der Künstlichen Intelligenz"
          className="w-full px-3 py-2 border rounded-lg"
        />
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-1">
          Detaillierte Tätigkeitsbereiche (eine Zeile pro Bullet)
        </label>
        <textarea
          data-testid="company-purpose-bullets"
          value={b.company_purpose_bullets.join('\n')}
          onChange={e => update('basics', { ...b, company_purpose_bullets: e.target.value.split('\n').filter(Boolean) })}
          rows={5}
          placeholder={'a) Entwicklung von Software\nb) Beratung im Bereich...\nc) ...'}
          className="w-full px-3 py-2 border rounded-lg font-mono text-sm"
        />
      </div>

      <div className="flex items-center gap-2">
        <input
          type="checkbox"
          id="research_focus"
          data-testid="research-focus"
          checked={b.has_research_focus}
          onChange={e => update('basics', { ...b, has_research_focus: e.target.checked })}
        />
        <label htmlFor="research_focus" className="text-sm text-gray-700">
          Forschungsfokus (aktiviert F&amp;E-Klauseln in SHA und GO-GF)
        </label>
      </div>
    </div>
  )
}