'use client'

import { SectionCard } from './SectionCard'
import { TextInput, TextArea, SelectInput, CheckboxGroup } from './FormFields'
import {
  FORM_SECTIONS,
  AREA_OF_USE_OPTIONS,
  OPERATING_MODE_OPTIONS,
  PERSON_GROUP_OPTIONS,
  INDUSTRY_SECTOR_OPTIONS,
  type LimitsFormData,
} from '../_types'

interface LimitsFormSectionsProps {
  data: LimitsFormData
  onChange: (field: keyof LimitsFormData, value: string | string[]) => void
  prefilled: { machine_name?: string; machine_type?: string; manufacturer?: string }
}

export function LimitsFormSections({ data, onChange, prefilled }: LimitsFormSectionsProps) {
  return (
    <div className="space-y-3">
      {/* Section 1: Allgemeine Produktbeschreibung */}
      <SectionCard section={FORM_SECTIONS[0]} defaultOpen>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <TextInput
            label="Maschinenbezeichnung *"
            value={data.machine_designation || prefilled.machine_name || ''}
            onChange={(v) => onChange('machine_designation', v)}
            placeholder="z.B. Roboterzelle RZ-500"
            helpText={prefilled.machine_name ? `Vorausgefuellt aus Projekt: ${prefilled.machine_name}` : undefined}
          />
          <TextInput
            label="Maschinentyp *"
            value={data.machine_type || prefilled.machine_type || ''}
            onChange={(v) => onChange('machine_type', v)}
            placeholder="z.B. Roboterzelle / CNC-Maschine"
            helpText={prefilled.machine_type ? `Vorausgefuellt aus Projekt: ${prefilled.machine_type}` : undefined}
          />
          <TextInput
            label="Hersteller *"
            value={data.manufacturer || prefilled.manufacturer || ''}
            onChange={(v) => onChange('manufacturer', v)}
            placeholder="z.B. Mueller Maschinenbau GmbH"
            helpText={prefilled.manufacturer ? `Vorausgefuellt aus Projekt: ${prefilled.manufacturer}` : undefined}
          />
          <TextInput
            label="Baujahr"
            value={data.year_of_construction}
            onChange={(v) => onChange('year_of_construction', v)}
            placeholder="z.B. 2026"
          />
          <TextInput
            label="Seriennummer"
            value={data.serial_number}
            onChange={(v) => onChange('serial_number', v)}
            placeholder="z.B. SN-2026-001"
          />
        </div>
        <TextArea
          label="Allgemeine Beschreibung *"
          value={data.general_description}
          onChange={(v) => onChange('general_description', v)}
          placeholder="Die EIGENBAU-Zelle ist ein Arbeitstisch mit integriertem Roboterarm, der Bauteile aus einem Magazin entnimmt und dem Bearbeitungszentrum zufuehrt..."
          helpText="Beschreiben Sie Aufbau, Funktion und Arbeitsweise der Maschine/Anlage ausfuehrlich."
          rows={12}
        />
      </SectionCard>

      {/* Section 2: Bestimmungsgemasse Verwendung */}
      <SectionCard section={FORM_SECTIONS[1]}>
        <TextArea
          label="Verwendungszweck *"
          value={data.intended_purpose}
          onChange={(v) => onChange('intended_purpose', v)}
          placeholder="Zum Einsatz an Bearbeitungszentren, zur Zufuehrung von Bauteilen aus einem Magazin in die Bearbeitungsmaschine..."
          helpText="Beschreiben Sie den bestimmungsgemassen Einsatzzweck der Maschine."
          rows={4}
        />
        <SelectInput
          label="Einsatzbereich *"
          value={data.area_of_use}
          onChange={(v) => onChange('area_of_use', v)}
          options={AREA_OF_USE_OPTIONS}
        />
        <CheckboxGroup
          label="Betriebsarten"
          values={data.operating_modes}
          onChange={(v) => onChange('operating_modes', v)}
          options={OPERATING_MODE_OPTIONS}
          helpText="Waehlen Sie alle zutreffenden Betriebsarten."
        />
        <TextArea
          label="Varianten"
          value={data.variants}
          onChange={(v) => onChange('variants', v)}
          placeholder="Variante A: nicht-kollaborierend mit Schutzzaun&#10;Variante B: kollaborierend mit Kraft-/Leistungsbegrenzung"
          helpText="Beschreiben Sie verschiedene Ausbauvarianten oder Konfigurationen der Maschine."
          rows={3}
        />
      </SectionCard>

      {/* Section 3: Vorhersehbare Fehlanwendung */}
      <SectionCard section={FORM_SECTIONS[2]}>
        <div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-3 mb-2">
          <p className="text-xs text-amber-700 dark:text-amber-300">
            Dokumentieren Sie alle vernuenftigerweise vorhersehbaren Fehlanwendungen gemaess ISO 12100 Abschnitt 5.4. Beruecksichtigen Sie dabei reflexartiges Verhalten, mangelnde Konzentration und Verhaltensweisen nach dem Grundsatz des geringsten Widerstandes.
          </p>
        </div>
        <TextArea
          label="Vorhersehbare Fehlanwendungen *"
          value={data.foreseeable_misuses}
          onChange={(v) => onChange('foreseeable_misuses', v)}
          placeholder="- Eingriff in laufende Maschine bei Stoerung&#10;- Umgehung von Schutzeinrichtungen (Tuerschalter ueberbrueckt)&#10;- Betrieb mit offenem Schutzzaun&#10;- Unqualifiziertes Personal fuehrt Wartungsarbeiten durch&#10;- Verwendung nicht freigegebener Werkzeuge/Materialien"
          helpText="Jeweils eine Fehlanwendung pro Zeile, mit Stichpunkt-Aufzaehlung."
          rows={10}
        />
      </SectionCard>

      {/* Section 4: Grenzen der Maschine */}
      <SectionCard section={FORM_SECTIONS[3]}>
        <TextArea
          label="Raeumliche Grenzen *"
          value={data.spatial_limits}
          onChange={(v) => onChange('spatial_limits', v)}
          placeholder="Abmessungen: 2000 x 1500 x 1800 mm (LxBxH)&#10;Arbeitsraum Roboter: Radius 850mm&#10;Zugangsbereich: nur von vorne&#10;Sicherheitsabstand: min. 500mm zum Schutzzaun"
          helpText="Abmessungen, Arbeitsraum, Zugangsbereich, Sicherheitsabstaende."
          rows={4}
        />
        <TextArea
          label="Zeitliche Grenzen"
          value={data.temporal_limits}
          onChange={(v) => onChange('temporal_limits', v)}
          placeholder="Geplante Lebensdauer: 15 Jahre&#10;Wartungsintervall: alle 2000 Betriebsstunden&#10;Max. Betriebsdauer pro Tag: 16 Stunden (2-Schicht)"
          helpText="Lebensdauer, Wartungsintervalle, Nutzungsdauer pro Tag/Woche."
          rows={3}
        />
        <TextArea
          label="Betriebsbedingungen"
          value={data.operating_conditions}
          onChange={(v) => onChange('operating_conditions', v)}
          placeholder="Temperatur: +5 bis +40 Grad C&#10;Luftfeuchtigkeit: max. 80% (nicht kondensierend)&#10;Hoehenlage: bis 1000m ue.NN&#10;Keine explosionsgefaehrdete Atmosphaere"
          helpText="Temperatur, Feuchtigkeit, Staub, Vibrationen, besondere Umgebungsbedingungen."
          rows={4}
        />
        <TextArea
          label="Energieversorgung"
          value={data.energy_supply}
          onChange={(v) => onChange('energy_supply', v)}
          placeholder="Elektrisch: 400V/50Hz, 32A Absicherung&#10;Druckluft: 6 bar, oelfrei&#10;Pneumatik: 6 bar Betriebsdruck"
          helpText="Spannung, Absicherung, Druckluftversorgung, weitere Energiequellen."
          rows={3}
        />
      </SectionCard>

      {/* Section 5: Schnittstellen */}
      <SectionCard section={FORM_SECTIONS[4]}>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <TextArea
            label="Mechanische Schnittstellen"
            value={data.mechanical_interfaces}
            onChange={(v) => onChange('mechanical_interfaces', v)}
            placeholder="- Flanschverbindung zum Bearbeitungszentrum&#10;- Magazin-Andockstation&#10;- Greifer-Wechselsystem"
            rows={3}
          />
          <TextArea
            label="Elektrische Schnittstellen"
            value={data.electrical_interfaces}
            onChange={(v) => onChange('electrical_interfaces', v)}
            placeholder="- ProfiNET Steuerungsbus&#10;- 24V Sicherheitskreis&#10;- E/A-Module fuer Sensorik"
            rows={3}
          />
          <TextArea
            label="Software-Schnittstellen"
            value={data.software_interfaces}
            onChange={(v) => onChange('software_interfaces', v)}
            placeholder="- OPC UA Server&#10;- REST API fuer MES-Anbindung&#10;- HMI Webinterface"
            rows={3}
          />
          <TextArea
            label="Pneumatische/Hydraulische Schnittstellen"
            value={data.pneumatic_hydraulic_interfaces}
            onChange={(v) => onChange('pneumatic_hydraulic_interfaces', v)}
            placeholder="- 6mm Druckluftanschluss&#10;- Wartungseinheit mit Filter/Regler&#10;- Abluft ueber Schalldaempfer"
            rows={3}
          />
        </div>
      </SectionCard>

      {/* Section 6: Betroffene Personen */}
      <SectionCard section={FORM_SECTIONS[5]}>
        <CheckboxGroup
          label="Personengruppen"
          values={data.person_groups}
          onChange={(v) => onChange('person_groups', v)}
          options={PERSON_GROUP_OPTIONS}
          helpText="Waehlen Sie alle Personengruppen, die mit der Maschine in Beruehrung kommen koennen."
        />
        <TextArea
          label="Qualifikationsanforderungen"
          value={data.qualification_requirements}
          onChange={(v) => onChange('qualification_requirements', v)}
          placeholder="Bedienpersonal: Unterweisung gemaess Betriebsanleitung, min. 18 Jahre&#10;Einrichter: Facharbeiter Mechatronik + Herstellerschulung&#10;Wartungspersonal: Elektrofachkraft fuer Elektroanschluss, Mechatroniker fuer mechanische Wartung"
          helpText="Mindestqualifikation je Personengruppe mit Verweis auf erforderliche Schulungen."
          rows={4}
        />
      </SectionCard>

      {/* Section 7: Einsatzbereich / Branche */}
      <SectionCard section={FORM_SECTIONS[6]}>
        <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-3 mb-2">
          <p className="text-xs text-blue-700 dark:text-blue-300">
            Die Branchenauswahl steuert welche branchenspezifischen Gefaehrdungsmuster (z.B. Medizintechnik, Lebensmittel, Aufzuege) bei der Risikoanalyse beruecksichtigt werden. Branchenfremde Muster werden automatisch ausgeblendet.
          </p>
        </div>
        <CheckboxGroup
          label="Einsatzbereiche"
          values={data.industry_sectors}
          onChange={(v) => onChange('industry_sectors', v)}
          options={INDUSTRY_SECTOR_OPTIONS}
          helpText="Waehlen Sie alle zutreffenden Branchen. Bei Mehrfachauswahl werden alle relevanten Gefaehrdungen beruecksichtigt."
        />
      </SectionCard>
    </div>
  )
}
