'use client'

import React, { useState, useEffect, useRef } from 'react'
import { useSDK } from '@/lib/sdk'
import {
  CompanyProfile,
  BusinessModel,
  OfferingType,
  TargetMarket,
  CompanySize,
  LegalForm,
  MachineBuilderProfile,
  MachineProductType,
  AIIntegrationType,
  HumanOversightLevel,
  CriticalSector,
  BUSINESS_MODEL_LABELS,
  OFFERING_TYPE_LABELS,
  TARGET_MARKET_LABELS,
  COMPANY_SIZE_LABELS,
  MACHINE_PRODUCT_TYPE_LABELS,
  AI_INTEGRATION_TYPE_LABELS,
  HUMAN_OVERSIGHT_LABELS,
  CRITICAL_SECTOR_LABELS,
} from '@/lib/sdk/types'

// =============================================================================
// WIZARD STEPS
// =============================================================================

const BASE_WIZARD_STEPS = [
  { id: 1, name: 'Basisinfos', description: 'Firmenname und Rechtsform' },
  { id: 2, name: 'Geschaeftsmodell', description: 'B2B, B2C und Angebote' },
  { id: 3, name: 'Firmengroesse', description: 'Mitarbeiter und Umsatz' },
  { id: 4, name: 'Standorte', description: 'Hauptsitz und Zielmaerkte' },
  { id: 5, name: 'Datenschutz', description: 'Rollen und DSB' },
  { id: 6, name: 'Zertifizierungen & Kontakte', description: 'Bestehende und angestrebte Zertifizierungen' },
]

const MACHINE_BUILDER_STEP = { id: 7, name: 'Produkt & Maschine', description: 'Software, KI und CE in Ihrem Produkt' }

function getWizardSteps(industry: string | string[]) {
  if (isMachineBuilderIndustry(industry)) {
    return [...BASE_WIZARD_STEPS, MACHINE_BUILDER_STEP]
  }
  return BASE_WIZARD_STEPS
}

// Keep WIZARD_STEPS for backwards compat in static references
const WIZARD_STEPS = BASE_WIZARD_STEPS

// =============================================================================
// LEGAL FORMS
// =============================================================================

const LEGAL_FORM_LABELS: Record<LegalForm, string> = {
  einzelunternehmen: 'Einzelunternehmen',
  gbr: 'GbR',
  ohg: 'OHG',
  kg: 'KG',
  gmbh: 'GmbH',
  ug: 'UG (haftungsbeschränkt)',
  ag: 'AG',
  gmbh_co_kg: 'GmbH & Co. KG',
  ev: 'e.V. (Verein)',
  stiftung: 'Stiftung',
  other: 'Sonstige',
}

// =============================================================================
// INDUSTRIES
// =============================================================================

const INDUSTRIES = [
  'Technologie / IT',
  'IT Dienstleistungen',
  'E-Commerce / Handel',
  'Finanzdienstleistungen',
  'Versicherungen',
  'Gesundheitswesen',
  'Pharma',
  'Bildung',
  'Beratung / Consulting',
  'Marketing / Agentur',
  'Produktion / Industrie',
  'Logistik / Transport',
  'Immobilien',
  'Bau',
  'Energie',
  'Automobil',
  'Luft- und Raumfahrt',
  'Maschinenbau',
  'Anlagenbau',
  'Automatisierung',
  'Robotik',
  'Messtechnik',
  'Agrar',
  'Chemie',
  'Minen / Bergbau',
  'Telekommunikation',
  'Medien / Verlage',
  'Gastronomie / Hotellerie',
  'Recht / Kanzlei',
  'Oeffentlicher Dienst',
  'Sonstige',
]

const MACHINE_BUILDER_INDUSTRIES = [
  'Maschinenbau',
  'Anlagenbau',
  'Automatisierung',
  'Robotik',
  'Messtechnik',
]

const isMachineBuilderIndustry = (industry: string | string[]) => {
  const industries = Array.isArray(industry) ? industry : [industry]
  return industries.some(i => MACHINE_BUILDER_INDUSTRIES.includes(i))
}

// =============================================================================
// STEP COMPONENTS
// =============================================================================

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ä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ü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>
  )
}

// URL fields shown when specific offerings are selected
const OFFERING_URL_CONFIG: Partial<Record<OfferingType, { label: string; placeholder: string; hint: string }>> = {
  website: { label: 'Website-Domain', placeholder: 'https://www.beispiel.de', hint: 'Ihre Unternehmenswebsite' },
  webshop: { label: 'Online-Shop URL', placeholder: 'https://shop.beispiel.de', hint: 'URL zu Ihrem Online-Shop' },
  app_mobile: { label: 'App-Store Links', placeholder: 'https://apps.apple.com/... oder https://play.google.com/...', hint: 'Apple App Store und/oder Google Play Store Link' },
  software_saas: { label: 'SaaS-Portal URL', placeholder: 'https://app.beispiel.de', hint: 'Login-/Registrierungsseite Ihres Kundenportals' },
  app_web: { label: 'Web-App URL', placeholder: 'https://app.beispiel.de', hint: 'URL zu Ihrer Web-Anwendung' },
}

// Step-specific explanations for "Warum diese Fragen?"
const STEP_EXPLANATIONS: Record<number, string> = {
  1: 'Rechtsform und Gründungsjahr bestimmen, welche Meldepflichten und Schwellenwerte für Ihr Unternehmen gelten (z.B. NIS2, AI Act).',
  2: 'Ihr Geschäftsmodell und Ihre Angebote bestimmen, welche DSGVO-Pflichten greifen: B2C erfordert z.B. strengere Einwilligungsregeln, Webshops brauchen Cookie-Banner und Datenschutzerklärungen, SaaS-Angebote eine Auftragsverarbeitung.',
  3: 'Die Unternehmensgröße bestimmt, ob Sie einen DSB benennen müssen (ab 20 MA), ob NIS2-Pflichten greifen und welche Audit-Anforderungen gelten.',
  4: 'Standorte und Zielmärkte bestimmen, welche nationalen Datenschutzgesetze zusätzlich zur DSGVO greifen (z.B. BDSG, DSG-AT, UK GDPR, CCPA).',
  5: 'Ob Sie Verantwortlicher oder Auftragsverarbeiter sind, bestimmt Ihre DSGVO-Pflichten grundlegend.',
  6: 'Regulierungsrahmen und Prüfzyklen definieren, welche Compliance-Module für Sie aktiviert werden und in welchem Rhythmus Audits stattfinden.',
  7: 'Als Maschinenbauer gelten zusätzliche Anforderungen: CE-Kennzeichnung, Maschinenverordnung, Produktsicherheit und ggf. Hochrisiko-KI im Sinne des AI Act.',
}

function StepBusinessModel({
  data,
  onChange,
}: {
  data: Partial<CompanyProfile>
  onChange: (updates: Partial<CompanyProfile>) => void
}) {
  const toggleOffering = (offering: OfferingType) => {
    const current = data.offerings || []
    if (current.includes(offering)) {
      // Remove offering and its URL
      const urls = { ...(data.offeringUrls || {}) }
      delete urls[offering]
      onChange({ offerings: current.filter(o => o !== offering), offeringUrls: urls })
    } else {
      onChange({ offerings: [...current, offering] })
    }
  }

  const updateOfferingUrl = (offering: string, url: string) => {
    onChange({ offeringUrls: { ...(data.offeringUrls || {}), [offering]: url } })
  }

  // Offerings that are selected and have URL config
  const selectedWithUrls = (data.offerings || []).filter(o => o in OFFERING_URL_CONFIG)

  return (
    <div className="space-y-8">
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-4">
          Geschäftsmodell <span className="text-red-500">*</span>
        </label>
        <div className="grid grid-cols-4 gap-4">
          {Object.entries(BUSINESS_MODEL_LABELS).map(([value, { short }]) => (
            <button
              key={value}
              type="button"
              onClick={() => onChange({ businessModel: value as BusinessModel })}
              className={`p-4 rounded-xl border-2 text-center transition-all ${
                data.businessModel === value
                  ? 'border-purple-500 bg-purple-50 text-purple-700'
                  : 'border-gray-200 hover:border-purple-300'
              }`}
            >
              <div className="font-semibold">{short}</div>
            </button>
          ))}
        </div>
        {data.businessModel && (
          <p className="text-sm text-gray-500 mt-2">
            {BUSINESS_MODEL_LABELS[data.businessModel].description}
          </p>
        )}
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 mb-4">
          Was bieten Sie an? <span className="text-gray-400">(Mehrfachauswahl möglich)</span>
        </label>
        <div className="grid grid-cols-2 gap-3">
          {Object.entries(OFFERING_TYPE_LABELS).map(([value, { label, description }]) => (
            <button
              key={value}
              type="button"
              onClick={() => toggleOffering(value as OfferingType)}
              className={`p-4 rounded-xl border-2 text-left transition-all ${
                (data.offerings || []).includes(value as OfferingType)
                  ? 'border-purple-500 bg-purple-50'
                  : 'border-gray-200 hover:border-purple-300'
              }`}
            >
              <div className="font-medium text-gray-900">{label}</div>
              <div className="text-sm text-gray-500">{description}</div>
            </button>
          ))}
        </div>

        {/* Hint when both webshop and SaaS are selected */}
        {(data.offerings || []).includes('webshop') && (data.offerings || []).includes('software_saas') && (
          <div className="mt-3 flex items-start gap-2 p-3 bg-amber-50 border border-amber-200 rounded-lg">
            <svg className="w-5 h-5 text-amber-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <p className="text-sm text-amber-800">
              <strong>Hinweis:</strong> Wenn Sie reine Software verkaufen, genuegt <em>SaaS/Cloud</em> — <em>Online-Shop</em> ist nur fuer physische Produkte oder Hardware mit Abo-Modell gedacht.
            </p>
          </div>
        )}
      </div>

      {/* URL fields for selected offerings */}
      {selectedWithUrls.length > 0 && (
        <div className="space-y-4">
          <label className="block text-sm font-medium text-gray-700">
            Zugehörige URLs
          </label>
          {selectedWithUrls.map(offering => {
            const config = OFFERING_URL_CONFIG[offering]!
            return (
              <div key={offering}>
                <label className="block text-sm text-gray-600 mb-1">{config.label}</label>
                <input
                  type="url"
                  value={(data.offeringUrls || {})[offering] || ''}
                  onChange={e => updateOfferingUrl(offering, e.target.value)}
                  placeholder={config.placeholder}
                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                />
                <p className="text-xs text-gray-400 mt-1">{config.hint}</p>
              </div>
            )
          })}
        </div>
      )}
    </div>
  )
}

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öß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ür Mutter- und Tochtergesellschaften gelten soll.
            Für eine einzelne Einheit eines Konzerns geben Sie nur deren Umsatz an.
          </p>
        )}
      </div>
    </div>
  )
}

function StepLocations({
  data,
  onChange,
}: {
  data: Partial<CompanyProfile>
  onChange: (updates: Partial<CompanyProfile>) => void
}) {
  const toggleMarket = (market: TargetMarket) => {
    const current = data.targetMarkets || []
    if (current.includes(market)) {
      onChange({ targetMarkets: current.filter(m => m !== market) })
    } else {
      onChange({ targetMarkets: [...current, market] })
    }
  }

  const STATES_BY_COUNTRY: Record<string, { label: string; options: string[] }> = {
    DE: {
      label: 'Bundesland',
      options: [
        'Baden-Württemberg', 'Bayern', 'Berlin', 'Brandenburg', 'Bremen',
        'Hamburg', 'Hessen', 'Mecklenburg-Vorpommern', 'Niedersachsen',
        'Nordrhein-Westfalen', 'Rheinland-Pfalz', 'Saarland', 'Sachsen',
        'Sachsen-Anhalt', 'Schleswig-Holstein', 'Thüringen',
      ],
    },
    AT: {
      label: 'Bundesland',
      options: [
        'Burgenland', 'Kärnten', 'Niederösterreich', 'Oberösterreich',
        'Salzburg', 'Steiermark', 'Tirol', 'Vorarlberg', 'Wien',
      ],
    },
    CH: {
      label: 'Kanton',
      options: [
        'Aargau', 'Appenzell Ausserrhoden', 'Appenzell Innerrhoden',
        'Basel-Landschaft', 'Basel-Stadt', 'Bern', 'Freiburg', 'Genf',
        'Glarus', 'Graubünden', 'Jura', 'Luzern', 'Neuenburg', 'Nidwalden',
        'Obwalden', 'Schaffhausen', 'Schwyz', 'Solothurn', 'St. Gallen',
        'Tessin', 'Thurgau', 'Uri', 'Waadt', 'Wallis', 'Zug', 'Zürich',
      ],
    },
  }

  const countryStates = data.headquartersCountry ? STATES_BY_COUNTRY[data.headquartersCountry] : null
  const stateLabel = countryStates?.label || 'Region / Provinz'

  return (
    <div className="space-y-8">
      {/* Country */}
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">
          Land des Hauptsitzes <span className="text-red-500">*</span>
        </label>
        <select
          value={data.headquartersCountry || ''}
          onChange={e => onChange({ headquartersCountry: e.target.value, headquartersCountryOther: '' })}
          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ählen...</option>
          <option value="DE">Deutschland</option>
          <option value="AT">Österreich</option>
          <option value="CH">Schweiz</option>
          <option value="LI">Liechtenstein</option>
          <option value="LU">Luxemburg</option>
          <option value="NL">Niederlande</option>
          <option value="FR">Frankreich</option>
          <option value="IT">Italien</option>
          <option value="other">Anderes Land</option>
        </select>
      </div>

      {/* Other country free text */}
      {data.headquartersCountry === 'other' && (
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Land (Freitext)</label>
          <input
            type="text"
            value={data.headquartersCountryOther || ''}
            onChange={e => onChange({ headquartersCountryOther: e.target.value })}
            placeholder="z.B. Vereinigtes Königreich"
            className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
          />
        </div>
      )}

      {/* Street + House Number */}
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">Straße und Hausnummer</label>
        <input
          type="text"
          value={data.headquartersStreet || ''}
          onChange={e => onChange({ headquartersStreet: e.target.value })}
          placeholder="Musterstraße 42"
          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
        />
      </div>

      {/* PLZ + City */}
      <div className="grid grid-cols-3 gap-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">PLZ</label>
          <input
            type="text"
            value={data.headquartersZip || ''}
            onChange={e => onChange({ headquartersZip: e.target.value })}
            placeholder="10115"
            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 className="col-span-2">
          <label className="block text-sm font-medium text-gray-700 mb-2">Stadt</label>
          <input
            type="text"
            value={data.headquartersCity || ''}
            onChange={e => onChange({ headquartersCity: e.target.value })}
            placeholder="Berlin"
            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>

      {/* State / Bundesland / Kanton */}
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">{stateLabel}</label>
        {countryStates ? (
          <select
            value={data.headquartersState || ''}
            onChange={e => onChange({ headquartersState: e.target.value })}
            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ählen...</option>
            {countryStates.options.map(s => (
              <option key={s} value={s}>{s}</option>
            ))}
          </select>
        ) : (
          <input
            type="text"
            value={data.headquartersState || ''}
            onChange={e => onChange({ headquartersState: e.target.value })}
            placeholder="Region / Provinz"
            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-4">
          Zielmärkte <span className="text-red-500">*</span>
          <span className="text-gray-400 font-normal ml-2">Wo verkaufen/operieren Sie?</span>
        </label>
        <div className="space-y-3">
          {Object.entries(TARGET_MARKET_LABELS).map(([value, { label, description }]) => (
            <button
              key={value}
              type="button"
              onClick={() => toggleMarket(value as TargetMarket)}
              className={`w-full p-4 rounded-xl border-2 text-left transition-all ${
                (data.targetMarkets || []).includes(value as TargetMarket)
                  ? 'border-purple-500 bg-purple-50'
                  : 'border-gray-200 hover:border-purple-300'
              }`}
            >
              <div className="font-medium text-gray-900">{label}</div>
              <div className="text-sm text-gray-500">{description}</div>
            </button>
          ))}
        </div>
      </div>
    </div>
  )
}

function StepDataProtection({
  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">
          Datenschutz-Rolle nach DSGVO
        </label>
        <div className="space-y-3">
          <label className="flex items-start gap-4 p-4 rounded-xl border-2 border-gray-200 hover:border-purple-300 cursor-pointer">
            <input
              type="checkbox"
              checked={data.isDataController ?? true}
              onChange={e => onChange({ isDataController: e.target.checked })}
              className="mt-1 w-5 h-5 text-purple-600 rounded focus:ring-purple-500"
            />
            <div>
              <div className="font-medium text-gray-900">Verantwortlicher (Art. 4 Nr. 7 DSGVO)</div>
              <div className="text-sm text-gray-500">
                Wir entscheiden selbst über Zwecke und Mittel der Datenverarbeitung
              </div>
            </div>
          </label>

          <label className="flex items-start gap-4 p-4 rounded-xl border-2 border-gray-200 hover:border-purple-300 cursor-pointer">
            <input
              type="checkbox"
              checked={data.isDataProcessor ?? false}
              onChange={e => onChange({ isDataProcessor: e.target.checked })}
              className="mt-1 w-5 h-5 text-purple-600 rounded focus:ring-purple-500"
            />
            <div>
              <div className="font-medium text-gray-900">Auftragsverarbeiter (Art. 4 Nr. 8 DSGVO)</div>
              <div className="text-sm text-gray-500">
                Wir verarbeiten personenbezogene Daten im Auftrag anderer Unternehmen
              </div>
            </div>
          </label>
        </div>
      </div>

      <div className="grid grid-cols-2 gap-6">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Datenschutzbeauftragter (Name)
          </label>
          <input
            type="text"
            value={data.dpoName || ''}
            onChange={e => onChange({ dpoName: e.target.value || null })}
            placeholder="Optional"
            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">DSB E-Mail</label>
          <input
            type="email"
            value={data.dpoEmail || ''}
            onChange={e => onChange({ dpoEmail: e.target.value || null })}
            placeholder="dsb@firma.de"
            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>
  )
}

// =============================================================================
// STEP 6: RECHTLICHER RAHMEN (was Step 8)
// =============================================================================

// NOTE: Verarbeitungstaetigkeiten (former Step 6) and KI-Systeme (former Step 7)
// have been moved to Compliance Scope (Blocks 7 and 8).

// DSGVO-Standard Datenkategorien — kept as shared reference for scope
const ALL_DATA_CATEGORIES = [
  { id: 'stammdaten', label: 'Stammdaten', desc: 'Name, Geburtsdatum, Geschlecht', info: 'Vor- und Nachname, Geburtsdatum, Geschlecht, Anrede, Titel, Familienstand, Staatsangehörigkeit, Personalnummer, Kundennummer' },
  { id: 'kontaktdaten', label: 'Kontaktdaten', desc: 'E-Mail, Telefon, Adresse', info: 'E-Mail-Adresse, Telefonnummer, Mobilnummer, Postanschrift, Faxnummer, Messenger-IDs der betroffenen Personen' },
  { id: 'vertragsdaten', label: 'Vertragsdaten', desc: 'Vertragsnummer, Laufzeit, Konditionen', info: 'Vertragsnummer, Vertragsbeginn/-ende, Laufzeit, Konditionen, Kündigungsfristen, Vertragsgegenstand, Bestellhistorie' },
  { id: 'zahlungsdaten', label: 'Zahlungs-/Bankdaten', desc: 'IBAN, Kreditkarte, Rechnungen', info: 'IBAN, BIC, Kontoinhaber, Kreditkartennummer, Rechnungsbeträge, Zahlungshistorie, Steuer-ID, USt-IdNr.' },
  { id: 'beschaeftigtendaten', label: 'Beschäftigtendaten', desc: 'Gehalt, Arbeitszeiten, Urlaub', info: 'Gehalt/Lohn, Steuerklasse, SV-Nummer, Krankenkasse (z.B. AOK, TK), Arbeitszeiten, Urlaubstage, Abwesenheiten, Beurteilungen, Eintrittsdatum. Aufbewahrung: i.d.R. 3 Jahre nach Austritt (§ 195 BGB), Lohndaten 8 Jahre (§ 147 AO)' },
  { id: 'kommunikation', label: 'Kommunikationsdaten', desc: 'E-Mail-Inhalte, Chat-Verläufe', info: 'E-Mail-Inhalte und -Metadaten, Chat-Nachrichten, Gesprächsprotokolle, Support-Tickets, Briefkorrespondenz' },
  { id: 'nutzungsdaten', label: 'Nutzungs-/Logdaten', desc: 'IP-Adressen, Login-Zeiten, Klicks', info: 'IP-Adressen, Login-Zeitpunkte, Seitenaufrufe, Klickverhalten, Geräteinformationen, Browser-Typ, Session-Dauer' },
  { id: 'standortdaten', label: 'Standortdaten', desc: 'GPS, Check-in, Lieferadressen', info: 'GPS-Koordinaten, Check-in/Check-out-Zeiten, Lieferadressen, Reiserouten, WLAN-Standortbestimmung' },
  { id: 'bilddaten', label: 'Bild-/Videodaten', desc: 'Fotos, Videoaufnahmen, Profilbilder', info: 'Profilfotos, Ausweiskopien, Videoaufnahmen (Überwachung), Bewerbungsfotos, Schulungsvideos' },
  { id: 'bewerberdaten', label: 'Bewerberdaten', desc: 'Lebenslauf, Zeugnisse, Anschreiben', info: 'Lebenslauf, Anschreiben, Zeugnisse, Referenzen, Gehaltsvorstellungen, Verfügbarkeit, Bewerbungsquelle. Löschfrist bei Absage: max. 6 Monate (AGG §§ 15, 21)' },
  { id: 'qualifikationsdaten', label: 'Qualifikations-/Schulungsdaten', desc: 'Fortbildungen, Zertifikate, Abschlüsse', info: 'Besuchte Seminare und Schulungen, Zertifikate, Abschlüsse, Qualifikationsnachweise, Schulungsdaten und -ergebnisse, Weiterbildungshistorie' },
] as const

const ALL_SPECIAL_CATEGORIES = [
  { id: 'gesundheit', label: 'Gesundheitsdaten', desc: 'Krankheitstage, Atteste, Diagnosen', info: 'Krankheitstage, AU-Bescheinigungen, Diagnosen, Behinderungsgrad (GdB), BEM-Daten, arbeitsmedizinische Untersuchungen, Impfstatus, Allergien. Auch AU ohne Diagnose = Gesundheitsdatum (LDI NRW). Schwangerschaft, Allergien, Online-Arzneimittelbestellung (EuGH C-21/23). NICHT: Krankenkassenname (z.B. AOK, TK) — das sind normale Beschäftigtendaten.' },
  { id: 'biometrie', label: 'Biometrische Daten', desc: 'Fingerabdruck, Gesichtserkennung', info: 'Fingerabdruck, Gesichtserkennung, Iris-Scan, Stimmerkennung, Handvenenscan. Nur wenn zur eindeutigen Identifizierung verwendet (ErwGr. 51). Einfaches Passfoto = kein biometrisches Datum.' },
  { id: 'religion', label: 'Religion', desc: 'Konfession, Kirchensteuer', info: 'Konfession/Religionszugehörigkeit (relevant für Kirchensteuer auf Lohnabrechnung). Auch indirekt: Kantinenbestellung halal/koscher (EuGH C-184/20 weite Auslegung). Praktisch jedes Unternehmen mit Beschäftigten verarbeitet diese Daten über die Gehaltsabrechnung.' },
  { id: 'gewerkschaft', label: 'Gewerkschaftszugehörigkeit', desc: 'Mitgliedschaft', info: 'Gewerkschaftsmitgliedschaft, Betriebsratszugehörigkeit, Tarifzugehörigkeit' },
  { id: 'genetik', label: 'Genetische Daten', desc: 'DNA, Erbkrankheiten', info: 'DNA-Analysen, genetische Prädispositionen, Erbkrankheitsrisiken (nur in Spezialfällen relevant)' },
] as const

// Verarbeitungstätigkeiten mit aktivitätsspezifischen Datenkategorien
// Hinweis: Rechtsgrundlage (legal_basis) wird hier im Profil nicht angezeigt —
// die juristische Zuordnung erfolgt im VVT-Schritt (Art. 30 DSGVO).
interface ActivityTemplate {
  id: string
  name: string
  purpose: string
  primary_categories: string[]    // Sichtbar + vorausgewählt
  art9_relevant: string[]         // Art. 9 Kategorien die plausibel relevant sind
  default_legal_basis: string
  legalHint?: string              // Gesetzlicher Hinweis (z.B. ArbZG-Pflicht)
  hasServiceProvider?: boolean    // Kann ein externer Dienstleister eingesetzt werden?
  categoryInfo?: Record<string, string>  // Override Info-Text pro Datenkategorie (kontextspezifisch)
}

interface ActivityDepartment {
  id: string
  name: string
  icon: string
  activities: ActivityTemplate[]
}

// ── Universelle Abteilungen (immer sichtbar) ──

const UNIVERSAL_DEPARTMENTS: ActivityDepartment[] = [
  {
    id: 'personal', name: 'Personal / HR', icon: '👥',
    activities: [
      { id: 'personalverwaltung', name: 'Personalverwaltung', purpose: 'Verwaltung von Beschäftigtendaten für das Arbeitsverhältnis', primary_categories: ['stammdaten', 'kontaktdaten', 'beschaeftigtendaten', 'zahlungsdaten'], art9_relevant: ['gesundheit', 'religion', 'gewerkschaft'], default_legal_basis: 'contract', categoryInfo: { stammdaten: 'Vor-/Nachname, Geburtsdatum, Geschlecht, Familienstand, Staatsangehörigkeit, Personalnummer', kontaktdaten: 'Privat- und Dienstadresse, Telefonnummern, dienstliche E-Mail, Notfallkontakt', beschaeftigtendaten: 'Steuerklasse, SV-Nummer, Krankenkasse (z.B. AOK, TK — kein Gesundheitsdatum!), Eintrittsdatum, Arbeitszeit, Urlaubstage. Aufbewahrung: 3 Jahre nach Austritt (§ 195 BGB)', zahlungsdaten: 'IBAN für Gehaltsauszahlung, Vermögenswirksame Leistungen, Pfändungsdaten' } },
      { id: 'lohnbuchhaltung', name: 'Lohn- und Gehaltsabrechnung', purpose: 'Berechnung und Auszahlung von Löhnen und Gehältern', primary_categories: ['beschaeftigtendaten', 'zahlungsdaten', 'stammdaten'], art9_relevant: [], default_legal_basis: 'legal', hasServiceProvider: true, categoryInfo: { beschaeftigtendaten: 'Gehalt, Zulagen, Prämien, Steuerklasse, SV-Nummer, Krankenkasse, Kirchensteuermerkmal. Aufbewahrung: Lohnabrechnungen 8 Jahre (§ 147 AO), Lohnsteuer 6 Jahre (§ 41 EStG). Hinweis: Gesundheits- und Religionsdaten werden bereits unter Personalverwaltung als Art. 9-Kategorien erfasst.', zahlungsdaten: 'IBAN, Bankverbindung, Gehaltsabrechnungen, Pfändungsbeträge. Aufbewahrung: 8 Jahre (§ 147 AO)' } },
      { id: 'bewerbermanagement', name: 'Bewerbermanagement', purpose: 'Entgegennahme, Prüfung und Bearbeitung von Bewerbungen', primary_categories: ['bewerberdaten', 'stammdaten', 'kontaktdaten', 'kommunikation', 'qualifikationsdaten'], art9_relevant: ['gesundheit', 'religion'], default_legal_basis: 'consent', categoryInfo: { bewerberdaten: 'Lebenslauf, Anschreiben, Zeugnisse, Referenzen, Gehaltsvorstellungen. Löschfrist bei Absage: max. 6 Monate (AGG §§ 15, 21)', kontaktdaten: 'Privatadresse, E-Mail, Telefonnummer des Bewerbers', kommunikation: 'Bewerbungskorrespondenz, Einladungen, Absageschreiben' } },
      { id: 'arbeitszeiterfassung', name: 'Arbeitszeiterfassung', purpose: 'Erfassung und Dokumentation der Arbeitszeiten', primary_categories: ['beschaeftigtendaten'], art9_relevant: [], default_legal_basis: 'legal', legalHint: 'Gesetzlich vorgeschrieben (§ 3 ArbZG). Fehlende Arbeitszeiterfassung ist ein Compliance-Risiko.', categoryInfo: { beschaeftigtendaten: 'Beginn/Ende der Arbeitszeit, Pausen, Überstunden, Ruhezeiten. Aufbewahrung: mind. 2 Jahre (§ 16 Abs. 2 ArbZG). Nicht für Leistungskontrolle verwenden!' } },
      { id: 'weiterbildung', name: 'Fort- und Weiterbildung', purpose: 'Verwaltung von Schulungen und Weiterbildungsmaßnahmen', primary_categories: ['qualifikationsdaten', 'beschaeftigtendaten', 'stammdaten'], art9_relevant: [], default_legal_basis: 'contract' },
    ],
  },
  {
    id: 'finanzen', name: 'Finanzen / Buchhaltung', icon: '💰',
    activities: [
      { id: 'finanzbuchhaltung', name: 'Finanzbuchhaltung', purpose: 'Buchführung, Rechnungsstellung, steuerliche Dokumentation', primary_categories: ['stammdaten', 'zahlungsdaten', 'vertragsdaten', 'kontaktdaten'], art9_relevant: [], default_legal_basis: 'legal', categoryInfo: { zahlungsdaten: 'Rechnungsbeträge, IBAN, Buchungsbelege, USt-IdNr. Aufbewahrung: 8 Jahre (§ 147 AO)', vertragsdaten: 'Vertragsnummer, Konditionen, Bestellhistorie. Aufbewahrung: Handelskorrespondenz 6 Jahre (§ 257 HGB)', kontaktdaten: 'Rechnungsadresse, Ansprechpartner in der Debitorenbuchhaltung' } },
      { id: 'zahlungsverkehr', name: 'Zahlungsverkehr', purpose: 'Abwicklung von ein- und ausgehenden Zahlungen', primary_categories: ['zahlungsdaten', 'stammdaten', 'kontaktdaten', 'vertragsdaten'], art9_relevant: [], default_legal_basis: 'contract' },
      { id: 'mahnwesen', name: 'Mahnwesen / Inkasso', purpose: 'Überwachung offener Forderungen und Mahnverfahren', primary_categories: ['stammdaten', 'kontaktdaten', 'zahlungsdaten', 'vertragsdaten'], art9_relevant: [], default_legal_basis: 'interest' },
      { id: 'reisekostenabrechnung', name: 'Reisekostenabrechnung', purpose: 'Abrechnung und Erstattung von Dienstreisekosten', primary_categories: ['beschaeftigtendaten', 'zahlungsdaten', 'standortdaten'], art9_relevant: [], default_legal_basis: 'contract' },
    ],
  },
  {
    id: 'vertrieb', name: 'Vertrieb / Sales', icon: '📈',
    activities: [
      { id: 'crm', name: 'CRM / Kundenverwaltung', purpose: 'Verwaltung von Kundenbeziehungen, Kontakthistorie, Verkaufschancen', primary_categories: ['stammdaten', 'kontaktdaten', 'kommunikation', 'vertragsdaten'], art9_relevant: [], default_legal_basis: 'contract', categoryInfo: { stammdaten: 'Firmenname, Ansprechpartner-Name, Titel, Position, Kundennummer', kontaktdaten: 'Geschäftliche E-Mail, Telefon, Büroadresse des Ansprechpartners. B2B-Kontaktdaten sind personenbezogene Daten — Art. 13 DSGVO Informationspflicht gilt!', kommunikation: 'E-Mail-Korrespondenz, Gesprächsnotizen, Support-Tickets, Meeting-Protokolle' } },
      { id: 'angebotserstellung', name: 'Angebotserstellung', purpose: 'Erstellung und Nachverfolgung von Angeboten', primary_categories: ['stammdaten', 'kontaktdaten', 'vertragsdaten'], art9_relevant: [], default_legal_basis: 'contract' },
      { id: 'vertragsmanagement', name: 'Vertragsmanagement', purpose: 'Verwaltung, Archivierung und Nachverfolgung von Verträgen', primary_categories: ['vertragsdaten', 'stammdaten', 'kontaktdaten'], art9_relevant: [], default_legal_basis: 'contract' },
    ],
  },
  {
    id: 'marketing', name: 'Marketing', icon: '📣',
    activities: [
      { id: 'newsletter', name: 'Newsletter / E-Mail-Marketing', purpose: 'Versand von Newslettern und E-Mail-Marketing an Abonnenten', primary_categories: ['kontaktdaten', 'nutzungsdaten', 'stammdaten'], art9_relevant: [], default_legal_basis: 'consent' },
      { id: 'website_tracking', name: 'Website-Tracking / Analytics', purpose: 'Analyse des Nutzerverhaltens auf der Website mittels Tracking-Tools', primary_categories: ['nutzungsdaten', 'standortdaten'], art9_relevant: [], default_legal_basis: 'consent' },
      { id: 'social_media', name: 'Social-Media-Marketing', purpose: 'Betrieb von Unternehmensprofilen und Werbekampagnen', primary_categories: ['kontaktdaten', 'nutzungsdaten', 'kommunikation'], art9_relevant: [], default_legal_basis: 'consent' },
      { id: 'consent_management', name: 'Consent-Management (Cookies)', purpose: 'Verwaltung der Einwilligungen für Cookies und Tracking', primary_categories: ['nutzungsdaten'], art9_relevant: [], default_legal_basis: 'consent' },
    ],
  },
  {
    id: 'it', name: 'IT / Administration', icon: '🖥️',
    activities: [
      { id: 'zugangsverwaltung', name: 'Zugangsverwaltung (IAM)', purpose: 'Verwaltung von Benutzerkonten, Passwörtern und Zugriffsrechten', primary_categories: ['beschaeftigtendaten', 'stammdaten', 'nutzungsdaten'], art9_relevant: ['biometrie'], default_legal_basis: 'contract' },
      { id: 'email_kommunikation', name: 'E-Mail-Kommunikation', purpose: 'Geschäftliche E-Mail-Korrespondenz', primary_categories: ['kontaktdaten', 'kommunikation', 'stammdaten'], art9_relevant: [], default_legal_basis: 'interest' },
      { id: 'datensicherung', name: 'Datensicherung / Backup', purpose: 'Sicherung von Unternehmensdaten zum Schutz vor Datenverlust', primary_categories: ['nutzungsdaten', 'beschaeftigtendaten'], art9_relevant: [], default_legal_basis: 'interest' },
      { id: 'website_betrieb', name: 'Website-Betrieb', purpose: 'Bereitstellung der Unternehmenswebsite und Kontaktformulare', primary_categories: ['nutzungsdaten', 'kontaktdaten', 'stammdaten'], art9_relevant: [], default_legal_basis: 'interest', hasServiceProvider: true, legalHint: 'Bei externem Website-Management: AVV nach Art. 28 DSGVO mit dem Dienstleister erforderlich. Cookies, Analytics und Kontaktformulare verarbeiten personenbezogene Daten — auch wenn der Dienstleister sie technisch betreibt, bleibt Ihr Unternehmen verantwortlich.' },
      { id: 'it_sicherheit', name: 'IT-Sicherheit / Logging', purpose: 'Überwachung der IT-Sicherheit, Log-Analyse, Vorfallbehandlung', primary_categories: ['nutzungsdaten', 'beschaeftigtendaten'], art9_relevant: [], default_legal_basis: 'interest' },
    ],
  },
  {
    id: 'recht', name: 'Recht / Compliance', icon: '⚖️',
    activities: [
      { id: 'datenschutzanfragen', name: 'Betroffenenrechte (DSGVO)', purpose: 'Bearbeitung von Auskunfts-, Lösch- und Berichtigungsanfragen', primary_categories: ['stammdaten', 'kontaktdaten', 'kommunikation'], art9_relevant: [], default_legal_basis: 'legal' },
      { id: 'auftragsverarbeitung', name: 'Auftragsverarbeitung (AVV)', purpose: 'Dokumentation und Verwaltung von Auftragsverarbeitungsverhältnissen', primary_categories: ['stammdaten', 'kontaktdaten', 'vertragsdaten'], art9_relevant: [], default_legal_basis: 'legal' },
      { id: 'whistleblowing', name: 'Hinweisgebersystem', purpose: 'Entgegennahme und Bearbeitung von Meldungen nach HinSchG', primary_categories: ['stammdaten', 'kontaktdaten', 'kommunikation'], art9_relevant: [], default_legal_basis: 'legal', categoryInfo: { stammdaten: 'Identität des Hinweisgebers (besonders schützenswert! § 8 HinSchG Vertraulichkeitsgebot)', kontaktdaten: 'Kontaktdaten nur für zuständige Meldestelle zugänglich', kommunikation: 'Meldungsinhalt, Kommunikationsverlauf, Zeugenaussagen. Löschfrist: 3 Jahre nach Abschluss (§ 11 Abs. 5 HinSchG)' } },
    ],
  },
]

// ── Abteilungen die je nach Kontext relevant sind ──

const OPTIONAL_DEPARTMENTS: ActivityDepartment[] = [
  {
    id: 'einkauf', name: 'Einkauf / Beschaffung', icon: '🛒',
    activities: [
      { id: 'lieferantenverwaltung', name: 'Lieferantenverwaltung', purpose: 'Erfassung und Pflege von Lieferantenstammdaten', primary_categories: ['stammdaten', 'kontaktdaten', 'vertragsdaten', 'zahlungsdaten'], art9_relevant: [], default_legal_basis: 'contract' },
      { id: 'bestellwesen', name: 'Bestellwesen', purpose: 'Abwicklung von Bestellungen bei Lieferanten', primary_categories: ['stammdaten', 'vertragsdaten', 'zahlungsdaten'], art9_relevant: [], default_legal_basis: 'contract' },
      { id: 'lieferantenbewertung', name: 'Lieferantenbewertung', purpose: 'Bewertung und Qualifizierung von Lieferanten', primary_categories: ['stammdaten', 'kontaktdaten'], art9_relevant: [], default_legal_basis: 'interest' },
    ],
  },
  {
    id: 'produktion', name: 'Produktion / Fertigung', icon: '🏭',
    activities: [
      { id: 'produktionsplanung', name: 'Produktionsplanung', purpose: 'Planung und Steuerung von Produktionsprozessen inkl. Personalzuordnung', primary_categories: ['beschaeftigtendaten', 'stammdaten'], art9_relevant: [], default_legal_basis: 'contract' },
      { id: 'qualitaetskontrolle', name: 'Qualitätskontrolle', purpose: 'Prüfung und Dokumentation der Produktqualität', primary_categories: ['beschaeftigtendaten', 'stammdaten'], art9_relevant: [], default_legal_basis: 'contract' },
      { id: 'arbeitssicherheit', name: 'Arbeitssicherheit / Arbeitsschutz', purpose: 'Dokumentation von Arbeitsschutzmaßnahmen, Unfällen, Gefährdungsbeurteilungen', primary_categories: ['beschaeftigtendaten'], art9_relevant: ['gesundheit'], default_legal_basis: 'legal' },
      { id: 'schichtplanung', name: 'Schichtplanung', purpose: 'Erstellung und Verwaltung von Schichtplänen', primary_categories: ['beschaeftigtendaten'], art9_relevant: [], default_legal_basis: 'contract' },
    ],
  },
  {
    id: 'logistik', name: 'Logistik / Versand', icon: '🚚',
    activities: [
      { id: 'versandabwicklung', name: 'Versandabwicklung', purpose: 'Verarbeitung von Empfänger- und Versanddaten für den Warenversand', primary_categories: ['stammdaten', 'kontaktdaten', 'standortdaten'], art9_relevant: [], default_legal_basis: 'contract' },
      { id: 'lieferverfolgung', name: 'Lieferverfolgung / Sendungstracking', purpose: 'Nachverfolgung von Sendungen und Zustellung', primary_categories: ['stammdaten', 'kontaktdaten', 'standortdaten'], art9_relevant: [], default_legal_basis: 'contract' },
      { id: 'lagerverwaltung', name: 'Lagerverwaltung', purpose: 'Verwaltung von Lagerbeständen und Warenbewegungen', primary_categories: ['stammdaten', 'beschaeftigtendaten'], art9_relevant: [], default_legal_basis: 'contract' },
      { id: 'retouren', name: 'Retourenmanagement', purpose: 'Bearbeitung von Warenrücksendungen', primary_categories: ['stammdaten', 'kontaktdaten', 'vertragsdaten'], art9_relevant: [], default_legal_basis: 'contract' },
    ],
  },
  {
    id: 'kundenservice', name: 'Kundenservice / Support', icon: '🎧',
    activities: [
      { id: 'ticketsystem', name: 'Ticketsystem / Support', purpose: 'Erfassung und Bearbeitung von Kundenanfragen und Supportfällen', primary_categories: ['stammdaten', 'kontaktdaten', 'kommunikation'], art9_relevant: [], default_legal_basis: 'contract' },
      { id: 'beschwerdemanagement', name: 'Beschwerdemanagement', purpose: 'Bearbeitung und Dokumentation von Kundenbeschwerden', primary_categories: ['stammdaten', 'kontaktdaten', 'kommunikation'], art9_relevant: [], default_legal_basis: 'contract' },
    ],
  },
  {
    id: 'facility', name: 'Facility Management', icon: '🏢',
    activities: [
      { id: 'zutrittskontrolle', name: 'Zutrittskontrolle', purpose: 'Kontrolle und Protokollierung des Zutritts zu Gebäuden und Räumen', primary_categories: ['beschaeftigtendaten', 'stammdaten', 'bilddaten'], art9_relevant: ['biometrie'], default_legal_basis: 'interest' },
      { id: 'videoueberwachung', name: 'Videoüberwachung', purpose: 'Überwachung von Gebäuden und Geländen mittels Videokameras', primary_categories: ['bilddaten', 'beschaeftigtendaten'], art9_relevant: ['biometrie'], default_legal_basis: 'interest', categoryInfo: { bilddaten: 'Videoaufzeichnungen von Kameras. Speicherdauer: empfohlen max. 72h (BeschDG-Entwurf). Datenschutzhinweis-Schilder (Art. 13 DSGVO) sind Pflicht. Betriebsrat hat Mitbestimmungsrecht (§ 87 Abs. 1 Nr. 6 BetrVG)' } },
      { id: 'besuchermanagement', name: 'Besuchermanagement', purpose: 'Erfassung und Verwaltung von Besucherdaten', primary_categories: ['stammdaten', 'kontaktdaten'], art9_relevant: [], default_legal_basis: 'interest' },
    ],
  },
]

// ── Branchenspezifische Abteilungen ──

const INDUSTRY_DEPARTMENTS: Record<string, ActivityDepartment[]> = {
  'E-Commerce / Handel': [{
    id: 'ecommerce', name: 'E-Commerce / Webshop', icon: '🛍️',
    activities: [
      { id: 'bestellabwicklung', name: 'Bestellabwicklung (Webshop)', purpose: 'Verarbeitung von Kundenbestellungen im Online-Shop', primary_categories: ['stammdaten', 'kontaktdaten', 'zahlungsdaten', 'vertragsdaten'], art9_relevant: [], default_legal_basis: 'contract' },
      { id: 'kundenkonto', name: 'Kundenkonto-Verwaltung', purpose: 'Verwaltung registrierter Kundenkonten im Online-Shop', primary_categories: ['stammdaten', 'kontaktdaten', 'nutzungsdaten', 'zahlungsdaten'], art9_relevant: [], default_legal_basis: 'contract' },
      { id: 'webshop_analyse', name: 'Webshop-Analyse / Conversion', purpose: 'Analyse des Kaufverhaltens und Conversion-Rates', primary_categories: ['nutzungsdaten', 'standortdaten'], art9_relevant: [], default_legal_basis: 'consent' },
      { id: 'produktbewertungen', name: 'Produktbewertungen / Reviews', purpose: 'Verwaltung von Kundenrezensionen und Produktbewertungen', primary_categories: ['stammdaten', 'kontaktdaten', 'kommunikation'], art9_relevant: [], default_legal_basis: 'consent' },
    ],
  }],
  'Gesundheitswesen': [{
    id: 'gesundheit_dept', name: 'Medizin / Patientenversorgung', icon: '🏥',
    activities: [
      { id: 'patientenverwaltung', name: 'Patientenverwaltung', purpose: 'Verwaltung von Patientenstammdaten und Krankengeschichte', primary_categories: ['stammdaten', 'kontaktdaten', 'zahlungsdaten'], art9_relevant: ['gesundheit', 'genetik'], default_legal_basis: 'contract' },
      { id: 'terminplanung_med', name: 'Terminplanung (Patienten)', purpose: 'Vergabe und Verwaltung von Patiententerminen', primary_categories: ['stammdaten', 'kontaktdaten'], art9_relevant: ['gesundheit'], default_legal_basis: 'contract' },
      { id: 'kv_abrechnung', name: 'KV-Abrechnung', purpose: 'Abrechnung von Leistungen gegenüber Kassenärztlichen Vereinigungen', primary_categories: ['stammdaten', 'zahlungsdaten'], art9_relevant: ['gesundheit'], default_legal_basis: 'legal' },
      { id: 'med_dokumentation', name: 'Medizinische Dokumentation', purpose: 'Dokumentation von Diagnosen, Therapien und Behandlungsverläufen', primary_categories: ['stammdaten'], art9_relevant: ['gesundheit', 'genetik'], default_legal_basis: 'legal' },
    ],
  }],
  'Finanzdienstleistungen': [{
    id: 'finanz_dept', name: 'Regulatorik / Finanzaufsicht', icon: '🏦',
    activities: [
      { id: 'kyc', name: 'Know Your Customer (KYC)', purpose: 'Identifizierung und Verifizierung von Kunden gemäß GwG', primary_categories: ['stammdaten', 'kontaktdaten', 'bilddaten'], art9_relevant: [], default_legal_basis: 'legal' },
      { id: 'kontoverwaltung', name: 'Kontoverwaltung', purpose: 'Verwaltung von Kundenkonten und Kontobewegungen', primary_categories: ['stammdaten', 'kontaktdaten', 'zahlungsdaten'], art9_relevant: [], default_legal_basis: 'contract' },
      { id: 'geldwaeschepraevention', name: 'Geldwäscheprävention (AML)', purpose: 'Überwachung verdächtiger Transaktionen nach GwG', primary_categories: ['stammdaten', 'zahlungsdaten'], art9_relevant: [], default_legal_basis: 'legal' },
    ],
  }],
  'Bildung': [{
    id: 'bildung_dept', name: 'Bildung / Lehre', icon: '🎓',
    activities: [
      { id: 'schuelerverwaltung', name: 'Schüler-/Teilnehmerverwaltung', purpose: 'Verwaltung von Lernenden, Noten, Anwesenheit', primary_categories: ['stammdaten', 'kontaktdaten', 'nutzungsdaten'], art9_relevant: ['gesundheit', 'religion'], default_legal_basis: 'contract' },
      { id: 'lernplattform', name: 'Lernplattform / LMS', purpose: 'Bereitstellung und Nutzung digitaler Lernplattformen', primary_categories: ['stammdaten', 'nutzungsdaten', 'kommunikation'], art9_relevant: [], default_legal_basis: 'contract' },
      { id: 'pruefungsverwaltung', name: 'Prüfungsverwaltung', purpose: 'Verwaltung und Dokumentation von Prüfungen und Noten', primary_categories: ['stammdaten'], art9_relevant: [], default_legal_basis: 'contract' },
    ],
  }],
  'Immobilien': [{
    id: 'immobilien_dept', name: 'Immobilienverwaltung', icon: '🏠',
    activities: [
      { id: 'mieterverwaltung', name: 'Mieterverwaltung', purpose: 'Verwaltung von Mietverträgen und Mieterdaten', primary_categories: ['stammdaten', 'kontaktdaten', 'vertragsdaten', 'zahlungsdaten'], art9_relevant: [], default_legal_basis: 'contract' },
      { id: 'nebenkostenabrechnung', name: 'Nebenkostenabrechnung', purpose: 'Erstellung und Versand von Nebenkostenabrechnungen', primary_categories: ['stammdaten', 'zahlungsdaten'], art9_relevant: [], default_legal_basis: 'contract' },
    ],
  }],
}

// Compute which departments to show based on company context
function getRelevantDepartments(industry: string | string[], businessModel: string | undefined, companySize: string | undefined): ActivityDepartment[] {
  const departments: ActivityDepartment[] = [...UNIVERSAL_DEPARTMENTS]

  // Always show optional departments — user can choose
  departments.push(...OPTIONAL_DEPARTMENTS)

  // Add industry-specific departments (support multi-select)
  const industries = Array.isArray(industry) ? industry : [industry]
  const addedIds = new Set<string>()
  for (const ind of industries) {
    const industryDepts = INDUSTRY_DEPARTMENTS[ind]
    if (industryDepts) {
      for (const dept of industryDepts) {
        if (!addedIds.has(dept.id)) {
          addedIds.add(dept.id)
          departments.push(dept)
        }
      }
    }
  }

  return departments
}

interface ProcessingActivity {
  id: string
  name: string
  purpose: string
  data_categories: string[]
  legal_basis: string
  department?: string
  custom?: boolean
  usesServiceProvider?: boolean
  serviceProviderName?: string
}

interface AISystem {
  id: string
  name: string
  vendor: string
  purpose: string
  purposes?: string[]
  processes_personal_data: boolean
  isCustom?: boolean
  notes?: string
}

// Helper: find template for an activity ID across all departments
function findTemplate(departments: ActivityDepartment[], activityId: string): ActivityTemplate | null {
  for (const dept of departments) {
    const t = dept.activities.find(a => a.id === activityId)
    if (t) return t
  }
  return null
}

function StepProcessing({
  data,
  onChange,
}: {
  data: Partial<CompanyProfile> & { processingSystems?: ProcessingActivity[] }
  onChange: (updates: Record<string, unknown>) => void
}) {
  const activities: ProcessingActivity[] = (data as any).processingSystems || []
  const industry = data.industry || []
  const [expandedActivity, setExpandedActivity] = useState<string | null>(null)
  const [collapsedDepts, setCollapsedDepts] = useState<Set<string>>(new Set())
  const [showExtraCategories, setShowExtraCategories] = useState<Set<string>>(new Set())
  const [expandedInfoCat, setExpandedInfoCat] = useState<string | null>(null)

  const departments = getRelevantDepartments(industry, data.businessModel, data.companySize)
  const activeIds = new Set(activities.map(a => a.id))

  const toggleActivity = (template: ActivityTemplate, deptId: string) => {
    if (activeIds.has(template.id)) {
      onChange({ processingSystems: activities.filter(a => a.id !== template.id) })
    } else {
      onChange({
        processingSystems: [...activities, {
          id: template.id,
          name: template.name,
          purpose: template.purpose,
          data_categories: [...template.primary_categories],
          legal_basis: template.default_legal_basis,
          department: deptId,
        }],
      })
    }
  }

  const updateActivity = (id: string, updates: Partial<ProcessingActivity>) => {
    onChange({
      processingSystems: activities.map(a => a.id === id ? { ...a, ...updates } : a),
    })
  }

  const toggleDataCategory = (activityId: string, categoryId: string) => {
    const activity = activities.find(a => a.id === activityId)
    if (!activity) return
    const cats = activity.data_categories.includes(categoryId)
      ? activity.data_categories.filter(c => c !== categoryId)
      : [...activity.data_categories, categoryId]
    updateActivity(activityId, { data_categories: cats })
  }

  const toggleDeptCollapse = (deptId: string) => {
    setCollapsedDepts(prev => {
      const next = new Set(prev)
      if (next.has(deptId)) next.delete(deptId); else next.add(deptId)
      return next
    })
  }

  const toggleExtraCategories = (activityId: string) => {
    setShowExtraCategories(prev => {
      const next = new Set(prev)
      if (next.has(activityId)) next.delete(activityId); else next.add(activityId)
      return next
    })
  }

  const addCustomActivity = () => {
    const id = `custom_${Date.now()}`
    onChange({
      processingSystems: [...activities, {
        id,
        name: '',
        purpose: '',
        data_categories: [],
        legal_basis: 'contract',
        custom: true,
      }],
    })
    setExpandedActivity(id)
  }

  const removeActivity = (id: string) => {
    onChange({ processingSystems: activities.filter(a => a.id !== id) })
    if (expandedActivity === id) setExpandedActivity(null)
  }

  // Count active activities per department
  const deptActivityCount = (dept: ActivityDepartment) =>
    dept.activities.filter(a => activeIds.has(a.id)).length

  // Render a data category checkbox with info tooltip
  const renderCategoryCheckbox = (cat: { id: string; label: string; desc: string; info: string }, activity: ProcessingActivity, variant: 'normal' | 'extra' | 'art9' | 'art9-extra', template?: ActivityTemplate | null) => {
    const infoText = template?.categoryInfo?.[cat.id] || cat.info
    const isInfoExpanded = expandedInfoCat === `${activity.id}-${cat.id}`
    const colorClasses = variant.startsWith('art9')
      ? { check: 'text-red-600 focus:ring-red-500', hover: 'hover:bg-red-100', text: variant === 'art9-extra' ? 'text-gray-500' : 'text-gray-700' }
      : { check: 'text-purple-600 focus:ring-purple-500', hover: 'hover:bg-gray-100', text: variant === 'extra' ? 'text-gray-500' : 'text-gray-700' }

    // Split info text to highlight retention periods
    const aufbewahrungIdx = infoText.indexOf('Aufbewahrung:')
    const loeschfristIdx = infoText.indexOf('Löschfrist')
    const speicherdauerIdx = infoText.indexOf('Speicherdauer:')
    const retentionIdx = [aufbewahrungIdx, loeschfristIdx, speicherdauerIdx].filter(i => i >= 0).sort((a, b) => a - b)[0] ?? -1
    const hasRetention = retentionIdx >= 0
    const mainText = hasRetention ? infoText.slice(0, retentionIdx).replace(/\.\s*$/, '') : infoText
    const retentionText = hasRetention ? infoText.slice(retentionIdx) : ''

    return (
      <div key={cat.id}>
        <label className={`flex items-center gap-2 text-xs p-1.5 rounded ${colorClasses.hover} cursor-pointer`}>
          <input type="checkbox" checked={activity.data_categories.includes(cat.id)} onChange={() => toggleDataCategory(activity.id, cat.id)} className={`w-3.5 h-3.5 ${colorClasses.check} rounded`} />
          <span className={colorClasses.text}>{cat.label}</span>
          <button
            type="button"
            onClick={e => { e.preventDefault(); e.stopPropagation(); setExpandedInfoCat(isInfoExpanded ? null : `${activity.id}-${cat.id}`) }}
            className="ml-auto w-4 h-4 flex items-center justify-center rounded-full bg-gray-200 hover:bg-gray-300 text-gray-500 text-[10px] font-bold flex-shrink-0"
            title={infoText}
          >
            i
          </button>
        </label>
        {isInfoExpanded && (
          <div className="ml-7 mt-1 mb-1 px-2 py-1.5 bg-blue-50 border border-blue-100 rounded text-[11px] text-blue-800">
            {hasRetention ? (
              <>
                <span>{mainText}</span>
                <span className="block mt-1 px-1.5 py-0.5 bg-amber-50 border border-amber-200 rounded text-amber-800">
                  <span className="mr-1">&#128339;</span>{retentionText}
                </span>
              </>
            ) : infoText}
          </div>
        )}
      </div>
    )
  }

  // Render activity detail panel (shared between template and custom)
  const renderActivityDetail = (activity: ProcessingActivity, template: ActivityTemplate | null) => {
    const primaryIds = new Set(template?.primary_categories || [])
    const art9Ids = new Set(template?.art9_relevant || [])
    const primaryCats = ALL_DATA_CATEGORIES.filter(c => primaryIds.has(c.id))
    const extraCats = ALL_DATA_CATEGORIES.filter(c => !primaryIds.has(c.id))
    const relevantArt9 = ALL_SPECIAL_CATEGORIES.filter(c => art9Ids.has(c.id))
    const otherArt9 = ALL_SPECIAL_CATEGORIES.filter(c => !art9Ids.has(c.id))
    const showingExtra = showExtraCategories.has(activity.id)
    // For custom activities, show all categories
    const isCustom = !template || activity.custom

    return (
      <div className="ml-4 mt-2 p-4 bg-gray-50 rounded-lg border border-gray-200 space-y-4">
        {/* Legal hint (e.g. ArbZG for Arbeitszeiterfassung) */}
        {template?.legalHint && (
          <div className="flex items-start gap-2 px-3 py-2 bg-amber-50 border border-amber-200 rounded-lg">
            <span className="text-amber-600 text-sm mt-0.5">&#9888;</span>
            <span className="text-xs text-amber-800">{template.legalHint}</span>
          </div>
        )}

        {/* Custom: name + purpose fields */}
        {isCustom && (
          <div className="grid grid-cols-1 gap-3">
            <input type="text" value={activity.name} onChange={e => updateActivity(activity.id, { name: e.target.value })} placeholder="Name der Verarbeitungstätigkeit" className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent" />
            <input type="text" value={activity.purpose} onChange={e => updateActivity(activity.id, { purpose: e.target.value })} placeholder="Zweck der Verarbeitung" className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent" />
          </div>
        )}

        {/* Service Provider option (e.g. for Lohn- und Gehaltsabrechnung) */}
        {template?.hasServiceProvider && (
          <div className="bg-blue-50 rounded-lg p-3 border border-blue-100 space-y-2">
            <label className="flex items-center gap-2 text-xs cursor-pointer">
              <input
                type="checkbox"
                checked={activity.usesServiceProvider || false}
                onChange={e => updateActivity(activity.id, {
                  usesServiceProvider: e.target.checked,
                  ...(!e.target.checked ? { serviceProviderName: '' } : {})
                })}
                className="w-3.5 h-3.5 text-blue-600 rounded focus:ring-blue-500"
              />
              <span className="text-blue-800 font-medium">Externer Dienstleister wird eingesetzt</span>
            </label>
            {activity.usesServiceProvider && (
              <div className="ml-6">
                <input
                  type="text"
                  value={activity.serviceProviderName || ''}
                  onChange={e => updateActivity(activity.id, { serviceProviderName: e.target.value })}
                  placeholder="Name des Dienstleisters (optional)"
                  className="w-full px-3 py-1.5 border border-blue-200 rounded text-xs focus:ring-2 focus:ring-blue-400 focus:border-transparent bg-white"
                />
                <p className="text-[10px] text-blue-600 mt-1">Wird als Auftragsverarbeiter (AVV) im VVT erfasst.</p>
              </div>
            )}
          </div>
        )}

        {/* Primary Data Categories */}
        <div>
          <label className="block text-xs font-medium text-gray-600 mb-2">Betroffene Datenkategorien</label>
          <div className="grid grid-cols-2 gap-1.5">
            {(isCustom ? ALL_DATA_CATEGORIES : primaryCats).map(cat =>
              renderCategoryCheckbox(cat, activity, 'normal', template)
            )}
          </div>
        </div>

        {/* Extra categories (expandable, only for template-based) */}
        {!isCustom && extraCats.length > 0 && (
          <div>
            <button type="button" onClick={() => toggleExtraCategories(activity.id)} className="text-xs text-purple-600 hover:text-purple-800">
              {showingExtra ? '▾ Weitere Kategorien ausblenden' : `▸ Weitere ${extraCats.length} Kategorien anzeigen`}
            </button>
            {showingExtra && (
              <div className="grid grid-cols-2 gap-1.5 mt-2">
                {extraCats.map(cat => renderCategoryCheckbox(cat, activity, 'extra', template))}
              </div>
            )}
          </div>
        )}

        {/* Art. 9 Special Categories — only show if relevant for this activity */}
        {(isCustom ? ALL_SPECIAL_CATEGORIES.length > 0 : relevantArt9.length > 0) && (
          <div className="bg-red-50 rounded-lg p-3 border border-red-100">
            <label className="block text-xs font-medium text-red-700 mb-2">
              Besondere Kategorien (Art. 9 DSGVO)
            </label>
            <div className="grid grid-cols-2 gap-1.5">
              {(isCustom ? ALL_SPECIAL_CATEGORIES : relevantArt9).map(cat =>
                renderCategoryCheckbox(cat, activity, 'art9', template)
              )}
            </div>
            {/* Show remaining Art. 9 categories if expanded */}
            {!isCustom && otherArt9.length > 0 && showingExtra && (
              <div className="grid grid-cols-2 gap-1.5 mt-2 pt-2 border-t border-red-100">
                {otherArt9.map(cat => renderCategoryCheckbox(cat, activity, 'art9-extra', template))}
              </div>
            )}
          </div>
        )}

        <button type="button" onClick={() => removeActivity(activity.id)} className="text-xs text-red-500 hover:text-red-700">
          Verarbeitungstätigkeit entfernen
        </button>
      </div>
    )
  }

  return (
    <div className="space-y-8">
      {/* Processing Activities grouped by department */}
      <div>
        <h3 className="text-sm font-medium text-gray-700 mb-1">Verarbeitungstätigkeiten</h3>
        <p className="text-xs text-gray-500 mb-4">
          Wählen Sie pro Abteilung aus, welche Verarbeitungen stattfinden. Diese bilden die Grundlage für Ihr Verarbeitungsverzeichnis (VVT) nach Art. 30 DSGVO.
        </p>

        <div className="space-y-4">
          {departments.map(dept => {
            const isCollapsed = collapsedDepts.has(dept.id)
            const activeCount = deptActivityCount(dept)

            return (
              <div key={dept.id} className="border border-gray-200 rounded-lg overflow-hidden">
                {/* Department header */}
                <button
                  type="button"
                  onClick={() => toggleDeptCollapse(dept.id)}
                  className="w-full flex items-center gap-3 px-4 py-3 bg-gray-50 hover:bg-gray-100 transition-colors text-left"
                >
                  <span className="text-base">{dept.icon}</span>
                  <span className="text-sm font-medium text-gray-900 flex-1">{dept.name}</span>
                  {activeCount > 0 && (
                    <span className="text-xs bg-purple-100 text-purple-700 px-2 py-0.5 rounded-full">
                      {activeCount} aktiv
                    </span>
                  )}
                  <svg className={`w-4 h-4 text-gray-400 transition-transform ${isCollapsed ? '' : 'rotate-180'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                  </svg>
                </button>

                {/* Department activities */}
                {!isCollapsed && (
                  <div className="p-3 space-y-2">
                    {dept.activities.map(template => {
                      const isActive = activeIds.has(template.id)
                      const activity = activities.find(a => a.id === template.id)
                      const isExpanded = expandedActivity === template.id

                      return (
                        <div key={template.id}>
                          <div
                            className={`flex items-center gap-3 p-3 rounded-lg border-2 cursor-pointer transition-all ${
                              isActive ? 'border-purple-500 bg-purple-50' : 'border-gray-100 hover:border-purple-300'
                            }`}
                            onClick={() => {
                              if (!isActive) {
                                toggleActivity(template, dept.id)
                                setExpandedActivity(template.id)
                              } else {
                                setExpandedActivity(isExpanded ? null : template.id)
                              }
                            }}
                          >
                            <input
                              type="checkbox"
                              checked={isActive}
                              onChange={e => { e.stopPropagation(); toggleActivity(template, dept.id) }}
                              className="w-4 h-4 text-purple-600 rounded focus:ring-purple-500 flex-shrink-0"
                            />
                            <div className="flex-1 min-w-0">
                              <div className="flex items-center gap-2">
                                <span className="text-sm font-medium text-gray-900">{template.name}</span>
                                {template.legalHint && (
                                  <span className="text-[10px] bg-amber-100 text-amber-700 px-1.5 py-0.5 rounded font-medium whitespace-nowrap">Pflicht</span>
                                )}
                                {template.hasServiceProvider && (
                                  <span className="text-[10px] bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded font-medium whitespace-nowrap">AVV-relevant</span>
                                )}
                              </div>
                              <p className="text-xs text-gray-500 truncate">{template.purpose}</p>
                            </div>
                            {isActive && (
                              <span className="text-xs text-purple-600 flex-shrink-0">
                                {activity?.data_categories.length || 0} Kat.
                              </span>
                            )}
                            {isActive && (
                              <svg className={`w-4 h-4 text-gray-400 transition-transform ${isExpanded ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                              </svg>
                            )}
                          </div>

                          {isActive && isExpanded && activity && renderActivityDetail(activity, template)}
                        </div>
                      )
                    })}
                  </div>
                )}
              </div>
            )
          })}
        </div>

        {/* Custom activities */}
        {activities.filter(a => a.custom).map(activity => (
          <div key={activity.id} className="mt-2">
            <div
              className="flex items-center gap-3 p-3 rounded-lg border-2 border-purple-500 bg-purple-50 cursor-pointer"
              onClick={() => setExpandedActivity(expandedActivity === activity.id ? null : activity.id)}
            >
              <span className="w-4 h-4 flex items-center justify-center text-purple-600 flex-shrink-0 text-sm">+</span>
              <div className="flex-1 min-w-0">
                <span className="text-sm font-medium text-gray-900">{activity.name || 'Neue Verarbeitungstätigkeit'}</span>
              </div>
              <svg className={`w-4 h-4 text-gray-400 transition-transform ${expandedActivity === activity.id ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
              </svg>
            </div>
            {expandedActivity === activity.id && renderActivityDetail(activity, null)}
          </div>
        ))}

        {/* Add custom activity button */}
        <button
          type="button"
          onClick={addCustomActivity}
          className="w-full mt-3 px-3 py-2 text-sm text-purple-700 bg-purple-50 border-2 border-dashed border-purple-200 rounded-lg hover:bg-purple-100 hover:border-purple-300 transition-colors"
        >
          + Eigene Verarbeitungstätigkeit hinzufügen
        </button>
      </div>
    </div>
  )
}

// =============================================================================
// STEP 7: KI-SYSTEME
// =============================================================================

interface AISystemTemplate {
  id: string
  name: string
  vendor: string
  category: string
  icon: string
  typicalPurposes: string[]
  dataWarning?: string
  processes_personal_data_likely: boolean
}

const AI_SYSTEM_TEMPLATES: { category: string; icon: string; systems: AISystemTemplate[] }[] = [
  {
    category: 'Text-KI / Chatbots',
    icon: '\uD83D\uDCAC',
    systems: [
      { id: 'chatgpt', name: 'ChatGPT', vendor: 'OpenAI', category: 'Text-KI / Chatbots', icon: '\uD83D\uDCAC', typicalPurposes: ['Textgenerierung', 'Kundensupport', 'Zusammenfassungen', 'Recherche'], dataWarning: 'Datenverarbeitung in den USA. Eingaben koennen fuer Training verwendet werden (opt-out moeglich).', processes_personal_data_likely: true },
      { id: 'claude', name: 'Claude', vendor: 'Anthropic', category: 'Text-KI / Chatbots', icon: '\uD83D\uDCAC', typicalPurposes: ['Textgenerierung', 'Analyse', 'Zusammenfassungen', 'Code-Review'], dataWarning: 'Datenverarbeitung in den USA. Eingaben werden NICHT fuer Training verwendet.', processes_personal_data_likely: true },
      { id: 'gemini', name: 'Google Gemini', vendor: 'Google', category: 'Text-KI / Chatbots', icon: '\uD83D\uDCAC', typicalPurposes: ['Textgenerierung', 'Recherche', 'Zusammenfassungen'], dataWarning: 'Datenverarbeitung in den USA/EU je nach Einstellung.', processes_personal_data_likely: true },
      { id: 'perplexity', name: 'Perplexity', vendor: 'Perplexity AI', category: 'Text-KI / Chatbots', icon: '\uD83D\uDCAC', typicalPurposes: ['Websuche mit KI', 'Recherche', 'Zusammenfassungen'], dataWarning: 'Websuche + KI. Eingaben werden verarbeitet.', processes_personal_data_likely: false },
    ],
  },
  {
    category: 'Office / Produktivitaet',
    icon: '\uD83D\uDCCE',
    systems: [
      { id: 'copilot365', name: 'Microsoft 365 Copilot', vendor: 'Microsoft', category: 'Office / Produktivitaet', icon: '\uD83D\uDCCE', typicalPurposes: ['E-Mail-Entwuerfe', 'Dokument-Zusammenfassung', 'Praesentationen', 'Excel-Analysen'], dataWarning: 'In M365-Tenant integriert. Daten bleiben im Tenant, aber: KI-Verarbeitung ggf. in den USA.', processes_personal_data_likely: true },
      { id: 'google-workspace-ai', name: 'Google Workspace AI', vendor: 'Google', category: 'Office / Produktivitaet', icon: '\uD83D\uDCCE', typicalPurposes: ['E-Mail-Entwuerfe', 'Dokument-Zusammenfassung', 'Tabellen-Analysen'], dataWarning: 'Duet AI in Docs, Sheets, Gmail. Datenverarbeitung je nach Workspace-Region.', processes_personal_data_likely: true },
      { id: 'notion-ai', name: 'Notion AI', vendor: 'Notion', category: 'Office / Produktivitaet', icon: '\uD83D\uDCCE', typicalPurposes: ['Texterstellung', 'Zusammenfassungen', 'Aufgabenverwaltung'], dataWarning: 'Datenverarbeitung in den USA.', processes_personal_data_likely: false },
      { id: 'grammarly', name: 'Grammarly', vendor: 'Grammarly', category: 'Office / Produktivitaet', icon: '\uD83D\uDCCE', typicalPurposes: ['Textkorrektur', 'Stiloptimierung', 'Tonalitaet'], dataWarning: 'Textanalyse, Datenverarbeitung in den USA.', processes_personal_data_likely: false },
    ],
  },
  {
    category: 'Code-Assistenz',
    icon: '\uD83D\uDCBB',
    systems: [
      { id: 'github-copilot', name: 'GitHub Copilot', vendor: 'Microsoft/GitHub', category: 'Code-Assistenz', icon: '\uD83D\uDCBB', typicalPurposes: ['Code-Vorschlaege', 'Code-Generierung', 'Dokumentation'], dataWarning: 'Code-Vorschlaege basierend auf Kontext. Code-Snippets werden verarbeitet.', processes_personal_data_likely: false },
      { id: 'cursor', name: 'Cursor / Windsurf', vendor: 'Cursor Inc.', category: 'Code-Assistenz', icon: '\uD83D\uDCBB', typicalPurposes: ['Code-Generierung', 'Refactoring', 'Debugging'], dataWarning: 'KI-Code-Editor. Code wird an KI-Backend uebermittelt.', processes_personal_data_likely: false },
      { id: 'codewhisperer', name: 'Amazon CodeWhisperer', vendor: 'AWS', category: 'Code-Assistenz', icon: '\uD83D\uDCBB', typicalPurposes: ['Code-Vorschlaege', 'Sicherheits-Scans'], dataWarning: 'Code-Vorschlaege. Opt-out fuer Code-Sharing moeglich.', processes_personal_data_likely: false },
    ],
  },
  {
    category: 'Bildgenerierung',
    icon: '\uD83C\uDFA8',
    systems: [
      { id: 'dalle', name: 'DALL-E / ChatGPT Bildgenerierung', vendor: 'OpenAI', category: 'Bildgenerierung', icon: '\uD83C\uDFA8', typicalPurposes: ['Bildgenerierung', 'Marketing-Material', 'Illustrationen'], dataWarning: 'Bildgenerierung. Prompts werden verarbeitet.', processes_personal_data_likely: false },
      { id: 'midjourney', name: 'Midjourney', vendor: 'Midjourney Inc.', category: 'Bildgenerierung', icon: '\uD83C\uDFA8', typicalPurposes: ['Bildgenerierung', 'Design-Konzepte', 'Illustrationen'], dataWarning: 'Bildgenerierung via Discord. Prompts sind oeffentlich sichtbar (ausser Pro-Plan).', processes_personal_data_likely: false },
      { id: 'firefly', name: 'Adobe Firefly', vendor: 'Adobe', category: 'Bildgenerierung', icon: '\uD83C\uDFA8', typicalPurposes: ['Bildgenerierung', 'Bildbearbeitung', 'Design'], dataWarning: 'In Creative Cloud integriert. Trainiert auf lizenzierten Inhalten.', processes_personal_data_likely: false },
    ],
  },
  {
    category: 'Uebersetzung / Sprache',
    icon: '\uD83C\uDF10',
    systems: [
      { id: 'deepl', name: 'DeepL', vendor: 'DeepL SE', category: 'Uebersetzung / Sprache', icon: '\uD83C\uDF10', typicalPurposes: ['Uebersetzung', 'Dokumentenuebersetzung'], dataWarning: 'Deutscher Anbieter, Server in EU. DeepL Pro: Texte werden NICHT gespeichert.', processes_personal_data_likely: false },
      { id: 'deepl-write', name: 'DeepL Write', vendor: 'DeepL SE', category: 'Uebersetzung / Sprache', icon: '\uD83C\uDF10', typicalPurposes: ['Textoptimierung', 'Stilverbesserung'], dataWarning: 'Deutscher Anbieter, Server in EU. Gleiche Datenschutz-Bedingungen wie DeepL.', processes_personal_data_likely: false },
    ],
  },
  {
    category: 'CRM / Sales KI',
    icon: '\uD83D\uDCCA',
    systems: [
      { id: 'salesforce-einstein', name: 'Salesforce Einstein', vendor: 'Salesforce', category: 'CRM / Sales KI', icon: '\uD83D\uDCCA', typicalPurposes: ['Lead-Scoring', 'Prognosen', 'Empfehlungen'], dataWarning: 'In Salesforce integriert. Verarbeitet CRM-Daten.', processes_personal_data_likely: true },
      { id: 'hubspot-ai', name: 'HubSpot AI', vendor: 'HubSpot', category: 'CRM / Sales KI', icon: '\uD83D\uDCCA', typicalPurposes: ['E-Mail-Generierung', 'Lead-Scoring', 'Content-Erstellung'], dataWarning: 'KI-Features in HubSpot CRM. Datenverarbeitung in USA/EU.', processes_personal_data_likely: true },
    ],
  },
  {
    category: 'Interne / Eigene Systeme',
    icon: '\uD83C\uDFE2',
    systems: [
      { id: 'internal-ai', name: 'Eigenes KI-System', vendor: 'Intern', category: 'Interne / Eigene Systeme', icon: '\uD83C\uDFE2', typicalPurposes: ['Interne Analyse', 'Automatisierung', 'Prozessoptimierung'], dataWarning: undefined, processes_personal_data_likely: false },
    ],
  },
]

function StepAISystems({
  data,
  onChange,
}: {
  data: Partial<CompanyProfile> & { aiSystems?: AISystem[] }
  onChange: (updates: Record<string, unknown>) => void
}) {
  const aiSystems: AISystem[] = (data as any).aiSystems || []
  const [expandedSystem, setExpandedSystem] = useState<string | null>(null)
  const [collapsedCategories, setCollapsedCategories] = useState<Set<string>>(new Set())

  const activeIds = new Set(aiSystems.map(a => a.id))

  const toggleTemplateSystem = (template: AISystemTemplate) => {
    if (activeIds.has(template.id)) {
      onChange({ aiSystems: aiSystems.filter(a => a.id !== template.id) })
      if (expandedSystem === template.id) setExpandedSystem(null)
    } else {
      const newSystem: AISystem = {
        id: template.id,
        name: template.name,
        vendor: template.vendor,
        purpose: template.typicalPurposes.join(', '),
        purposes: [],
        processes_personal_data: template.processes_personal_data_likely,
        isCustom: false,
      }
      onChange({ aiSystems: [...aiSystems, newSystem] })
      setExpandedSystem(template.id)
    }
  }

  const updateAISystem = (id: string, updates: Partial<AISystem>) => {
    onChange({
      aiSystems: aiSystems.map(a => a.id === id ? { ...a, ...updates } : a),
    })
  }

  const togglePurpose = (systemId: string, purpose: string) => {
    const system = aiSystems.find(a => a.id === systemId)
    if (!system) return
    const purposes = system.purposes || []
    const updated = purposes.includes(purpose)
      ? purposes.filter(p => p !== purpose)
      : [...purposes, purpose]
    updateAISystem(systemId, { purposes: updated, purpose: updated.join(', ') })
  }

  const addCustomSystem = () => {
    const id = `custom_ai_${Date.now()}`
    const newSystem: AISystem = {
      id,
      name: '',
      vendor: '',
      purpose: '',
      processes_personal_data: false,
      isCustom: true,
    }
    onChange({ aiSystems: [...aiSystems, newSystem] })
    setExpandedSystem(id)
  }

  const removeSystem = (id: string) => {
    onChange({ aiSystems: aiSystems.filter(a => a.id !== id) })
    if (expandedSystem === id) setExpandedSystem(null)
  }

  const toggleCategoryCollapse = (category: string) => {
    setCollapsedCategories(prev => {
      const next = new Set(prev)
      if (next.has(category)) next.delete(category); else next.add(category)
      return next
    })
  }

  const categoryActiveCount = (systems: AISystemTemplate[]) =>
    systems.filter(s => activeIds.has(s.id)).length

  return (
    <div className="space-y-6">
      <div>
        <h3 className="text-sm font-medium text-gray-700 mb-1">KI-Systeme im Einsatz</h3>
        <p className="text-xs text-gray-500 mb-4">
          Waehlen Sie die KI-Systeme aus, die in Ihrem Unternehmen eingesetzt werden. Dies dient der Erfassung fuer den EU AI Act und die DSGVO-Dokumentation.
        </p>
      </div>

      {/* Template categories */}
      <div className="space-y-4">
        {AI_SYSTEM_TEMPLATES.map(group => {
          const isCollapsed = collapsedCategories.has(group.category)
          const activeCount = categoryActiveCount(group.systems)

          return (
            <div key={group.category} className="border border-gray-200 rounded-lg overflow-hidden">
              {/* Category header */}
              <button
                type="button"
                onClick={() => toggleCategoryCollapse(group.category)}
                className="w-full flex items-center gap-3 px-4 py-3 bg-gray-50 hover:bg-gray-100 transition-colors text-left"
              >
                <span className="text-base">{group.icon}</span>
                <span className="text-sm font-medium text-gray-900 flex-1">{group.category}</span>
                {activeCount > 0 && (
                  <span className="text-xs bg-purple-100 text-purple-700 px-2 py-0.5 rounded-full">
                    {activeCount} aktiv
                  </span>
                )}
                <svg className={`w-4 h-4 text-gray-400 transition-transform ${isCollapsed ? '' : 'rotate-180'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                </svg>
              </button>

              {/* Systems in category */}
              {!isCollapsed && (
                <div className="p-3 space-y-2">
                  {group.systems.map(template => {
                    const isActive = activeIds.has(template.id)
                    const system = aiSystems.find(a => a.id === template.id)
                    const isExpanded = expandedSystem === template.id

                    return (
                      <div key={template.id}>
                        <div
                          className={`flex items-center gap-3 p-3 rounded-lg border-2 cursor-pointer transition-all ${
                            isActive ? 'border-purple-500 bg-purple-50' : 'border-gray-100 hover:border-purple-300'
                          }`}
                          onClick={() => {
                            if (!isActive) {
                              toggleTemplateSystem(template)
                            } else {
                              setExpandedSystem(isExpanded ? null : template.id)
                            }
                          }}
                        >
                          <input
                            type="checkbox"
                            checked={isActive}
                            onChange={e => { e.stopPropagation(); toggleTemplateSystem(template) }}
                            className="w-4 h-4 text-purple-600 rounded focus:ring-purple-500 flex-shrink-0"
                          />
                          <div className="flex-1 min-w-0">
                            <div className="text-sm font-medium text-gray-900">{template.name}</div>
                            <p className="text-xs text-gray-500">{template.vendor}</p>
                          </div>
                          {isActive && (
                            <svg className={`w-4 h-4 text-gray-400 transition-transform ${isExpanded ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                            </svg>
                          )}
                        </div>

                        {/* Detail panel */}
                        {isActive && isExpanded && system && (
                          <div className="ml-4 mt-2 p-4 bg-gray-50 rounded-lg border border-gray-200 space-y-4">
                            {/* Purposes as chips */}
                            <div>
                              <label className="block text-xs font-medium text-gray-600 mb-2">Einsatzzweck</label>
                              <div className="flex flex-wrap gap-2">
                                {template.typicalPurposes.map(purpose => (
                                  <button
                                    key={purpose}
                                    type="button"
                                    onClick={() => togglePurpose(template.id, purpose)}
                                    className={`px-3 py-1.5 text-xs rounded-full border transition-all ${
                                      (system.purposes || []).includes(purpose)
                                        ? 'bg-purple-100 border-purple-300 text-purple-700'
                                        : 'bg-white border-gray-200 text-gray-600 hover:border-purple-200'
                                    }`}
                                  >
                                    {purpose}
                                  </button>
                                ))}
                              </div>
                              <input
                                type="text"
                                value={system.notes || ''}
                                onChange={e => updateAISystem(template.id, { notes: e.target.value })}
                                placeholder="Weitere Einsatzzwecke / Anmerkungen..."
                                className="mt-2 w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                              />
                            </div>

                            {/* Data warning */}
                            {template.dataWarning && (
                              <div className={`flex items-start gap-2 px-3 py-2 rounded-lg ${
                                template.dataWarning.includes('EU') || template.dataWarning.includes('Deutscher Anbieter') || template.dataWarning.includes('NICHT')
                                  ? 'bg-blue-50 border border-blue-200'
                                  : 'bg-amber-50 border border-amber-200'
                              }`}>
                                <span className="text-sm mt-0.5">{template.dataWarning.includes('EU') || template.dataWarning.includes('Deutscher Anbieter') ? '\u2139\uFE0F' : '\u26A0\uFE0F'}</span>
                                <span className="text-xs text-gray-800">{template.dataWarning}</span>
                              </div>
                            )}

                            {/* Personal data checkbox */}
                            <label className="flex items-center gap-2 px-1 cursor-pointer">
                              <input
                                type="checkbox"
                                checked={system.processes_personal_data}
                                onChange={e => updateAISystem(template.id, { processes_personal_data: e.target.checked })}
                                className="w-4 h-4 text-purple-600 rounded focus:ring-purple-500"
                              />
                              <span className="text-sm text-gray-700">Verarbeitet personenbezogene Daten</span>
                            </label>

                            <button type="button" onClick={() => removeSystem(template.id)} className="text-xs text-red-500 hover:text-red-700">
                              KI-System entfernen
                            </button>
                          </div>
                        )}
                      </div>
                    )
                  })}
                </div>
              )}
            </div>
          )
        })}
      </div>

      {/* Custom AI systems */}
      {aiSystems.filter(a => a.isCustom).map(system => (
        <div key={system.id} className="mt-2">
          <div
            className="flex items-center gap-3 p-3 rounded-lg border-2 border-purple-500 bg-purple-50 cursor-pointer"
            onClick={() => setExpandedSystem(expandedSystem === system.id ? null : system.id)}
          >
            <span className="w-4 h-4 flex items-center justify-center text-purple-600 flex-shrink-0 text-sm">+</span>
            <div className="flex-1 min-w-0">
              <span className="text-sm font-medium text-gray-900">{system.name || 'Neues KI-System'}</span>
              {system.vendor && <span className="text-xs text-gray-500 ml-2">({system.vendor})</span>}
            </div>
            <svg className={`w-4 h-4 text-gray-400 transition-transform ${expandedSystem === system.id ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
            </svg>
          </div>
          {expandedSystem === system.id && (
            <div className="ml-4 mt-2 p-4 bg-gray-50 rounded-lg border border-gray-200 space-y-3">
              <div className="grid grid-cols-2 gap-3">
                <input type="text" value={system.name} onChange={e => updateAISystem(system.id, { name: e.target.value })} placeholder="Name (z.B. ChatGPT, Copilot)" className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent" />
                <input type="text" value={system.vendor} onChange={e => updateAISystem(system.id, { vendor: e.target.value })} placeholder="Anbieter (z.B. OpenAI, Microsoft)" className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent" />
              </div>
              <input type="text" value={system.purpose} onChange={e => updateAISystem(system.id, { purpose: e.target.value })} placeholder="Einsatzzweck (z.B. Kundensupport, Code-Assistenz)" className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent" />
              <label className="flex items-center gap-2 px-1 cursor-pointer">
                <input
                  type="checkbox"
                  checked={system.processes_personal_data}
                  onChange={e => updateAISystem(system.id, { processes_personal_data: e.target.checked })}
                  className="w-4 h-4 text-purple-600 rounded focus:ring-purple-500"
                />
                <span className="text-sm text-gray-700">Verarbeitet personenbezogene Daten</span>
              </label>
              <button type="button" onClick={() => removeSystem(system.id)} className="text-xs text-red-500 hover:text-red-700">
                KI-System entfernen
              </button>
            </div>
          )}
        </div>
      ))}

      {/* Add custom system button */}
      <button
        type="button"
        onClick={addCustomSystem}
        className="w-full mt-3 px-3 py-2 text-sm text-purple-700 bg-purple-50 border-2 border-dashed border-purple-200 rounded-lg hover:bg-purple-100 hover:border-purple-300 transition-colors"
      >
        + Eigenes KI-System hinzufuegen
      </button>

      {/* AI Act module link */}
      <div className="mt-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
        <div className="flex items-start gap-3">
          <span className="text-lg">{'\u2139\uFE0F'}</span>
          <div>
            <h4 className="text-sm font-medium text-blue-900 mb-1">AI Act Risikoeinstufung</h4>
            <p className="text-xs text-blue-800 mb-3">
              Die detaillierte Risikoeinstufung Ihrer KI-Systeme nach EU AI Act (verboten / hochriskant / begrenzt / minimal) erfolgt automatisch im AI-Act-Modul.
            </p>
            <a
              href="/sdk/ai-act"
              className="inline-flex items-center gap-1 text-sm font-medium text-blue-700 hover:text-blue-900"
            >
              Zum AI-Act-Modul
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  )
}

// =============================================================================
// STEP 6: RECHTLICHER RAHMEN (was Step 8, renumbered)
// =============================================================================

const CERTIFICATIONS = [
  { id: 'iso27001', label: 'ISO 27001', desc: 'Informationssicherheits-Managementsystem' },
  { id: 'iso27701', label: 'ISO 27701', desc: 'Datenschutz-Managementsystem' },
  { id: 'iso9001', label: 'ISO 9001', desc: 'Qualitaetsmanagement' },
  { id: 'iso14001', label: 'ISO 14001', desc: 'Umweltmanagement' },
  { id: 'iso22301', label: 'ISO 22301', desc: 'Business Continuity Management' },
  { id: 'iso42001', label: 'ISO 42001', desc: 'KI-Managementsystem' },
  { id: 'tisax', label: 'TISAX', desc: 'Trusted Information Security Assessment Exchange (Automotive)' },
  { id: 'soc2', label: 'SOC 2', desc: 'Service Organization Controls (Typ I/II)' },
  { id: 'c5', label: 'C5', desc: 'Cloud Computing Compliance Criteria Catalogue (BSI)' },
  { id: 'bsi_grundschutz', label: 'BSI IT-Grundschutz', desc: 'IT-Grundschutz-Zertifikat oder Testat' },
  { id: 'pci_dss', label: 'PCI DSS', desc: 'Payment Card Industry Data Security Standard' },
  { id: 'hipaa', label: 'HIPAA', desc: 'Health Insurance Portability and Accountability Act' },
  { id: 'other', label: 'Sonstige', desc: 'Andere Zertifizierungen' },
]

interface CertificationEntry {
  certId: string
  certifier?: string
  lastDate?: string
  customName?: string
}

function StepLegalFramework({
  data,
  onChange,
}: {
  data: Partial<CompanyProfile>
  onChange: (updates: Record<string, unknown>) => void
}) {
  const contacts = (data as any).technicalContacts || []
  const existingCerts: CertificationEntry[] = (data as any).existingCertifications || []
  const targetCerts: string[] = (data as any).targetCertifications || []
  const targetCertOther: string = (data as any).targetCertificationOther || ''

  // Toggle existing certification
  const toggleExistingCert = (certId: string) => {
    const exists = existingCerts.find((c: CertificationEntry) => c.certId === certId)
    if (exists) {
      onChange({ existingCertifications: existingCerts.filter((c: CertificationEntry) => c.certId !== certId) })
    } else {
      onChange({ existingCertifications: [...existingCerts, { certId }] })
    }
  }

  const updateExistingCert = (certId: string, updates: Partial<CertificationEntry>) => {
    onChange({
      existingCertifications: existingCerts.map((c: CertificationEntry) =>
        c.certId === certId ? { ...c, ...updates } : c
      ),
    })
  }

  // Toggle target certification
  const toggleTargetCert = (certId: string) => {
    if (targetCerts.includes(certId)) {
      onChange({ targetCertifications: targetCerts.filter((c: string) => c !== certId) })
    } else {
      onChange({ targetCertifications: [...targetCerts, certId] })
    }
  }

  const addContact = () => {
    onChange({ technicalContacts: [...contacts, { name: '', role: '', email: '' }] })
  }
  const removeContact = (i: number) => {
    onChange({ technicalContacts: contacts.filter((_: { name: string; role: string; email: string }, idx: number) => idx !== i) })
  }
  const updateContact = (i: number, updates: Partial<{ name: string; role: string; email: string }>) => {
    const updated = [...contacts]
    updated[i] = { ...updated[i], ...updates }
    onChange({ technicalContacts: updated })
  }

  return (
    <div className="space-y-8">
      {/* Bestehende Zertifizierungen */}
      <div>
        <h3 className="text-sm font-medium text-gray-700 mb-1">Bestehende Zertifizierungen</h3>
        <p className="text-sm text-gray-500 mb-3">Ueber welche Zertifizierungen verfuegt Ihr Unternehmen aktuell? Mehrfachauswahl moeglich.</p>
        <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
          {CERTIFICATIONS.map(cert => {
            const selected = existingCerts.some((c: CertificationEntry) => c.certId === cert.id)
            return (
              <button
                key={cert.id}
                type="button"
                onClick={() => toggleExistingCert(cert.id)}
                className={`p-3 rounded-lg border-2 text-left transition-all ${
                  selected
                    ? 'border-purple-500 bg-purple-50 text-purple-700'
                    : 'border-gray-200 hover:border-purple-300 text-gray-700'
                }`}
              >
                <div className="font-medium text-sm">{cert.label}</div>
                <div className="text-xs text-gray-500 mt-0.5">{cert.desc}</div>
              </button>
            )
          })}
        </div>

        {/* Details fuer ausgewaehlte Zertifizierungen */}
        {existingCerts.length > 0 && (
          <div className="mt-4 space-y-3">
            {existingCerts.map((entry: CertificationEntry) => {
              const cert = CERTIFICATIONS.find(c => c.id === entry.certId)
              const label = cert?.label || entry.certId
              return (
                <div key={entry.certId} className="p-4 bg-purple-50 border border-purple-200 rounded-lg">
                  <div className="font-medium text-sm text-purple-800 mb-2">
                    {entry.certId === 'other' ? 'Sonstige Zertifizierung' : label}
                  </div>
                  <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
                    {entry.certId === 'other' && (
                      <input
                        type="text"
                        value={entry.customName || ''}
                        onChange={e => updateExistingCert(entry.certId, { customName: e.target.value })}
                        placeholder="Name der Zertifizierung"
                        className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                      />
                    )}
                    <input
                      type="text"
                      value={entry.certifier || ''}
                      onChange={e => updateExistingCert(entry.certId, { certifier: e.target.value })}
                      placeholder="Zertifizierer (z.B. TÜV, DEKRA)"
                      className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                    />
                    <input
                      type="date"
                      value={entry.lastDate || ''}
                      onChange={e => updateExistingCert(entry.certId, { lastDate: e.target.value })}
                      title="Datum der letzten Zertifizierung"
                      className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                    />
                  </div>
                </div>
              )
            })}
          </div>
        )}
      </div>

      {/* Angestrebte Zertifizierungen */}
      <div className="border-t border-gray-200 pt-6">
        <h3 className="text-sm font-medium text-gray-700 mb-1">Streben Sie eine Zertifizierung an?</h3>
        <p className="text-sm text-gray-500 mb-3">Welche Zertifizierungen planen Sie? Mehrfachauswahl moeglich.</p>
        <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
          {CERTIFICATIONS.map(cert => {
            const selected = targetCerts.includes(cert.id)
            // Bereits bestehende Zertifizierungen ausgrauen
            const alreadyHas = existingCerts.some((c: CertificationEntry) => c.certId === cert.id)
            return (
              <button
                key={cert.id}
                type="button"
                onClick={() => !alreadyHas && toggleTargetCert(cert.id)}
                disabled={alreadyHas}
                className={`p-3 rounded-lg border-2 text-left transition-all ${
                  alreadyHas
                    ? 'border-gray-100 bg-gray-50 text-gray-400 cursor-not-allowed'
                    : selected
                      ? 'border-green-500 bg-green-50 text-green-700'
                      : 'border-gray-200 hover:border-green-300 text-gray-700'
                }`}
              >
                <div className="font-medium text-sm">{cert.label}</div>
                {alreadyHas && <div className="text-xs mt-0.5">Bereits vorhanden</div>}
                {!alreadyHas && <div className="text-xs text-gray-500 mt-0.5">{cert.desc}</div>}
              </button>
            )
          })}
        </div>
        {targetCerts.includes('other') && (
          <div className="mt-3">
            <input
              type="text"
              value={targetCertOther}
              onChange={e => onChange({ targetCertificationOther: e.target.value })}
              placeholder="Name der angestrebten Zertifizierung"
              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>

      {/* Technical Contacts */}
      <div className="border-t border-gray-200 pt-6">
        <div className="flex items-center justify-between mb-4">
          <div>
            <h3 className="text-sm font-medium text-gray-700">Technische Ansprechpartner</h3>
            <p className="text-xs text-gray-500">CISO, IT-Manager, DSB etc.</p>
          </div>
          <button type="button" onClick={addContact} className="px-3 py-1.5 text-sm bg-purple-100 text-purple-700 rounded-lg hover:bg-purple-200">
            + Kontakt
          </button>
        </div>
        {contacts.length === 0 && (
          <div className="text-center py-4 text-gray-400 border-2 border-dashed rounded-lg text-sm">Noch keine Kontakte</div>
        )}
        <div className="space-y-3">
          {contacts.map((c: { name: string; role: string; email: string }, i: number) => (
            <div key={i} className="flex gap-3 items-center">
              <input type="text" value={c.name} onChange={e => updateContact(i, { name: e.target.value })} placeholder="Name" className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent" />
              <input type="text" value={c.role} onChange={e => updateContact(i, { role: e.target.value })} placeholder="Rolle (z.B. CISO)" className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent" />
              <input type="email" value={c.email} onChange={e => updateContact(i, { email: e.target.value })} placeholder="E-Mail" className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent" />
              <button type="button" onClick={() => removeContact(i)} className="text-red-400 hover:text-red-600 text-sm">X</button>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

// =============================================================================
// STEP 7: PRODUKT & MASCHINE (nur fuer Maschinenbauer, was Step 9)
// =============================================================================

const EMPTY_MACHINE_BUILDER: MachineBuilderProfile = {
  productTypes: [],
  productDescription: '',
  productPride: '',
  containsSoftware: false,
  containsFirmware: false,
  containsAI: false,
  aiIntegrationType: [],
  hasSafetyFunction: false,
  safetyFunctionDescription: '',
  autonomousBehavior: false,
  humanOversightLevel: 'full',
  isNetworked: false,
  hasRemoteAccess: false,
  hasOTAUpdates: false,
  updateMechanism: '',
  exportMarkets: [],
  criticalSectorClients: false,
  criticalSectors: [],
  oemClients: false,
  ceMarkingRequired: false,
  existingCEProcess: false,
  hasRiskAssessment: false,
}

function StepMachineBuilder({
  data,
  onChange,
}: {
  data: Partial<CompanyProfile>
  onChange: (updates: Partial<CompanyProfile>) => void
}) {
  const mb = data.machineBuilder || EMPTY_MACHINE_BUILDER

  const updateMB = (updates: Partial<MachineBuilderProfile>) => {
    onChange({ machineBuilder: { ...mb, ...updates } })
  }

  const toggleProductType = (type: MachineProductType) => {
    const current = mb.productTypes || []
    if (current.includes(type)) {
      updateMB({ productTypes: current.filter(t => t !== type) })
    } else {
      updateMB({ productTypes: [...current, type] })
    }
  }

  const toggleAIType = (type: AIIntegrationType) => {
    const current = mb.aiIntegrationType || []
    if (current.includes(type)) {
      updateMB({ aiIntegrationType: current.filter(t => t !== type) })
    } else {
      updateMB({ aiIntegrationType: [...current, type] })
    }
  }

  const toggleCriticalSector = (sector: CriticalSector) => {
    const current = mb.criticalSectors || []
    if (current.includes(sector)) {
      updateMB({ criticalSectors: current.filter(s => s !== sector) })
    } else {
      updateMB({ criticalSectors: [...current, sector] })
    }
  }

  return (
    <div className="space-y-8">
      {/* Block 1: Erzaehlen Sie uns von Ihrer Anlage */}
      <div>
        <h3 className="text-lg font-semibold text-gray-900 mb-1">Erzaehlen Sie uns von Ihrer Anlage</h3>
        <p className="text-sm text-gray-500 mb-4">
          Je besser wir Ihr Produkt verstehen, desto praeziser koennen wir die relevanten Vorschriften identifizieren.
        </p>

        <div className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Was baut Ihr Unternehmen? <span className="text-red-500">*</span>
            </label>
            <textarea
              value={mb.productDescription}
              onChange={e => updateMB({ productDescription: e.target.value })}
              placeholder="z.B. Wir bauen automatisierte Pruefstaende fuer die Qualitaetskontrolle in der Automobilindustrie..."
              rows={3}
              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">
              Was macht Ihre Anlage besonders?
            </label>
            <textarea
              value={mb.productPride}
              onChange={e => updateMB({ productPride: e.target.value })}
              placeholder="z.B. Unsere Anlage kann 500 Teile/Stunde mit 99.9% Erkennungsrate pruefen..."
              rows={2}
              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-3">
              Produkttyp <span className="text-gray-400">(Mehrfachauswahl)</span>
            </label>
            <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
              {Object.entries(MACHINE_PRODUCT_TYPE_LABELS).map(([value, label]) => (
                <button
                  key={value}
                  type="button"
                  onClick={() => toggleProductType(value as MachineProductType)}
                  className={`px-4 py-3 rounded-lg border-2 text-sm font-medium transition-all ${
                    mb.productTypes.includes(value as MachineProductType)
                      ? 'border-purple-500 bg-purple-50 text-purple-700'
                      : 'border-gray-200 hover:border-purple-300 text-gray-700'
                  }`}
                >
                  {label}
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Block 2: Software & KI */}
      <div className="border-t border-gray-200 pt-6">
        <h3 className="text-lg font-semibold text-gray-900 mb-4">Software & KI in Ihrem Produkt</h3>

        <div className="space-y-4">
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
            {[
              { key: 'containsSoftware', label: 'Enthaelt Software', desc: 'Anwendungssoftware in der Maschine' },
              { key: 'containsFirmware', label: 'Enthaelt Firmware', desc: 'Embedded Software / Steuerung' },
              { key: 'containsAI', label: 'Enthaelt KI/ML', desc: 'Kuenstliche Intelligenz / Machine Learning' },
            ].map(item => (
              <label
                key={item.key}
                className={`flex items-start gap-3 p-4 rounded-xl border-2 cursor-pointer transition-all ${
                  (mb as any)[item.key]
                    ? 'border-purple-500 bg-purple-50'
                    : 'border-gray-200 hover:border-purple-300'
                }`}
              >
                <input
                  type="checkbox"
                  checked={(mb as any)[item.key] ?? false}
                  onChange={e => updateMB({ [item.key]: e.target.checked } as any)}
                  className="mt-1 w-5 h-5 text-purple-600 rounded focus:ring-purple-500"
                />
                <div>
                  <div className="font-medium text-gray-900 text-sm">{item.label}</div>
                  <div className="text-xs text-gray-500">{item.desc}</div>
                </div>
              </label>
            ))}
          </div>

          {mb.containsAI && (
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-3">
                Art der KI-Integration
              </label>
              <div className="grid grid-cols-2 gap-3">
                {Object.entries(AI_INTEGRATION_TYPE_LABELS).map(([value, label]) => (
                  <button
                    key={value}
                    type="button"
                    onClick={() => toggleAIType(value as AIIntegrationType)}
                    className={`px-4 py-2 rounded-lg border text-sm transition-all ${
                      mb.aiIntegrationType.includes(value as AIIntegrationType)
                        ? 'border-purple-500 bg-purple-50 text-purple-700'
                        : 'border-gray-200 hover:border-purple-300 text-gray-700'
                    }`}
                  >
                    {label}
                  </button>
                ))}
              </div>
            </div>
          )}

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <label className={`flex items-start gap-3 p-4 rounded-xl border-2 cursor-pointer transition-all ${
              mb.hasSafetyFunction ? 'border-red-400 bg-red-50' : 'border-gray-200 hover:border-gray-300'
            }`}>
              <input
                type="checkbox"
                checked={mb.hasSafetyFunction}
                onChange={e => updateMB({ hasSafetyFunction: e.target.checked })}
                className="mt-1 w-5 h-5 text-red-600 rounded focus:ring-red-500"
              />
              <div>
                <div className="font-medium text-gray-900 text-sm">Sicherheitsrelevante Funktion</div>
                <div className="text-xs text-gray-500">KI/SW hat sicherheitsrelevante Funktion</div>
              </div>
            </label>

            <label className={`flex items-start gap-3 p-4 rounded-xl border-2 cursor-pointer transition-all ${
              mb.autonomousBehavior ? 'border-amber-400 bg-amber-50' : 'border-gray-200 hover:border-gray-300'
            }`}>
              <input
                type="checkbox"
                checked={mb.autonomousBehavior}
                onChange={e => updateMB({ autonomousBehavior: e.target.checked })}
                className="mt-1 w-5 h-5 text-amber-600 rounded focus:ring-amber-500"
              />
              <div>
                <div className="font-medium text-gray-900 text-sm">Autonomes Verhalten</div>
                <div className="text-xs text-gray-500">System lernt oder handelt eigenstaendig</div>
              </div>
            </label>
          </div>

          {mb.hasSafetyFunction && (
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Beschreibung der Sicherheitsfunktion
              </label>
              <textarea
                value={mb.safetyFunctionDescription}
                onChange={e => updateMB({ safetyFunctionDescription: e.target.value })}
                placeholder="z.B. KI-Vision ueberwacht den Schutzbereich und stoppt den Roboter bei Personenerkennung..."
                rows={2}
                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">
              Human Oversight Level
            </label>
            <select
              value={mb.humanOversightLevel}
              onChange={e => updateMB({ humanOversightLevel: e.target.value as HumanOversightLevel })}
              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
            >
              {Object.entries(HUMAN_OVERSIGHT_LABELS).map(([value, label]) => (
                <option key={value} value={value}>{label}</option>
              ))}
            </select>
          </div>
        </div>
      </div>

      {/* Block 3: Konnektivitaet & Updates */}
      <div className="border-t border-gray-200 pt-6">
        <h3 className="text-lg font-semibold text-gray-900 mb-4">Konnektivitaet & Updates</h3>

        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-4">
          {[
            { key: 'isNetworked', label: 'Vernetzt', desc: 'Maschine ist mit Netzwerk verbunden' },
            { key: 'hasRemoteAccess', label: 'Remote-Zugriff', desc: 'Fernwartung / Remote-Zugang' },
            { key: 'hasOTAUpdates', label: 'OTA-Updates', desc: 'Drahtlose Software-/Firmware-Updates' },
          ].map(item => (
            <label
              key={item.key}
              className={`flex items-start gap-3 p-4 rounded-xl border-2 cursor-pointer transition-all ${
                (mb as any)[item.key]
                  ? 'border-purple-500 bg-purple-50'
                  : 'border-gray-200 hover:border-purple-300'
              }`}
            >
              <input
                type="checkbox"
                checked={(mb as any)[item.key] ?? false}
                onChange={e => updateMB({ [item.key]: e.target.checked } as any)}
                className="mt-1 w-5 h-5 text-purple-600 rounded focus:ring-purple-500"
              />
              <div>
                <div className="font-medium text-gray-900 text-sm">{item.label}</div>
                <div className="text-xs text-gray-500">{item.desc}</div>
              </div>
            </label>
          ))}
        </div>

        {(mb.hasOTAUpdates || mb.hasRemoteAccess) && (
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Wie werden Updates eingespielt?
            </label>
            <input
              type="text"
              value={mb.updateMechanism}
              onChange={e => updateMB({ updateMechanism: e.target.value })}
              placeholder="z.B. VPN-gesicherter Remote-Zugang mit manueller Freigabe..."
              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>

      {/* Block 4: Markt & Kunden */}
      <div className="border-t border-gray-200 pt-6">
        <h3 className="text-lg font-semibold text-gray-900 mb-4">Markt & Kunden</h3>

        <div className="space-y-4">
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <label className={`flex items-start gap-3 p-4 rounded-xl border-2 cursor-pointer transition-all ${
              mb.criticalSectorClients ? 'border-red-400 bg-red-50' : 'border-gray-200 hover:border-gray-300'
            }`}>
              <input
                type="checkbox"
                checked={mb.criticalSectorClients}
                onChange={e => updateMB({ criticalSectorClients: e.target.checked })}
                className="mt-1 w-5 h-5 text-red-600 rounded focus:ring-red-500"
              />
              <div>
                <div className="font-medium text-gray-900 text-sm">Liefert an KRITIS-Betreiber</div>
                <div className="text-xs text-gray-500">Kunden in kritischer Infrastruktur</div>
              </div>
            </label>

            <label className={`flex items-start gap-3 p-4 rounded-xl border-2 cursor-pointer transition-all ${
              mb.oemClients ? 'border-purple-500 bg-purple-50' : 'border-gray-200 hover:border-gray-300'
            }`}>
              <input
                type="checkbox"
                checked={mb.oemClients}
                onChange={e => updateMB({ oemClients: e.target.checked })}
                className="mt-1 w-5 h-5 text-purple-600 rounded focus:ring-purple-500"
              />
              <div>
                <div className="font-medium text-gray-900 text-sm">OEM-Zulieferer</div>
                <div className="text-xs text-gray-500">Liefern Komponenten an andere Hersteller</div>
              </div>
            </label>
          </div>

          {mb.criticalSectorClients && (
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-3">
                Kritische Sektoren Ihrer Kunden
              </label>
              <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
                {Object.entries(CRITICAL_SECTOR_LABELS).map(([value, label]) => (
                  <button
                    key={value}
                    type="button"
                    onClick={() => toggleCriticalSector(value as CriticalSector)}
                    className={`px-3 py-2 rounded-lg border text-sm transition-all ${
                      mb.criticalSectors.includes(value as CriticalSector)
                        ? 'border-red-400 bg-red-50 text-red-700'
                        : 'border-gray-200 hover:border-gray-300 text-gray-700'
                    }`}
                  >
                    {label}
                  </button>
                ))}
              </div>
            </div>
          )}

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <label className={`flex items-start gap-3 p-4 rounded-xl border-2 cursor-pointer transition-all ${
              mb.ceMarkingRequired ? 'border-blue-500 bg-blue-50' : 'border-gray-200 hover:border-gray-300'
            }`}>
              <input
                type="checkbox"
                checked={mb.ceMarkingRequired}
                onChange={e => updateMB({ ceMarkingRequired: e.target.checked })}
                className="mt-1 w-5 h-5 text-blue-600 rounded focus:ring-blue-500"
              />
              <div>
                <div className="font-medium text-gray-900 text-sm">CE-Kennzeichnung erforderlich</div>
                <div className="text-xs text-gray-500">Produkt benoetigt CE-Zertifizierung</div>
              </div>
            </label>

            <label className={`flex items-start gap-3 p-4 rounded-xl border-2 cursor-pointer transition-all ${
              mb.existingCEProcess ? 'border-green-400 bg-green-50' : 'border-gray-200 hover:border-gray-300'
            }`}>
              <input
                type="checkbox"
                checked={mb.existingCEProcess}
                onChange={e => updateMB({ existingCEProcess: e.target.checked })}
                className="mt-1 w-5 h-5 text-green-600 rounded focus:ring-green-500"
              />
              <div>
                <div className="font-medium text-gray-900 text-sm">Bestehender CE-Prozess</div>
                <div className="text-xs text-gray-500">Bereits ein CE-Verfahren etabliert</div>
              </div>
            </label>
          </div>

          {mb.ceMarkingRequired && (
            <label className={`flex items-start gap-3 p-4 rounded-xl border-2 cursor-pointer transition-all ${
              mb.hasRiskAssessment ? 'border-green-400 bg-green-50' : 'border-red-400 bg-red-50'
            }`}>
              <input
                type="checkbox"
                checked={mb.hasRiskAssessment}
                onChange={e => updateMB({ hasRiskAssessment: e.target.checked })}
                className="mt-1 w-5 h-5 text-green-600 rounded focus:ring-green-500"
              />
              <div>
                <div className="font-medium text-gray-900 text-sm">Bestehende Risikobeurteilung</div>
                <div className="text-xs text-gray-500">
                  {mb.hasRiskAssessment
                    ? 'Risikobeurteilung vorhanden'
                    : 'Keine bestehende Risikobeurteilung - IACE hilft Ihnen dabei!'}
                </div>
              </div>
            </label>
          )}
        </div>
      </div>
    </div>
  )
}

// =============================================================================
// COVERAGE ASSESSMENT COMPONENT
// =============================================================================

// =============================================================================
// GENERATE DOCUMENTS BUTTON
// =============================================================================

// =============================================================================
// MAIN COMPONENT
// =============================================================================

export default function CompanyProfilePage() {
  const { state, dispatch, setCompanyProfile, goToNextStep, projectId } = useSDK()
  const [currentStep, setCurrentStep] = useState(1)
  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
  const [isDeleting, setIsDeleting] = useState(false)
  const [formData, setFormData] = useState<Partial<CompanyProfile>>({
    companyName: '',
    legalForm: undefined,
    industry: [],
    industryOther: '',
    foundedYear: null,
    businessModel: undefined,
    offerings: [],
    offeringUrls: {},
    companySize: undefined,
    employeeCount: '',
    annualRevenue: '',
    headquartersCountry: 'DE',
    headquartersCountryOther: '',
    headquartersStreet: '',
    headquartersZip: '',
    headquartersCity: '',
    headquartersState: '',
    hasInternationalLocations: false,
    internationalCountries: [],
    targetMarkets: [],
    primaryJurisdiction: 'DE',
    isDataController: true,
    isDataProcessor: false,
    dpoName: null,
    dpoEmail: null,
    legalContactName: null,
    legalContactEmail: null,
    isComplete: false,
    completedAt: null,
  })

  const showMachineBuilderStep = isMachineBuilderIndustry(formData.industry || [])
  const wizardSteps = getWizardSteps(formData.industry || [])
  const totalSteps = wizardSteps.length
  const lastStep = wizardSteps[wizardSteps.length - 1].id

  // API URL helper — includes project_id if available
  const profileApiUrl = (extra?: string) => {
    const params = new URLSearchParams()
    if (projectId) params.set('project_id', projectId)
    const qs = params.toString()
    const base = '/api/sdk/v1/company-profile' + (extra || '')
    return qs ? `${base}?${qs}` : base
  }

  // Load existing profile: first try backend, then SDK state as fallback
  useEffect(() => {
    let cancelled = false

    async function loadFromBackend() {
      try {
        const apiUrl = '/api/sdk/v1/company-profile' + (projectId ? `?project_id=${encodeURIComponent(projectId)}` : '')
        const response = await fetch(apiUrl)
        if (response.ok) {
          const data = await response.json()
          if (data && !cancelled) {
            const backendProfile: Partial<CompanyProfile> = {
              companyName: data.company_name || '',
              legalForm: data.legal_form || undefined,
              industry: Array.isArray(data.industry) ? data.industry : (data.industry ? [data.industry] : []),
              industryOther: data.industry_other || '',
              foundedYear: data.founded_year || undefined,
              businessModel: data.business_model || undefined,
              offerings: data.offerings || [],
              offeringUrls: data.offering_urls || {},
              companySize: data.company_size || undefined,
              employeeCount: data.employee_count || '',
              annualRevenue: data.annual_revenue || '',
              headquartersCountry: data.headquarters_country || 'DE',
              headquartersCountryOther: data.headquarters_country_other || '',
              headquartersStreet: data.headquarters_street || '',
              headquartersZip: data.headquarters_zip || '',
              headquartersCity: data.headquarters_city || '',
              headquartersState: data.headquarters_state || '',
              hasInternationalLocations: data.has_international_locations || false,
              internationalCountries: data.international_countries || [],
              targetMarkets: data.target_markets || [],
              primaryJurisdiction: data.primary_jurisdiction || 'DE',
              isDataController: data.is_data_controller ?? true,
              isDataProcessor: data.is_data_processor ?? false,
              dpoName: data.dpo_name || '',
              dpoEmail: data.dpo_email || '',
              isComplete: data.is_complete || false,
              // Phase 2 extended fields
              processingSystems: data.processing_systems || [],
              aiSystems: data.ai_systems || [],
              technicalContacts: data.technical_contacts || [],
              existingCertifications: data.existing_certifications || [],
              targetCertifications: data.target_certifications || [],
              targetCertificationOther: data.target_certification_other || '',
              reviewCycleMonths: data.review_cycle_months || 12,
              repos: data.repos || [],
              documentSources: data.document_sources || [],
            } as any
            setFormData(backendProfile)
            setCompanyProfile(backendProfile as CompanyProfile)
            if (backendProfile.isComplete) {
              setCurrentStep(99)
              dispatch({ type: 'COMPLETE_STEP', payload: 'company-profile' })
            }
            return
          }
        }
      } catch {
        // Backend not available, fall through to SDK state
      }

      // Fallback: use SDK state
      if (!cancelled && state.companyProfile) {
        setFormData(state.companyProfile)
        if (state.companyProfile.isComplete) {
          setCurrentStep(99)
        }
      }
    }

    loadFromBackend()

    return () => { cancelled = true }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [projectId])

  const updateFormData = (updates: Partial<CompanyProfile>) => {
    setFormData(prev => ({ ...prev, ...updates }))
  }

  // ---------------------------------------------------------------------------
  // Auto-save: sync formData to SDK context (debounced) so data survives navigation.
  // This mirrors the pattern used by compliance-scope/page.tsx.
  // ---------------------------------------------------------------------------
  const autoSaveRef = useRef<ReturnType<typeof setTimeout> | null>(null)
  const initialLoadDone = useRef(false)

  useEffect(() => {
    // Skip the initial load — only auto-save after user has started editing
    if (!initialLoadDone.current) {
      // Mark initial load done after first formData update (from backend or SDK state)
      if (formData.companyName !== undefined) {
        initialLoadDone.current = true
      }
      return
    }

    // Don't auto-save drafts if profile is already completed (step 99)
    if (currentStep === 99) return

    // Debounce: sync to SDK context after 500ms of inactivity
    if (autoSaveRef.current) clearTimeout(autoSaveRef.current)
    autoSaveRef.current = setTimeout(() => {
      // Only sync if there's meaningful data (not just defaults)
      const hasData = formData.companyName || (formData.industry && formData.industry.length > 0)
      if (hasData) {
        setCompanyProfile({ ...formData, isComplete: false, completedAt: null } as CompanyProfile)
      }
    }, 500)

    return () => {
      if (autoSaveRef.current) clearTimeout(autoSaveRef.current)
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [formData, currentStep])

  // Shared payload builder for draft saves and final save (DRY)
  const buildProfilePayload = (isComplete: boolean) => ({
    project_id: projectId || null,
    company_name: formData.companyName || '',
    legal_form: formData.legalForm || 'GmbH',
    industry: formData.industry || [],
    industry_other: formData.industryOther || '',
    founded_year: formData.foundedYear || null,
    business_model: formData.businessModel || 'B2B',
    offerings: formData.offerings || [],
    offering_urls: formData.offeringUrls || {},
    company_size: formData.companySize || 'small',
    employee_count: formData.employeeCount || '',
    annual_revenue: formData.annualRevenue || '',
    headquarters_country: formData.headquartersCountry || 'DE',
    headquarters_country_other: formData.headquartersCountryOther || '',
    headquarters_street: formData.headquartersStreet || '',
    headquarters_zip: formData.headquartersZip || '',
    headquarters_city: formData.headquartersCity || '',
    headquarters_state: formData.headquartersState || '',
    has_international_locations: formData.hasInternationalLocations || false,
    international_countries: formData.internationalCountries || [],
    target_markets: formData.targetMarkets || [],
    primary_jurisdiction: formData.primaryJurisdiction || 'DE',
    is_data_controller: formData.isDataController ?? true,
    is_data_processor: formData.isDataProcessor ?? false,
    dpo_name: formData.dpoName || '',
    dpo_email: formData.dpoEmail || '',
    is_complete: isComplete,
    // Phase 2 extended fields
    processing_systems: (formData as any).processingSystems || [],
    ai_systems: (formData as any).aiSystems || [],
    technical_contacts: (formData as any).technicalContacts || [],
    existing_certifications: (formData as any).existingCertifications || [],
    target_certifications: (formData as any).targetCertifications || [],
    target_certification_other: (formData as any).targetCertificationOther || '',
    review_cycle_months: (formData as any).reviewCycleMonths || 12,
    repos: (formData as any).repos || [],
    document_sources: (formData as any).documentSources || [],
    // Machine builder fields (if applicable)
    ...(formData.machineBuilder ? {
      machine_builder: {
        product_types: formData.machineBuilder.productTypes || [],
        product_description: formData.machineBuilder.productDescription || '',
        product_pride: formData.machineBuilder.productPride || '',
        contains_software: formData.machineBuilder.containsSoftware || false,
        contains_firmware: formData.machineBuilder.containsFirmware || false,
        contains_ai: formData.machineBuilder.containsAI || false,
        ai_integration_type: formData.machineBuilder.aiIntegrationType || [],
        has_safety_function: formData.machineBuilder.hasSafetyFunction || false,
        safety_function_description: formData.machineBuilder.safetyFunctionDescription || '',
        autonomous_behavior: formData.machineBuilder.autonomousBehavior || false,
        human_oversight_level: formData.machineBuilder.humanOversightLevel || 'full',
        is_networked: formData.machineBuilder.isNetworked || false,
        has_remote_access: formData.machineBuilder.hasRemoteAccess || false,
        has_ota_updates: formData.machineBuilder.hasOTAUpdates || false,
        update_mechanism: formData.machineBuilder.updateMechanism || '',
        export_markets: formData.machineBuilder.exportMarkets || [],
        critical_sector_clients: formData.machineBuilder.criticalSectorClients || false,
        critical_sectors: formData.machineBuilder.criticalSectors || [],
        oem_clients: formData.machineBuilder.oemClients || false,
        ce_marking_required: formData.machineBuilder.ceMarkingRequired || false,
        existing_ce_process: formData.machineBuilder.existingCEProcess || false,
        has_risk_assessment: formData.machineBuilder.hasRiskAssessment || false,
      },
    } : {}),
  })

  // ---------------------------------------------------------------------------
  // Auto-save draft to backend (debounced, 2s after last change)
  // ---------------------------------------------------------------------------
  const backendAutoSaveRef = useRef<ReturnType<typeof setTimeout> | null>(null)

  useEffect(() => {
    if (!initialLoadDone.current) return

    // Don't auto-save drafts if profile is already completed
    if (currentStep === 99) return

    const hasData = formData.companyName || (formData.industry && formData.industry.length > 0)
    if (!hasData) return

    if (backendAutoSaveRef.current) clearTimeout(backendAutoSaveRef.current)
    backendAutoSaveRef.current = setTimeout(async () => {
      try {
        await fetch(profileApiUrl(), {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(buildProfilePayload(false)),
        })
        setDraftSaveStatus('saved')
        if (draftSaveTimerRef.current) clearTimeout(draftSaveTimerRef.current)
        draftSaveTimerRef.current = setTimeout(() => setDraftSaveStatus('idle'), 3000)
      } catch {
        // Silent fail for auto-save — user can still manually save via Next
      }
    }, 2000)

    return () => {
      if (backendAutoSaveRef.current) clearTimeout(backendAutoSaveRef.current)
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [formData, currentStep])

  const [draftSaveStatus, setDraftSaveStatus] = useState<'idle' | 'saving' | 'saved' | 'error'>('idle')
  const draftSaveTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)

  const saveProfileDraft = async () => {
    setDraftSaveStatus('saving')
    try {
      await fetch(profileApiUrl(), {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(buildProfilePayload(false)),
      })
      // Sync draft to Redux so it persists across navigation
      setCompanyProfile({ ...formData, isComplete: false, completedAt: null } as CompanyProfile)
      setDraftSaveStatus('saved')
      // Reset status after 3 seconds
      if (draftSaveTimerRef.current) clearTimeout(draftSaveTimerRef.current)
      draftSaveTimerRef.current = setTimeout(() => setDraftSaveStatus('idle'), 3000)
    } catch (err) {
      console.error('Draft save failed:', err)
      setDraftSaveStatus('error')
      if (draftSaveTimerRef.current) clearTimeout(draftSaveTimerRef.current)
      draftSaveTimerRef.current = setTimeout(() => setDraftSaveStatus('idle'), 5000)
    }
  }

  const handleNext = () => {
    if (currentStep < lastStep) {
      // Skip step 7 if not a machine builder
      const nextStep = currentStep + 1
      if (nextStep === 7 && !showMachineBuilderStep) {
        // Complete profile (was step 8, last step for non-machine-builders)
        completeAndSaveProfile()
        return
      }
      saveProfileDraft()
      setCurrentStep(nextStep)
    } else {
      // Complete profile
      completeAndSaveProfile()
    }
  }

  const completeAndSaveProfile = async () => {
    // Cancel any pending auto-save timers to prevent them from overwriting isComplete
    if (autoSaveRef.current) clearTimeout(autoSaveRef.current)
    if (backendAutoSaveRef.current) clearTimeout(backendAutoSaveRef.current)

    const completeProfile: CompanyProfile = {
      ...formData,
      isComplete: true,
      completedAt: new Date(),
    } as CompanyProfile

    // Persist to backend FIRST (with isComplete=true)
    try {
      await fetch(profileApiUrl(), {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(buildProfilePayload(true)),
      })
    } catch (err) {
      console.error('Failed to save company profile to backend:', err)
    }

    // Then update SDK context (after backend is done, no race condition)
    setCompanyProfile(completeProfile)
    dispatch({ type: 'COMPLETE_STEP', payload: 'company-profile' })
    dispatch({ type: 'SET_STATE', payload: { projectVersion: (state.projectVersion || 0) + 1 } })

    setCurrentStep(99) // Show summary
  }

  const handleBack = () => {
    if (currentStep > 1) {
      saveProfileDraft()
      setCurrentStep(prev => prev - 1)
    }
  }

  const handleDeleteProfile = async () => {
    setIsDeleting(true)
    try {
      const response = await fetch(profileApiUrl(), {
        method: 'DELETE',
      })
      if (response.ok) {
        // Reset form and SDK state
        setFormData({
          companyName: '',
          legalForm: undefined,
          industry: [],
          industryOther: '',
          foundedYear: null,
          businessModel: undefined,
          offerings: [],
          offeringUrls: {},
          companySize: undefined,
          employeeCount: '',
          annualRevenue: '',
          headquartersCountry: 'DE',
          headquartersCity: '',
          hasInternationalLocations: false,
          internationalCountries: [],
          targetMarkets: [],
          primaryJurisdiction: 'DE',
          isDataController: true,
          isDataProcessor: false,
          dpoName: null,
          dpoEmail: null,
          legalContactName: null,
          legalContactEmail: null,
          isComplete: false,
          completedAt: null,
        })
        setCurrentStep(1)
        dispatch({ type: 'SET_STATE', payload: { companyProfile: undefined } })
      }
    } catch (err) {
      console.error('Failed to delete company profile:', err)
    } finally {
      setIsDeleting(false)
      setShowDeleteConfirm(false)
    }
  }

  const canProceed = () => {
    switch (currentStep) {
      case 1:
        return formData.companyName && formData.legalForm
      case 2:
        return formData.businessModel && (formData.offerings?.length || 0) > 0
      case 3:
        return formData.companySize
      case 4:
        return formData.headquartersCountry && (formData.targetMarkets?.length || 0) > 0
      case 5:
        return true
      case 6:
        return true // Legal framework step is optional
      case 7:
        // Machine builder step: require at least product description
        return (formData.machineBuilder?.productDescription?.length || 0) > 0
      default:
        return false
    }
  }

  const isLastStep = currentStep === lastStep || (currentStep === 6 && !showMachineBuilderStep)

  // =========================================================================
  // SUMMARY VIEW (Step 99) — shown after profile completion
  // =========================================================================
  if (currentStep === 99) {
    const summaryItems = [
      { label: 'Firmenname', value: formData.companyName },
      { label: 'Rechtsform', value: formData.legalForm ? LEGAL_FORM_LABELS[formData.legalForm] : undefined },
      { label: 'Branche', value: formData.industry?.join(', ') },
      { label: 'Geschaeftsmodell', value: formData.businessModel ? BUSINESS_MODEL_LABELS[formData.businessModel]?.short : undefined },
      { label: 'Unternehmensgroesse', value: formData.companySize ? COMPANY_SIZE_LABELS[formData.companySize] : undefined },
      { label: 'Mitarbeiter', value: formData.employeeCount },
      { label: 'Hauptsitz', value: [formData.headquartersZip, formData.headquartersCity, formData.headquartersCountry === 'DE' ? 'Deutschland' : formData.headquartersCountry].filter(Boolean).join(', ') },
      { label: 'Zielmaerkte', value: formData.targetMarkets?.map(m => TARGET_MARKET_LABELS[m] || m).join(', ') },
      { label: 'Verantwortlicher', value: formData.isDataController ? 'Ja' : 'Nein' },
      { label: 'Auftragsverarbeiter', value: formData.isDataProcessor ? 'Ja' : 'Nein' },
      { label: 'DSB', value: formData.dpoName || 'Nicht angegeben' },
    ].filter(item => item.value && item.value.length > 0)

    const missingFields: string[] = []
    if (!formData.companyName) missingFields.push('Firmenname')
    if (!formData.legalForm) missingFields.push('Rechtsform')
    if (!formData.industry || formData.industry.length === 0) missingFields.push('Branche')
    if (!formData.businessModel) missingFields.push('Geschaeftsmodell')
    if (!formData.companySize) missingFields.push('Unternehmensgroesse')

    return (
      <div className="min-h-screen bg-gray-50 py-8">
        <div className="max-w-4xl mx-auto px-4">
          <div className="mb-8">
            <h1 className="text-3xl font-bold text-gray-900">Unternehmensprofil</h1>
          </div>

          {/* Success Banner */}
          <div className={`rounded-xl border-2 p-6 mb-6 ${
            formData.isComplete
              ? 'bg-green-50 border-green-300'
              : 'bg-yellow-50 border-yellow-300'
          }`}>
            <div className="flex items-start gap-4">
              <div className={`flex-shrink-0 w-12 h-12 rounded-full flex items-center justify-center ${
                formData.isComplete ? 'bg-green-200' : 'bg-yellow-200'
              }`}>
                <span className="text-2xl">{formData.isComplete ? '\u2713' : '!'}</span>
              </div>
              <div>
                <h2 className={`text-xl font-bold ${formData.isComplete ? 'text-green-800' : 'text-yellow-800'}`}>
                  {formData.isComplete
                    ? 'Profil erfolgreich abgeschlossen'
                    : 'Profil unvollstaendig'
                  }
                </h2>
                <p className={`mt-1 ${formData.isComplete ? 'text-green-700' : 'text-yellow-700'}`}>
                  {formData.isComplete
                    ? 'Alle Angaben wurden gespeichert. Sie koennen jetzt mit der Scope-Analyse fortfahren.'
                    : `Es fehlen noch Angaben: ${missingFields.join(', ')}.`
                  }
                </p>
              </div>
            </div>
          </div>

          {/* Profile Summary */}
          <div className="bg-white rounded-xl border border-gray-200 p-6 mb-6">
            <h3 className="text-lg font-semibold text-gray-900 mb-4">Zusammenfassung</h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {summaryItems.map(item => (
                <div key={item.label} className="flex flex-col">
                  <span className="text-xs font-medium text-gray-500 uppercase tracking-wide">{item.label}</span>
                  <span className="text-sm text-gray-900 mt-0.5">{item.value}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Actions */}
          <div className="flex justify-between items-center">
            <button
              onClick={() => setCurrentStep(1)}
              className="px-6 py-3 text-gray-600 hover:text-gray-900 border border-gray-300 rounded-lg hover:bg-gray-50"
            >
              Profil bearbeiten
            </button>

            {formData.isComplete ? (
              <button
                onClick={() => goToNextStep()}
                className="px-8 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 font-medium"
              >
                Weiter zu Scope
              </button>
            ) : (
              <button
                onClick={() => setCurrentStep(1)}
                className="px-8 py-3 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 font-medium"
              >
                Fehlende Angaben ergaenzen
              </button>
            )}
          </div>
        </div>
      </div>
    )
  }

  // =========================================================================
  // WIZARD VIEW (Steps 1-7)
  // =========================================================================

  return (
    <div className="min-h-screen bg-gray-50 py-8">
      <div className="max-w-6xl mx-auto px-4">
        {/* Header */}
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900">Unternehmensprofil</h1>
          <p className="text-gray-600 mt-2">
            Helfen Sie uns, Ihr Unternehmen zu verstehen, damit wir die relevanten Regulierungen
            identifizieren können.
          </p>
        </div>

        {/* Progress Steps */}
        <div className="mb-8">
          <div className="flex items-center justify-between">
            {wizardSteps.map((step, index) => (
              <React.Fragment key={step.id}>
                <div className="flex items-center">
                  <div
                    className={`w-10 h-10 rounded-full flex items-center justify-center text-sm font-medium ${
                      step.id < currentStep
                        ? 'bg-purple-600 text-white'
                        : step.id === currentStep
                        ? 'bg-purple-100 text-purple-600 border-2 border-purple-600'
                        : 'bg-gray-100 text-gray-400'
                    }`}
                  >
                    {step.id < currentStep ? (
                      <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                        <path
                          fillRule="evenodd"
                          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                          clipRule="evenodd"
                        />
                      </svg>
                    ) : (
                      step.id
                    )}
                  </div>
                  <div className="ml-3 hidden sm:block">
                    <div
                      className={`text-sm font-medium ${
                        step.id <= currentStep ? 'text-gray-900' : 'text-gray-400'
                      }`}
                    >
                      {step.name}
                    </div>
                  </div>
                </div>
                {index < wizardSteps.length - 1 && (
                  <div
                    className={`flex-1 h-0.5 mx-4 ${
                      step.id < currentStep ? 'bg-purple-600' : 'bg-gray-200'
                    }`}
                  />
                )}
              </React.Fragment>
            ))}
          </div>
        </div>

        {/* Content */}
        <div>
          {/* Form */}
          <div>
            <div className="bg-white rounded-xl border border-gray-200 p-8">
              <div className="mb-6">
                <h2 className="text-xl font-semibold text-gray-900">
                  {(wizardSteps.find(s => s.id === currentStep) || wizardSteps[0]).name}
                </h2>
                <p className="text-gray-500">{(wizardSteps.find(s => s.id === currentStep) || wizardSteps[0]).description}</p>
                {STEP_EXPLANATIONS[currentStep] && (
                  <p className="text-sm text-blue-600 mt-2">{STEP_EXPLANATIONS[currentStep]}</p>
                )}
              </div>

              {currentStep === 1 && <StepBasicInfo data={formData} onChange={updateFormData} />}
              {currentStep === 2 && <StepBusinessModel data={formData} onChange={updateFormData} />}
              {currentStep === 3 && <StepCompanySize data={formData} onChange={updateFormData} />}
              {currentStep === 4 && <StepLocations data={formData} onChange={updateFormData} />}
              {currentStep === 5 && <StepDataProtection data={formData} onChange={updateFormData} />}
              {currentStep === 6 && <StepLegalFramework data={formData} onChange={updateFormData} />}
              {currentStep === 7 && showMachineBuilderStep && <StepMachineBuilder data={formData} onChange={updateFormData} />}

              {/* Navigation */}
              <div className="flex justify-between items-center mt-8 pt-6 border-t border-gray-200">
                <button
                  onClick={handleBack}
                  disabled={currentStep === 1}
                  className="px-6 py-3 text-gray-600 hover:text-gray-900 disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  Zurück
                </button>
                {/* Draft save status */}
                {draftSaveStatus !== 'idle' && (
                  <span className={`text-xs px-3 py-1 rounded-full ${
                    draftSaveStatus === 'saving' ? 'text-gray-500 bg-gray-100' :
                    draftSaveStatus === 'saved' ? 'text-green-600 bg-green-50' :
                    'text-red-600 bg-red-50'
                  }`}>
                    {draftSaveStatus === 'saving' && 'Speichern...'}
                    {draftSaveStatus === 'saved' && '✓ Gespeichert'}
                    {draftSaveStatus === 'error' && 'Speichern fehlgeschlagen'}
                  </span>
                )}
                <button
                  onClick={handleNext}
                  disabled={!canProceed()}
                  className="px-8 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  {isLastStep ? 'Profil speichern & weiter' : 'Weiter'}
                </button>
              </div>

            </div>
          </div>

          {/* Delete Confirmation Modal */}
          {showDeleteConfirm && (
            <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
              <div className="bg-white rounded-xl p-6 w-full max-w-md shadow-2xl">
                <h3 className="text-lg font-semibold text-gray-900 mb-2">Profil löschen?</h3>
                <p className="text-sm text-gray-600 mb-6">
                  Alle gespeicherten Unternehmensdaten werden unwiderruflich gelöscht (DSGVO Art. 17).
                  Diese Aktion kann nicht rückgängig gemacht werden.
                </p>
                <div className="flex justify-end gap-3">
                  <button
                    onClick={() => setShowDeleteConfirm(false)}
                    className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg"
                  >
                    Abbrechen
                  </button>
                  <button
                    onClick={handleDeleteProfile}
                    disabled={isDeleting}
                    className="px-4 py-2 text-sm bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50"
                  >
                    {isDeleting ? 'Lösche...' : 'Endgültig löschen'}
                  </button>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}